temporary fix for #25 adds spacing to optimization buttons when they …

…collapse at bolt's media queries
cdowdy · Dec 22, 2017 · d5797a4 · d5797a4
1 parent 39400b8
commit d5797a4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/assets/js/components/buttons/TinypngDropdownButton.vue b/assets/js/components/buttons/TinypngDropdownButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="btn-group" :class="{ open: isVisible } ">
+    <div class="btn-group tinypng-button-group" :class="{ open: isVisible } ">
 
         <bolt-button type="button"
                      :disabled="disabled"

diff --git a/assets/js/components/buttons/TinypngOptimizeRenameButton.vue b/assets/js/components/buttons/TinypngOptimizeRenameButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="btn-group">
+    <div class="btn-group tinypng-button-group">
         <bolt-button type="button"
                       @click="openModal = true "
                      :id="file.filename"

diff --git a/web/tinypng.optimize.js b/web/tinypng.optimize.js
diff --git a/web/tinypng.styles.css b/web/tinypng.styles.css
@@ -140,4 +140,24 @@
     }
 }
 
+/*.tinypng-button-list {*/
+    /*list-style: none;*/
+    /*display: flex;*/
+    /*flex-flow: row wrap;*/
+    /*justify-content: space-between;*/
+/*}*/
+/*@media screen and (max-width: 969px){*/
+    /*.tinypng-button-list {*/
+        /*display: flex;*/
+        /*flex-direction: column;*/
+    /*}*/
+/*}*/
+
+@media screen and (max-width: 1143px){
+    .tinypng-button-group {
+        margin-bottom: 2.5rem;
+    }
+}
+
+