fix(style): responsive design

vuejs · Apr 5, 2019 · 6e503bf · 6e503bf
1 parent edbbc53
commit 6e503bf
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/devtools/App.vue b/src/devtools/App.vue
@@ -91,14 +91,14 @@
             <template slot="header">
               <VueIcon
                 icon="directions"
-                style="margin-right: 6px"
+                class="left-icon"
               />
               <span class="hide-below-wide">
                 Routing
               </span>
               <VueIcon
                 icon="keyboard_arrow_down"
-                style="margin-left: 6px"
+                class="right-icon"
               />
             </template>
             <template

diff --git a/src/devtools/components/GroupDropdown.vue b/src/devtools/components/GroupDropdown.vue
@@ -110,6 +110,13 @@ export default {
     padding 0 14px
     height 100%
     cursor pointer
+    @media (min-width: ($wide + 1px))
+      .left-icon
+        margin-right 6px
+      .right-icon
+        margin-left 6px
+    @media (max-width: $wide)
+      padding 0 6px 0 12px
   & /deep/ svg
     fill #2c3e50
 

diff --git a/src/devtools/style/variables.styl b/src/devtools/style/variables.styl
@@ -17,7 +17,7 @@ $pink = #881391
 $lightPink = #e36eec
 
 // The min-width to give icons text...
-$wide = 1050px
+$wide = 1100px
 
 // The min-height to give the tools a little more breathing room...
 $tall = 350px

diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
@@ -352,7 +352,7 @@ $inspected_color = #af90d5
   white-space nowrap
   span
     display none
-    @media (min-width: 1080px)
+    @media (min-width: 1400px)
       display inline
   .vue-ui-icon
     width 18px