Added choice of position

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v1.0.3
+## 04/28/2021
+
+1. [](#new)
+    * Added option to choose banner location (top or bottom)
+
 # v1.0.2
 ## 04/28/2021
 

README.md

@@ -2,6 +2,8 @@
 
 The **Custom Banner** Plugin is an extension for [Grav CMS](http://github.com/getgrav/grav) which adds a custom banner to your Grav site.
 
+![Example Screenshots](images/examples.jpg)
+
 ## Installation
 
 Installing the Custom Banner plugin can be done in one of three ways: The GPM (Grav Package Manager) installation method lets you quickly install the plugin with a simple terminal command, the manual method lets you do so via a zip file, and the admin method lets you do so via the Admin Plugin.
@@ -39,6 +41,7 @@ Here is the default configuration and an explanation of available options:
 ```yaml
 enabled: true
 content: Custom Text added by the <b>Custom Banner</b> plugin (disable plugin to remove)
+position: bottom
 button-text: Click me...
 button-url: /route-to-page/you-want-to/link-to
 dismiss-text: Dismiss
@@ -67,4 +70,5 @@ I pretty much copied the style and format of the premium banner from the [Grav S
 ## To Do
 
 - [x] Add a button to make the banner hide-able (for the session? by setting a cookie?)
+- [ ] Add more position options, such as left and right
 - [ ] Translations (help needed)

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Custom Banner
 slug: custom-banner
 type: plugin
-version: 1.0.2
+version: 1.0.3
 description: Add a custom banner to your Grav site
 icon: bookmark
 author:
@@ -39,6 +39,14 @@ form:
           default: Custom Text added by the <b>Custom Banner</b> plugin (disable plugin to remove)
           label: PLUGIN_CUSTOM_BANNER.CONTENT
           help: PLUGIN_CUSTOM_BANNER.CONTENT_HELP
+        position:
+          type: select
+          default: 'bottom'
+          label: PLUGIN_CUSTOM_BANNER.POSITION
+          help: PLUGIN_CUSTOM_BANNER.POSITION_HELP
+          options:
+            bottom: 'Bottom'
+            top: 'Top'
         button-text:
           type: text
           default: Click me...

css/custom-banner.css

@@ -1,6 +1,5 @@
 div.custom-banner-container {
   position: fixed;
-  bottom: 1rem;
   width: 100%;
   z-index: 10000;
 }
@@ -25,6 +24,7 @@ a.button.custom-banner-button {
 }
 
 a.button.custom-banner-dismiss {
-  margin-right: 1em;
+  margin: auto 1em auto auto;
+  border-radius: 4px;
   filter: grayscale(1);
 }

custom-banner.php

@@ -84,15 +84,16 @@ public function onOutputGenerated(): void
         $button_text = $config['button-text'];
         $button_url = $config['button-url'];
         $dismiss_text = $config['dismiss-text'];
-        $dismiss_button = ( $config['dismiss-button'] ? 'inline-block' : 'none' );
+        $dismiss_button = ( $config['dismiss-button'] ? 'unset' : 'none' );
 
         // Style
+        $position = $config['position'];
         $bg_colour = $config['bg-colour'];
         $fg_colour = $config['fg-colour'];
         $box_shadow = ($config['box-shadow'] ? '5px 5px 0.75rem gray' : 'none');
 
         $banner = <<<EOD
-        <div class="custom-banner-container">
+        <div class="custom-banner-container" style="$position: 1rem;">
             <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>

custom-banner.yaml

@@ -1,5 +1,6 @@
 enabled: true
 content: Custom Text added by the <b>Custom Banner</b> plugin (disable plugin to remove)
+position: bottom
 button-text: Click me...
 button-url: /route-to-page/you-want-to/link-to
 dismiss-text: Dismiss

languages.yaml

@@ -2,21 +2,23 @@ en:
   PLUGIN_CUSTOM_BANNER:
     CONTENT: Banner content
     CONTENT_HELP: Banner content must be valid HTML
-    BG_COLOUR: Background colour
+    BG_COLOUR: Banner (background) colour
     BG_COLOUR_HELP: The colour of the banner background
-    FG_COLOUR: Foreground colour
+    FG_COLOUR: Text (foreground) colour
     FG_COLOUR_HELP: The colour of the banner text
-    BOX_SHADOW: Box shadow
+    BOX_SHADOW: Show box shadow
     BOX_SHADOW_HELP: Display a box shadow beneath the banner
     BUTTON_TEXT: Button text
     BUTTON_TEXT_HELP: Button text must be valid HTML
     BUTTON_URL: Button URL
     BUTTON_URL_HELP: The location that the button links to
-    DISMISS_TEXT: Dismiss text
+    DISMISS_TEXT: Dismiss button text
     DISMISS_TEXT_HELP: Dismiss text must be valid HTML
-    DISMISS_BUTTON: Dismiss button
+    DISMISS_BUTTON: Show dismiss button
     DISMISS_BUTTON_HELP: Show a dismiss button to hide the banner for 30 mins
     EXCLUDE_PAGES: Excluded pages
     EXCLUDE_PAGES_HELP: Choose any pages you don't want the banner to appear on
     APPEARANCE: Appearance
     BEHAVIOUR: Behaviour
+    POSITION: Banner position
+    POSITION_HELP: Choose where the banner should appear