Merge pull request #637 from maykinmedia/fix/1494-fix-mobile-header-n…

…avigation 💄 [#1494] Fix margins and designs in mobile navigation
maykinmedia · May 30, 2023 · 5f78ccb · 5f78ccb
2 parents 02c654d + 94cbdd1
commit 5f78ccb
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 17 deletions.
diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -16,12 +16,12 @@
         {% logo src=config.logo.file.url alt=logo_alt_text svg_height=75 %}
 
         {% if request.user.is_authenticated %}
-            <span class="nav-login--icon">{% icon icon="how_to_reg" icon_position="before" icon_outlined=True %}</span>
+            <span class="nav-login--icon">{% icon icon="how_to_reg" icon_position="before" outlined=True %}</span>
         {% elif config.login_show %}
             <span class="nav-login--icon">
                 {% url 'login' as login_url %}
                 {% trans "Inloggen" as login %}
-                {% button text="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %}
+                {% button text="" title="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %}
             </span>
         {% endif %}
 

diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
@@ -1,12 +1,12 @@
 .form {
   box-sizing: border-box;
   display: grid;
-  gap: var(--gutter-width);
+  gap: var(--spacing-small);
   padding: var(--gutter-width) 0;
   position: relative;
 
   @media (min-width: 768px) {
-    gap: var(--gutter-width);
+    gap: var(--spacing-large);
   }
 
   &#{&}--align-end {

diff --git a/src/open_inwoner/scss/components/Grid/Grid.scss b/src/open_inwoner/scss/components/Grid/Grid.scss
@@ -56,8 +56,9 @@
 
   &__welcome {
     margin-bottom: var(--row-height);
+    margin-top: -80px;
     background-color: var(--color-white);
-    box-shadow: 0 0 var(--row-height) 0 var(--color-mute);
+    box-shadow: 0 0 var(--row-height) 0 var(--color-gray);
     padding: var(--spacing-large);
     box-sizing: border-box;
     width: 100%;

diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
@@ -6,13 +6,16 @@ $vm: var(--spacing-large);
 
 .header {
   position: static;
-  min-height: 100px;
+  min-height: 81px;
   background-color: var(--color-white);
   width: 100%;
   z-index: 1003;
 
   @media (min-width: 768px) {
     position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 90px;
     margin-bottom: var(--spacing-tiny);
   }
 
@@ -80,6 +83,7 @@ $vm: var(--spacing-large);
         position: static;
         grid-row: 1;
         grid-column: 6 / span 5;
+        margin-left: var(--spacing-large);
       }
 
       > .primary-navigation {
@@ -93,6 +97,7 @@ $vm: var(--spacing-large);
       > .header__actions {
         grid-column: 1 / span 12;
         grid-row: 2;
+        margin-left: 0;
         margin-bottom: var(--spacing-medium);
 
         .form__control > .label .input {
@@ -219,8 +224,8 @@ $vm: var(--spacing-large);
     max-height: calc(100% - (2 * var(--row-height)));
     max-width: 100%;
     overflow-y: auto;
-    padding: 0 var(--spacing-extra-large) var(--spacing-extra-large)
-      var(--spacing-extra-large);
+    padding: 0 var(--spacing-large) var(--spacing-extra-large)
+      var(--spacing-large);
     position: fixed;
     right: 0;
     top: calc(2 * var(--row-height));
@@ -421,6 +426,7 @@ $vm: var(--spacing-large);
         display: flex;
         flex-direction: row;
         overflow: initial;
+        margin: 0 0 var(--spacing-medium) var(--spacing-large);
 
         .link--icon {
           gap: var(--spacing-large);
@@ -467,8 +473,9 @@ $vm: var(--spacing-large);
           margin: 0;
 
           .header__text-actions {
-            padding: var(--spacing-medium) 0 var(--spacing-extra-large);
-            margin: var(--spacing-medium) 0 0 0;
+            padding: 0 0 0 var(--spacing-large);
+            margin: var(--spacing-large) 0 0 0;
+            width: calc(100% - (var(--spacing-extra-large)));
 
             .p {
               display: flex;
@@ -484,7 +491,7 @@ $vm: var(--spacing-large);
           }
 
           .form--inline {
-            padding: 19px 0 var(--spacing-extra-large);
+            padding: 0 0 var(--spacing-extra-large);
             margin: 0;
           }
         }
@@ -522,7 +529,8 @@ $vm: var(--spacing-large);
 
               .subpage-list {
                 margin-top: var(--spacing-extra-large);
-                margin-left: 11px;
+                margin-bottom: var(--spacing-medium);
+                margin-left: var(--row-height-big);
                 display: grid;
                 height: auto;
                 overflow: initial;

diff --git a/src/open_inwoner/scss/components/Header/PrimaryNavigation.scss b/src/open_inwoner/scss/components/Header/PrimaryNavigation.scss
@@ -71,6 +71,11 @@
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
+        margin-bottom: var(--spacing-medium);
+
+        @media (min-width: 768px) {
+          margin-bottom: 0;
+        }
       }
 
       @media (min-width: 768px) {
@@ -97,6 +102,8 @@
   /// Dropdown triangles
 
   &.primary-navigation__main .subpage-list {
+    left: -11px;
+
     @media (min-width: 768px) {
       &::before {
         box-sizing: border-box;
@@ -210,11 +217,6 @@
 
   /// Categories and authenticated nested list
 
-  &__main > &__list > &__list-item &__list {
-    @media (min-width: 768px) {
-      left: -11px;
-    }
-  }
   &__authenticated > &__list > &__list-item &__list {
     @media (min-width: 768px) {
       right: 0;
@@ -283,6 +285,7 @@
   @media (max-width: 767px) {
     & > &__list > &__list-item > &__list.subpage-list {
       margin-bottom: var(--spacing-medium);
+      margin-left: 2em;
     }
   }
 }
diff --git a/src/open_inwoner/search/forms.py b/src/open_inwoner/search/forms.py
@@ -28,6 +28,10 @@ class SearchForm(forms.Form):
         label=_("Organizations"), required=False, widget=forms.CheckboxSelectMultiple
     )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["query"].widget.attrs["placeholder"] = _("Zoeken...")
+
 
 class FeedbackForm(forms.ModelForm):
     class Meta: