Added alerts functionality + modal UI

This commit is contained in:
NGPixel committed 2016-08-23 21:09:09 -04:00
1 parent aa740dea7a
commit 52c9821189
13 files changed
+206 -14

No files matched your search

+1 -1
View File
@@ -1 +1 @@
.card,.highlight,.highlight pre,.textarea,embed,img,object{max-width:100%}a,hr{padding:0}a,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}a,button,input,select,textarea{margin:0}a,input[type=radio],input[type=checkbox]{vertical-align:baseline}a:hover,strong,table th{color:#222324}body,pre,pre code{color:#69707a}.container,sub,sup{position:relative}.is-block,article,aside,details,figure,footer,header,hgroup,hr,nav,pre code,section,summary{display:block}.button,.delete,.input,.modal-close,.progress,.select select,.textarea{-moz-appearance:none;-webkit-appearance:none}.heading,.menu-label{letter-spacing:1px;text-transform:uppercase}abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,details,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font-weight:400;vertical-align:baseline;background:0 0}td,td img{vertical-align:top}code,html,pre,pre code{background-color:#f5f7fa}*,:after,:before{box-sizing:inherit}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}.is-clearfix:after,.notification:after,.select:after{content:" "}a{font-size:100%;background:0 0;color:#1fc8db;text-decoration:none;transition:none 86ms ease-out}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}th{font-weight:700;vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;border-top-color:#d3d6db;margin:40px 0}input,select{vertical-align:middle}input,select,textarea{font:99% sans-serif}table{border-collapse:collapse;border-spacing:0;font:100%;width:100%}sub,sup{font-size:75%;line-height:0}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}button,input[type=button]{width:auto;overflow:visible}@keyframes spin-around{from{transform:rotate(0)}to{transform:rotate(359deg)}}html{box-sizing:border-box;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}code,pre{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;font-family:"Source Code Pro",Monaco,Inconsolata,monospace;line-height:1.25}body{font-size:1rem;font-weight:400;line-height:1.428571428571429}code{font-size:12px;padding:1px 2px 2px}.button,.fa,.input,.textarea,table td,table th{vertical-align:top}small{font-size:11px}span{font-style:inherit;font-weight:inherit}.label,strong{font-weight:700}pre{white-space:pre;word-wrap:normal}.button,.nav-left,.table td.is-icon,.table th.is-icon,.tabs,.tag{white-space:nowrap}pre code{overflow-x:auto;padding:16px 20px}.box,.button{background-color:#fff}table td,table th{text-align:left}.fa,.has-text-centered{text-align:center}.block:not(:last-child),.box:not(:last-child),.content:not(:last-child),.highlight:not(:last-child),.level:not(:last-child),.message:not(:last-child),.notification:not(:last-child),.progress:not(:last-child),.subtitle:not(:last-child),.tabs:not(:last-child),.title:not(:last-child){margin-bottom:20px}@media screen and (min-width:980px){.container{margin:0 auto;max-width:960px}.container.is-fluid{margin:0 20px;max-width:none}.is-block-desktop{display:block!important}}.fa{font-size:21px}@media screen and (max-width:768px){.is-block-mobile{display:block!important}}@media screen and (min-width:769px){.is-block-tablet{display:block!important}}@media screen and (min-width:769px) and (max-width:979px){.is-block-tablet-only{display:block!important}}@media screen and (max-width:979px){.is-block-touch{display:block!important}}@media screen and (min-width:980px) and (max-width:1179px){.is-block-desktop-only{display:block!important}}@media screen and (min-width:1180px){.container{max-width:1200px}.is-block-widescreen{display:block!important}}.is-flex{display:flex}@media screen and (max-width:768px){.is-flex-mobile{display:flex!important}}@media screen and (min-width:769px){.is-flex-tablet{display:flex!important}}@media screen and (min-width:769px) and (max-width:979px){.is-flex-tablet-only{display:flex!important}}@media screen and (max-width:979px){.is-flex-touch{display:flex!important}}@media screen and (min-width:980px){.is-flex-desktop{display:flex!important}}@media screen and (min-width:980px) and (max-width:1179px){.is-flex-desktop-only{display:flex!important}}@media screen and (min-width:1180px){.is-flex-widescreen{display:flex!important}}.is-inline{display:inline}@media screen and (max-width:768px){.is-inline-mobile{display:inline!important}}@media screen and (min-width:769px)Line truncated
@charset "UTF-8";.card,.highlight,.highlight pre,.textarea,embed,img,object{max-width:100%}a,hr{padding:0}a,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}a,button,input,select,textarea{margin:0}a,input[type=radio],input[type=checkbox]{vertical-align:baseline}a:hover,strong,table th{color:#222324}body,pre,pre code{color:#69707a}.container,sub,sup{position:relative}.is-block,article,aside,details,figure,footer,header,hgroup,hr,nav,pre code,section,summary{display:block}.button,.delete,.input,.modal-close,.progress,.select select,.textarea{-moz-appearance:none;-webkit-appearance:none}.heading,.menu-label{letter-spacing:1px;text-transform:uppercase}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes pulse{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{0%,to{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:tLine truncated
+1 -1
View File
@@ -1 +1 @@
"use strict";jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-20});new Sticky(".stickyscroll")});
"use strict";function _classCallCheck(e,s){if(!(e instanceof s))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,s){for(var t=0;t<s.length;t++){var n=s[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(s,t,n){return t&&e(s.prototype,t),n&&e(s,n),s}}(),Alerts=function(){function e(){_classCallCheck(this,e);var s=this;s.mdl=new Vue({el:"#alerts",data:{children:[]},methods:{acknowledge:function(e){s.close(e)}}}),s.uidNext=1}return _createClass(e,[{key:"push",value:function(e){var s=this,t=_.defaults(e,{_uid:s.uidNext,class:"is-info",message:"---",sticky:!1,title:"---"});s.mdl.children.push(t),t.sticky||_.delay(function(){s.close(t._uid)},5e3),s.uidNext++}},{key:"pushError",value:function(e,s){this.push({class:"is-danger",message:s,sticky:!1,title:e})}},{key:"pushSuccess",value:function(e,s){this.push({class:"is-success",message:s,sticky:!1,title:e})}},{key:"close",value:function(e){var s=this,t=_.findIndex(s.mdl.children,["_uid",e]),n=_.nth(s.mdl.children,t);t>=0&&n&&(n.class+=" exit",s.mdl.children.$set(t,n),_.delay(function(){s.mdl.children.$remove(n)},500))}}]),e}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-20});var s=(new Sticky(".stickyscroll"),new Alerts);alertsData&&_.forEach(alertsData,function(e){s.push(e)})});