adding js and styles to the level navigation

changing the level navigation styles on click

diff --git a/dist/admin.css b/dist/admin.css
index d3ff4ff..e72616f 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}#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
+.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{background:#0080bb;color:#fff;padding:5px;font-size:10px;display:inline-block;max-width:120px;border-right:1px solid grey}ul#level-nav li:hover{cursor:pointer}ul#level-nav li:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}ul#level-nav li:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}ul#level-nav li.inactive{background:#ccc;color:grey}ul#level-nav li.active{background-color:#0080bb;color:#fff}#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 f8fae6a..98d45dc 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'),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
+(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 d=a(this).attr('id'),e=a(this).children('.level-amount').text(),f=a('#level-title').children('span');b.removeClass('active').addClass('inactive'),a(this).removeClass('inactive').addClass('active'),f.text(d+' - '+e),a(c).each(function(){a(this).hasClass(d)?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 e74ee4b..f17d04d 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -13,6 +13,9 @@ jQuery(function($){
         var amount = $(this).children('.level-amount').text();
         var level_title = $('#level-title').children('span');
         
+        level.removeClass("active").addClass("inactive");
+        $(this).removeClass("inactive").addClass("active");
+        
         level_title.text(level_id + ' - ' + amount);
         $(benefit).each(function(index, value){
             if( $(this).hasClass(level_id) ){

diff --git a/scss/_main.scss b/scss/_main.scss
index 09e8b8c..d7f29ea 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -81,13 +81,34 @@ ul#level-nav{
     margin: 0 0 50px 0 !important;
     list-style: none;
     li{
-        margin: 10px;
+        background: #0080BB;
+        color: white;
+        padding: 5px;
         font-size: 10px;
         display: inline-block;
         max-width: 120px;
+        border-right: 1px solid grey;
+/*        min-height: 30px;*/
         &:hover{
             cursor: pointer;
         }
+        &:first-child{
+            border-top-left-radius: 6px;
+            border-bottom-left-radius: 6px;
+        }
+        &:last-child{
+            border-top-right-radius: 6px;
+            border-bottom-right-radius: 6px;
+        }
+        
+    }
+    li.inactive{
+        background: #CCCCCC;
+        color: grey;
+    }
+    li.active{
+        background-color: #0080BB; 
+        color: white;
     }
 }
 #level-title{

diff --git a/setup/donation-output.php b/setup/donation-output.php
index 757307a..15bba54 100644 (file)
--- a/setup/donation-output.php
+++ b/setup/donation-output.php
@@ -13,17 +13,20 @@ 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>' . '<span class="level-amount">'.$level['value'] . "</li>";
-            
                 if((strpos($level['title'], strtoupper('enthusiast')) !== false)){
                     $initial = $level['title'];
                     $value   = $level['value'];
+                    $class = 'active';
+                }else{
+                    $class = 'inactive';
                 }
+                echo "<li class='$class' id='" . $level["id"] . "'>" . $level['title'] . '<br>' . '<span class="level-amount">'.$level['value'] . "</li>";
+            
+                
             }
-
-            echo '<div id="level-title"><span>'.$initial .' - ' . $value.'</span></div>';
-            echo '<div id="level-link-container"><a class="level-link" href="">Contribute Now</a></div>';
         echo '</ul>';
+        echo '<div id="level-title"><span>'.$initial .' - ' . $value.'</span></div>';
+        echo '<div id="level-link-container"><a class="level-link" href="">Contribute Now</a></div>';
         
     }
     function benefit_layout(){