Revise the navbar items

The navbar links have been shortened using css resulting in a
fixed navbar size. In addition the searchbar in the lower navbar
has been centered vertically.

Signed-off-by: Max Magorsch <arzano@gentoo.org>
Signed-off-by: Ulrich Müller <ulm@gentoo.org>

2 files changed, 45 insertions, 5 deletions

diff --git a/devbook.xsl b/devbook.xsl
index e3bb38d..11b4fd5 100644
--- a/devbook.xsl
+++ b/devbook.xsl
@@ -701,7 +701,7 @@
       -->
       <xsl:when test="count(/guide/include) &gt; 0">
         <xsl:variable name="doc" select="/guide/include[1]/@href"/>
-        <a href="{concat($doc, 'index.html')}"><xsl:value-of select="document(concat(/guide/@self, $doc, 'text.xml'))/guide/chapter[1]/title"/> &#160;<span class="fa fa-arrow-right"/></a>
+        <a class="w-250 text-center" href="{concat($doc, 'index.html')}"><span class="truncated-text d-inline-block max-w-200 mr-2"><xsl:value-of select="document(concat(/guide/@self, $doc, 'text.xml'))/guide/chapter[1]/title"/></span><span class="fa fa-arrow-right"/></a>
       </xsl:when>
       <xsl:otherwise>
         <!-- This document's path -->
@@ -734,7 +734,7 @@
                 <xsl:with-param name="append">../</xsl:with-param>
               </xsl:call-template>
             </xsl:variable>
-            <a href="{concat($relative_path_depth_recursion, $relative_path, 'index.html')}"><xsl:value-of select="document(concat($parentItem_actual, 'text.xml'))/guide/chapter[1]/title"/> &#160;<span class="fa fa-arrow-right"/></a>
+            <a class="w-250 text-center" href="{concat($relative_path_depth_recursion, $relative_path, 'index.html')}"> <span class="truncated-text d-inline-block max-w-200 mr-2"><xsl:value-of select="document(concat($parentItem_actual, 'text.xml'))/guide/chapter[1]/title"/></span><span class="fa fa-arrow-right"/></a>
           </xsl:when>
           <xsl:otherwise>
             <!-- We need to recurse downwards; so we need to strip off a directory element off our absolute path to feed
@@ -781,7 +781,7 @@
                * Fully recurse up the node to get the last extremity
              * Otherwise list the parent -->
       <xsl:when test="/guide/@root">
-        <a href="#"><span class="fa fa-arrow-left"/>&#160; <xsl:value-of select="/guide/chapter[1]/title"/></a>
+        <a class="w-250 text-center" href="#"><span class="fa fa-arrow-left"/><span class="truncated-text d-inline-block max-w-200 ml-2"><xsl:value-of select="/guide/chapter[1]/title"/></span></a>
       </xsl:when>
       <xsl:otherwise>
         <!-- This document's path -->
@@ -804,10 +804,10 @@
             </xsl:call-template>
             </xsl:variable>
             <!-- Make a relative <a> link; we need an absolute reference for the XSLT processor though... -->
-            <a href="{concat('../', substring-before($myItem_path, 'text.xml'), 'index.html')}"><span class="fa fa-arrow-left"/>&#160; <xsl:value-of select="document(concat($parentItem_path, $myItem_path))/guide/chapter[1]/title"/></a>
+            <a class="w-250 text-center" href="{concat('../', substring-before($myItem_path, 'text.xml'), 'index.html')}"><span class="fa fa-arrow-left"/><span class="truncated-text d-inline-block max-w-200 ml-2"><xsl:value-of select="document(concat($parentItem_path, $myItem_path))/guide/chapter[1]/title"/></span></a>
           </xsl:when>
           <xsl:otherwise>
-            <a href="../index.html"><span class="fa fa-arrow-left"/>&#160; <xsl:value-of select="document(concat(/guide/@self, '../text.xml'))/guide/chapter[1]/title"/></a>
+            <a class="w-250 text-center" href="../index.html"><span class="fa fa-arrow-left"/><span class="truncated-text d-inline-block max-w-200 ml-2"><xsl:value-of select="document(concat(/guide/@self, '../text.xml'))/guide/chapter[1]/title"/></span></a>
           </xsl:otherwise>
         </xsl:choose>
       </xsl:otherwise>
diff --git a/devmanual.css b/devmanual.css
index 41c6beb..24b3551 100644
--- a/devmanual.css
+++ b/devmanual.css
@@ -33,4 +33,44 @@ pre span.Constant { color: black; }
 pre span.Comment { color: red; }
 pre span.Statement { color: darkred; }
 
+.truncated-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+.w-250 {
+    width: 250px;
+}
+
+.max-w-200 {
+    max-width: 200px;
+}
+
+/* compatible to Bootstrap 4 for future migration */
+.d-inline-block {
+    display: inline-block;
+}
+
+/* compatible to Bootstrap 4 for future migration */
+.text-center {
+    text-align: center;
+}
+
+/* compatible to Bootstrap 4 for future migration */
+.mr-2 {
+    margin-right: 8px;
+}
+
+/* compatible to Bootstrap 4 for future migration */
+.ml-2 {
+    margin-left: 8px;
+}
+
+/* vertically center the search bar */
+.navbar-grey .input-group {
+    margin-top: 3px;
+}
+
 /* vim: set ts=4 tw=80 et : */