www: navigation layout changes

2 files changed, 19 insertions, 21 deletions

diff --git a/juick-www/src/main/assets/style.css b/juick-www/src/main/assets/style.css
index ce80e650..b6cc3f28 100644
--- a/juick-www/src/main/assets/style.css
+++ b/juick-www/src/main/assets/style.css
@@ -103,6 +103,10 @@ body > header {
     margin: 0 auto;
     width: 1000px;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 4px;
 }
 #footer {
     clear: both;
@@ -148,7 +152,6 @@ body > header {
 
 #logo {
     height: 36px;
-    margin: 7px 25px 0 20px;
     width: 110px;
 }
 #logo a {
@@ -163,7 +166,6 @@ body > header {
     width: 110px;
 }
 #global {
-    flex-grow: 1;
     display: flex;
 }
 #global a {
@@ -182,25 +184,12 @@ body > header {
     cursor: pointer;
     transition: box-shadow 0.2s ease-in;
 }
-#search {
-    margin: 12px 20px 12px 0;
-}
 #search input {
     background: #FFF;
     border: 1px solid #DDDDD5;
     outline: none !important;
     padding: 4px;
 }
-@media screen and (max-width: 850px) {
-    #logo {
-        display: none;
-    }
-    #search {
-        display: inline-block;
-        float: none;
-        margin: 10px 10px;
-    }
-}
 
 /* #endregion */
 
@@ -485,6 +474,15 @@ article .tags > a,
 }
 
 @media screen and (max-width: 850px) {
+    #header_wrapper {
+        width: auto;
+    }
+    #wrapper {
+        margin-top: 150px;
+    }
+    #search {
+        padding: 4px;
+    }
     article {
         overflow: auto;
     }
diff --git a/juick-www/src/main/resources/templates/views/partial/navigation.html b/juick-www/src/main/resources/templates/views/partial/navigation.html
index 160d9a97..48c1abb1 100644
--- a/juick-www/src/main/resources/templates/views/partial/navigation.html
+++ b/juick-www/src/main/resources/templates/views/partial/navigation.html
@@ -1,6 +1,12 @@
 <header>
     <div id="header_wrapper">
         <div id="logo"><a href="/{% if visitor.uid > 0 %}?show=my{% endif %}">Juick</a></div>
+        <div id="search">
+            <form action="/">
+                <input name="search" class="text"
+                       placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
+            </form>
+        </div>
         <nav id="global">
             <ul>
                 {% if visitor.uid > 0 %}
@@ -22,11 +28,5 @@
                 {% endif %}
             </ul>
         </nav>
-        <div id="search">
-            <form action="/">
-                <input name="search" class="text"
-                       placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
-            </form>
-        </div>
     </div>
 </header>