In narrow mode, it's very possible to wind up with only 1 photo per row,
and it looks silly when they are left-justified. Centered looks a little
more natural to me in this case.
Primarily affects the "unlink" / "delete" buttons on /tags.
Without the padding we can get an extra pt of font size, and these
buttons are somewhat of a readability struggle.
Instead of defining the function with an internal if that will always
pick the same path, let's use that if to instead define a
straightforward function that just does what we want.
Since meta.status would be undefined for an incomplete request,
I would have to check response.completed && response.meta.status,
which is too much burden. Let's set the status immediately, and
if a callback wants to do further diving we'll use completed then.
- tag_autocomplete.tags and .synonyms are separate vars, not in tagset.
- tag_autocomplete.tags is now a Set object for faster resolve().
- get_all_tags moved to api.js.
- server provides "updated" timestamp with the all_tags list.
The current system has bad performance when you've got 100,000+ tags.
I discovered that when the server returns 304, the browser gives the
ajax a 200 with the full response, and it's not clear to me if js can
know it got a 304. So, the tag set is being fully re-parsed from the
response on every page load. I was thinking that I should store that in
IndexedDB to avoid the parsing step, but... since the JSON.parse is
done by my common.get before it hits this function, it's meaningless.
Not to mention I still have to rebuild the datalist on every page since
of course that state isn't shared between tabs. Not worth the DB stuff.
We'll see what happens next.
Any properties that are different in wide/narrow mode should be defined
in the correct media query. I got tired of having wide mode be the
default and then narrow mode having to unset/initial all the attributes
that aren't relevant to narrow.
I'm having some performance issues with button_with_confirm on /tags.
This won't magically make that faster but I'm trying to stop the main
thread from dragging at least.
Following the previous commit about the checkbox on the /photo page,
this fixes all of the code assuming that we're dealing with photo_card
divs, the majority of which was doing nothing but accessing the id.
I'm finding weird behavior where on the main /tags page, hovering
over the tags shows the delete / unlink button without a problem,
but on a specific tag page hovering over this button causes the
rest of the list to shift a pixel or two.
I'm sure this line-height fix is nothing more than a bandaid and
not the right thing to change.
I think my original reason for doing this was to prevent the button
from being operational until after the spinner initialization has
completed, so you don't get any weird half-functional spinner buttons.
However, in practice I'm finding that I constantly forget about this
and it adds tedium to creating spinner buttons.
Will review if any actual problems come up.
Unfortunately these cards are taller rather than wider so the
already-neglected unlink buttom becomes even more horizontally crammed.
That's going to need a big fixup anyway.
The two-sided margin was meant to create a particular spacing on the
albums page, but the purpose of cards is I should be able to use
them in many other contexts. So an all-round margin is easier to
work with when displaying cards anywhere else.
On the main tag listing, for child tags, you only get an unlink
button on hover. So if you want to delete a child tag you'd have to
unlink, then refresh, then delete. Now you can just go to its page
and delete it there.
This hook had a bug where you couldn't select text because every
time you push a button, including ctrl+a or shift+left/right, the
cursor position gets reset and then deselects immediately.
So let's only reset the content and cursor only when text changes,
so arrow keys and ctrl don't have any negative effects.
Unfortunately, when adjusting the box's value, it causes the datalist
to disappear, and it only comes back after you press another key.
I can't figure out how to make the datalist reappear automatically
with js.
At the moment, tag_objects have an option for a javascript void
link for the purpose of getting a pointer cursor without a real link.
Well I want to phase those javascript void links out so let's just
make a tags always pointy.
This was less helpful than expected, because if you take that
tab and navigate somewhere else, then trying to open the clipboard
would replace the current tab instead of opening a new one.
Previously, on very narrow screens, the album cards were spilling
out of the container. Now they are better contained but I am
still not 100% satisfied with the margins between them.
Without this, the grid-view album cards were displaying above
the sticky toolbox because of their position:relative, which
I can't get rid of at the moment.
- album card has placeholder for future thumbnail.
- replaced nested tree hierarchy lists with separate boxes.
- list/grid view also applies to the root listing.
- added a sticky right panel for all the tools. not pretty yet.
- mechanism for adding sticky panel changed. instead of applying
it to the #right, you apply it to #content_body so that its
grid layout can be updated properly.
Added a styleguide.md file to refer back to.
Since voussoirkit is a library it feels better to have it below
the rest of the library and above the local project imports.
- common.css, removed html and body margins so that using
full height #content_body will not create a scrollbar.
Simplifies the "fill remaining space" construct I use a lot.
Added more css variables, I'm thinking about future theming.
- photo_card.css, slightly heightened to improve name clipping.
- clipboard.html, added a small screen mode.
- login.html, centered the boxes and fixed message area being
too small due to a previous change.
- search.html, simplified some conditional texts.
The markup for the album listing page and individual album page
were different enough that I decided to make them wholly separate,
but then this left the shared javascript in its own stupid file
unlike any of the other types.
So, I'm merging them as a huge jinja if-else, which is also dumb
but it feels better than all these separate files.
This will help keep the code on the pages focused more on the
page-specific stuff like form handling, and less on the raw api.
Plus, by having it all in one place, it can be cached
and also we can use any api from within any page.
Applied wrapping to the description <pre>s,
removed some css that referred to nonexistent things,
move some element tags inside the {%if%} that fills the contents.
The javascript is very inconsistent between pages. I'm trying to
start using a consistent pattern where the api call is kept in a
separate function from the ones that buttons and input boxes
talk to.
