Logout button and search repository are now appearing in small devices

Fixes: #772

Signed-off-by: Matheus Fernandes <[email protected]>

app/assets/stylesheets/buttons.scss

@@ -2,9 +2,10 @@ header .btn-default {
   @include button-variant($white, transparent, $white);
 }
 
-header #logout.btn.btn-default {
+header .topbar.btn.btn-default {
   background: rgba(255,255,255,0.2);
   border: 1px solid transparent;
+  padding-top: 1rem;
   &:hover {
     color: $second-colour;
     background: rgba(255,255,255,0.7);

app/assets/stylesheets/layout.scss

@@ -3,6 +3,7 @@ header {
   height: 60px;
   .logo-header {
     height: 60px;
+    width: auto;
   }
   .user-header {
     padding: 10px 15px;
@@ -14,10 +15,13 @@ header {
       color: $white;
     }
   }
-  .username-logout {
+  .button-container {
     display: inline-block;
     vertical-align: top;
   }
+  .username-logout {
+    @extend .button-container;
+  }
   .search-header {
     position: relative;
     display: inline-block;
@@ -128,3 +132,25 @@ footer {
 i.fa {
   padding: 0 0.3em;
 }
+
+.shared-search {
+  margin-bottom: 1rem;
+  width: 100%;
+  input {
+    border-radius: 4px 0 0 4px;
+    background: rgba(255, 255, 255, 0.3);
+    border-left: 1px solid $primary-colour;
+    border-top: 1px solid $primary-colour;
+    border-bottom: 1px solid $primary-colour;
+    border-right: 0px solid $primary-colour;
+    color: $primary-colour;
+  }
+  button.btn.btn-default {
+    border-radius: 0 4px 4px 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-left: 0px solid $primary-colour;
+    border-top: 1px solid $primary-colour;
+    border-bottom: 1px solid $primary-colour;
+    border-right: 1px solid $primary-colour;
+  }
+}

app/views/layouts/application.html.slim

@@ -35,6 +35,7 @@ html
     .container-fluid
       = render 'shared/aside'
       section
+        = render 'shared/search'
         = render 'shared/notifications'
         = yield
   footer

app/views/shared/_header.html.slim

@@ -10,11 +10,12 @@
         = search_field_tag 'search', params[:search], class: 'form-control search-field', placeholder: 'Search repository'
         button[type="submit" class="btn btn-default"]
           i.fa.fa-search
-  .username-logout
-    .hidden-xs
-      = user_image_tag(current_user.email)
+  .button-container
+    .username-logout
+      .hidden-xs
+        = user_image_tag(current_user.email)
 
-      = link_to edit_user_registration_path, class: 'nav-a' do
-        span.username = current_user.username
-    = link_to destroy_user_session_path, method: :delete, class: 'btn btn-default', id: 'logout' do
-      i.fa.fa-sign-out
+        = link_to edit_user_registration_path, class: 'nav-a' do
+          span.username = current_user.username
+      = link_to destroy_user_session_path, method: :delete, class: 'topbar btn btn-default', id: 'logout' do
+        i.fa.fa-sign-out

app/views/shared/_search.html.slim

@@ -0,0 +1,8 @@
+.row
+  .col-xs-12.visible-xs
+    = form_tag search_index_path, method: 'get', class: 'input-group shared-search' do
+      .input-group.shared-search
+        = search_field_tag 'search', params[:search], class: 'form-control', placeholder: 'Search repository'
+        span.input-group-btn
+          button.btn.btn-default
+            i.fa.fa-search

vendor/assets/stylesheets/lifeitup/buttons.scss

@@ -39,8 +39,8 @@
 #open_main_menu {
   display: block;
   color: $white;
-  padding-top: 7px;
-  margin-right: 10px;
+  padding-top: 1rem;
+  font-size: 2.5rem;
   cursor: pointer;
   &:hover {
     color: #000