Files
gollum/lib/gollum/templates/overview.mustache
T
benjamin wil 8f7793f461 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.
2021-12-30 14:36:51 -08:00

46 lines
1.0 KiB
Plaintext

<div id="wiki-wrapper" class="results">
<div id="head" class="overview">
{{>navbar}}
<h1 class="header-title text-center text-md-left py-4">
{{title}}
</h1>
</div>
<div id="overview">
{{#has_results}}
<div id="file-browser">
<div class="breadcrumb pb-4">
{{{breadcrumb}}}
</div>
<div class="Box">
<ul>
{{#files_folders}}
<li class="Box-row">
<span class="pr-2">{{{icon}}}</span>
<span><a href="{{url}}">{{name}}</a></span>
{{#allow_editing}}
{{#is_file}}<button class="btn btn-sm float-right delete-file" data-file-path="{{file_path}}" data-confirm="Are you sure you want to delete {{name}}?">{{#octicon}}trash{{/octicon}}</button>{{/is_file}}
{{/allow_editing}}
</li>
{{/files_folders}}
</ul>
</div>
{{/has_results}}
{{#no_results}}
<p id="no-results">
There are no pages in <strong>{{current_path}}</strong> on <strong>{{ref}}</strong>.
</p>
{{/no_results}}
</div>
<div class="pt-4" id="footer">
<a href="#">Back to Top</a>
</div>
</div>