Previously, then the tags list was very long and dominated the scroll
height of the page, the #right and thus the photo would be floating
halfway down the page. By making it sticky, the photo always occupies
the correct position in the viewport no matter how long #left gets.
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.
This experiment of bringing Photos and Albums closer to parity in
search is going well so far. I have found some situations where it
is nice to only get albums back from search results.
There was always some semblance that two blank lines has some kind of
meaning or structure that's different from single blank lines, but
in reality it was mostly arbitrary and I can't stand to look at it
any more.
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.
It turns out that last-of-type only considers a single tag type,
it doesn't select last element of class if it has a different tag
than the other classed elements.
Foolishly, I was checking the length of the outputted easybake format,
which included lines for synonyms and multi-parent tags that shouldn't
be part of the tag count.
I skipped them during the commit where I added return to all onclicks
because I figure I won't be wrapping these kinds of attributes.
But I feel like it's better to be consistent and you never know when
it might happen.
Instead of requiring a page refresh to see the new tags. They
just won't be sorted.
Slight bummer, the datalist dropdown pretty much obscures the
whole thing anyway.
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.
1. When the list is long, scrolling back up to hit to search
button is annoying.
2. If you select too many, there's no way to know if you're
going to wind up constructing a search with 0 results thus
wasting your time.
I've been thinking about this for a while but couldn't think of
the perfect way to implement it. I still haven't, so instead I'm
just starting with something and we'll see how to improve later.
At any rate, I can update the rest of the system to expect Albums
coming out of search so that if I ever have a better algorithm
everything else will already be ready for it.
For this first experiment, just any photos that are part of an album
will send that album out as a result. It doesn't even respect the
limit parameter, it's really just to see how it feels to use.
With a name like add_searchtag you'd think it'd be past the point
of reading box input, and deeper into the abstraction zone. But nope,
it wasn't. I'll try to take this a few steps further from here too.
I think at one point I was using full qualnames on the tag objects
in the mmf uls. But now they just show their base name, so this
code is useless. And I don't think I'll reinstate it because tags
have multiple parents now and I don't want to implement all the
lineage checking in the client js. We'll just let the server handle
the slightly less efficient query.
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.
I tried putting them in the #left but it was looking seriously ugly.
Actually #left is always ugly because the variety of info and buttons
and text alignments. Hover toolbox is not ideal and I don't want it
to become a dumping ground, but deleting should be a rare action and I
don't want it right next to stuff like the basic metadata.
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.
Now that all <a> tags are pointy, there is no need for this fake link.
Its only purpose was to make <a>s that had an onclick but no
url get the ol' pointy.
I'm not entirely happy with the way that native drag-and-drop looks,
the transparent bit that you hold while dragging looks dumb.
Will have to look into control / shift clicking to multiselect.
Also just using browser confirm() for now since I haven't made my
own dialog for that kind of thing yet.
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.
- In Firefox, the image under flex would be full-res height
instead of staying screen height.
In this new Grid-based layout the image is the correct size.
Left toolbox still uses flex, no problems with it.
- Redid the classing of the photo_viewer and eliminated
photo_img_holder so that all media types follow the same markup.
- Added a CSS variable for tracking narrow mode instead of relying
on coincidental properties like flex settings.
- 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.
Accidentally commited the number 250 on search.html earlier. Oops.
Anyway I was finding 100 too limiting sometimes.
I will think about making this configurable eventually.
- 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.
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.
I have finally found a pattern I like which is
function, function_callback, and function_form
for the backend, callback, and button handler respectively.
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.
