Make navigation in portrait mode more compact.
- Moves secondary navigation items to the footer.
- Reduces primary navigation items to two lines.
Change-Id: Id104bb051c48bcd1f8ff97b0ecd3e198a7531cd1
diff --git a/README.adoc b/README.adoc
index b885736..b300025 100644
--- a/README.adoc
+++ b/README.adoc
@@ -44,7 +44,7 @@
== Packaging
-Do build JARs and a JVM-based Docker image and push the Docker image to https://docker.benkard.de/repositories/10[Portus]:
+To build JARs and a JVM-based Docker image and push the Docker image to https://docker.benkard.de/repositories/10[Portus]:
[source]
----
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 > 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 @@
"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 @@
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 @@
margin-top: 1em;
}
+.submenu {
+ display: contents;
+}
+
.login-text {
font-style: italic;
}
@@ -383,3 +449,24 @@
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 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">