![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[site community profile]](https://www.dreamwidth.org/img/comm_staff.png){kind=small}
[dreamwidth/dw-free] 530cdb: [#2485] Add new utility functions to core2
Branch: refs/heads/develop
Home: https://github.com/dreamwidth/dw-free
Commit: 530cdb572540fe699ca213219adaf287ebf4cbba
https://github.com/dreamwidth/dw-free/commit/530cdb572540fe699ca213219adaf287ebf4cbba
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2.s2
Log Message:
-----------
[#2485] Add new utility functions to core2
- `generate_small_media_query` -- Often you can get away with just the medium
query, but sometimes you end up having to turn your logic entirely inside-out
and write more (and hairier) CSS than necessary. In those cases, it's real
nice to have a small query in the quiver too.
- `generate_invisible_css` -- Sometimes things need to vanish from the visible
page but stay in the audible page for screenreaders (which rules out display:
none).
- In things that control their markup, you'd do this with a class, but the
Rasa-scions benefit from NOT messing with their markup too much, so let's
not rely on that.
- In SCSS or other preprocessors you'd do this with a mixin, but hey, S2 is
sort of like a CSS preprocessor.
- In some other areas, especially some sitescheme zones, we've previously
invisibled stuff by absoluting it off into infinity somewhere, which
mostly works fine. The approach in this commit has about the same visible
effect, but seems to be a more modern evolution of the technique with
fewer side effects.
Commit: 9bc7366083ced0860bfb0802ab17630ff0da1034
https://github.com/dreamwidth/dw-free/commit/9bc7366083ced0860bfb0802ab17630ff0da1034
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2base/layout.s2
M styles/practicality/layout.s2
Log Message:
-----------
[#2485] Fix some mobile jank in Tabula Rasa/core2base and in Practicality
The userpic float -> absolute stuff in Practicality might seem a little odd, so
here's what's up with that:
- We want `overflow-x: auto` on content containers for entries and comments,
because nothing posted by a rando should EVER be allowed to trash your flist
or entry page layouts into full-page sideways slop.
- But this can have unexpected effects on containers that try to send something
outside the box with relative positioning, which I guess includes negative
margins. The astronaut content gets decapitated as soon as it sticks its head
outside the `overflow-x: auto` container.
The way around that is to do something like this:
- outer container with `position: relative`
- inner container with `overflow-x: auto`
- child element with `position: absolute`
The "containing block" of an `absolute` box is its nearest `relative` ancestor.
That means the `absolute` items now escape the `overflow-x: auto` container,
because it is NOT THEIR REAL MOM!!! and they are GOING TO GRANDMA'S!!!, which
prevents them from getting clipped.
Then you still need to have the text float around _something,_ which is what
that ::before pseudo-element with float is all about.
Commit: 6ec1e146d3c464e506a77913f0abf0d51a944f95
https://github.com/dreamwidth/dw-free/commit/6ec1e146d3c464e506a77913f0abf0d51a944f95
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2.s2
Log Message:
-----------
[#2432] Enable purely nested comment indentation in styles (opt-in)
This is implemented in core2's EntryPage::print_comments() and
EntryPage::print_comment(), so it's only available to layouts that don't
override those functions like a jerk (you heard me, Siteviews and Zesty :| ).
Here's the concept of the new indent behavior:
- Layouts can opt in by `use`ing the following S2 properties:
- `comment_indent_style` (values are `responsive` or `static`)
- `comment_indent_limit_mobile` (Limit is configurable, defaults to 8.)
- `comment_indent_limit_desktop`(Limit is
semi-configurable; defaults to 180, which is the absolute maximum, but you
can set it lower if you wish.)
- `comment_indent_depth_caption`
- Users can opt in by switching the comment indent style to "Responsive" in
their style options page. The exact effect will depend on which layout they use.
- Once responsive indent is enabled, layouts use the nested `.comment-thread`
divs to control indentation (or other styling) of comment threads. The
layout's CSS is in full control; there is no default indent on .dwexpcomment
divs anymore. (Hence the opt-in.)
- `.comment-thread`s are nested in the HTML, but the nesting fails at
a depth of 180 and children appear as siblings after that. This happens
_after_ the divs lose the `.comment-depth-indent-desktop` class (see
below), so the CSS knows it needs to switch to an alternate presentation.
- Every `.comment-thread` has additional classes and data to help manage indent
behavior:
- Things with the depth as a number:
- class `comment-depth-N` (where N is the depth), for simple CSS tasks.
(Existed previously.)
- attr `data-comment-depth`, for JavaScript tasks.
- custom prop `--comment-depth: N`, for complex CSS tasks with `var()`.
- Things that indicate which _zones_ of depth a thread is in:
- class `comment-depth-indent-mobile`
(between 1 and the value of `comment_indent_limit_mobile`)
- class `comment-depth-indent-desktop`
(between 1 and the value of `comment_indent_limit_desktop`)
- Things that expose user-configured S2 properties to CSS:
- custom prop `--comment-indent-limit-mobile: N`, for complex CSS tasks
with `var()`.
- ...could maybe use more of these, not sure yet.
- Things that enable math that isn't possible in CSS with only the data
already mentioned:
- class `comment-depth-parity-(odd|even)` (Existed previously.)
- class `comment-depth-mod5-N`, where N is between 0 and 4.
- Each `.comment .inner .header .inner` now includes a `span.thread-depth`
before the subject, which combines `comment_indent_depth_caption` and the
comment's depth. That span has one or more of the following additional
classes:
- `indent-mobile` (depth ≤ limit_mobile)
- `indent-desktop` (depth ≤ limit_desktop)
Your layout CSS is in charge of deciding when and how to display those depth
indicators; if the depth is clear enough without, you should invisible them
in a way that doesn't screw up screenreaders.
Commit: 0266271aaf1f2c655409a03736ece9bb9d475e37
https://github.com/dreamwidth/dw-free/commit/0266271aaf1f2c655409a03736ece9bb9d475e37
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2base/layout.s2
Log Message:
-----------
[#2432] Allow users to opt-in to responsive indent in Tabula Rasa (and children)
This enables the comment indent S2 properties in core2base, and adds some basic
responsive indent CSS (which is only added to the stylesheet if a user switches
the indent style to "Responsive").
Basic means basic -- this uses a 10px indent on mobile, and after a depth of 8
it bails out and starts exposing the textual depth indicators. On desktop, it
uses 20px (only a smidge tighter than the old static 25px), and bails to textual
indicators at 180 deep.
Commit: d57cdbf5a8ad9c4c758bed3dd4cbf74987a53dca
https://github.com/dreamwidth/dw-free/commit/d57cdbf5a8ad9c4c758bed3dd4cbf74987a53dca
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/practicality/layout.s2
Log Message:
-----------
[#2432] Enable advanced responsive comment threading in Practicality (opt-in)
This is sort of the proving ground, and its implementation will probably change
as we get feedback on it. For one thing, implementing this in a style could
REALLLLLY stand to be easier; the stuff I added in core2 makes this _possible,_
but it doesn't make it _simple_ yet, and a style author can do way too much
wacky stuff that risks becoming unsupportable. So be on the lookout for a more
prescriptive way to handle this. Welcome to Beta Zone.
Denise and Momiji said Practicality was the most popular of the Rasa-scions, so
it gets to be the guinea pig.
Alyndra had the good idea of making thread lines go _behind_ comments once you
hit the limit, so the eye can see a square wave sort of thing going on as the
depth goes in and out.
Props also to Highlander_II for pointing out that Reddit does something much
like this, which helped validate that I might not be on the wrong track.
The every-fifth-one-is-different thing is the one part I'm gonna straight-up
brag about on here, IMO that was a stroke of brilliance. 🌻
Compare: https://github.com/dreamwidth/dw-free/compare/68dd1adfb7b8...d57cdbf5a8ad
Home: https://github.com/dreamwidth/dw-free
Commit: 530cdb572540fe699ca213219adaf287ebf4cbba
https://github.com/dreamwidth/dw-free/commit/530cdb572540fe699ca213219adaf287ebf4cbba
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2.s2
Log Message:
-----------
[#2485] Add new utility functions to core2
- `generate_small_media_query` -- Often you can get away with just the medium
query, but sometimes you end up having to turn your logic entirely inside-out
and write more (and hairier) CSS than necessary. In those cases, it's real
nice to have a small query in the quiver too.
- `generate_invisible_css` -- Sometimes things need to vanish from the visible
page but stay in the audible page for screenreaders (which rules out display:
none).
- In things that control their markup, you'd do this with a class, but the
Rasa-scions benefit from NOT messing with their markup too much, so let's
not rely on that.
- In SCSS or other preprocessors you'd do this with a mixin, but hey, S2 is
sort of like a CSS preprocessor.
- In some other areas, especially some sitescheme zones, we've previously
invisibled stuff by absoluting it off into infinity somewhere, which
mostly works fine. The approach in this commit has about the same visible
effect, but seems to be a more modern evolution of the technique with
fewer side effects.
Commit: 9bc7366083ced0860bfb0802ab17630ff0da1034
https://github.com/dreamwidth/dw-free/commit/9bc7366083ced0860bfb0802ab17630ff0da1034
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2base/layout.s2
M styles/practicality/layout.s2
Log Message:
-----------
[#2485] Fix some mobile jank in Tabula Rasa/core2base and in Practicality
The userpic float -> absolute stuff in Practicality might seem a little odd, so
here's what's up with that:
- We want `overflow-x: auto` on content containers for entries and comments,
because nothing posted by a rando should EVER be allowed to trash your flist
or entry page layouts into full-page sideways slop.
- But this can have unexpected effects on containers that try to send something
outside the box with relative positioning, which I guess includes negative
margins. The astronaut content gets decapitated as soon as it sticks its head
outside the `overflow-x: auto` container.
The way around that is to do something like this:
- outer container with `position: relative`
- inner container with `overflow-x: auto`
- child element with `position: absolute`
The "containing block" of an `absolute` box is its nearest `relative` ancestor.
That means the `absolute` items now escape the `overflow-x: auto` container,
because it is NOT THEIR REAL MOM!!! and they are GOING TO GRANDMA'S!!!, which
prevents them from getting clipped.
Then you still need to have the text float around _something,_ which is what
that ::before pseudo-element with float is all about.
Commit: 6ec1e146d3c464e506a77913f0abf0d51a944f95
https://github.com/dreamwidth/dw-free/commit/6ec1e146d3c464e506a77913f0abf0d51a944f95
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2.s2
Log Message:
-----------
[#2432] Enable purely nested comment indentation in styles (opt-in)
This is implemented in core2's EntryPage::print_comments() and
EntryPage::print_comment(), so it's only available to layouts that don't
override those functions like a jerk (you heard me, Siteviews and Zesty :| ).
Here's the concept of the new indent behavior:
- Layouts can opt in by `use`ing the following S2 properties:
- `comment_indent_style` (values are `responsive` or `static`)
- `comment_indent_limit_mobile` (Limit is configurable, defaults to 8.)
- `comment_indent_limit_desktop`(Limit is
semi-configurable; defaults to 180, which is the absolute maximum, but you
can set it lower if you wish.)
- `comment_indent_depth_caption`
- Users can opt in by switching the comment indent style to "Responsive" in
their style options page. The exact effect will depend on which layout they use.
- Once responsive indent is enabled, layouts use the nested `.comment-thread`
divs to control indentation (or other styling) of comment threads. The
layout's CSS is in full control; there is no default indent on .dwexpcomment
divs anymore. (Hence the opt-in.)
- `.comment-thread`s are nested in the HTML, but the nesting fails at
a depth of 180 and children appear as siblings after that. This happens
_after_ the divs lose the `.comment-depth-indent-desktop` class (see
below), so the CSS knows it needs to switch to an alternate presentation.
- Every `.comment-thread` has additional classes and data to help manage indent
behavior:
- Things with the depth as a number:
- class `comment-depth-N` (where N is the depth), for simple CSS tasks.
(Existed previously.)
- attr `data-comment-depth`, for JavaScript tasks.
- custom prop `--comment-depth: N`, for complex CSS tasks with `var()`.
- Things that indicate which _zones_ of depth a thread is in:
- class `comment-depth-indent-mobile`
(between 1 and the value of `comment_indent_limit_mobile`)
- class `comment-depth-indent-desktop`
(between 1 and the value of `comment_indent_limit_desktop`)
- Things that expose user-configured S2 properties to CSS:
- custom prop `--comment-indent-limit-mobile: N`, for complex CSS tasks
with `var()`.
- ...could maybe use more of these, not sure yet.
- Things that enable math that isn't possible in CSS with only the data
already mentioned:
- class `comment-depth-parity-(odd|even)` (Existed previously.)
- class `comment-depth-mod5-N`, where N is between 0 and 4.
- Each `.comment .inner .header .inner` now includes a `span.thread-depth`
before the subject, which combines `comment_indent_depth_caption` and the
comment's depth. That span has one or more of the following additional
classes:
- `indent-mobile` (depth ≤ limit_mobile)
- `indent-desktop` (depth ≤ limit_desktop)
Your layout CSS is in charge of deciding when and how to display those depth
indicators; if the depth is clear enough without, you should invisible them
in a way that doesn't screw up screenreaders.
Commit: 0266271aaf1f2c655409a03736ece9bb9d475e37
https://github.com/dreamwidth/dw-free/commit/0266271aaf1f2c655409a03736ece9bb9d475e37
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/core2base/layout.s2
Log Message:
-----------
[#2432] Allow users to opt-in to responsive indent in Tabula Rasa (and children)
This enables the comment indent S2 properties in core2base, and adds some basic
responsive indent CSS (which is only added to the stylesheet if a user switches
the indent style to "Responsive").
Basic means basic -- this uses a 10px indent on mobile, and after a depth of 8
it bails out and starts exposing the textual depth indicators. On desktop, it
uses 20px (only a smidge tighter than the old static 25px), and bails to textual
indicators at 180 deep.
Commit: d57cdbf5a8ad9c4c758bed3dd4cbf74987a53dca
https://github.com/dreamwidth/dw-free/commit/d57cdbf5a8ad9c4c758bed3dd4cbf74987a53dca
Author: Nick Fagerlund <nick.fagerlund@gmail.com>
Date: 2019-06-14 (Fri, 14 Jun 2019)
Changed paths:
M styles/practicality/layout.s2
Log Message:
-----------
[#2432] Enable advanced responsive comment threading in Practicality (opt-in)
This is sort of the proving ground, and its implementation will probably change
as we get feedback on it. For one thing, implementing this in a style could
REALLLLLY stand to be easier; the stuff I added in core2 makes this _possible,_
but it doesn't make it _simple_ yet, and a style author can do way too much
wacky stuff that risks becoming unsupportable. So be on the lookout for a more
prescriptive way to handle this. Welcome to Beta Zone.
Denise and Momiji said Practicality was the most popular of the Rasa-scions, so
it gets to be the guinea pig.
Alyndra had the good idea of making thread lines go _behind_ comments once you
hit the limit, so the eye can see a square wave sort of thing going on as the
depth goes in and out.
Props also to Highlander_II for pointing out that Reddit does something much
like this, which helped validate that I might not be on the wrong track.
The every-fifth-one-is-different thing is the one part I'm gonna straight-up
brag about on here, IMO that was a stroke of brilliance. 🌻
Compare: https://github.com/dreamwidth/dw-free/compare/68dd1adfb7b8...d57cdbf5a8ad