Add option to wrap in a container

jakecausier · Jan 28, 2021 · b0f41a3 · b0f41a3
1 parent 8ea326b
commit b0f41a3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/admin/settings.php b/admin/settings.php
@@ -66,6 +66,13 @@ function scn_cookie_notice_settings_metabox()
                 'type'    => 'text_url',
             ) );
 
+            $cmb_options->add_field( array(
+                'name' => __( 'Wrap content in container?', 'scn' ),
+                'desc' => __( '<p>When enabled, content will be wrapped in a container as not to touch the edges of the screen. Useful to avoid conflicts with elements that attach to the screen edge.</p>', 'scn' ),
+                'id'   => 'cookie_notice_use_container',
+                'type' => 'checkbox',
+            ) );
+
         $cmb_options->add_field( array(
         	'name' => 'Style',
         	'desc' => 'Change these settings to match your site theme.',

diff --git a/css/cookie-notice.css b/css/cookie-notice.css
@@ -8,6 +8,9 @@
   width: 100%;
   height: auto;
 }
+#cookie-notice .scn-wrapper-container {
+  margin: 0 auto;
+}
 #cookie-notice p {
   margin: 0;
   padding: 0;
@@ -34,6 +37,7 @@
   cursor: pointer;
   margin: 0 0.5rem;
   padding: 0.5rem 0.75rem;
+  white-space: nowrap;
   background-color: #FFFFFF;
   color: #000000;
   transition: all 150ms;
@@ -43,6 +47,27 @@
   background-color: #EEEEEE;
   transition: all 150ms;
 }
+@media only screen and (min-width: 768px) {
+  #cookie-notice .scn-wrapper-container {
+    padding: 0 1rem;
+    max-width: 640px;
+  }
+}
+@media only screen and (min-width: 896px) {
+  #cookie-notice .scn-wrapper-container {
+    max-width: 768px;
+  }
+}
+@media only screen and (min-width: 1152px) {
+  #cookie-notice .scn-wrapper-container {
+    max-width: 1024px;
+  }
+}
+@media only screen and (min-width: 1408px) {
+  #cookie-notice .scn-wrapper-container {
+    max-width: 1280px;
+  }
+}
 @media only screen and (max-width: 1023px) {
   #cookie-notice .scn-container {
     flex-flow: row wrap;

diff --git a/includes/cookie-notice.php b/includes/cookie-notice.php
@@ -1,4 +1,7 @@
 <footer id="cookie-notice" style="background-color: <?php echo scn_get_option('cookie_notice_bg_color') ?: '#000000' ?>; color: <?php echo scn_get_option('cookie_notice_text_color') ?: '#FFFFFF' ?>">
+    <?php if ( scn_get_option( 'cookie_notice_use_container' ) ) : ?>
+        <div class="scn-wrapper-container">
+    <?php endif; ?>
     <div class="scn-container">
         <div class="scn-notice">
             <?php echo wpautop(scn_get_option('cookie_notice_text') ?: 'Please configure this text in your admin panel under Tools > Cookie Notice') ?>
@@ -8,4 +11,7 @@
             <a class="scn-btn" type="button" id="cookie-notice-accept"><?php echo (scn_get_option('cookie_notice_btn_accept_text')) ?: 'Accept' ?></a>
         </div>
     </div>
+     <?php if ( scn_get_option( 'cookie_notice_use_container' ) ) : ?>
+        </div>
+    <?php endif; ?>
 </footer>