From b9979d10e9d9f183aaedb173a2c47360eb47ffdc Mon Sep 17 00:00:00 2001 From: Simon Bruder Date: Sat, 21 Apr 2018 20:53:50 +0000 Subject: [PATCH] add animation, form validation, final step and test javascript --- css/style.less | 64 ++++++++++++++++++++++++++++++++++++------ index.html | 75 +++++++++++++++++++++----------------------------- script.js | 45 ++++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+), 52 deletions(-) create mode 100644 script.js diff --git a/css/style.less b/css/style.less index 1d30cc9..b578c69 100644 --- a/css/style.less +++ b/css/style.less @@ -1,7 +1,7 @@ @color-1: #047E7C; @color-2: #0C6D74; @color-3: #0C6D74; -@color-bg: #F1F2E3; +@color-white: #F1F2E3; @color-grey: #787970; /* ======== MIXINS ======== */ @@ -19,17 +19,31 @@ box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5); } +/* ======== ANIMATIONS ======== */ + +@keyframes rotate-step-number { + 0% { + transform: rotate3d(0,0,0,0deg); + } + 50% { + transform: rotate3d(45, 45, 1, 90deg); + } + 100% { + transform: rotate3d(0,0,0,0deg); + } +} + /* ======== ======== */ body { cursor: default; - background-color: @color-bg; + background-color: @color-white; font-family: "Source Sans Pro", sans; font-weight: 300; } header { - background-color: @color-bg; + background-color: @color-white; padding: 1rem; h1 { @@ -41,7 +55,7 @@ header { } #steps { - color: @color-bg; + color: @color-white; .step-heading { .top-bottom-shadow; @@ -53,17 +67,19 @@ header { display: inline-block; margin: 0 0.5em; text-align: center; + font-weight: 400; width: 40px; height: 40px; border: 0px; border-radius: 50%; + + transition: background-color 0.5s, transform 0.5s; } .step-number:not(.done) { - font-weight: 400; - background-color: @color-bg; + background-color: @color-white; color: black; .number { display: inline; @@ -74,8 +90,11 @@ header { } .step-number.done { + &:not(.final) { // prevents animation to be shown at final step + animation: rotate-step-number 0.5s; + } background-color: #8ECA63; // green - color: @color-bg; + color: @color-white; .number { display: none; } @@ -105,6 +124,12 @@ header { color: rgba(255, 255, 255, 0.5); opacity: 1; } + // show numbers without spin box + -moz-appearance:textfield; + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + } } } @@ -113,7 +138,11 @@ header { height: 96px; padding-top: 2em; - a { + button { + /* unstyle button */ + background-color: transparent; + color: @color-white; + border: none; span { display: block; font-size: 24px; @@ -151,7 +180,7 @@ header { footer { .top-bottom-shadow; - background-color: @color-bg; + background-color: @color-white; padding: 2em 30vw; text-align: center; a { @@ -159,3 +188,20 @@ footer { border-bottom: dotted 1px rgba(0,0,0,0.25); } } + +/* ======== FINAL STEP ======== */ + +.step.final { + pre.address { + font-family: inherit; + font-size: inherit; + color: @color-white; + } + .download-wrapper { + text-align: center; + } + a { + color: @color-white; + border-bottom: dotted 1px rgba(0,0,0,0.25); + } +} diff --git a/index.html b/index.html index 9d1b400..884045a 100644 --- a/index.html +++ b/index.html @@ -39,32 +39,32 @@
- +
- +
- +
- +
- +
+
+ +
-
- -
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..eb52d20 --- /dev/null +++ b/script.js @@ -0,0 +1,45 @@ +const num_steps = 1; + +_.forEach(_.range(num_steps), function(value) { + $('#step-' + (value+1) + ' form').submit(function(event) { + $('#step-' + (value+2) ).collapse('show'); + $('#step-' + (value+1) + '-heading .step-number').addClass('done'); + event.preventDefault(); + }); +}); + +function gen() { + var model = {}; + _.forEach(_.range(num_steps), function(value) { + _.each($('#step-' + (value + 1) + ' form').serializeArray(), function(value) { + model[value.name] = value.value; + }); + }); + var docDefinition = { + content: [ + { text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Winsheim', fontSize: 20, margin: [0,0,0,20] }, + { + text: [ + 'Name: ', + { text: model.givenname + ' ' + model.surname, bold: true }, + ] + }, + { + text: [ + 'Adresse: ', + { text: model.address, bold: true }, + ] + }, + { + text: [ + 'PLZ + Ort: ', + { text: model.zip + ' ' + model.place, bold: true }, + ] + } + ], + pageSize: 'A4', + pageMargins: [ 62.3622, 60, 62.3622, 60 ] + }; + + pdfMake.createPdf(docDefinition).download('Mitgliedsantrag FabLab NEA.pdf'); +}