113 lines
2.2 KiB
Vue
113 lines
2.2 KiB
Vue
<template>
|
|
<div class="container skillbox" :class="specialContainerClass">
|
|
<header-bar class="header skillbox__header">
|
|
</header-bar>
|
|
|
|
<mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>
|
|
|
|
<filter-bar v-if="showFilter" class="skillbox__filter-bar"></filter-bar>
|
|
|
|
<router-view class="skillbox__content"></router-view>
|
|
<footer class="skillbox__footer">Footer</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FilterBar from '@/components/FilterBar';
|
|
import HeaderBar from '@/components/HeaderBar';
|
|
import MobileHeader from '@/components/MobileHeader';
|
|
|
|
export default {
|
|
components: {
|
|
FilterBar,
|
|
HeaderBar,
|
|
MobileHeader
|
|
},
|
|
|
|
computed: {
|
|
showFilter() {
|
|
return this.$route.meta.filter;
|
|
},
|
|
specialContainerClass() {
|
|
let cls = this.$store.state.specialContainerClass;
|
|
return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.skillbox {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
grid-template-rows: auto 1fr;
|
|
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";
|
|
}
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
|
|
&--show-filter &__content {
|
|
-ms-grid-row: 4;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
&--show-filter &__filter-bar {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
display: -ms-grid;
|
|
-ms-grid-rows: 50px 30px 1fr; // 1 extra row for gap
|
|
-ms-grid-columns: 1fr;
|
|
|
|
@include skillbox-colors;
|
|
|
|
&__header {
|
|
grid-area: h;
|
|
-ms-grid-row: 1;
|
|
}
|
|
|
|
&__content {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
&__footer {
|
|
grid-area: f;
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* For IE10+
|
|
*/
|
|
& > :nth-child(2) {
|
|
|
|
}
|
|
|
|
& > :nth-child(3) {
|
|
-ms-grid-row: 4;
|
|
-ms-grid-column: 1;
|
|
}
|
|
}
|
|
</style>
|