From b0f999ac059a9e896d50b2779a07b6f7b702cf25 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 11:06:56 -0300
Subject: [PATCH] Fix styling of navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Follow @Tirokk suggestions

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/components/FilterPosts/FilterPosts.vue   |  4 ++--
 .../FilterPosts/FilterPostsMenuItems.vue        |  6 ++++++
 webapp/layouts/default.vue                      | 17 +++++++++++------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 2e957cd56..56c95a21a 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -1,8 +1,8 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
     <a slot="default" slot-scope="{ toggleMenu }" href="#" @click.prevent="toggleMenu()">
-      <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <ds-icon style="margin: 12px 0px 0px 10px;" name="filter" size="large" />
+      <ds-icon style="margin: 7px 0px 0px 2px" size="xx-small" name="angle-down" />
     </a>
     <template slot="popover">
       <filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" />
diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index 4927a1060..593781cdb 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -117,4 +117,10 @@ export default {
     margin: 9px 0px 40px 0px;
   }
 }
+
+@media only screen and (max-width: 960px) {
+  #filter-posts-header {
+    text-align: center;
+  }
+}
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index a52f2c1d6..33c5c25a1 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,7 +4,7 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
           <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ lg: '5%' }" />
+            <ds-flex-item :width="{ lg: '3.5%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
               <a @click="redirectToRoot">
                 <ds-logo />
@@ -17,7 +17,7 @@
               <ds-button icon="bars" @click="toggleMobileMenuView" right />
             </ds-flex-item>
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '50%', lg: '45%' }"
+              :width="{ base: '100%', sm: '100%', md: '50%', lg: '50%' }"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
@@ -37,11 +37,12 @@
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
               <no-ssr>
-                <filter-posts placement="bottom-end" offset="23" :categories="categories" />
+                <filter-posts placement="top-start" offset="8" :categories="categories" />
               </no-ssr>
             </ds-flex-item>
+            <ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" />
             <ds-flex-item
-              :width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }"
+              :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
               style="background-color:white"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
             >
@@ -53,14 +54,14 @@
                 }"
               >
                 <no-ssr>
-                  <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
+                  <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
                 </no-ssr>
                 <template v-if="isLoggedIn">
                   <no-ssr>
                     <notification-menu />
                   </no-ssr>
                   <no-ssr>
-                    <dropdown class="avatar-menu">
+                    <dropdown class="avatar-menu" offset="8">
                       <template slot="default" slot-scope="{ toggleMenu }">
                         <a
                           class="avatar-menu-trigger"
@@ -300,6 +301,10 @@ export default {
   float: right;
 }
 
+.avatar-menu {
+  margin: 2px 0px 0px 5px;
+}
+
 .avatar-menu-trigger {
   user-select: none;
   display: flex;