NB-Public/kandimat-user-app
14
0
Fork 0
Code Pull requests Releases 1 Activity

Updated layout, added 404 page

Browse source
This commit is contained in:
Moritz Kröger 2017-08-12 23:00:43 +02:00
parent e332f5d3c6
commit b0cee422fa
19 changed files with 283 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package.json
View file

@ -5,9 +5,10 @@
"author": "Moritz Kröger <write@morkro.de>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"dev": "npm run svg && node build/dev-server.js",
"start": "npm run svg && node build/dev-server.js",
"build": "npm run svg && node build/build.js",
"svg": "vsvg -s ./src/assets/svg -t ./src/assets/icons",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
@ -16,6 +17,7 @@
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.3.1",
"vue-svgicon": "^1.2.4",
"vuex": "^2.3.1"
},
"devDependencies": {

13
src/app/404/components/index.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<section>
<h1>404</h1>
</section>
</template>
<script>
export default {
name: '404'
}
</script>
<style lang="scss" scoped></style>

1
src/app/404/index.js Normal file
View file

@ -0,0 +1 @@
export { default as routes } from './routes'

9
src/app/404/routes.js Normal file
View file

@ -0,0 +1,9 @@
import FourZeroFour from './components/index'
export default [
{
path: '*',
name: '404',
component: FourZeroFour
}
]

109
src/app/app.vue
View file

@ -1,14 +1,24 @@
<template>
<div id="app">
<app-menu :menu="menu" />
<main id="app">
<main>
<router-view></router-view>
</main>
<div class="app-background">
<svgicon
name="european-stars"
width="10em"
height="10em"
scale="4"
color="black" />
</div>
</div>
</template>
<script>
import Menu from '@/components/menu'
import '@/assets/icons/european-stars'
export default {
name: 'Eur-O-Mat',
@ -32,6 +42,7 @@
<style lang="scss">
@import "~node_modules/normalize.css/normalize";
@import "~styles/colors";
@import "~styles/layout";
* {
padding: 0;
@ -45,7 +56,7 @@
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
}
body {
@ -54,29 +65,115 @@
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
}
h1 {
margin: 0;
}
a {
color: $text-color-special;
color: $text-color-base;
&:hover {
color: $text-color-special;
}
}
button {
padding: 10px 20px;
background: $button-background;
color: $button-color;
border-radius: 20px;
border: none;
border-radius: $border-radius;
border: 2px solid $button-background;
cursor: pointer;
position: relative;
transition: background 50ms, border-color 0.4s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
&::before,
&::after {
content: '';
position: absolute;
top: 0;
left: -2px;
width: calc(100% + 4px);
height: 100%;
border-radius: $border-radius;
}
&::before {
background: $yellow;
border-radius: $border-radius;
opacity: 0;
z-index: -1;
transform: scale3d(0.7, 1, 1);
transition: transform 0.4s, opacity 0.4s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
&::after {
background: $button-background;
z-index: -2;
}
&:hover {
background: transparent;
border-color: $yellow;
&::before {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
&:active,
&:focus {
outline: none;
background: $yellow;
}
&.btn-txt {
background: transparent;
color: $text-color-base;
border: none;
&::before, &::after {
content: none;
}
&:hover {
color: $text-color-special;
}
}
}
#app {
max-width: 650px;
max-width: 750px;
width: 95vw;
display: flex;
align-items: flex-start;
position: relative;
margin-top: $base-gap * 3;
}
main {
background: transparentize($background-primary, .5);
width: 100%;
position: relative;
z-index: 1;
}
.app-background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
svg {
position: absolute;
top: 0;
transform: translate(-65%, -53%);
opacity: .2;
}
}
</style>

13
src/app/euromat/components/index.vue
View file

@ -19,7 +19,7 @@
</button>
</li>
</ul>
<button class="controls-skip" type="button" @click="submitAnswer(optionSkip)">
<button class="controls-skip btn-txt" type="button" @click="submitAnswer(optionSkip)">
{{ optionSkip.label }}
</button>
</div>
@ -81,21 +81,23 @@
.header-progress {
display: flex;
align-items: center;
margin-bottom: $base-gap * 2;
progress[value] {
appearance: none;
width: 100%;
height: 20px;
margin-left: 15px;
&::-webkit-progress-bar {
background: rgba(0,0,0,.3);
border-radius: 20px;
background: $dark-blue;
border-radius: $border-radius;
}
&::-webkit-progress-value {
background: $yellow;
border-radius: 20px;
border-radius: $border-radius;
}
}
}
@ -112,9 +114,8 @@
}
.controls-skip {
background: transparent;
font-style: italic;
color: $text-color-base;
margin-top: $base-gap / 2;
}
.euromat-btns {

9
src/app/faq/components/index.vue
View file

@ -1,6 +1,7 @@
<template>
<section>
<h1>FAQ</h1>
<p>FAQ to be written.</p>
</section>
</template>
@ -10,4 +11,10 @@
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "~styles/layout";
h1 {
margin-bottom: $base-gap;
}
</style>

9
src/app/imprint/components/index.vue
View file

@ -1,6 +1,7 @@
<template>
<section>
<h1>Impressum</h1>
<p>Content to be written.</p>
</section>
</template>
@ -10,4 +11,10 @@
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "~styles/layout";
h1 {
margin-bottom: $base-gap;
}
</style>

9
src/app/intro/components/index.vue
View file

@ -1,6 +1,7 @@
<template>
<section>
<h1>Willkommen beim EuroMat</h1>
<p>Content to be written.</p>
<router-link tag="button" :to="{ path: '/thesen' }">
Start
</router-link>
@ -13,4 +14,10 @@
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "~styles/layout";
h1, p {
margin-bottom: $base-gap;
}
</style>

9
src/app/press/components/index.vue
View file

@ -1,6 +1,7 @@
<template>
<section>
<h1>Presse</h1>
<p>Content to be written.</p>
</section>
</template>
@ -10,4 +11,10 @@
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "~styles/layout";
h1 {
margin-bottom: $base-gap;
}
</style>

11
src/assets/icons/european-stars.js Normal file
View file

@ -0,0 +1,11 @@
/* eslint-disable */
var icon = require('vue-svgicon')
icon.register({
'european-stars': {
width: 300,
height: 300,
viewBox: '0, 0, 300, 300',
data: '<g id="svgicon-european-stars-c" transform="translate(150 30)"><g id="svgicon-european-stars-b"><path pid="0" id="svgicon-european-stars-a" d="M0-20V0h10" transform="rotate(18 0 -20)"/><use xlink:href="#svgicon-european-stars-a" transform="scale(-1 1)"/></g><use xlink:href="#svgicon-european-stars-b" transform="rotate(72)"/><use xlink:href="#svgicon-european-stars-b" transform="rotate(144)"/><use xlink:href="#svgicon-european-stars-b" transform="rotate(216)"/><use xlink:href="#svgicon-european-stars-b" transform="rotate(288)"/></g><use xlink:href="#svgicon-european-stars-c" transform="translate(60 16.077)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(103.923 60)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(120 120)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(103.923 180)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(60 223.923)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(0 240)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(-60 223.923)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(-103.923 180)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(-120 120)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(-103.923 60)"/><use xlink:href="#svgicon-european-stars-c" transform="translate(-60 16.077)"/>'
}
})

2
src/assets/icons/index.js Normal file
View file

@ -0,0 +1,2 @@
/* eslint-disable */
require('./european-stars')

23
src/assets/svg/european-stars.svg Normal file
View file

@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<g id="s" transform="translate(150,30)" fill="#fc0">
<g id="c">
<path id="t" d="M 0,-20 V 0 H 10" transform="rotate(18 0,-20)"/>
<use xlink:href="#t" transform="scale(-1,1)"/>
</g>
<use xlink:href="#c" transform="rotate(72)"/>
<use xlink:href="#c" transform="rotate(144)"/>
<use xlink:href="#c" transform="rotate(216)"/>
<use xlink:href="#c" transform="rotate(288)"/>
</g>
<use xlink:href="#s" transform="rotate(30 150,150) rotate(330 150,30)"/>
<use xlink:href="#s" transform="rotate(60 150,150) rotate(300 150,30)"/>
<use xlink:href="#s" transform="rotate(90 150,150) rotate(270 150,30)"/>
<use xlink:href="#s" transform="rotate(120 150,150) rotate(240 150,30)"/>
<use xlink:href="#s" transform="rotate(150 150,150) rotate(210 150,30)"/>
<use xlink:href="#s" transform="rotate(180 150,150) rotate(180 150,30)"/>
<use xlink:href="#s" transform="rotate(210 150,150) rotate(150 150,30)"/>
<use xlink:href="#s" transform="rotate(240 150,150) rotate(120 150,30)"/>
<use xlink:href="#s" transform="rotate(270 150,150) rotate(90 150,30)"/>
<use xlink:href="#s" transform="rotate(300 150,150) rotate(60 150,30)"/>
<use xlink:href="#s" transform="rotate(330 150,150) rotate(30 150,30)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

39
src/components/menu.vue
View file

@ -1,8 +1,8 @@
<template>
<aside>
<aside class="menu">
<ul>
<li v-for="item in menu">
<router-link :to="item.route">
<router-link tag="a" :to="item.route">
{{ item.label }}
</router-link>
</li>
@ -20,4 +20,37 @@
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "~styles/colors";
@import "~styles/layout";
.menu {
margin-right: $base-gap * 2;
position: relative;
background: $background-secondary;
border-radius: $border-radius;
padding: 4px;
flex-grow: 1;
width: 140px;
box-shadow: 0px 0px 22px $dark-blue;
ul {
list-style: none;
text-align: right;
}
li:not(:last-child) {
margin-bottom: 3px;
}
}
a {
text-decoration: none;
font-weight: 600;
color: $blue;
border: 3px solid $blue;
border-radius: $border-radius;
padding: 10px 20px;
display: block;
}
</style>

2
src/main.js
View file

@ -1,8 +1,10 @@
import Vue from 'vue'
import VueSVGIcon from 'vue-svgicon'
import App from '@/app/app'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueSVGIcon)
/* eslint-disable no-new */
new Vue({

4
src/router/index.js
View file

@ -7,6 +7,7 @@ import { routes as results } from '@/app/results'
import { routes as faq } from '@/app/faq'
import { routes as press } from '@/app/press'
import { routes as imprint } from '@/app/imprint'
import { routes as fourzerofour } from '@/app/404'
Vue.use(Router)
@ -18,6 +19,7 @@ export default new Router({
...results,
...faq,
...press,
...imprint
...imprint,
...fourzerofour
]
})

4
src/styles/colors.scss
View file

@ -1,7 +1,9 @@
$blue: rgba(9, 9, 225, 0.93);
$blue: #0909e1;
$dark-blue: #06069d;
$yellow: #ffda00;
$background-primary: $blue;
$background-secondary: white;
$text-color-base: white;
$text-color-invert: rgba(0, 0, 0, .8);

1
src/styles/layout.scss
View file

@ -1 +1,2 @@
$base-gap: 25px;
$border-radius: 20px;

36
yarn.lock
View file

@ -234,7 +234,7 @@ async-foreach@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
async@1.x, async@^1.4.0:
async@1.x, async@^1.4.0, async@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@ -2619,6 +2619,15 @@ fs-extra@~1.0.0:
jsonfile "^2.1.0"
klaw "^1.0.0"
fs-plus@^2.9.3:
version "2.10.1"
resolved "https://registry.yarnpkg.com/fs-plus/-/fs-plus-2.10.1.tgz#3204781d7840611e6364e7b6fb058c96327c5aa5"
dependencies:
async "^1.5.2"
mkdirp "^0.5.1"
rimraf "^2.5.2"
underscore-plus "1.x"
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@ -5491,7 +5500,7 @@ right-align@^0.1.1:
dependencies:
align-text "^0.1.1"
rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
dependencies:
@ -5972,7 +5981,7 @@ supports-color@^4.0.0, supports-color@^4.2.0:
dependencies:
has-flag "^2.0.0"
svgo@^0.7.0:
svgo@^0.7.0, svgo@^0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
dependencies:
@ -6221,10 +6230,20 @@ ultron@~1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864"
underscore-plus@1.x:
version "1.6.6"
resolved "https://registry.yarnpkg.com/underscore-plus/-/underscore-plus-1.6.6.tgz#65ecde1bdc441a35d89e650fd70dcf13ae439a7d"
dependencies:
underscore "~1.6.0"
underscore@^1.8.3:
version "1.8.3"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
underscore@~1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
uniq@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
@ -6397,6 +6416,15 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-svgicon@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/vue-svgicon/-/vue-svgicon-1.2.4.tgz#91a089ef4b41325d8bd1c84f7f7af8d8a4a08da7"
dependencies:
fs-plus "^2.9.3"
glob "^7.1.1"
svgo "^0.7.2"
yargs "^6.6.0"
vue-template-compiler@^2.3.3:
version "2.4.2"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.4.2.tgz#5a45d843f148b098f6c1d1e35ac20c4956d30ad1"
@ -6638,7 +6666,7 @@ yargs-parser@^5.0.0:
dependencies:
camelcase "^3.0.0"
yargs@^6.0.0:
yargs@^6.0.0, yargs@^6.6.0:
version "6.6.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
dependencies: