Expose the breakpoint variables in the wizard

[liv]

This is an interim post, cos I've found in the past that not documenting bugs until they're actually finished is not as helpful or organized as I expected it might be.

I'm working on Expose the breakpoint variables in the wizard. Except that the discussion of what I actually need to achieve this is scattered over several different Github issues and some IRC chat, so if I can put everything together in one place I am more likely to know what I'm doing.

This is the discussion I'm primarily working from:
Investigate breakpoint of layouts. However, see chat with fu (pasted in as a comment) for further detail on this.

Apart from: Add two sets of breakpoint variables

Need to build my patch on: use generate_medium_media_query()

More discussion in dw_styles: Mobile styles redux and in logs from the recent dev chat

Comments

chatlogs with gross formatting

[liv]

(3:05:36 PM) Afuna: I mean I think wha happened was that we managed to fix it on the tiniest screens
(3:05:39 PM) Afuna: at the expense of the medium screens
(3:05:45 PM) Afuna: so I'm trying to figureo ut a compromise
(3:05:56 PM) Afuna: there's a *massive* braindump over in https://github.com/dreamwidth/dw-free/issues/817
(3:06:11 PM) Afuna: (and relatedly code in https://github.com/dreamwidth/dw-free/pull/818 and https://github.com/dreamwidth/dw-free/pull/819 )
(3:06:13 PM) LivredOr: things that _might_ help, just throwing out ideas here: expose in the wizard the width at which the switch triggers
(3:06:28 PM) LivredOr: which allows people to "turn it off" if they passionately want, but doesn't end up with the dual version thing which is a nightmare
(3:06:42 PM) LivredOr: maybe set a min-width (in ems, not px) on the main column?
(3:07:01 PM) Afuna: I've tried a min width but given how thinsg are coded, that just makes it overlap with the sidebar
(3:07:09 PM) Afuna: instead of pushing the sidebar aside or anyhing like that
(3:07:34 PM) LivredOr: that's a problem
(3:07:51 PM) Afuna: yeah. it's the main thing that was absolutely horrible about it on smaller screens before


(3:13:52 PM) LivredOr: ok, your "hilariously overengineered idea" looks good to me
(3:13:55 PM) LivredOr: and I think I could code that
(3:14:19 PM) Afuna: oh awesome
(3:14:43 PM) Afuna: the only thing I'm worried about there is if we should focus on making tablets one-column, or on makigng the multiple-column stuff on tablets better
(3:14:47 PM) Afuna: because I cousld see it either way
(3:15:56 PM) LivredOr: I think multiple column on tablets is idea
(3:15:59 PM) LivredOr: ideal, sorry
(3:16:14 PM) Afuna: np
(3:16:22 PM) LivredOr: because some people who've specifically chosen multi-column layouts will be really annoyed if they're forced to one-column
(3:16:35 PM) Afuna: whereas on the phone it's much more standard to go one-column it seems
(3:16:42 PM) Afuna: yeah that seems reasonable
(3:16:51 PM) LivredOr: and "tablets" is a big category, some of the high-end ones are really hi-res and really people want to see a desktop-identical site
(3:17:12 PM) LivredOr: yeah, auto-switching to one column for small phone screens is ideal
(3:17:21 PM) Afuna: s' true
(3:17:21 PM) LivredOr: it's all the other edge cases that are a problem
(3:17:23 PM) Afuna: (re: big category)
(3:17:25 PM) Afuna: hah yes
(3:17:56 PM) LivredOr: so, we set the "breakpoint" at 3 x sidebar width, rather than fixed number of pixels
(3:18:17 PM) LivredOr: I think that's less likely to break for people who dial the font size way up, or who have like me physically small but hi-res screens
(3:18:36 PM) Afuna: yeah. and it's a reasonable nod towards content I think
(3:18:36 PM) LivredOr: and it doesn't need to be updated as screen technology improves
(3:18:49 PM) Afuna: er towards giving the entries hemselves enough space
(3:19:01 PM) LivredOr: yes, that means that the main content won't get squished below 2x sidebar
(3:19:09 PM) LivredOr: which should allow most people to see it without side-scrolling
(3:19:10 PM) Afuna: okay
(3:19:14 PM) Afuna: (his is really helpful btw!0
(3:19:29 PM) LivredOr: annnd.... breakpoint as a user option in the wizard, y/n?
(3:19:45 PM) Afuna: y. caveat: if we're doing this I do want two breakpoints
(3:19:53 PM) Afuna: as per https://github.com/dreamwidth/dw-free/pull/819
(3:20:12 PM) Afuna: one for phone->tablet, the other for tablet-> desktop
(3:20:23 PM) Afuna: (with the understanding that there's overlap between these categories, etc)
(3:21:02 PM) LivredOr: ok, gotcha
(3:21:37 PM) Afuna: ps this is being very helpful in pinning down thoughts btw
(3:21:48 PM) LivredOr: we can then say to people, set the option in the wizard to 5000 em if you really want to keep three cols no matter what device you're using
(3:21:55 PM) Afuna: hah yes :)
(3:22:04 PM) LivredOr: which is better than having to send them to use custom CSS


(3:27:04 PM) Afuna: would it be helpful to you if I committed https://github.com/dreamwidth/dw-free/pull/819/files for you to build on? except for the part where it tries to reset the sidebar width
(3:27:42 PM) LivredOr: oh yes
(3:27:44 PM) LivredOr: very helpful
(3:28:04 PM) LivredOr: and that might actually allow us to get rid of that weird thing in the wizard where you have to manually set 2x your sidebar width
(3:28:12 PM) Afuna: hah yes
(3:28:17 PM) Afuna: oh man I'd totally love patches for those :)
(3:28:33 PM) Afuna: but probabyl a separate patch etc
(3:28:34 PM) Afuna: once this is done
(3:28:39 PM) LivredOr: yes, it shouldn't be part of this fix
(3:28:44 PM) Afuna: <3
(3:28:49 PM) LivredOr: but #819 covers most of the work

Non-TR layouts

[liv]

abstractia/layout layout core2
Done but NB Abstractia sidebars are percentages not ems. This may end up being funky on some devices, need to check.

bases/layout layout core2
Done.

blanket/layout layout core2
Done, but Blanket has one-column view only. Some media query stuff in CSS though, so breakpoints may still be relevant.

brittle/layout layout core2
Done.

drifting/layout layout core2
Done, but Drifting does sidebars with weird margin widths instead of widths in em. I think this still works though.

easyread/layout layout core2

negatives/layout layout core2
Done, but I don't understand how sidebars work in Negatives. Seems to work as far as I can test.

skittlishdreams/layout layout core2
Done, but Skittlish Dreams has absolute width sidebars, and I've left the breakpoint defaults in em.

zesty/layout layout core2
Zesty doesn't get fixed, cos Zesty = crusty.