fablab/mitgliedsantrag
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

be 4.0

Browse source
This commit is contained in:
Simon Bruder 2018-04-24 19:25:52 +00:00
parent b9979d10e9
commit 96fa1677eb
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F
11 changed files with 8460 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
.eslintrc Normal file
View file

@ -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

3
.gitignore vendored
View file

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

4
.lesshintrc Normal file
View file

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

2
Makefile
View file

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

76
gulpfile.js Normal file
View file

@ -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']);
})

8242
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

17
package.json Normal file
View file

@ -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"
}
}

45
script.js
View file

@ -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');
}

4
index.html → src/index.html
View file

@ -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>

46
src/js/script.js Normal file
View file

@ -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')
})

87
css/style.less → src/less/style.less
View file

@ -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);
}
@ -23,22 +25,24 @@
@keyframes rotate-step-number {
0% {
transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
50% {
transform: rotate3d(45, 45, 1, 90deg);
}
100% {
transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
}
/* ======== ======== */
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
-moz-appearance:textfield;
}
/* 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 {
border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
color: @color-grey;
border-bottom: dotted 1px rgba(0,0,0,0.25);
}
}
@ -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 {
border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
color: @color-white;
border-bottom: dotted 1px rgba(0,0,0,0.25);
}
}