adding title bar for the event levels

adding js to control the title bars and the event level pricing display on click

diff --git a/dist/admin.css b/dist/admin.css
index 9273beb..d3ff4ff 100644 (file)
--- a/dist/admin.css
+++ b/dist/admin.css
@@ -1 +1 @@
-.display-block{display:block!important}.display-inline-block{display:inline-block!important}.display-inline{display:inline!important}#benefit-section{max-width:675px;margin:0 auto}@media (max-width:716px){#benefit-section{max-width:320px;margin:0 auto}}#benefit-section .benefit{border:2px solid #fff;background:#ccc;color:grey;border-radius:6px;line-height:1;padding:0;position:relative;box-shadow:5px 4px 7px 0;max-width:318px;margin:0 5px 15px}#benefit-section .benefit:hover{cursor:pointer}#benefit-section .benefit span.benefit-content{color:grey;float:left;display:inline-block;max-width:245px;padding:10px 10px 10px 5px}@media (max-width:640px){#benefit-section .benefit span.benefit-content{max-width:225px}}#benefit-section .benefit div.active-benefit{width:50px;display:inline-block;float:left;height:100%;border-right:1px solid #fff;font-size:25px;border-top-left-radius:6px;border-bottom-left-radius:6px;position:relative}#benefit-section .benefit div.active-benefit span{display:none;width:20px;margin:0 auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#benefit-section .show{background:#efefef}#benefit-section .show span.benefit-content{color:#000}#benefit-section .show div.active-benefit{color:#fff;background-color:#0080bb}#benefit-section .show div.active-benefit span{display:block}ul#level-nav{margin:0 0 50px!important;list-style:none}ul#level-nav li{margin:10px;font-size:10px;display:inline-block;max-width:120px}ul#level-nav li:hover{cursor:pointer}
\ No newline at end of file
+.display-block{display:block!important}.display-inline-block{display:inline-block!important}.display-inline{display:inline!important}#benefit-section{max-width:675px;margin:0 auto}@media (max-width:716px){#benefit-section{max-width:320px;margin:0 auto}}#benefit-section .benefit{border:2px solid #fff;background:#ccc;color:grey;border-radius:6px;line-height:1;padding:0;position:relative;box-shadow:5px 4px 7px 0;max-width:318px;margin:0 5px 15px}#benefit-section .benefit:hover{cursor:pointer}#benefit-section .benefit span.benefit-content{color:grey;float:left;display:inline-block;max-width:245px;padding:10px 10px 10px 5px}@media (max-width:640px){#benefit-section .benefit span.benefit-content{max-width:225px}}#benefit-section .benefit div.active-benefit{width:50px;display:inline-block;float:left;height:100%;border-right:1px solid #fff;font-size:25px;border-top-left-radius:6px;border-bottom-left-radius:6px;position:relative}#benefit-section .benefit div.active-benefit span{display:none;width:20px;margin:0 auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#benefit-section .show{background:#efefef}#benefit-section .show span.benefit-content{color:#000}#benefit-section .show div.active-benefit{color:#fff;background-color:#0080bb}#benefit-section .show div.active-benefit span{display:block}ul#level-nav{margin:0 0 50px!important;list-style:none}ul#level-nav li{margin:10px;font-size:10px;display:inline-block;max-width:120px}ul#level-nav li:hover{cursor:pointer}#level-title{margin-top:25px;border-radius:6px;background-color:#0080bb;position:relative;min-height:30px;width:100%}#level-title span{color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}body #level-link-container .level-link{display:block;padding:6px;background-color:#0080bb;color:#fff;text-decoration:none;border-radius:6px;margin-top:10px;margin:10px auto;max-width:125px}
\ No newline at end of file

