Logout button fix

bds/static/src/sass/bds.scss

@@ -1,5 +1,5 @@
 // Compilation command : 
-// sass -I shared/static/src/ --watch bds/static/src/sass/bds.scss bds/static/bds/css/bds.css
+// sass -I shared/static/src/ --watch bds/static/src/sass/bds.scss bds/static/bds/css/bds.css --style compressed
 
 $text: black;
 
@@ -25,6 +25,29 @@ a {
   padding: 0 1em;
   margin-bottom: 0;
 
+  #logout-mobile {
+    display: none;
+  }
+
+  @include mobile {
+    display: flex;
+    flex-wrap: wrap;
+
+    #logout-mobile {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    #logout {
+      display: none;
+    }
+
+    #search-input {
+      flex: 0 1 100%;
+    }
+  }
+
   // Workaround : `justify-content : <left/right>` pas encore supporté
   // Voir https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
   & :first-child, & :last-child {
@@ -37,6 +60,7 @@ a {
 
   input {
     border-radius: 0;
+    margin: 10px 0;
   }
 }
 

bds/templates/bds/nav.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 <nav id="search-bar" class="level">
-  <div class="level-item">
+  <div class="level-item" id="logo">
     <figure class="image is-64x64">
       <a href="{% url "bds:home" %}">
         <img src="{% static "bds/images/logo_square.svg" %}" alt="bds-logo">
@@ -10,7 +10,15 @@
     </figure>
   </div>
 
-  <div class="level-item">
+  <div class="level-item" id="logout-mobile">
+    <figure class="image is-64x64">
+      <a href="#TODO">
+        <img src="{% static "bds/images/logout.svg" %}" alt="logout">
+      </a>
+    </figure>
+  </div>
+
+  <div class="level-item" id="search-input">
     <input
       class="input"
       type="text"
@@ -21,7 +29,7 @@
     <div class="yourlabs-autocomplete"></div>
   </div>
 
-  <div class="level-item">
+  <div class="level-item" id="logout">
     <figure class="image is-64x64">
       <a href="#TODO">
         <img src="{% static "bds/images/logout.svg" %}" alt="logout">