Add padding to guides categories and fix layout on phones (#716)

Signed-off-by: Martin Bartoš <mabartos@redhat.com>

Author: mabartos

pages/guides.ftl

@@ -8,23 +8,25 @@
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container">
-        <div class="float-left">
-            <select data-nosnippet aria-label="Version" onchange="location = this.options[this.selectedIndex].value;" class="form-select">
-                <option value="${links.getGuides(true)}">Nightly</option>
-                <option value="${links.getGuides(false)}" selected="selected">${version.version}</option>
-            </select>
-        </div>
-        <ul class="nav navbar-nav">
-            <#list guides.getCategories(false) as c>
-            <li>
-                <a class="nav-link" href="#${c.id}">${c.title}</a>
-            </li>
-            </#list>
-        </ul>
-        <div class="float-right">
-            <form>
-                <input id="guide-search" class="form-control" type="text" placeholder="Search" aria-label="Search">
-            </form>
+        <div class="guides-navbar-content">
+            <div>
+                <select id="guide-version-select" data-nosnippet aria-label="Version" onchange="location = this.options[this.selectedIndex].value;" class="form-select">
+                    <option value="${links.getGuides(true)}">Nightly</option>
+                    <option value="${links.getGuides(false)}" selected="selected">${version.version}</option>
+                </select>
+            </div>
+            <ul class="nav navbar-nav guides-navbar-menu">
+                <#list guides.getCategories(false) as c>
+                <li>
+                    <a class="nav-link" href="#${c.id}">${c.title}</a>
+                </li>
+                </#list>
+            </ul>
+            <div>
+                <form>
+                    <input id="guide-search" class="form-control" type="text" placeholder="Search" aria-label="Search">
+                </form>
+            </div>
         </div>
     </div>
 </nav>

resources/css/keycloak.css

@@ -178,6 +178,35 @@ a:hover {
     padding: 1rem 0.5rem 0;
 }
 
+/* Guides navbar layout */
+.guides-navbar-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 1rem;
+}
+
+#guide-version-select {
+    min-width: 100px;
+}
+
+@media (min-width: 992px) {
+    .guides-navbar-content {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .guides-navbar-menu {
+        margin-right: auto;
+    }
+    
+    /* Guides navbar font size can be lower as in the Bootstrap examples for secondary navbar */
+    .guides-navbar-menu .nav-link,#guide-search,#guide-version-select {
+        font-size: .9rem;
+    }
+}
+
 table.options {
     width: 100%;
 }