From 9dd5149a2561d62266124f36ab2404817aa826d5 Mon Sep 17 00:00:00 2001
From: Matheus Fernandes <matheus.souza.fernandes@gmail.com>
Date: Thu, 3 Mar 2016 15:15:21 -0300
Subject: [PATCH] Logout button and search repository are now appearing in
 small devices

Fixes: #772

Signed-off-by: Matheus Fernandes <matheus.souza.fernandes@gmail.com>
---
 app/assets/stylesheets/buttons.scss           |  3 +-
 app/assets/stylesheets/layout.scss            | 28 ++++++++++++++++++-
 app/views/layouts/application.html.slim       |  1 +
 app/views/shared/_header.html.slim            | 15 +++++-----
 app/views/shared/_search.html.slim            |  8 ++++++
 .../assets/stylesheets/lifeitup/buttons.scss  |  4 +--
 6 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 app/views/shared/_search.html.slim

diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index 8a63e30a6..90d13d4c3 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/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);
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index aade93947..f2fca90c3 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/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;
+  }
+}
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index 87968c280..99e55e643 100644
--- a/app/views/layouts/application.html.slim
+++ b/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
diff --git a/app/views/shared/_header.html.slim b/app/views/shared/_header.html.slim
index 0cccf8a6b..8ca2c5ecf 100644
--- a/app/views/shared/_header.html.slim
+++ b/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
diff --git a/app/views/shared/_search.html.slim b/app/views/shared/_search.html.slim
new file mode 100644
index 000000000..aa5c9e018
--- /dev/null
+++ b/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
diff --git a/vendor/assets/stylesheets/lifeitup/buttons.scss b/vendor/assets/stylesheets/lifeitup/buttons.scss
index 05bc5e7d2..effbe83e6 100644
--- a/vendor/assets/stylesheets/lifeitup/buttons.scss
+++ b/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