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.
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.
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.
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.
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.
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.
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.
- 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.
Alright, I got tired of confusing myself with the same-named
outer and inner package.
Keep in mind that every frontend implementation is supposed to be
its own independent project where etiquette is nothing but a
dependency. So the name backend is not ambiguous with the etiquette
backend.
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.
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.
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.
I have finally found a pattern I like which is
function, function_callback, and function_form
for the backend, callback, and button handler respectively.
