ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new footers

This commit is contained in:
Ramon Wenger 2020-04-09 16:26:53 +02:00
parent bf7cf24457
commit 299f4aad5b
10 changed files with 173 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
client/src/layouts/DefaultFooter.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<footer class="default-footer">
<div class="default-footer__section">
<div class="default-footer__info">
<div class="default-footer__who-are-we who-are-we">
<h5 class="who-are-we__title">Wer sind wir?</h5>
<p class="who-are-we__text">
mySkillbxox ­ist ein Angebot des hep verlags in Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für
Berufsbildung (EHB)
</p>
</div>
<div class="default-footer__logo-hep">
HEP
</div>
<div class="default-footer__logo-ehb">
EHB
</div>
</div>
</div>
<div class="default-footer__section">
<div class="default-footer__links">
<a href="https://www.hep-verlag.ch/datenschutz" target="_blank" class="default-footer__link">Datenschutz</a>
<a href="https://www.hep-verlag.ch/impressum" target="_blank" class="default-footer__link">Impressum</a>
<a href="https://www.hep-verlag.ch/agb" target="_blank" class="default-footer__link">AGB</a>
<a href="https://www.hep-verlag.ch/kontakt-verlag" target="_blank" class="default-footer__link">Kontakt</a>
<a href="https://www.hep-verlag.ch/kundenservice" target="_blank" class="default-footer__link">Hilfe</a>
</div>
</div>
</footer>
</template>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.default-footer {
background-color: $color-silver-light;
&__section {
width: 100%;
border-bottom: $color-silver 1px solid;
display: flex;
justify-content: center;
}
&__info {
width: $footer-width;
padding: 2*$large-spacing 0;
display: flex;
justify-content: space-between;
}
&__who-are-we {
width: 330px;
}
&__links {
width: $footer-width;
padding: $large-spacing 0;
}
&__link {
@include aside-with-cheese;
margin-right: $large-spacing;
}
}
.who-are-we {
&__title {
@include heading-4;
}
&__text {
@include aside-text;
}
}
</style>

16
client/src/layouts/DefaultLayout.vue
View File

