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

Add header to start page

This commit is contained in:
Ramon Wenger 2019-04-01 10:44:53 +02:00
parent 8ad5be305a
commit 08e66795b5
3 changed files with 133 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
client/src/components/HeaderBar.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<header class="header-bar">
<top-navigation></top-navigation>
<router-link to="/" class="header-bar__logo">skillbox</router-link>
<div class="user-header">
<user-widget v-bind="me"></user-widget>
<logout-widget></logout-widget>
</div>
<book-navigation v-if="showSubnavigation">
</book-navigation>
</header>
</template>
<script>
import TopNavigation from '@/components/TopNavigation.vue';
import BookNavigation from '@/components/book-navigation/BookNavigation';
import UserWidget from '@/components/UserWidget.vue';
import LogoutWidget from '@/components/LogoutWidget.vue';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
export default {
components: {
TopNavigation,
UserWidget,
LogoutWidget,
BookNavigation
},
computed: {
showSubnavigation() {
return this.$route.meta.subnavigation;
}
},
data() {
return {
me: {}
}
},
apollo: {
me: {
query: ME_QUERY,
},
},
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.header-bar {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
align-items: center;
justify-content: space-around;
background-color: $color-white;
grid-auto-rows: 50px;
width: 100%;
@include desktop {
grid-template-columns: 1fr 1fr 1fr;
}
/*
* For IE10+
*/
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 60px 60px;
/*
* For IE10+
*/
& > :nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row-align: center;
}
/*
* For IE10+
*/
& > :nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row-align: center;
-ms-grid-column-align: end;
justify-self: end;
}
& > :nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: center;
/*
* For IE10+
*/
-ms-grid-column: 2;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
}
.user-header {
display: flex;
}
</style>

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

@ -1,15 +1,7 @@
<template>
<div class="container skillbox" :class="specialContainerClass">
<header class="header skillbox__header">
<top-navigation></top-navigation>
<router-link to="/" class="skillbox__header-logo">skillbox</router-link>
<div class="user-header">
<user-widget v-bind="me"></user-widget>
<logout-widget></logout-widget>
</div>
<book-navigation v-if="showSubnavigation">
</book-navigation>
</header>
<header-bar class="header skillbox__header">
</header-bar>
<filter-bar v-if="showFilter"></filter-bar>
@ -19,46 +11,24 @@
</template>
<script>
import TopNavigation from '@/components/TopNavigation.vue';
import BookNavigation from '@/components/book-navigation/BookNavigation';
import UserWidget from '@/components/UserWidget.vue';
import FilterBar from '@/components/FilterBar.vue';
import LogoutWidget from '@/components/LogoutWidget.vue';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
import HeaderBar from '@/components/HeaderBar.vue';
export default {
components: {
TopNavigation,
UserWidget,
FilterBar,
LogoutWidget,
BookNavigation
HeaderBar
},
computed: {
showFilter() {
return this.$route.meta.filter;
},
showSubnavigation() {
return this.$route.meta.subnavigation;
},
specialContainerClass() {
let cls = this.$store.state.specialContainerClass;
return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
}
},
data() {
return {
me: {}
}
},
apollo: {
me: {
query: ME_QUERY,
},
},
}
</script>
@ -93,67 +63,7 @@
&__header {
grid-area: h;
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
align-items: center;
justify-content: space-around;
background-color: $color-white;
grid-auto-rows: 50px;
width: 100%;
@include desktop {
grid-template-columns: 1fr 1fr 1fr;
}
/*
* For IE10+
*/
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 60px 60px;
/*
* For IE10+
*/
& > :nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row-align: center;
}
/*
* For IE10+
*/
& > :nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row-align: center;
-ms-grid-column-align: end;
justify-self: end;
}
& > :nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
&__header-logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: center;
/*
* For IE10+
*/
-ms-grid-column: 2;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
&__footer {
@ -169,8 +79,4 @@
-ms-grid-column: 1;
}
}
.user-header {
display: flex;
}
</style>

13
client/src/pages/start.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="start-page">
<h1 class="start-page__title h1"><span class="start-page__my">my</span>skillbox</h1>
<header-bar class="start-page__header"></header-bar>
<div class="start-page__sections start-sections">
<section-block
@ -43,11 +43,10 @@
</div>
</div>
</template>
<script>
import SectionBlock from '@/components/SectionBlock.vue';
import NewsTeaser from '@/components/NewsTeaser.vue';
import HeaderBar from '@/components/HeaderBar';
import ContentsIllustration from '@/components/illustrations/ContentsIllustration';
import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
@ -57,6 +56,7 @@
export default {
components: {
HeaderBar,
SectionBlock,
NewsTeaser,
ContentsIllustration,
@ -91,6 +91,7 @@
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@ -101,7 +102,10 @@
grid-template-rows: auto 1fr auto;
min-height: 100vh;
box-sizing: border-box;
padding-top: 2*$large-spacing;
&__header {
}
&__title {
color: $color-brand;
@ -143,6 +147,7 @@
grid-row-gap: 15px;
grid-column-gap: 50px;
justify-items: start;
align-items: center;
}
.news {