diff --git a/src/client/assets/scripts/libraries/fontawesome-all.min.js b/src/client/assets/scripts/libraries/fontawesome-all.min.js index bff7ed3..a382743 100644 --- a/src/client/assets/scripts/libraries/fontawesome-all.min.js +++ b/src/client/assets/scripts/libraries/fontawesome-all.min.js @@ -1,5 +1,5 @@ /*! - * Font Awesome Free 5.0.10 by @fontawesome - https://fontawesome.com + * Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ -!function(){"use strict";var c={};try{"undefined"!=typeof window&&(c=window)}catch(c){}var l=(c.navigator||{}).userAgent,h=void 0===l?"":l,v=c,z=(~h.indexOf("MSIE")||h.indexOf("Trident/"),"___FONT_AWESOME___"),e=function(){try{return!0}catch(c){return!1}}(),a=[1,2,3,4,5,6,7,8,9,10],m=a.concat([11,12,13,14,15,16,17,18,19,20]);["xs","sm","lg","fw","ul","li","border","pull-left","pull-right","spin","pulse","rotate-90","rotate-180","rotate-270","flip-horizontal","flip-vertical","stack","stack-1x","stack-2x","inverse","layers","layers-text","layers-counter"].concat(a.map(function(c){return c+"x"})).concat(m.map(function(c){return"w-"+c}));var s=v||{};s[z]||(s[z]={}),s[z].styles||(s[z].styles={}),s[z].hooks||(s[z].hooks={}),s[z].shims||(s[z].shims=[]);var t=s[z],f=Object.assign||function(c){for(var l=1;l>>0;h--;)l[h]=c[h];return l}function X(c){return c.classList?D(c.classList):(c.getAttribute("class")||"").split(" ").filter(function(c){return c})}function Y(c,l){var h,v=l.split("-"),z=v[0],e=v.slice(1).join("-");return z!==c||""===e||(h=e,~d.indexOf(h))?null:e}function U(c){return(""+c).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}function K(h){return Object.keys(h||{}).reduce(function(c,l){return c+(l+": ")+h[l]+";"},"")}function G(c){return c.size!==I.size||c.x!==I.x||c.y!==I.y||c.rotate!==I.rotate||c.flipX||c.flipY}function J(c){var l=c.transform,h=c.containerWidth,v=c.iconWidth;return{outer:{transform:"translate("+h/2+" 256)"},inner:{transform:"translate("+32*l.x+", "+32*l.y+") "+" "+("scale("+l.size/16*(l.flipX?-1:1)+", "+l.size/16*(l.flipY?-1:1)+") ")+" "+("rotate("+l.rotate+" 0 0)")},path:{transform:"translate("+v/2*-1+" -256)"}}}var Q={x:0,y:0,width:"100%",height:"100%"},Z=function(c){var l=c.children,h=c.attributes,v=c.main,z=c.mask,e=c.transform,a=v.width,m=v.icon,s=z.width,t=z.icon,f=J({transform:e,containerWidth:s,iconWidth:a}),r={tag:"rect",attributes:k({},Q,{fill:"white"})},M={tag:"g",attributes:k({},f.inner),children:[{tag:"path",attributes:k({},m.attributes,f.path,{fill:"black"})}]},i={tag:"g",attributes:k({},f.outer),children:[M]},n="mask-"+B(),H="clip-"+B(),V={tag:"defs",children:[{tag:"clipPath",attributes:{id:H},children:[t]},{tag:"mask",attributes:k({},Q,{id:n,maskUnits:"userSpaceOnUse",maskContentUnits:"userSpaceOnUse"}),children:[r,i]}]};return l.push(V,{tag:"rect",attributes:k({fill:"currentColor","clip-path":"url(#"+H+")",mask:"url(#"+n+")"},Q)}),{children:l,attributes:h}},$=function(c){var l=c.children,h=c.attributes,v=c.main,z=c.transform,e=K(c.styles);if(0"+a.map(uc).join("")+""}var dc=function(){};function pc(c){return"string"==typeof(c.getAttribute?c.getAttribute(g):null)}var bc={replace:function(c){var l=c[0],h=c[1].map(function(c){return uc(c)}).join("\n");if(l.parentNode&&l.outerHTML)l.outerHTML=h+(O.keepOriginalSource&&"svg"!==l.tagName.toLowerCase()?"\x3c!-- "+l.outerHTML+" --\x3e":"");else if(l.parentNode){var v=document.createElement("span");l.parentNode.replaceChild(v,l),v.outerHTML=h}},nest:function(c){var l=c[0],h=c[1];if(~X(l).indexOf(O.replacementClass))return bc.replace(c);var v=new RegExp(O.familyPrefix+"-.*");delete h[0].attributes.style;var z=h[0].attributes.class.split(" ").reduce(function(c,l){return l===O.replacementClass||l.match(v)?c.toSvg.push(l):c.toNode.push(l),c},{toNode:[],toSvg:[]});h[0].attributes.class=z.toSvg.join(" ");var e=h.map(function(c){return uc(c)}).join("\n");l.setAttribute("class",z.toNode.join(" ")),l.setAttribute(g,""),l.innerHTML=e}};function gc(h,c){var v="function"==typeof c?c:dc;0===h.length?v():(m.requestAnimationFrame||function(c){return c()})(function(){var c=!0===O.autoReplaceSvg?bc.replace:bc[O.autoReplaceSvg]||bc.replace,l=sc.begin("mutate");h.map(c),l(),v()})}var yc=!1;var wc=null;var kc=function(c){var l=c.getAttribute("style"),h=[];return l&&(h=l.split(";").reduce(function(c,l){var h=l.split(":"),v=h[0],z=h.slice(1);return v&&0li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1em}.svg-inline--fa.fa-stack-2x{height:2em;width:2em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}";if("fa"!==l||h!==c){var z=new RegExp("\\.fa\\-","g"),e=new RegExp("\\."+c,"g");v=v.replace(z,"."+l+"-").replace(e,"."+h)}return v};var Qc=function(){function c(){y(this,c),this.definitions={}}return w(c,[{key:"add",value:function(){for(var l=this,c=arguments.length,h=Array(c),v=0;v>>0;h--;)l[h]=c[h];return l}function X(c){return c.classList?D(c.classList):(c.getAttribute("class")||"").split(" ").filter(function(c){return c})}function Y(c,l){var h,v=l.split("-"),z=v[0],e=v.slice(1).join("-");return z!==c||""===e||(h=e,~d.indexOf(h))?null:e}function U(c){return(""+c).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}function K(h){return Object.keys(h||{}).reduce(function(c,l){return c+(l+": ")+h[l]+";"},"")}function G(c){return c.size!==I.size||c.x!==I.x||c.y!==I.y||c.rotate!==I.rotate||c.flipX||c.flipY}function J(c){var l=c.transform,h=c.containerWidth,v=c.iconWidth;return{outer:{transform:"translate("+h/2+" 256)"},inner:{transform:"translate("+32*l.x+", "+32*l.y+") "+" "+("scale("+l.size/16*(l.flipX?-1:1)+", "+l.size/16*(l.flipY?-1:1)+") ")+" "+("rotate("+l.rotate+" 0 0)")},path:{transform:"translate("+v/2*-1+" -256)"}}}var Q={x:0,y:0,width:"100%",height:"100%"},Z=function(c){var l=c.children,h=c.attributes,v=c.main,z=c.mask,e=c.transform,m=v.width,a=v.icon,s=z.width,t=z.icon,f=J({transform:e,containerWidth:s,iconWidth:m}),M={tag:"rect",attributes:S({},Q,{fill:"white"})},r={tag:"g",attributes:S({},f.inner),children:[{tag:"path",attributes:S({},a.attributes,f.path,{fill:"black"})}]},H={tag:"g",attributes:S({},f.outer),children:[r]},i="mask-"+B(),n="clip-"+B(),V={tag:"defs",children:[{tag:"clipPath",attributes:{id:n},children:[t]},{tag:"mask",attributes:S({},Q,{id:i,maskUnits:"userSpaceOnUse",maskContentUnits:"userSpaceOnUse"}),children:[M,H]}]};return l.push(V,{tag:"rect",attributes:S({fill:"currentColor","clip-path":"url(#"+n+")",mask:"url(#"+i+")"},Q)}),{children:l,attributes:h}},$=function(c){var l=c.children,h=c.attributes,v=c.main,z=c.transform,e=K(c.styles);if(0"+m.map(uc).join("")+""}var dc=function(){};function pc(c){return"string"==typeof(c.getAttribute?c.getAttribute(g):null)}var bc={replace:function(c){var l=c[0],h=c[1].map(function(c){return uc(c)}).join("\n");if(l.parentNode&&l.outerHTML)l.outerHTML=h+(O.keepOriginalSource&&"svg"!==l.tagName.toLowerCase()?"\x3c!-- "+l.outerHTML+" --\x3e":"");else if(l.parentNode){var v=document.createElement("span");l.parentNode.replaceChild(v,l),v.outerHTML=h}},nest:function(c){var l=c[0],h=c[1];if(~X(l).indexOf(O.replacementClass))return bc.replace(c);var v=new RegExp(O.familyPrefix+"-.*");delete h[0].attributes.style;var z=h[0].attributes.class.split(" ").reduce(function(c,l){return l===O.replacementClass||l.match(v)?c.toSvg.push(l):c.toNode.push(l),c},{toNode:[],toSvg:[]});h[0].attributes.class=z.toSvg.join(" ");var e=h.map(function(c){return uc(c)}).join("\n");l.setAttribute("class",z.toNode.join(" ")),l.setAttribute(g,""),l.innerHTML=e}};function gc(h,c){var v="function"==typeof c?c:dc;0===h.length?v():(a.requestAnimationFrame||function(c){return c()})(function(){var c=!0===O.autoReplaceSvg?bc.replace:bc[O.autoReplaceSvg]||bc.replace,l=sc.begin("mutate");h.map(c),l(),v()})}var wc=!1;var yc=null;var Sc=function(c){var l=c.getAttribute("style"),h=[];return l&&(h=l.split(";").reduce(function(c,l){var h=l.split(":"),v=h[0],z=h.slice(1);return v&&0li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1em}.svg-inline--fa.fa-stack-2x{height:2em;width:2em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}";if("fa"!==l||h!==c){var z=new RegExp("\\.fa\\-","g"),e=new RegExp("\\."+c,"g");v=v.replace(z,"."+l+"-").replace(e,"."+h)}return v};var Qc=function(){function c(){w(this,c),this.definitions={}}return y(c,[{key:"add",value:function(){for(var l=this,c=arguments.length,h=Array(c),v=0;v { - const carousel = $("results-carousel") as JQuery & { - carousel(arg: string | number ): void; + const carousel = $("#results-carousel") as JQuery & { + carousel(arg: string | number): void; }; + let paused = false; + $(document).keydown((keydown) => { - if (keydown.key === "32") { - carousel.carousel("pause"); + if (keydown.which === 32) { + carousel.carousel(paused ? "cycle" : "pause"); + paused = !paused; } }); -/* - $("#playButton").click(() => { - carousel.carousel("cycle"); + + const candidateBlock = $(".candidates-block"); + + candidateBlock.each((_BLOCK_INDEX, blockElem) => { + const block = $(blockElem); + + const cards = block.find(".candidate-card"); + if (cards.length === 4) { + block.addClass("four-cards"); + } }); - $("#pauseButton").click(() => { - carousel.carousel("pause"); - })*/ + function isCandidateSlide(to: number): boolean { + return to % 2 === 1; + } + + carousel.on("slid.bs.carousel", + (slide: JQuery.Event & { from: number, to: number }) => { + if (isCandidateSlide(slide.to)) { + const pollID = (slide.to - 1) / 2; + const block = $(`#block-${pollID}`); + + const cards = block.find(".candidate-card"); + const winners = block.find(".winner"); + const crowns = winners.find(".crown"); + const notWinners = block.find(".not-winner"); + + cards.each((index, cardElem) => { + const card = $(cardElem); + + const votes = { votes: 0 }; + const numVotes = Number(card.attr("data-votes")); + + const voteSpan = $(`#votes-${pollID}-${index}`); + + $(votes).animate({ votes: numVotes }, { + duration: 2000, + easing: "swing", + step: () => { + voteSpan.text(Math.min(Math.ceil(votes.votes), numVotes)); + } + }); + }); + + window.setTimeout(() => { + winners.addClass("candidate-active"); + notWinners.addClass("candidate-inactive"); + crowns.fadeIn("slow"); + }, 2500); + } + + if (isCandidateSlide(slide.from)) { + const block = $(`#block-${(slide.from - 1) / 2}`); + + const winners = block.find(".winner"); + const notWinners = block.find(".not-winner"); + const crowns = winners.find(".crown"); + + winners.removeClass("candidate-active"); + notWinners.removeClass("candidate-inactive"); + crowns.fadeOut("fast"); + } + } + ); }); diff --git a/src/client/assets/styles/present.css b/src/client/assets/styles/present.css index 7e34e5b..64c4cbb 100644 --- a/src/client/assets/styles/present.css +++ b/src/client/assets/styles/present.css @@ -1,142 +1,79 @@ -#lock, -#confirm-page { - background-size: cover; - background-position: center; - background-color: black; -} - -q { - font-style: italic; - opacity: 0.8; -} - .carousel-item { height: 100vh; } -.candidates-block { - max-width: 80%; -} - -.candidates-vertical-align { - width: 100%; +.poll-detail-vertical-align, .candidates-vertical-align { height: 100%; + width: 100%; display: flex; align-items: center; } -.candidate-card { - min-width: 160px; - max-width: 20vw; - cursor: pointer; - position: relative; - transition: top 0.3s ease-out, opacity 0.3s ease-out; - -webkit-transition: top 0.3s ease-out, opacity 0.3s ease-out; - -moz-transition: top 0.3s ease-out, opacity 0.3s ease-out; - top: 0; - opacity: 0.7; -} - -.candidate-active { - top: -1rem; +.poll-text { + width: 100%; + padding: 3rem 0; + background-color: #FFF; } -.candidate-inactive { +q { + font-style: italic; opacity: 0.7; } -.thin-control { - width: 10%; -} - -.winner { - top: -1rem !important; - opacity: 1; - border-color: black; - border-width: 5px; - animation: winners 3s 1 ease-out; +.candidates-block { + width: 80%; + display: flex; + justify-content: center; + margin-bottom: 1.5rem; } -@-webkit-keyframes winners { - from { - transform: scale(0.75); - } - to { - transform: scale(1); - } +.candidates-block.four-cards { + width: 60%; } -.card-text { - animation: test 3s 1 ease-out; +.card-deck .candidate-card { + position: relative; + top: 0px; + min-width: 10.75rem; + max-width: 11rem; + margin: 0.7rem; + transition: top 1s ease-out; } -@-webkit-keyframes test { - from { - transform: scale(0.1); - } - to { - transform: scale(1); - } +.candidate-card.candidate-active { + top: -0.5rem; } -img { - height: 50vh; +.candidate-card.candidate-inactive { + opacity: 0.5; } -.h3, -.h4 { - color: black; +.candidate-card .card-body { + text-align: left; } -#lock { - position: fixed; - z-index: 50; - width: 100vw; - height: 100vh; - display: flex; - align-items: center; - top: 0; - transition: top 0.3s ease-out; +.votes { + font-size: 1rem; } -#lock-text-container { +.candidate-card table { width: 100%; - display: flex; - flex-direction: column; - background-color: rgb(255, 255, 50); - padding: 3rem 0; -} - -#left-arrow {} - -#confirm-text-container { - width: 80%; height: 100%; - background-color: #FFF; - padding: 1rem; -} - -#submit-button { - display: none; } -#notification { - z-index: 100; - background-color: #FFFF32; - position: fixed; - margin: 1rem auto; - padding: 1rem; - top: 0; - left: 50%; - transform: translateX(-50%); - display: none; - border-radius: 5px; +.candidate-card td { + padding: 0.5rem; } -.carousel-indicators li { - background-color: rgba(200, 200, 200, 0.5); +.candidate-card .card-body { + padding: 0; } -.carousel-indicators li.active { - background-color: rgba(200, 200, 200, 1); +.crown { + width: 100%; + position: absolute; + font-size: 3rem; + top: -2rem; + color: goldenrod; + display: none; } diff --git a/src/client/views/forms/election-edit.html b/src/client/views/forms/election-edit.html index f232ea9..1874da1 100644 --- a/src/client/views/forms/election-edit.html +++ b/src/client/views/forms/election-edit.html @@ -5,8 +5,8 @@ {% block mainContent %}
-
-
+
+

{{ pageTitle }}

{% if method === "PUT" %}