@ -1,13 +1,15 @@
<template>
<div class="container skillbox" :class="specialContainerClass">
<div class="container skillbox layout" :class="specialContainerClass">
<profile-sidebar></profile-sidebar>
<header-bar class="header skillbox__header">
<header-bar class="header layout__header">
</header-bar>
<mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>
<mobile-header
class="header layout__header layout__header--mobile"
></mobile-header>
<router-view class="skillbox__content"></router-view>
<footer class="skillbox__footer">Footer</footer>
<router-view class="layout__content"></router-view>
<default-footer class="layout__footer"></default-footer>
</div>
</template>
@ -15,12 +17,14 @@
import HeaderBar from '@/components/HeaderBar';
import MobileHeader from '@/components/MobileHeader';
import ProfileSidebar from '@/components/profile/ProfileSidebar';
import DefaultFooter from '@/layouts/DefaultFooter';
export default {
components: {
HeaderBar,
MobileHeader,
ProfileSidebar
ProfileSidebar,
DefaultFooter
},
computed: {

4
client/src/layouts/FullScreenLayout.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="container skillbox" :class="specialContainerClass">
<div class="container layout layout--fullscreen" :class="specialContainerClass">
<div class="close-button" v-on:click="back">
<cross class="close-button__icon"></cross>
</div>
<router-view class="skillbox__content"></router-view>
<router-view class="layout__content"></router-view>
</div>
</template>

6
client/src/layouts/PublicLayout.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="skillbox public">
<div class="layout layout--public public">
<logo class="public__logo"></logo>
<router-view class="skillbox__content"></router-view>
<footer class="skillbox__footer">Footer</footer>
<router-view class="layout__content"></router-view>
<footer class="layout__footer">Footer</footer>
</div>
</template>

31
client/src/layouts/SimpleFooter.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<footer class="simple-footer">
<p class="simple-footer__strong">Copyright © 2020 hep Verlag, in Zusammenarbeit mit dem EHB</p>
<p class="simple-footer__regular">Alle Inhalte von mySkillbox, insbesondere Texte und Grafiken, sind urheberrechtlich geschützt. </p>
</footer>
</template>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.simple-footer {
width: 100%;
justify-self: center;
padding: $large-spacing 0;
background-color: $color-silver-light;
display: grid;
grid-template-columns: 1fr $footer-width 1fr;
&__strong {
@include aside-with-cheese;
font-weight: 600;
grid-column: 2;
}
&__regular {
@include aside-text;
grid-column: 2;
}
}
</style>

47
client/src/layouts/SimpleLayout.vue
View File

@ -1,13 +1,33 @@
<template>
<div class="skillbox layout--simple">
<div class="skillbox layout layout--simple">
<div class="close-button" v-on:click="back">
<cross class="close-button__icon"></cross>
</div>
<router-view></router-view>
<simple-footer class="layout__footer"></simple-footer>
</div>
</template>
<script>
import Cross from '@/components/icons/Cross';
import SimpleFooter from '@/layouts/SimpleFooter';
export default {
components: {
Cross,
SimpleFooter
},
methods: {
back() {
this.$router.go(-1);
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.layout {
@ -16,11 +36,12 @@
@supports (display: grid) {
display: grid;
}
padding: 20px;
width: 100%;
@include desktop {
grid-template-columns: 1fr 640px 1fr;
grid-template-rows: 60px 1fr 105px;
-ms-grid-columns: 1fr 640px 1fr;
& > :nth-child(2) {
@ -28,7 +49,10 @@
-ms-grid-column: 2;
}
}
}
&__footer {
grid-column: 1 / span 3;
}
}
@ -42,6 +66,8 @@
@include desktop {
grid-column: 3;
-ms-grid-column: 3;
margin-right: $medium-spacing;
margin-top: $medium-spacing;
}
&__icon {
@ -50,20 +76,3 @@
}
}
</style>
<script>
import Cross from '@/components/icons/Cross';
export default {
components: {
Cross
},
methods: {
back() {
this.$router.go(-1);
}
}
}
</script>

17
client/src/styles/_default-layout.scss
View File

@ -1,7 +1,9 @@
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.skillbox {
.layout {
$footer-height: 287px;
margin: 0 auto;
width: 100%;
/*
@ -12,17 +14,17 @@
@supports (display: grid) {
display: grid;
}
grid-template-rows: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "h" "c" "f";
min-height: 100vh;
grid-auto-rows: 1fr;
grid-template-areas: "h" "c";
padding-bottom: 50px;
&--show-filter {
grid-template-rows: auto auto 1fr;
-ms-grid-rows: 50px 50px 30px 1fr; // 1 extra row for gap
grid-template-areas: "h" "." "c";
grid-template-rows: auto auto 1fr $footer-height;
-ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
grid-template-areas: "h" "." "c" "f";
}
/*
@ -48,6 +50,5 @@
&__footer {
grid-area: f;
display: none;
}
}

10
client/src/styles/_mixins.scss
View File

@ -117,6 +117,16 @@
font-size: toRem(16px);
}
@mixin aside-text {
@include regular-text;
font-size: toRem(14px);
}
@mixin aside-with-cheese {
@include aside-text;
font-weight: 600;
}
@mixin meta-title {
color: $color-silver-dark;
font-size: toRem(36px);

1
client/src/styles/_survey.scss
View File

@ -159,7 +159,6 @@
}
.question {
$question: &;
&--error #{$question}__input {

2
client/src/styles/_variables.scss
View File

@ -75,3 +75,5 @@ $default-heading-line-height: 1.2;
// popover
$popover-default-bottom: -110px;
$footer-width: 800px;