benjamin wil
8f7793f461
* 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.
51 lines
1.3 KiB
Plaintext
51 lines
1.3 KiB
Plaintext
<div id="wiki-wrapper" class="results">
|
|
<div id="head">
|
|
{{>navbar}}
|
|
|
|
<h1 class="header-title text-center text-md-left py-4">
|
|
<span class="f1-light text-gray-light">
|
|
Search results for
|
|
</span>
|
|
{{name}}
|
|
</h1>
|
|
</div>
|
|
|
|
{{#has_results}}
|
|
|
|
{{>pagination}}
|
|
|
|
<div class="Box Box--condensed search-results" id="search-results">
|
|
<ul>
|
|
<div class="Box-header border-bottom p-0"></div>
|
|
{{#results}}
|
|
<li class="Box-row Box-row--gray">
|
|
<span class="Counter Counter--gray tooltipped tooltipped-w" aria-label="{{filename_count}} hits in filename - {{count}} hits in content">{{filename_count}} - {{count}}</span>
|
|
<span class="text-bold"><a href="{{href}}">{{name}}</a></span>
|
|
<button class="btn-link tooltipped tooltipped-w float-right toggle-context" aria-label="Show all {{count}} hits in this page">{{#octicon}}search{{/octicon}}</button>
|
|
</li>
|
|
|
|
<div class="search-context">
|
|
{{#context}}
|
|
<li class="Box-row border-0"><span class="text-italic">{{.}}</span></li>
|
|
{{/context}}
|
|
</div>
|
|
|
|
{{/results}}
|
|
</ul>
|
|
</div>
|
|
{{/has_results}}
|
|
|
|
{{#no_results}}
|
|
<p id="no-results">
|
|
There are no results for your search <strong>{{query}}</strong>.
|
|
</p>
|
|
{{/no_results}}
|
|
|
|
<div id="footer" class="mt-4">
|
|
<a class="btn" href="#">Back to Top</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|