Allow and configure hiding the intro on mobile pages #108
Conversation
The intro section can be quite long, especially when a picture is enabled. By default the intro appears on the left on computer screen sizes, but above the content on mobile devices. This commit adds configuration parameters, css, and template logic to hide the intro on mobile devices, and configure if it is always hidden, or just on content pages that are not the homepage.
|
I'm not opposed to this change. I will take a look at it soon and evaluate. Thanks for the PR! |
|
No problem, thanks for building and maintaining the theme. Let me know if you have any questions or if you would like me to make any changes. |
exampleSite/config.toml
Outdated
| # You may not want to display a long intro above content on small screens. | ||
| hideOnMobile = true | ||
| # But you may want to always display the intro on the homepage. | ||
| alwaysOnHomepage = true |
There was a problem hiding this comment.
Changing these to false should cover the changes.
| #site-intro.hidden-on-mobile { | ||
| display: none; | ||
|
|
||
| @include for-desktop-up { |
There was a problem hiding this comment.
This should probably be for-laptop-up of the goal is to remove for mobile.
There was a problem hiding this comment.
Hmm, I agree, but in agreeing realized that my goal is to remove this for any of the single column layouts, not just on mobile. In main.scss #wrapper the two column layout is defined for-desktop-up. I think the best thing to do is actually rename the parameter to refer to hiding the intro on single columns layouts instead of "on mobile" for clarity.
There was a problem hiding this comment.
I believe this does work to solve the issue.
This commit sets the example site into hiding parameters to False to better track the exisiting theme behavior for backwards compatibility. If these parameters are not included in a site config, the intro will also not be hidden, maintaining existing behavior.
When referring to intro hiding, the intended behavior is to hide the intro on all single column layouts, not just ones "on mobile." Notably the `for-laptup-up` media type used the single column layout, but the name and intention is for "non-mobile" devices. To more clearly communicate intent this commit renames hideOnMobile to hideWhenSingleColumn and changes the relevant references from mobile hiding to single column hiding.
| #site-intro.hidden-on-mobile { | ||
| display: none; | ||
|
|
||
| @include for-desktop-up { |
There was a problem hiding this comment.
I believe this does work to solve the issue.
Description
This commit adds css, and template logic to hide the intro on mobile devices (when in linear layout and not grid layout) for pages that are not the homepage.
I added configuration parameters to config.toml to configure if it is always hidden on mobile, never hidden on mobile, or only hidden on pages that are not the homepage. I used two boolean config parameters, which does create a fourth redundant state where
hideOnMobile = falseandalwaysOnHomepage = trueleads to the same outcome ashideOnMobile = falseandalwaysOnHomepage = false. This configuration could be changed to some kind of state enum if people think that would be better, at the expense of the logic getting a little more complicated in the template.Motivation and Context
The intro section can be quite long, especially when a picture is enabled. See the screenshots below for examples. By default the intro appears on the left on computer screen sizes, but above the content on mobile devices. Before this change the intro appeared on every page, even the detailed pages of specific blog posts.
Screenshots:
Current desktop layout of a post (or content list)
The desktop layout has a nice grid structure with the intro and post content visible at the same time. The proposed PR does not change this layout at all.
Current mobile layout of a post (or content list)
Note the redundant intro that users have likely already seen taking up a large fraction of the screen
Proposed mobile layout change
This PR proposes allowing users to hide the intro block on mobile pages if they desire. This lets the post page lead with post content rather than the redundant intro. As currently implemented the intro will be hidden both on post detail pages and "deeper" site list pages like the list of blog posts or the list of categories.
Types of changes
Checklist:
theme.toml, accordingly.