diff --git a/dist/bundle.js b/dist/bundle.js
index beaf453..f8fae6a 100644 (file)
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -1 +1 @@
-(function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=0)})([function(a,b,c){c(1),a.exports=c(2)},function(){jQuery(document).foundation(),jQuery(function(a){console.log('asdf');var b=a('#level-nav').children('li'),c=a('.benefit');c.on('click',function(){console.log(a(this))}),b.on('click',function(){var b=a(this).attr('id');a(c).each(function(){console.log(a(this)),a(this).hasClass(b)?a(this).addClass('show'):a(this).removeClass('show')})})})},function(){}]);
\ No newline at end of file
+(function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='',b(b.s=0)})([function(a,b,c){c(1),a.exports=c(2)},function(){jQuery(document).foundation(),jQuery(function(a){console.log('asdf');var b=a('#level-nav').children('li'),c=a('.benefit');c.on('click',function(){console.log(a(this))}),b.on('click',function(){var b=a(this).attr('id'),d=a(this).children('.level-amount').text(),e=a('#level-title').children('span');e.text(b+' - '+d),a(c).each(function(){a(this).hasClass(b)?a(this).addClass('show'):a(this).removeClass('show')})})})},function(){}]);
\ No newline at end of file

diff --git a/js/main.js b/js/main.js
index 7ba65da..e74ee4b 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -10,8 +10,11 @@ jQuery(function($){
     
     level.on("click", function(){
         var level_id = $(this).attr('id');
+        var amount = $(this).children('.level-amount').text();
+        var level_title = $('#level-title').children('span');
+        
+        level_title.text(level_id + ' - ' + amount);
         $(benefit).each(function(index, value){
-            console.log( $(this) );
             if( $(this).hasClass(level_id) ){
                 $(this).addClass("show");
             } else {

diff --git a/scss/_main.scss b/scss/_main.scss
index a99c68b..09e8b8c 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -89,4 +89,32 @@ ul#level-nav{
             cursor: pointer;
         }
     }
+}
+#level-title{
+    margin-top: 25px;
+    border-radius: 6px;
+    background-color: #0080BB; 
+    position: relative;
+    min-height: 30px;
+    width: 100%;
+    span{
+        color: white;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+body #level-link-container{
+    .level-link{
+        display: block;
+        padding: 6px;
+        background-color: #0080BB; 
+        color: white;
+        text-decoration: none;
+        border-radius: 6px;
+        margin-top: 10px;
+        margin: 10px auto 10px auto;
+        max-width: 125px;
+    }
 }
\ No newline at end of file

diff --git a/setup/donation-output.php b/setup/donation-output.php
index 0c437ac..1096edd 100644 (file)
--- a/setup/donation-output.php
+++ b/setup/donation-output.php
@@ -13,14 +13,22 @@ class Donation_Output{
     function level_layout(){
         echo '<ul id="level-nav">';
             foreach($this->donation_levels as $level){
-                echo "<li id='" . $level["id"] . "'>" . $level['title'] . '<br>' . $level['value'] . "</li>";
+                echo "<li id='" . $level["id"] . "'>" . $level['title'] . '<br>' . '<span class="level-amount">'.$level['value'] . "</li>";
             }
+            echo '<div id="level-title"><span>'.$level['title'] .' - ' . $level['value'].'</span></div>';
+            echo '<div id="level-link-container"><a class="level-link" href="">Contribute Now</a></div>';
         echo '</ul>';
+        
     }
     function benefit_layout(){
         echo '<div id="benefit-section" class="grid-x grid-padding-x small-up-1 medium-up-1 large-up-2">';
             foreach($this->donation_benefits as $donation){
-                echo '<div class="cell benefit '. $donation['levels']  .'">'
+                if((strpos($donation['levels'], strtoupper('enthusiast')) !== false)){
+                    $class = 'show';
+                } else {
+                    $class = '';
+                }
+                echo '<div class="'. $class . ' cell benefit '. $donation['levels']  .'">'
                  . '<div class="active-benefit"><span>✓</span></div>'
                  . '<span class="benefit-content">'. $donation['benefit'] .'</span>'
                  . '</div>';