From 7c9a9a0873c4a3ecf6f2cbecd198e0c3e0e012a8 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 23 Jul 2019 12:00:39 +0430
Subject: [PATCH] Made actionbar responsive and standardized the components

---
 src/renderer/components/BaseInput.vue | 38 ++++++++----------
 src/renderer/components/Profile.vue   |  6 +--
 src/renderer/layouts/ActionBar.vue    | 57 +++++++++++++++++----------
 3 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/src/renderer/components/BaseInput.vue b/src/renderer/components/BaseInput.vue
index d46a19a..0da440e 100644
--- a/src/renderer/components/BaseInput.vue
+++ b/src/renderer/components/BaseInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-      <input type="search" v-bind="query" :placeholder="placeholder">
+      <input :type="type" :placeholder="placeholder">
       <slot></slot>
   </div>
 </template>
@@ -8,12 +8,7 @@
 <script>
 export default {
   name: 'BaseInput',
-  data () {
-    return {
-      query: null
-    }
-  },
-  props: ['placeholder']
+  props: ['placeholder', 'type']
 }
 </script>
 
@@ -21,29 +16,30 @@ export default {
 <style lang="sass" scoped>
   div
     display: flex
-    justify-content: center
-    width: 40%
-  
+    align-items: center
+    border: 1px solid lighten(grey, 40)
+    background-color: #f9f9f9
+    border-radius: 100px
+    padding: .4rem 1.5rem .4rem 0rem
+    transition: width 200ms
     input
-      width: 90%
       height: 100%
-      border-radius: 15px
-      padding: .4rem 1.5rem
       color: lighten(black, 30) 
-      border: 1px solid lighten(grey, 40)
-      margin-right: -2rem
-      background-color: #f9f9f9
-      transition: all .2s ease-in-out
+      padding: .2rem 0rem .2rem 1.5rem
+      min-width: unset
+      border: unset
+      background-color: unset
+      box-sizing: border-box
+      outline: none
+      flex-grow: 1
       &::placeholder
         color: #a8abb3
-        
-      &:focus
-        outline: none
-        width: 100%
 
     svg
       width: 1.2rem
       height: 1.2rem
+      min-width: 1.2rem
+      min-height: 1.2rem
       cursor: pointer
       fill: #3b3c3d
 </style>
diff --git a/src/renderer/components/Profile.vue b/src/renderer/components/Profile.vue
index b75087e..98e7e5f 100644
--- a/src/renderer/components/Profile.vue
+++ b/src/renderer/components/Profile.vue
@@ -21,12 +21,12 @@ export default {
     padding: 0
     margin-left: 1.5rem
     display: flex
-    flex-direction: row
+    align-items: center
     cursor: pointer
 
   &__image
-    width: 1.5rem
-    height: 1.5rem
+    width: 2rem
+    height: 2rem
     border-radius: 50%
 
   &__icon
diff --git a/src/renderer/layouts/ActionBar.vue b/src/renderer/layouts/ActionBar.vue
index b6c6b46..77e6958 100644
--- a/src/renderer/layouts/ActionBar.vue
+++ b/src/renderer/layouts/ActionBar.vue
@@ -1,21 +1,24 @@
 <template>
-    <div>
-        <BaseInput placeholder="Search">
-          <svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
-            <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
-              c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
-              C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
-              S32.459,40,21.983,40z"/>
-            <g></g>
-          </svg>
-        </BaseInput>
+    <section class="action-bar">
+        <div class="search-wrapper">
+          <BaseInput placeholder="Search" type="search">
+            <svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
+              <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
+                c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
+                C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
+                S32.459,40,21.983,40z"/>
+              <g></g>
+            </svg>
+          </BaseInput>
+        </div>
+        <div class="icon-wrapper">
+          <Notification :BadgeNumber="5"></Notification>
 
-        <Notification :BadgeNumber="5"></Notification>
+          <Profile></Profile>
 
-        <Profile></Profile>
-
-        <History></History>
-    </div>
+          <History></History>
+        </div>
+    </section>
 </template>
 
 <script>
@@ -31,13 +34,27 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-div
+section.action-bar
   display: flex
   padding: 1rem 2.5rem
   align-items: center
-
-@media(max-width: 1000px)    
-  div
-    flex-wrap: wrap
+  .search-wrapper
+    transition: width 200ms
+    transition: margin-top 100ms
+    flex-grow: 0.3
+  .icon-wrapper
+    flex-grow: 1
+    align-items: center
+    display: flex
+@media(max-width: 800px)
+  section.action-bar
+    .search-wrapper
+      flex-grow: 1
+@media(max-width: 600px)
+  section.action-bar
+    flex-direction: column-reverse
+    .search-wrapper
+      width: 100%
+      margin-top: 24px
 </style>