be 4.0

.eslintrc

@@ -0,0 +1,16 @@
+---
+# vim: ft=yaml
+
+globals:
+  $: true
+  _: true
+  pdfMake: true
+
+parserOptions:
+  # use ES6
+  ecmaVersion: 6
+
+# default rules
+extends:
+  # https://github.com/standard/standard/blob/master/RULES.md
+  - standard

.gitignore

@@ -1 +1,2 @@
-**.css
+build
+node_modules

.lesshintrc

@@ -0,0 +1,4 @@
+// vim: set ft=json:
+{
+	"idSelector": false
+}

Makefile

@@ -1,2 +0,0 @@
-css/style.css: css/style.less
-	lesscpy -x css/style.less css/style.css

gulpfile.js

@@ -0,0 +1,76 @@
+const gulp = require('gulp');
+
+// gulp plugins
+const less = require('gulp-less');
+const htmlmin = require('gulp-htmlmin');
+const minifyCSS = require('gulp-csso');
+const minify = require('gulp-minify');
+const eslint = require('gulp-eslint');
+const lesshint = require('gulp-lesshint');
+
+// other packages
+const browserSync = require('browser-sync').create();
+
+gulp.task('html', function(){
+  return gulp.src('src/index.html')
+    .pipe(minifyCSS())
+    .pipe(gulp.dest('build'))
+});
+
+gulp.task('css', function(){
+  return gulp.src('src/less/*.less')
+    .pipe(lesshint())
+    .pipe(lesshint.reporter())
+    .pipe(less())
+    .pipe(minifyCSS())
+    .pipe(gulp.dest('build/css'))
+});
+
+gulp.task('js', function(){
+  return gulp.src('src/js/*.js')
+    .pipe(eslint({
+      "globals": [
+        "jQuery",
+        "$"
+      ]
+    }))
+    .pipe(eslint.format())
+    .pipe(minify({
+      ext:{
+          src:'.js',
+          min:'.min.js'
+      }
+    }))
+    .pipe(gulp.dest('build/js'))
+});
+
+gulp.task('default', [ 'html', 'css', 'js' ]);
+
+/* DEVELOPMENT */
+
+gulp.task('browsersync', ['default'], function() {
+  browserSync.init({
+    server: "./build"
+  });
+})
+
+gulp.task('html-watch', ['html'], function (done) {
+    browserSync.reload();
+    done();
+});
+
+gulp.task('css-watch', ['css'], function (done) {
+    browserSync.reload();
+    done();
+});
+
+gulp.task('js-watch', ['js'], function (done) {
+    browserSync.reload();
+    done();
+});
+
+gulp.task('watch', ['browsersync'], function(){
+  gulp.watch('src/index.html', ['html-watch']);
+  gulp.watch('src/less/*.less', ['css-watch']);
+  gulp.watch('src/js/*.js', ['js-watch']);
+})

package.json

@@ -0,0 +1,17 @@
+{
+  "devDependencies": {
+    "browser-sync": "^2.23.7",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "gulp": "^3.9.1",
+    "gulp-csso": "^3.0.1",
+    "gulp-eslint": "^4.0.2",
+    "gulp-htmlmin": "^4.0.0",
+    "gulp-less": "^4.0.0",
+    "gulp-lesshint": "^5.0.0",
+    "gulp-minify": "^2.1.0"
+  }
+}

script.js

@@ -1,45 +0,0 @@
-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');
-}

src/index.html

@@ -99,7 +99,7 @@ FabLab Bad Windsheim
 Spitalwall 16
 91435 Bad Windsheim</pre>
         <div class="download-wrapper">
-          <button type="button" onclick="gen()" class="btn btn-success">Mitgliedsantrag herunterladen</button>
+          <button type="button" id="generate" class="btn btn-success">Mitgliedsantrag herunterladen</button>
         </div>
       </div>
 
@@ -121,6 +121,6 @@ Spitalwall 16
     <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/pdfmake.min.js" integrity="sha256-Bxopx5SriypS8eE5qr38Bvap2ZNx3CUl9HZ6sewBtfk=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/pdfmake@0.1.36/build/vfs_fonts.js" integrity="sha256-wvH/UThD/fVD6sz1bAWX7JDW5Nx1TBdhegX8IHX20hA=" crossorigin="anonymous"></script>
 
-    <script src="script.js"></script>
+    <script src="js/script.min.js"></script>
   </body>
 </html>

src/js/script.js

