Fixed element styling and removed auto width styling from Menu Page O…

…ptions See wpsharks/comet-cache#699
wpsharks · Sep 10, 2016 · dfeb32e · dfeb32e
1 parent 2fdc90f
commit dfeb32e
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 29 deletions.
diff --git a/src/client-s/css/menu-pages.min.css b/src/client-s/css/menu-pages.min.css
diff --git a/src/client-s/css/menu-pages.min.css.map b/src/client-s/css/menu-pages.min.css.map
diff --git a/src/client-s/css/menu-pages.scss b/src/client-s/css/menu-pages.scss
@@ -18,4 +18,3 @@
 /*![pro strip-from='lite']*/
 @import 'menu-pages/stats';
 /*![/pro]*/
-@import 'menu-pages/responsive';
diff --git a/src/client-s/css/menu-pages/_elements.scss b/src/client-s/css/menu-pages/_elements.scss
@@ -63,6 +63,18 @@
       background:             $img-screenshot-bg-color;
       border:                 1px solid $img-screenshot-border-color;
       box-shadow:             0 0 5px 0 $img-screenshot-box-shadow-color inset;
+
+      @media only screen and (max-device-width: 500px) {
+        float:                  right;
+        border-radius:          1em;
+        padding:                0.1em;
+        margin:                 0 0 1em 2em;
+        background:             $img-screenshot-bg-color;
+        border:                 1px solid $img-screenshot-border-color;
+        box-shadow:             0 0 5px 0 $img-screenshot-box-shadow-color inset;
+        height:                 auto;
+        width:                  55%;
+      }
     }
   }
 
@@ -76,6 +88,10 @@
 
   label {
     @include user-select(none);
+    @media only screen and (max-device-width: 500px) {
+      @include user-select(none);
+      margin:                 7em;
+    }
 
     &.switch-primary {
       font-size:              120%;
@@ -87,6 +103,17 @@
       background:             $primary-switch-bg-color;
       border:                 1px solid $primary-switch-border-color;
       box-shadow:            -1px -1px 0 0 $primary-switch-box-shadow-color-a inset, 1px 1px 0 0 $primary-switch-box-shadow-color-b inset;
+      @media only screen and (max-device-width: 500px) {
+        font-size:              100%;
+        margin:                 7em;
+        padding:                0.5em;
+        border-radius:          4px;
+        display:                inline;
+        color:                  $primary-switch-color;
+        background:             $primary-switch-bg-color;
+        border:                 1px solid $primary-switch-border-color;
+        box-shadow:            -1px -1px 0 0 $primary-switch-box-shadow-color-a inset, 1px 1px 0 0 $primary-switch-box-shadow-color-b inset;
+      }
     }
   }
 

diff --git a/src/client-s/css/menu-pages/_heading.scss b/src/client-s/css/menu-pages/_heading.scss
@@ -1,4 +1,7 @@
 .plugin-menu-page-heading {
+  @media only screen and (max-device-width: 500px) {
+    margin-right:             100px;
+  }
   .plugin-menu-page-restore-defaults,
   .plugin-menu-page-panel-togglers {
     float:                    right;
@@ -23,9 +26,34 @@
       line-height:            1.5em;
       margin:                 0 0.5em;
       display:                inline-block;
+
+      @media only screen and (max-device-width: 500px) {
+        text-decoration:        none;
+        line-height:            1.5em;
+        margin:                 0 3em 0 0;
+        display:                inline-block;
+      }
+    }
+  }
+  .plugin-menu-page-support-links{
+    float:                    right;
+    clear:                    right;
+    text-align:               right;
+    max-width:                400px;
+    margin:                   .5em 0 0;
+
+    a {
+      text-decoration:        none;
+      margin:                 0 0.5em;
+      display:                inline-block;
+
+      @media only screen and (max-device-width: 500px) {
+        text-decoration:        none;
+        margin:                 0 1em;
+        display:                inline-block;
+      }
     }
   }
