From 533e6d4ca0764c3d74329cbe8c470957a51a278b Mon Sep 17 00:00:00 2001
From: Matthias Andreas Benkard <code@mail.matthias.benkard.de>
Date: Wed, 16 Dec 2020 13:26:38 +0100
Subject: Make navigation in portrait mode more compact.

 - Moves secondary navigation items to the footer.
 - Reduces primary navigation items to two lines.

Change-Id: Id104bb051c48bcd1f8ff97b0ecd3e198a7531cd1
---
 .../resources/META-INF/resources/cms2/base.css     | 99 ++++++++++++++++++++--
 src/main/resources/templates/base.html             |  2 +-
 .../resources/templates/benki/posts/postList.html  |  2 +
 src/main/resources/templates/tags/footer.html      |  5 ++
 src/main/resources/templates/tags/navbar.html      | 16 ++--
 5 files changed, 111 insertions(+), 13 deletions(-)
 create mode 100644 src/main/resources/templates/tags/footer.html

(limited to 'src')

diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index f3a49fb..920e5a0 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -76,6 +76,65 @@ body {
   body > main {
     border-top: 1px solid lightgray
   }
+
+  .landscape-only, body > nav ol > li.landscape-only {
+    display: none;
+  }
+
+  .login-box > * {
+    display: inline;
+  }
+
+  li.submenu > a {
+    display: inline !important;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+
+  body > nav ol > li > * {
+    padding-left: 0.5em !important;
+    padding-right: 0.5em !important;
+  }
+
+  ol.submenu > li {
+    display: inline;
+  }
+
+  ol.submenu > li > a {
+    display: inline;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+  }
+
+  ol.submenu > li:first-child > a {
+    margin-left: 0;
+  }
+
+  ol.submenu > li:last-child > a {
+    margin-right: 0;
+  }
+
+  ol.submenu > li::before {
+    content: '|';
+  }
+
+  ol.submenu > li:first-child::before {
+    content: none;
+  }
+
+  li.submenu {
+    display: block;
+  }
+
+  ol.submenu li:first-child::before {
+    content: '(';
+  }
+
+  ol.submenu li:last-child::after {
+    content: ')';
+  }
 }
 
 @media (min-width: 30em) {
@@ -90,9 +149,13 @@ body {
         "footer footer";
   }
 
-  body > nav > ol > li.this-page {
+  body > nav ol > li.this-page {
     width: calc(100% + 3px);
   }
+
+  body > nav ol > li.this-page > a {
+    border-right: 1px solid var(--main-bg-color);
+  }
 }
 
 body > header {
@@ -131,22 +194,21 @@ body > nav > ol {
   flex-direction: column;
 }
 
-body > nav > ol > li {
+body > nav ol > li {
   flex: auto;
 }
 
-body > nav > ol > li.indented {
+body > nav ol.submenu > li {
   text-indent: 1em;
 }
 
-body > nav > ol > li.this-page {
+body > nav ol > li.this-page > a {
   background-color: var(--main-bg-color);
   border: 1px solid lightgray;
-  border-right: 1px solid var(--main-bg-color);
   z-index: 1;
 }
 
-body > nav > ol > li > * {
+body > nav ol > li > * {
   text-decoration: none;
   display: block;
   padding: 5px;
@@ -161,6 +223,10 @@ body > nav li[data-site-section="About"], body > nav li[data-site-section="Login
   margin-top: 1em;
 }
 
+.submenu {
+    display: contents;
+}
+
 .login-text {
   font-style: italic;
 }
@@ -383,3 +449,24 @@ elix-expandable-section .expandable-section-title {
   margin-top: 0;
   margin-bottom: 0;
 }
+
+
+/* Footer */
+.footer-nav {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+.footer-nav li {
+    list-style: none;
+    flex: auto;
+    flex-grow: 0;
+}
+
+.footer-nav a {
+    text-decoration: none;
+    padding: 0.5em;
+}
diff --git a/src/main/resources/templates/base.html b/src/main/resources/templates/base.html
index 45a2356..96de208 100644
--- a/src/main/resources/templates/base.html
+++ b/src/main/resources/templates/base.html
@@ -26,7 +26,7 @@
   </main>
 
   <footer>
-    <a href="/about">Contact Information</a>
+    {#footer /}
   </footer>
 </body>
 </html>
diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index 89cea69..5e9d24a 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -93,6 +93,8 @@
               <section class="bookmark-description post-content">
                 {descriptionHtml.raw}
               </section>
+
+              <section class="comment-box"></section>
             </article>
           {#else}
             <article class="lazychat-message">
diff --git a/src/main/resources/templates/tags/footer.html b/src/main/resources/templates/tags/footer.html
new file mode 100644
index 0000000..f185f1b
--- /dev/null
+++ b/src/main/resources/templates/tags/footer.html
@@ -0,0 +1,5 @@
+<ul class="footer-nav">
+  <li><a href="/newsletter">Newsletter</a></li>
+  <li><a href="/privacy">Privacy</a></li>
+  <li><a href="/about">Contact</a></li>
+</ul>
diff --git a/src/main/resources/templates/tags/navbar.html b/src/main/resources/templates/tags/navbar.html
index d79a952..565675e 100644
--- a/src/main/resources/templates/tags/navbar.html
+++ b/src/main/resources/templates/tags/navbar.html
@@ -1,18 +1,22 @@
 {@java.lang.String siteSection}
 
 <ol>
-  <li class='{#if siteSection == "All Posts"}this-page{/}' data-site-section="All Posts"><a href="/posts">All Posts</a></li>
-  <li class='{#if siteSection == "Bookmarks"}this-page{/} indented' data-site-section="Bookmarks"><a href="/bookmarks">Bookmarks</a></li>
-  <li class='{#if siteSection == "Lazy Chat"}this-page{/} indented' data-site-section="Lazy Chat"><a href="/lazychat">Lazy Chat</a></li>
+  <li class='{#if siteSection == "All Posts"}this-page{/} submenu' data-site-section="All Posts">
+    <a href="/posts">Posts</a>
+    <ol class="submenu">
+      <li class='{#if siteSection == "Bookmarks"}this-page{/}' data-site-section="Bookmarks"><a href="/bookmarks">Bookmarks</a></li>
+      <li class='{#if siteSection == "Lazy Chat"}this-page{/}' data-site-section="Lazy Chat"><a href="/lazychat">Lazy&nbsp;Chat</a></li>
+    </ol>
+  </li>
 
   {#if inject:LoginStatus.loggedIn}
   <li class='{#if siteSection == "Wiki"}this-page{/}' data-site-section="Wiki"><a href="/wiki/Home">Wiki</a></li>
   {/if}
 
-  <li class='{#if siteSection == "Newsletter"}this-page{/}' data-site-section="Newsletter"><a href="/newsletter">Newsletter</a></li>
+  <li class='{#if siteSection == "Newsletter"}this-page{/} landscape-only' data-site-section="Newsletter"><a href="/newsletter">Newsletter</a></li>
 
-  <li class='{#if siteSection == "About"}this-page{/}' data-site-section="About"><a href="/about">Contact Info</a></li>
-  <li class='{#if siteSection == "Privacy"}this-page{/}' data-site-section="Privacy"><a href="/privacy">Privacy Policy</a></li>
+  <li class='{#if siteSection == "About"}this-page{/} landscape-only' data-site-section="About"><a href="/about">Contact Info</a></li>
+  <li class='{#if siteSection == "Privacy"}this-page{/} landscape-only' data-site-section="Privacy"><a href="/privacy">Privacy Policy</a></li>
 
   {#if inject:LoginStatus.loggedIn}
   <li class='{#if siteSection == "Login"}this-page{/} login-box logged-in' data-site-section="Login">
-- 
cgit v1.2.3