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
parent 589b4bce39
commit 8f7793f461
19 changed files with 80 additions and 30 deletions
@@ -1 +1 @@
-{"files":{"app-f05401ee374f0c7f48fc2bc08e30b4f4db705861fd5895ed70998683b383bfb5.js":{"logical_path":"app.js","mtime":"2021-07-10T00:40:20+09:00","size":136040,"digest":"f05401ee374f0c7f48fc2bc08e30b4f4db705861fd5895ed70998683b383bfb5","integrity":"sha256-8FQB7jdPDH9I/CvAjjC09NtwWGH9WJXtcJmGg7ODv7U="},"editor-9881d0c7ae663293f0e3a7e72729eec7e940fa613185c076709b76d292f5703a.js":{"logical_path":"editor.js","mtime":"2021-07-10T00:42:29+09:00","size":744886,"digest":"9881d0c7ae663293f0e3a7e72729eec7e940fa613185c076709b76d292f5703a","integrity":"sha256-mIHQx65mMpPw46fnJynux+lA+mExhcB2cJt20pL1cDo="},"app-cb122b4c17500faa5e013cb43334fafcf2dd7d72f694b06d9616f8b33fefb694.css":{"logical_path":"app.css","mtime":"2021-07-10T00:39:36+09:00","size":396625,"digest":"cb122b4c17500faa5e013cb43334fafcf2dd7d72f694b06d9616f8b33fefb694","integrity":"sha256-yxIrTBdQD6peATy0MzT6/PLdfXL2lLBtlhb4sz/vtpQ="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-07-08T05:19:03+09:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-07-08T05:19:03+09:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-f05401ee374f0c7f48fc2bc08e30b4f4db705861fd5895ed70998683b383bfb5.js","editor.js":"editor-9881d0c7ae663293f0e3a7e72729eec7e940fa613185c076709b76d292f5703a.js","app.css":"app-cb122b4c17500faa5e013cb43334fafcf2dd7d72f694b06d9616f8b33fefb694.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
+{"files":{"app-f05401ee374f0c7f48fc2bc08e30b4f4db705861fd5895ed70998683b383bfb5.js":{"logical_path":"app.js","mtime":"2021-11-15T20:08:30-08:00","size":136040,"digest":"f05401ee374f0c7f48fc2bc08e30b4f4db705861fd5895ed70998683b383bfb5","integrity":"sha256-8FQB7jdPDH9I/CvAjjC09NtwWGH9WJXtcJmGg7ODv7U="},"editor-9881d0c7ae663293f0e3a7e72729eec7e940fa613185c076709b76d292f5703a.js":{"logical_path":"editor.js","mtime":"2021-11-15T20:08:30-08:00","size":744886,"digest":"9881d0c7ae663293f0e3a7e72729eec7e940fa613185c076709b76d292f5703a","integrity":"sha256-mIHQx65mMpPw46fnJynux+lA+mExhcB2cJt20pL1cDo="},"app-309be032396e783b13a47df58f389b7c8e11c2b2d42640560b874f677c25f6e5.css":{"logical_path":"app.css","mtime":"2021-11-15T20:08:30-08:00","size":396731,"digest":"309be032396e783b13a47df58f389b7c8e11c2b2d42640560b874f677c25f6e5","integrity":"sha256-MJvgMjlueDsTpH31jzibfI4RwrLUJkBWC4dPZ3wl9uU="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-08-22T15:24:51-07:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-08-22T15:24:51-07:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-f05401ee374f0c7f48fc2bc08e30b4f4db705861fd5895ed70998683b383bfb5.js","editor.js":"editor-9881d0c7ae663293f0e3a7e72729eec7e940fa613185c076709b76d292f5703a.js","app.css":"app-309be032396e783b13a47df58f389b7c8e11c2b2d42640560b874f677c25f6e5.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
@@ -510,6 +510,14 @@ a {
  border: none;
 }

+#head .header-title {
+  font-size: 1.5em;
+
+  @include largemobile-breakpoint {
+    font-size: 32px;
+  }
+}
+
 /* Highlights */

 .highlight {
@@ -1,6 +1,8 @@
 <div id="wiki-wrapper" class="compare">
  <div id="head">
-    <h1 class="py-4">{{message}}</h1>
+    <h1 class="header-title text-center text-md-left py-4">
+      {{message}}
+    </h1>
    {{author}} commited {{authored_date}}
    <span class="px-2 float-right">commit <code>{{version}}</code></span>
  </div>
@@ -1,8 +1,14 @@
 <div id="wiki-wrapper" class="compare">
-	<div id="head">
-		{{>navbar}}
-	  <h1 class="py-4"><span class="f1-light text-gray-light">Comparing versions of</span> {{name}}</h1>
-	</div>
+  <div id="head">
+    {{>navbar}}
+
+    <h1 class="header-title text-center text-md-left py-4">
+      <span class="f1-light text-gray-light">
+        Comparing versions of
+      </span>
+      {{name}}
+    </h1>
+  </div>

 {{#message}}
 	<p>{{message}}</p>
@@ -1,8 +1,11 @@
 <div id="wiki-wrapper" class="create">
-<div id="head">
-	{{>navbar}}
-  <h1 class="py-4">Create New Page</h1>
-</div>
+  <div id="head">
+    {{>navbar}}
+
+    <h1 class="header-title text-center text-md-left py-4">
+      Create New Page
+    </h1>
+  </div>
 <div id="wiki-content" class="create edit">
  <div class="tabnav">
    <nav class="tabnav-tabs" aria-label="Toggle edit or preview mode">
@@ -1,8 +1,11 @@
 <div id="wiki-wrapper" class="edit">
-<div id="head">
-	{{>navbar}}
-  <h1 class="py-4">Editing <strong>{{title}}</strong></h1>
-</div>
+  <div id="head">
+    {{>navbar}}
+
+    <h1 class="header-title text-center text-md-left py-4">
+      Editing <strong>{{title}}</strong>
+    </h1>
+  </div>
 <div class="tabnav">
  <nav class="tabnav-tabs">
    <a href="#" id="edit" class="tabnav-tab selected" aria-current="page">
@@ -1,8 +1,15 @@
 <div id="wiki-wrapper" class="history">
 <div id="head">
-	{{>navbar}}
-  <h1 class="py-4"><span class="f1-light text-gray-light">History for</span> {{name}}</h1>
+  {{>navbar}}
+
+  <h1 class="header-title text-center text-md-left py-4">
+    <span class="f1-light text-gray-light">
+      History for
+    </span>
+    {{name}}
+  </h1>
 </div>
+
 <div id="page-history">

  {{>pagination}}
@@ -1,8 +1,11 @@
 <div id="wiki-wrapper" class="history">
-<div id="head">
-	{{>navbar}}
-  <h1 class="py-4">{{title}}</h1>
-</div>
+  <div id="head">
+    {{>navbar}}
+
+    <h1 class="header-title text-center text-md-left py-4">
+      {{title}}
+    </h1>
+  </div>

 {{>pagination}}

@@ -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>
@@ -1,8 +1,11 @@
 <div id="wiki-wrapper" class="results">
-<div id="head" class="overview">
-	{{>navbar}}
-  <h1 class="py-4">{{title}}</h1>
-</div>
+  <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}}
@@ -1,7 +1,13 @@
 <div id="wiki-wrapper" class="results">
  <div id="head">
    {{>navbar}}
-    <h1 class="py-4"><span class="f1-light text-gray-light">Search results for</span> {{name}}</h1>
+
+    <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}}
@@ -1,5 +1,7 @@
 <div id="wiki-content" class="px-2 px-lg-0">
-	<h1 class="pt-4">{{page_header}}</h1>
+  <h1 class="header-title text-center text-md-left pt-4">
+    {{page_header}}
+  </h1>
 	<div class="breadcrumb">{{{breadcrumb}}}</div>

 	<div class="{{#has_header}}has-header{{/has_header}}{{#has_footer}} has-footer{{/has_footer}}{{#has_sidebar}} has-sidebar has-{{bar_side}}bar{{/has_sidebar}}{{#has_toc}} has-toc{{/has_toc}}">
@@ -489,9 +489,9 @@ EOF
  test "previews content" do
    post "/gollum/preview", :content => 'abc', :format => 'markdown', :page => 'Samewise Gamgee.mediawiki'
    assert last_response.ok?
-    assert last_response.body.include?('Samewise Gamgee</h1>')
+    assert last_response.body.include?('Samewise Gamgee')
  end
-  
+
  test 'throws an error when comparing two identical revisions for a page' do
    get '/gollum/compare/A.md/fc66539528eb96f21b2bbdbf557788fe8a1196ac...fc66539528eb96f21b2bbdbf557788fe8a1196ac'
    assert last_response.ok?