Make navigation in portrait mode more finger-friendly again.
Change-Id: I30c20e67c61259d6029055800db3131eeeeb0e46
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 @@
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 @@
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 @@
"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 @@
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}