From fa1dcdad282dfb8b66690290ca9b490b755cecd8 Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Mon, 20 Nov 2017 13:10:19 -0500 Subject: [PATCH] adding js and styles to the level navigation changing the level navigation styles on click --- dist/admin.css | 2 +- dist/bundle.js | 2 +- js/main.js | 3 +++ scss/_main.scss | 23 ++++++++++++++++++++++- setup/donation-output.php | 13 ++++++++----- 5 files changed, 35 insertions(+), 8 deletions(-) diff --git a/dist/admin.css b/dist/admin.css index d3ff4ff..e72616f 100644 --- 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 --- 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 --- 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 --- 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 --- a/setup/donation-output.php +++ b/setup/donation-output.php @@ -13,17 +13,20 @@ class Donation_Output{ function level_layout(){ echo ''; + echo '
'.$initial .' - ' . $value.'
'; + echo ''; } function benefit_layout(){ -- 2.17.1