Layout updates for euromat page
This commit is contained in:
Moritz Kröger
parent
6cab6a178a
commit
85d45fe6eb
|
|
@ -2,6 +2,7 @@
|
|||
"processors": ["stylelint-processor-html"],
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"no-empty-source": null
|
||||
"no-empty-source": null,
|
||||
"color-hex-case": null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
@import "~styles/colors";
|
||||
@import "~styles/layout";
|
||||
|
||||
$app-width: 850px;
|
||||
$app-width: 930px;
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
|
|
@ -155,9 +155,9 @@
|
|||
body {
|
||||
background: $background-primary;
|
||||
color: $text-color-base;
|
||||
font-family: 'Halis GR', Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: $fontHalisGR;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
font-size: $font-size-base;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -167,6 +167,7 @@
|
|||
font-size: $font-size-xlarge;
|
||||
line-height: 110%;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -174,6 +175,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-large;
|
||||
color: $text-color-secondary;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 150%;
|
||||
}
|
||||
|
|
@ -196,7 +202,7 @@
|
|||
|
||||
main {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
max-width: $app-width;
|
||||
padding: 0 $small-gap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -206,6 +212,13 @@
|
|||
footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.app-header {
|
||||
|
|
@ -216,6 +229,7 @@
|
|||
}
|
||||
|
||||
.app-background {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,36 +1,41 @@
|
|||
<template>
|
||||
<section class="euromat">
|
||||
<div class="header-progress">
|
||||
<span>{{ currentThesis + 1 }}/{{ thesesCount }}</span>
|
||||
<thesis-progress :value="currentThesis + 1" :max="thesesCount" />
|
||||
<div>
|
||||
<span class="progress-current">{{ currentThesis + 1 }}</span>
|
||||
<span>/{{ thesesCount }}</span>
|
||||
</div>
|
||||
<button
|
||||
:disabled="this.currentThesis === 0"
|
||||
class="btn-dark btn-small"
|
||||
type="button"
|
||||
@click="goBack">
|
||||
{{ $t('euromat.euromat.back') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<header class="euromat-header">
|
||||
<h1>{{ thesisTitle }}</h1>
|
||||
</header>
|
||||
<div class="euromat-content">
|
||||
<header class="euromat-header">
|
||||
<h2>{{ thesisCategory }}</h2>
|
||||
<h1>{{ thesisTitle }}</h1>
|
||||
</header>
|
||||
|
||||
<div class="euromat-controls">
|
||||
<ul class="euromat-btns">
|
||||
<li v-for="option in options" v-if="option.position !== 'skipped'">
|
||||
<button type="button" @click="submitAnswer(option, $event)">
|
||||
{{ option.label }}
|
||||
<div class="euromat-controls">
|
||||
<ul class="euromat-btns">
|
||||
<li v-for="option in options" v-if="option.position !== 'skipped'">
|
||||
<button type="button" @click="submitAnswer(option, $event)">
|
||||
{{ option.label }} <feather-icon :type="option.icon" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="controls-sub">
|
||||
<button
|
||||
class="btn-dark btn-small"
|
||||
type="button"
|
||||
@click="submitAnswer(optionSkip)">
|
||||
{{ optionSkip.label }} <feather-corner-up-right />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="controls-sub">
|
||||
<button
|
||||
:disabled="this.currentThesis === 0"
|
||||
class="btn-dark btn-small"
|
||||
type="button"
|
||||
@click="goBack">
|
||||
{{ $t('euromat.euromat.back') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn-dark btn-small"
|
||||
type="button"
|
||||
@click="submitAnswer(optionSkip)">
|
||||
{{ optionSkip.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -65,10 +70,17 @@
|
|||
}
|
||||
return this.getThesis(this.currentThesis).thesis[this.$i18n.locale]
|
||||
},
|
||||
thesisCategory () {
|
||||
if (this.currentThesis === this.thesesCount) {
|
||||
return
|
||||
}
|
||||
return this.getThesis(this.currentThesis).category[this.$i18n.locale]
|
||||
},
|
||||
options () {
|
||||
return options.map(option =>
|
||||
Object.assign({}, option, {
|
||||
label: this.$t(`euromat.options.${option.position}`)
|
||||
label: this.$t(`euromat.options.${option.position}`),
|
||||
icon: this.getIconName(option.position)
|
||||
}))
|
||||
},
|
||||
optionSkip () {
|
||||
|
|
@ -77,13 +89,21 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
getIconName (type) {
|
||||
switch (type) {
|
||||
case 'positive': return 'thumbs-up'
|
||||
case 'neutral': return 'circle'
|
||||
case 'negative': return 'thumbs-down'
|
||||
case 'skipped': return 'corner-up-right'
|
||||
default: return
|
||||
}
|
||||
},
|
||||
getThesis (id) {
|
||||
return theses.find(t => t.id === id)
|
||||
},
|
||||
goBack () {
|
||||
const thesis = this.getThesis(this.currentThesis)
|
||||
const index = this.answers.findIndex(a => a.thesis === thesis.id)
|
||||
|
||||
this.answers.splice(index, 1)
|
||||
this.currentThesis -= 1
|
||||
},
|
||||
|
|
@ -112,29 +132,60 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~styles/fonts";
|
||||
@import "~styles/colors";
|
||||
@import "~styles/layout";
|
||||
|
||||
.header-progress {
|
||||
.euromat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $base-gap * 2;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-progress {
|
||||
flex: 1 0 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-right: $base-gap * 2;
|
||||
color: $text-color-secondary;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: $small-gap;
|
||||
font-size: $font-size-large;
|
||||
font-weight: 600;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.progress-current {
|
||||
color: $text-color-special;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: $base-gap;
|
||||
}
|
||||
}
|
||||
|
||||
.euromat-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.euromat-header {
|
||||
margin-bottom: $base-gap * 2;
|
||||
text-align: center;
|
||||
margin-bottom: $base-gap + 5;
|
||||
text-align: left;
|
||||
|
||||
h2 {
|
||||
margin-bottom: $base-gap;
|
||||
}
|
||||
}
|
||||
|
||||
.euromat-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.controls-sub {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ export default {
|
|||
de: {
|
||||
euromat: {
|
||||
options: {
|
||||
positive: '👍🏻 Ich stimme zu',
|
||||
neutral: '🖐🏻 Neutral',
|
||||
negative: '👎🏻 Ich bin dagegen',
|
||||
positive: 'Ich stimme zu',
|
||||
neutral: 'Neutral',
|
||||
negative: 'Ich bin dagegen',
|
||||
skipped: 'These überspringen'
|
||||
},
|
||||
euromat: {
|
||||
|
|
@ -23,9 +23,9 @@ export default {
|
|||
en: {
|
||||
euromat: {
|
||||
options: {
|
||||
positive: '👍🏻 I agree',
|
||||
neutral: '🖐🏻 Neutral',
|
||||
negative: '👎🏻 I disagree',
|
||||
positive: 'I agree',
|
||||
neutral: 'Neutral',
|
||||
negative: 'I disagree',
|
||||
skipped: 'Skip thesis'
|
||||
},
|
||||
euromat: {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import Vue from 'vue'
|
||||
import VueSVGIcon from 'vue-svgicon'
|
||||
import VueFeatherIcon from 'vue-feather-icon'
|
||||
|
||||
import App from '@/app/app'
|
||||
import router from './router'
|
||||
import i18n from './i18n'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueSVGIcon)
|
||||
Vue.use(VueFeatherIcon)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
|
|
|
|||
|
|
@ -1,95 +1,89 @@
|
|||
@import "~styles/fonts";
|
||||
@import "~styles/colors";
|
||||
@import "~styles/layout";
|
||||
|
||||
button,
|
||||
.btn {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
padding: 14px 24px;
|
||||
font-family: $fontHalisGR;
|
||||
font-size: $font-size-medium;
|
||||
font-weight: 600;
|
||||
background: $button-background;
|
||||
background: $button-background-primary;
|
||||
color: $button-color;
|
||||
border-radius: $border-radius;
|
||||
border: 2px solid $button-background;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background 50ms, border-color 0.4s;
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
text-shadow: $text-shadow;
|
||||
box-shadow: $button-shadow;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
box-shadow: $button-shadow, 0 0 8px $pink;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid transparentize($yellow, 0.87);
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: $button-color;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: drop-shadow($text-shadow);
|
||||
margin-left: $small-gap / 2;
|
||||
|
||||
path,
|
||||
polyline {
|
||||
stroke: $button-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: transparentize($button-color, 0.5);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::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.5, 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:not([disabled]) {
|
||||
background: transparent !important;
|
||||
border-color: $yellow !important;
|
||||
color: $button-color !important;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: $yellow;
|
||||
color: transparentize($button-color, 0.5) !important;
|
||||
}
|
||||
|
||||
&.btn-dark {
|
||||
background: $dark-blue;
|
||||
border-color: $dark-blue;
|
||||
color: $text-color-base;
|
||||
font-weight: 400;
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
background: $button-background-secondary;
|
||||
border-color: $button-background-secondary;
|
||||
color: $button-color;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
|
||||
&::after {
|
||||
background: $dark-blue;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
box-shadow: 0 0 8px transparentize($dark-blue, 0.7);
|
||||
}
|
||||
|
||||
svg {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-small {
|
||||
padding: 5px 10px;
|
||||
font-size: 85%;
|
||||
padding: 8px 14px;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
&.btn-txt {
|
||||
position: relative;
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
|
@ -97,13 +91,8 @@ button,
|
|||
border: none;
|
||||
font-weight: 400;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-color-special;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
$blue: #40a6ee;
|
||||
$dark-blue: #06069d;
|
||||
$yellow: #fee872;
|
||||
$orange: #fa742a;
|
||||
$transparent-white: rgba(255, 255, 255, 0.21);
|
||||
$blue: #40A6EE;
|
||||
$dark-blue: #296E9F;
|
||||
$yellow: #FEE872;
|
||||
$orange: #F5A960;
|
||||
$pink: #D74AA1;
|
||||
|
||||
$background-primary: $blue;
|
||||
$background-secondary: white;
|
||||
|
||||
$text-color-base: white;
|
||||
$text-color-secondary: $dark-blue;
|
||||
$text-color-invert: rgba(0, 0, 0, 0.8);
|
||||
$text-color-special: $yellow;
|
||||
$text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
$button-background: white;
|
||||
$button-color: $blue;
|
||||
$button-background-primary: linear-gradient(215deg, $yellow 0%, $orange 44%, $pink 100%);
|
||||
$button-background-secondary: $transparent-white;
|
||||
$button-color: white;
|
||||
$button-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$fontPath: '/static/fonts/';
|
||||
$fontHalisGR: 'Halis GR', Avenir, Helvetica, Arial, sans-serif;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Halis GR';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
$font-size-xlarge: 45px;
|
||||
$font-size-large: 35px;
|
||||
$font-size-small: 90%;
|
||||
$font-size-base: 16px;
|
||||
$font-size-medium: 115%;
|
||||
$font-size-xlarge: 275%;
|
||||
$font-size-large: 225%;
|
||||
|
||||
$small-gap: 15px;
|
||||
$base-gap: 25px;
|
||||
$border-radius: 20px;
|
||||
$small-gap: 20px;
|
||||
$base-gap: 30px;
|
||||
$border-radius: 100px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue