From a743872d30d72dfdc230cd72a1f529edd82e691e Mon Sep 17 00:00:00 2001
From: Matthias Andreas Benkard <code@mail.matthias.benkard.de>
Date: Wed, 16 Dec 2020 17:00:28 +0100
Subject: Make navigation in portrait mode more finger-friendly again.

Change-Id: I30c20e67c61259d6029055800db3131eeeeb0e46
---
 .../resources/META-INF/resources/cms2/base.css     | 34 ++++++++++++++++------
 src/main/resources/templates/tags/navbar.html      |  3 +-
 2 files changed, 27 insertions(+), 10 deletions(-)

(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 920e5a0..3855486 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -77,16 +77,12 @@ body {
     border-top: 1px solid lightgray
   }
 
-  .landscape-only, body > nav ol > li.landscape-only {
-    display: none;
-  }
-
-  .login-box > * {
-    display: inline;
+  .landscape-only {
+    display: none !important;
   }
 
   li.submenu > a {
-    display: inline !important;
+    display: inline-block !important;
     padding-left: 0.5em;
     padding-right: 0.5em;
   }
@@ -96,16 +92,21 @@ body {
     padding-right: 0.5em !important;
   }
 
+  body > nav ol.submenu > li {
+    text-indent: 0 !important;
+  }
+
   ol.submenu > li {
     display: inline;
   }
 
   ol.submenu > li > a {
-    display: inline;
+    display: inline-block;
     padding-left: 0.2em;
     padding-right: 0.2em;
     margin-left: 0.2em;
     margin-right: 0.2em;
+    z-index: 2 !important;
   }
 
   ol.submenu > li:first-child > a {
@@ -149,12 +150,17 @@ body {
         "footer footer";
   }
 
+  .portrait-only {
+    display: none !important;
+  }
+
   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);
+    border-right: 1px solid var(--main-bg-color) !important;
+    margin-right: -1px;
   }
 }
 
@@ -198,8 +204,18 @@ body > nav ol > li {
   flex: auto;
 }
 
+body > nav > ol > li {
+  position: relative;
+}
+
 body > nav ol.submenu > li {
   text-indent: 1em;
+  z-index: 2;
+  position: relative;
+}
+
+body > nav > ol > li > a {
+  background: var(--nav-bg-color);
 }
 
 body > nav ol > li.this-page > a {
diff --git a/src/main/resources/templates/tags/navbar.html b/src/main/resources/templates/tags/navbar.html
index 565675e..17a25dd 100644
--- a/src/main/resources/templates/tags/navbar.html
+++ b/src/main/resources/templates/tags/navbar.html
@@ -2,6 +2,7 @@
 
 <ol>
   <li class='{#if siteSection == "All Posts"}this-page{/} submenu' data-site-section="All Posts">
+    <a href="/posts" class="portrait-only" aria-hidden="true" style="position: absolute; width: 100%; z-index: 0">Posts</a>
     <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>
@@ -24,7 +25,7 @@
   </li>
   {#else}
   <li class='{#if siteSection == "Login"}this-page{/} login-box logged-out' data-site-section="Login">
-    <div class="login-text">Not logged in.</div>
+    <div class="login-text landscape-only">Not logged in.</div>
     <a href="/login">Log In</a>
   </li>
   {/if}
-- 
cgit v1.2.3