@@ -0,0 +1,46 @@
+'use strict'
+const numSteps = 1
+
+_.forEach(_.range(numSteps), function (value) {
+  $('#step-' + (value + 1) + ' form').submit(function (event) {
+    $('#step-' + (value + 2)).collapse('show')
+    $('#step-' + (value + 1) + '-heading .step-number').addClass('done')
+    event.preventDefault()
+  })
+})
+
+$('#generate').click(function () {
+  var model = {}
+  _.forEach(_.range(numSteps), function (value) {
+    _.each($('#step-' + (value + 1) + ' form').serializeArray(), function (value) {
+      model[value.name] = value.value
+    })
+  })
+  var docDefinition = {
+    content: [
+      { text: 'Mitgliedsantrag FabLab Neustadt Aisch/Bad Windsheim', 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')
+})

src/less/style.less

@@ -1,13 +1,14 @@
-@color-1: #047E7C;
-@color-2: #0C6D74;
-@color-3: #0C6D74;
-@color-white: #F1F2E3;
+@color-1: #047e7c;
+@color-2: #0c6d74;
+@color-3: #145c6c;
+@color-white: #f1f2e3;
 @color-grey: #787970;
 
 /* ======== MIXINS ======== */
 
 .step-color(@color) {
   background-color: @color;
+
   .step-number:not(.done) {
     color: @color;
   }
@@ -15,6 +16,7 @@
 
 // shadow appilied to element under to shadow element
 // (shadow is placed on the top)
+
 .top-bottom-shadow {
   box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5);
 }
@@ -25,9 +27,11 @@
   0% {
     transform: rotate3d(0, 0, 0, 0deg);
   }
+
   50% {
     transform: rotate3d(45, 45, 1, 90deg);
   }
+
   100% {
     transform: rotate3d(0, 0, 0, 0deg);
   }
@@ -36,9 +40,9 @@
 /* ======== ======== */
 
 body {
-  cursor: default;
   background-color: @color-white;
-  font-family: "Source Sans Pro", sans;
+  cursor: default;
+  font-family: 'Source Sans Pro', sans;
   font-weight: 300;
 }
 
@@ -48,14 +52,15 @@ header {
 
   h1 {
     //font-size: 50px;
-    padding: 0.5em 0;
     font-weight: 300;
+    padding: 0.5em 0px;
     text-align: center;
   }
 }
 
 #steps {
   color: @color-white;
+
   .step-heading {
     .top-bottom-shadow;
 
@@ -64,26 +69,25 @@ header {
       padding: 8px;
 
       .step-number {
-        display: inline-block;
-        margin: 0 0.5em;
-        text-align: center;
-        font-weight: 400;
-
-        width: 40px;
-        height: 40px;
-
         border: 0px;
         border-radius: 50%;
-
+        display: inline-block;
+        font-weight: 400;
+        height: 40px;
+        margin: 0px 0.5em;
+        text-align: center;
         transition: background-color 0.5s, transform 0.5s;
+        width: 40px;
       }
 
       .step-number:not(.done) {
         background-color: @color-white;
         color: black;
+
         .number {
           display: inline;
         }
+
         .check {
           display: none;
         }
@@ -93,11 +97,13 @@ header {
         &:not(.final) { // prevents animation to be shown at final step
           animation: rotate-step-number 0.5s;
         }
-        background-color: #8ECA63; // green
+        background-color: #8eca63; // green
         color: @color-white;
+
         .number {
           display: none;
         }
+
         .check {
           display: inline;
         }
@@ -109,23 +115,30 @@ header {
     form {
       .row {
         margin-bottom: 0.7em;
+
         .col {
-          padding: 0 0.5em;
+          padding: 0px 0.5em;
         }
       }
+
       input {
-        color: white; // (!)
         background-color: rgba(255, 255, 255, 0.30);
         border: 0px solid rgba(255, 255, 255, 0.30);
         border-radius: 6px;
+        color: white; // (!)
         padding: 0.4em 0.6em;
         width: 100%;
+
         &::placeholder {
           color: rgba(255, 255, 255, 0.5);
           opacity: 1;
         }
-        // show numbers without spin box
+      }
+
+      /* do not show spin buttons */
+      input {
         -moz-appearance: textfield;
+
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
             -webkit-appearance: none;
@@ -134,15 +147,16 @@ header {
     }
 
     .next-wrapper {
-      text-align: center;
       height: 96px;
       padding-top: 2em;
+      text-align: center;
 
       button {
         /* unstyle button */
         background-color: transparent;
+        border: 0px;
         color: @color-white;
-        border: none;
+
         span {
           display: block;
           font-size: 24px;
@@ -155,25 +169,31 @@ header {
     }
   }
 
-  .step-heading, .step {
+  .step-heading,
+  .step {
     padding: 2em 30vw;
+
     &.step-heading {
       padding-bottom: 1em;
     }
+
     &.step {
       padding-top: 1em;
     }
   }
 
-  #step-1, #step-1-heading {
+  #step-1,
+  #step-1-heading {
     .step-color(@color-1);
   }
 
-  #step-2, #step-2-heading {
+  #step-2,
+  #step-2-heading {
     .step-color(@color-2);
   }
 
-  #step-3, #step-3-heading {
+  #step-3,
+  #step-3-heading {
     .step-color(@color-3);
   }
 }
@@ -183,9 +203,10 @@ footer {
   background-color: @color-white;
   padding: 2em 30vw;
   text-align: center;
+
   a {
-    color: @color-grey;
     border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
+    color: @color-grey;
   }
 }
 
@@ -193,15 +214,17 @@ footer {
 
 .step.final {
   pre.address {
+    color: @color-white;
     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);
+    color: @color-white;
   }
 }