Improved mobile formatting of action buttons

aricooperdavis · Jul 24, 2021 · b897ed1 · b897ed1
1 parent 8bc65ec
commit b897ed1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v1.0.6
+## 07/24/2021
+
+1. [](#improved)
+    * Improved formatting of banner action buttons on mobile devices
+
 # v1.0.5
 ## 06/03/2021
 

diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,7 +1,7 @@
 name: Custom Banner
 slug: custom-banner
 type: plugin
-version: 1.0.5
+version: 1.0.6
 description: Add a custom banner to your Grav site
 icon: bookmark
 author:

diff --git a/css/custom-banner.css b/css/custom-banner.css
@@ -18,13 +18,18 @@ p.custom-banner-content {
   font-size: 120%;
 }
 
+div.custom-banner-actions {
+  text-align: center;
+  margin: auto 0;
+}
+
 a.button.custom-banner-button {
-  margin: auto;
-  border-radius: 4px;
+  /* Style the action button to your liking */
+  margin: 0.125rem 0 0.25rem 0.125rem;
 }
 
 a.button.custom-banner-dismiss {
-  margin: auto 1em auto auto;
-  border-radius: 4px;
+  /* Style the dismiss button to your liking */
+  margin: 0 0.125rem 0.125rem 0;
   filter: grayscale(1);
 }
diff --git a/custom-banner.php b/custom-banner.php
@@ -104,7 +104,7 @@ public function onOutputGenerated(): void
         $button_text = $config['button-text'];
         $button_url = $config['button-url'];
         $dismiss_text = $config['dismiss-text'];
-        $dismiss_button = ($config['dismiss-button'] ? 'unset' : 'none');
+        $dismiss_button = ($config['dismiss-button'] ? 'inline-block' : 'none');
 
         // Style
         $position = $config['position'];
@@ -117,8 +117,10 @@ public function onOutputGenerated(): void
             <div class="custom-banner-body" style="box-shadow: $box_shadow; background-color: $bg_colour;">
                 <p class="custom-banner-content" style="color: $fg_colour;">$content</p>
                 <span style="flex-grow: 1; min-width: 1rem;"></span>
-                <a class="button custom-banner-dismiss" href="javascript:void(0)" onclick="custom_button_dismiss();" style="display: $dismiss_button;">$dismiss_text</a>
-                <a class="button custom-banner-button" href="$button_url">$button_text</a>
+                <div class="custom-banner-actions">
+                    <a class="button custom-banner-dismiss" href="javascript:void(0)" onclick="custom_button_dismiss();" style="display: $dismiss_button;">$dismiss_text</a>
+                    <a class="button custom-banner-button" href="$button_url">$button_text</a>
+                </div>
             </div>
         </div>
         EOD;