1
0

feat: add print styles

This commit is contained in:
kolaente
2022-06-02 23:00:21 +02:00
parent 1deb0a58bd
commit 6fc87e1515
10 changed files with 101 additions and 78 deletions

View File

@ -2,7 +2,7 @@
<header
:class="{'has-background': background}"
aria-label="main navigation"
class="navbar main-theme is-fixed-top"
class="navbar main-theme is-fixed-top d-print-none"
>
<router-link :to="{name: 'home'}" class="logo-link">
<Logo width="164" height="48"/>

View File

@ -3,7 +3,7 @@
<BaseButton
v-if="menuActive"
@click="$store.commit('menuActive', false)"
class="menu-hide-button"
class="menu-hide-button d-print-none"
>
<icon icon="times"/>
</BaseButton>
@ -14,9 +14,9 @@
>
<div
:class="{'is-visible': background}"
class="app-container-background background-fade-in"
class="app-container-background background-fade-in d-print-none"
:style="{'background-image': background && `url(${background})`}"></div>
<navigation/>
<navigation class="d-print-none"/>
<main
:class="[
{ 'is-menu-enabled': menuActive },
@ -27,12 +27,11 @@
<BaseButton
v-if="menuActive"
@click="$store.commit('menuActive', false)"
class="mobile-overlay"
class="mobile-overlay d-print-none"
/>
<quick-actions/>
<router-view :route="routeWithModal" v-slot="{ Component }">
<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
<component :is="Component"/>
@ -51,7 +50,7 @@
</transition>
<a
class="keyboard-shortcuts-button"
class="keyboard-shortcuts-button d-print-none"
@click="showKeyboardShortcuts()"
v-shortcut="'?'"
>
@ -238,9 +237,13 @@ store.dispatch('labels/loadAllLabels')
}
.app-content {
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
z-index: 10;
position: relative;
padding-top: 1rem;
@media screen {
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
}
// Used to make sure the spinner is always in the middle while loading
> .loader-container {
@ -253,12 +256,14 @@ store.dispatch('labels/loadAllLabels')
min-height: calc(100vh - 4rem);
}
&.is-menu-enabled {
margin-left: $navbar-width;
@media screen {
&.is-menu-enabled {
margin-left: $navbar-width;
@media screen and (max-width: $tablet) {
min-width: 100%;
margin-left: 0;
@media screen and (max-width: $tablet) {
min-width: 100%;
margin-left: 0;
}
}
}