[dreamwidth/dw-free] ddf545: Fix compounding blowout on new entry page [#2415] ...

[github]

Branch: refs/heads/develop
Home: https://github.com/dreamwidth/dw-free
Commit: ddf545f9741a4386bd2798ba1e99efff6421d20d
https://github.com/dreamwidth/dw-free/commit/ddf545f9741a4386bd2798ba1e99efff6421d20d
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-05-02 (Thu, 02 May 2019)

Changed paths:
M htdocs/js/components/jquery.fancy-select.js
M htdocs/scss/components/fancy-select.scss
M htdocs/scss/pages/entry/new.scss
M views/entry/form.tt

Log Message:
-----------
Fix compounding blowout on new entry page [#2415] (#2416)

* [#2415] Make fancy-select component more predictable; allow setting width

Previously, the initial setup for a fancy-select would set the output's
min-width to the width of the surrounding div, and THEN set it AGAIN to the
width of the interior `<select ... >` PLUS 30px. This was probably one of two things:

- An aesthetic thing to give extra padding. (Ineffective because: it only
applied to the first thing selected on page load; other items don't get that
padding).
- An attempt to make the component wide enough to show any of the select's
options (Ineffective because: the final width is based on the data attributes
rather than the options' sizes, and the select gets sized to 100% of its
container anyway).

Either way, it assumed that nothing would ever set the width of a fancy-select,
which is exactly what the new entry page does below a certain breakpoint. This
commit removes that +30px behavior, and also:

- Makes it border-box safe. The jQuery docs say `.width()` is unreliable when
`box-sizing: border-box;`, so we should be using `.css('width')`. Works fine
with `parseInt()`.
- Limits the fancy-select's min-width to 95% of the window. Long content can
still force it to blow past the window width, but if that happens, we'll allow
it to come back inside the window if it's later changed to a smaller option.
- If the fancy-select DOES end up wider than the window width, make it overflow
instead of wrapping its text and looking awful.

* [#2415] New entry page: Clean up mix of layouts in `#entry-quick-actions`

Mixing Foundation's pseudo-grid columnar layout classes with explicit flexbox
layouts turns out to be a recipe for a bad time. Having one firmly inside the
other is fine, but interleaving them isn't.

Incoherent mixtures are hard to reason about so I'm not 100% sure what was
happening here, but I think it eventually came down to a `width: 100%` property
that was intended as "100% of an element that's being limited to, at most, the
viewport width" and came out as "100% of the max-content of something whose
max-content doesn't actually display because it got wrapped."

This commit cleans all Foundation grid classes out of `#entry-quick-actions` and
de-scuzzes the tree structure, leaving an outer flex container whose two
children are also flex containers. That fixes the weird blowout on the 100%
width fancy-select, and makes any future tweaks more tractable.

* [#2421] Prevent mobile *dramatic woodchuck* zoom on new entry page

This also requires scaling inputs/selects with the font size. (Prev size was too
cramped on mobile after bumping the font to 16px and it was cutting off some
descenders.)

[dreamwidth/dw-nonfree]

[github]

Branch: refs/heads/master
Home: https://github.com/dreamwidth/dw-nonfree