-  .plugin-menu-page-support-links,
   .plugin-menu-page-mailing-list-links {
     float:                    right;
     clear:                    right;
@@ -37,6 +65,12 @@
       text-decoration:        none;
       margin:                 0 0.5em;
       display:                inline-block;
+
+      @media only screen and (max-device-width: 500px) {
+        text-decoration:        none;
+        margin:                 0 1em;
+        display:                inline-block;
+      }
     }
   }
   .plugin-menu-page-version {
@@ -45,5 +79,13 @@
     min-width: 350px;
     margin: 0.5em 0 0 0;
     text-align: right;
+
+    @media only screen and (max-device-width: 500px) {
+      float: right;
+      clear: right;
+      min-width: 350px;
+      margin: 0.5em 2em 0 0;
+      text-align: right;
+    }
   }
 }
diff --git a/src/client-s/css/menu-pages/_responsive.scss b/src/client-s/css/menu-pages/_responsive.scss
diff --git a/src/includes/classes/MenuPageOptions.php b/src/includes/classes/MenuPageOptions.php
@@ -305,11 +305,11 @@ public function __construct()
             echo '      <img src="'.esc_attr($this->plugin->url('/src/client-s/images/clear-cache-ops1-ss.png')).'" class="-clear-cache-ops-ss screenshot" />'."\n";
             echo '      <p>'.sprintf(__('Once %1$s is enabled, you will find this new option in your WordPress Admin Bar (screenshot on right). Clicking this button will clear the cache and you can start fresh at anytime (e.g., you can do this manually; and as often as you wish).', SLUG_TD), esc_html(NAME)).'</p>'."\n";
             echo '      <p>'.sprintf(__('Depending on the structure of your site, there could be many reasons to clear the cache. However, the most common reasons are related to Post/Page edits or deletions, Category/Tag edits or deletions, and Theme changes. %1$s handles most scenarios all by itself. However, many site owners like to clear the cache manually; for a variety of reasons (just to force a refresh).', SLUG_TD), esc_html(NAME)).'</p>'."\n";
-            echo '      <p><select name="'.esc_attr(GLOBAL_NS).'[saveOptions][cache_clear_admin_bar_enable]" data-target=".-cache-clear-admin-bar-options, .-cache-clear-admin-bar-roles-caps" style="width:auto;">'."\n";
+            echo '      <p><select name="'.esc_attr(GLOBAL_NS).'[saveOptions][cache_clear_admin_bar_enable]" data-target=".-cache-clear-admin-bar-options, .-cache-clear-admin-bar-roles-caps">'."\n";
             echo '          <option value="1"'.selected($this->plugin->options['cache_clear_admin_bar_enable'], '1', false).'>'.__('Yes, enable &quot;Clear Cache&quot; button in admin bar', SLUG_TD).'</option>'."\n";
             echo '          <option value="0"'.selected($this->plugin->options['cache_clear_admin_bar_enable'], '0', false).'>'.__('No, I don\'t intend to clear the cache manually.', SLUG_TD).'</option>'."\n";
             echo '         </select>'."\n";
-            echo '         <span class="plugin-menu-page-panel-if-enabled -cache-clear-admin-bar-options"><select name="'.esc_attr(GLOBAL_NS).'[saveOptions][cache_clear_admin_bar_options_enable]" class="-no-if-enabled" style="width:auto;">'."\n";
+            echo '         <span class="plugin-menu-page-panel-if-enabled -cache-clear-admin-bar-options"><select name="'.esc_attr(GLOBAL_NS).'[saveOptions][cache_clear_admin_bar_options_enable]" class="-no-if-enabled">'."\n";
             echo '             <option value="1"'.selected($this->plugin->options['cache_clear_admin_bar_options_enable'], '1', false).'>'.__('w/ dropdown options.', SLUG_TD).'</option>'."\n";
             echo '             <option value="2"'.selected($this->plugin->options['cache_clear_admin_bar_options_enable'], '2', false).'>'.__('w/ dropdown options in split menu.', SLUG_TD).'</option>'."\n";
             echo '             <option value="0"'.selected($this->plugin->options['cache_clear_admin_bar_options_enable'], '0', false).'>'.__('w/o dropdown options.', SLUG_TD).'</option>'."\n";