Improve presentation of page navigation and #head area on mobile devices (#1742)
* Add `.header-title` style
This style shows smaller text on mobile devices. It reverts back to the
`2em` size used in Primer for H1 tags.
* Use `.header-title` for all `#head` headings
This commit:
1. Updates all main templates to use the new `.header-title` class,
making these titles less disruptively large on mobile devices.
2. Centers these titles for mobile breakpoints only, re-setting them
back to left-aligned text for `md-` breakpoints and up.
Note that in `lib/gollum/templates/wiki_contentf.mustache`, the
`.header-title` is not a `#head .header-title`, so it doesn't inherit
all of the new styles added in this commit.
* Adjust padding and presentation of mobile menu
To give mobile page headers more structure, this commit adjusts the
padding to be more symmetrical. It also adds a `border-bottom` on mobile
only. In my opinion this improves readability by telling the reader,
"This is where the navigation menu ends and the page content begins."
* Recompile assets
* Fix failing spec
My changes to the header layout seem to changed where the spaces in
`last_response.body` are placed. So let's assert only that the content
is present, since that's all this test should actually care about.
This commit is contained in:
@@ -1,4 +1,11 @@
|
||||
<nav class="TableObject actions pt-4 px-2 px-lg-0 overflow-x-scroll">
|
||||
<nav class="TableObject
|
||||
actions
|
||||
border-bottom
|
||||
border-md-0
|
||||
p-2
|
||||
pt-lg-4
|
||||
px-lg-0
|
||||
overflow-x-scroll">
|
||||
<div class="TableObject-item hide-lg hide-xl">
|
||||
{{>mobilenav}}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user