feat: add print styles
This commit is contained in:
kolaente
parent
1deb0a58bd
commit
6fc87e1515
10 changed files with 101 additions and 78 deletions
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
|
||||
{{ emptyText }}
|
||||
<template v-if="isEditEnabled">
|
||||
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>.
|
||||
<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<ul class="actions" v-if="bottomActions.length > 0">
|
||||
<ul class="actions d-print-none" v-if="bottomActions.length > 0">
|
||||
<li v-if="isEditEnabled && !showPreviewText && showSave">
|
||||
<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
||||
<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
<template v-else-if="isEditEnabled && showSave">
|
||||
<ul v-if="showEditButton" class="actions">
|
||||
<ul v-if="showEditButton" class="actions d-print-none">
|
||||
<li>
|
||||
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content details" v-if="enabled">
|
||||
<h3 v-if="canWrite || comments.length > 0">
|
||||
<h3 v-if="canWrite || comments.length > 0" :class="{'d-print-none': comments.length === 0}">
|
||||
<span class="icon is-grey">
|
||||
<icon :icon="['far', 'comments']"/>
|
||||
</span>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<img
|
||||
:src="c.author.getAvatarUrl(20)"
|
||||
alt=""
|
||||
class="image is-avatar"
|
||||
class="image is-avatar d-print-none"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media comment" v-if="canWrite">
|
||||
<div class="media comment d-print-none" v-if="canWrite">
|
||||
<figure class="media-left is-hidden-mobile">
|
||||
<img
|
||||
:src="userAvatar"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<x-button
|
||||
v-if="editEnabled && Object.keys(relatedTasks).length > 0"
|
||||
@click="showNewRelationForm = !showNewRelationForm"
|
||||
class="is-pulled-right add-task-relation-button"
|
||||
class="is-pulled-right add-task-relation-button d-print-none"
|
||||
:class="{'is-active': showNewRelationForm}"
|
||||
v-tooltip="$t('task.relation.add')"
|
||||
variant="secondary"
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@
|
|||
//--grey-lighter: #dbdbdb;
|
||||
--white-ter: whitesmoke;
|
||||
--white-bis: #fafafa;
|
||||
// END core Bulma color variables
|
||||
// END core Bulma color variables
|
||||
|
||||
|
||||
// Vikunja specific variables
|
||||
|
|
@ -191,10 +191,10 @@
|
|||
// Overrides of Bulma defaults
|
||||
--scheme-main: var(--white);
|
||||
--grey-darker: var(--grey-700);
|
||||
--grey-dark: var(--grey-800);
|
||||
--grey: var(--grey-500);
|
||||
--grey-light: var(--grey-300);
|
||||
--grey-lighter: var(--grey-200);
|
||||
--grey-dark: var(--grey-800);
|
||||
--grey: var(--grey-500);
|
||||
--grey-light: var(--grey-300);
|
||||
--grey-lighter: var(--grey-200);
|
||||
--grey-lightest: var(--grey-100);
|
||||
--input-border-color: var(--grey-200);
|
||||
|
||||
|
|
@ -218,21 +218,21 @@
|
|||
--warning-a: 1;
|
||||
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||
|
||||
// $success / $green is #00db60
|
||||
// $success / $green is #00db60
|
||||
--success-h: 146.3deg;
|
||||
--success-s: 100%;
|
||||
--success-l: 42.9%;
|
||||
--success-a: 1;
|
||||
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||
|
||||
// $danger / $red is #ff4136
|
||||
// $danger / $red is #ff4136
|
||||
--danger-h: 3.3deg;
|
||||
--danger-s: 100%;
|
||||
--danger-l: 60.6%;
|
||||
--danger-a: 1;
|
||||
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||
|
||||
// var(--primary) / $blue is #1973ff
|
||||
// var(--primary) / $blue is #1973ff
|
||||
--primary-h: 217deg;
|
||||
--primary-s: 98%;
|
||||
--primary-l: 53%;
|
||||
|
|
@ -255,56 +255,58 @@
|
|||
--card-border-color: var(--grey-200);
|
||||
--logo-text-color: hsl(180, 1%, 15%);
|
||||
|
||||
&.dark {
|
||||
// Light mode colours reversed for dark mode
|
||||
--grey-900-hsl: 210, 20%, 98%;
|
||||
--grey-900: hsl(var(--grey-900-hsl));
|
||||
--grey-800: hsl(220, 14.3%, 95.9%);
|
||||
--grey-700: hsl(220, 13%, 91%);
|
||||
--grey-600: hsl(216, 12.2%, 83.9%);
|
||||
--grey-500-hsl: 217.9, 10.6%, 64.9%;
|
||||
--grey-500: hsl(var(--grey-500-hsl));
|
||||
--grey-400: hsl(220, 8.9%, 46.1%);
|
||||
--grey-300: hsl(215, 13.8%, 34.1%);
|
||||
--grey-200: hsl(216.9, 19.1%, 26.7%);
|
||||
--grey-100-hsl: 215, 27.9%, 16.9%;
|
||||
--grey-100: hsl(var(--grey-100-hsl));
|
||||
--grey-50-hsl: 220.9, 39.3%, 11%;
|
||||
--grey-50: hsl(var(--grey-50-hsl));
|
||||
@media screen {
|
||||
&.dark {
|
||||
// Light mode colours reversed for dark mode
|
||||
--grey-900-hsl: 210, 20%, 98%;
|
||||
--grey-900: hsl(var(--grey-900-hsl));
|
||||
--grey-800: hsl(220, 14.3%, 95.9%);
|
||||
--grey-700: hsl(220, 13%, 91%);
|
||||
--grey-600: hsl(216, 12.2%, 83.9%);
|
||||
--grey-500-hsl: 217.9, 10.6%, 64.9%;
|
||||
--grey-500: hsl(var(--grey-500-hsl));
|
||||
--grey-400: hsl(220, 8.9%, 46.1%);
|
||||
--grey-300: hsl(215, 13.8%, 34.1%);
|
||||
--grey-200: hsl(216.9, 19.1%, 26.7%);
|
||||
--grey-100-hsl: 215, 27.9%, 16.9%;
|
||||
--grey-100: hsl(var(--grey-100-hsl));
|
||||
--grey-50-hsl: 220.9, 39.3%, 11%;
|
||||
--grey-50: hsl(var(--grey-50-hsl));
|
||||
|
||||
// Dark grey looks better than black
|
||||
--white: var(--grey-50);
|
||||
--black-l: 100%;
|
||||
// Dark grey looks better than black
|
||||
--white: var(--grey-50);
|
||||
--black-l: 100%;
|
||||
|
||||
// Text renders better in grey than black
|
||||
--text: var(--grey-800);
|
||||
--text-invert: #000;
|
||||
--text-light: var(--grey-300);
|
||||
--text-strong: var(--grey-900);
|
||||
// Text renders better in grey than black
|
||||
--text: var(--grey-800);
|
||||
--text-invert: #000;
|
||||
--text-light: var(--grey-300);
|
||||
--text-strong: var(--grey-900);
|
||||
|
||||
// Elements that rely on Bulma defaults in light mode but
|
||||
// need to be overriden in dark mode
|
||||
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
|
||||
--tag-color: var(--grey-800);
|
||||
--table-row-hover-background-color: var(--grey-100);
|
||||
--dropdown-item-hover-background-color: var(--grey-100);
|
||||
--dropdown-item-hover-color: var(--text);
|
||||
--button-text-hover-background-color: var(--grey-200);
|
||||
--button-hover-color: var(--grey-600);
|
||||
// Elements that rely on Bulma defaults in light mode but
|
||||
// need to be overriden in dark mode
|
||||
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
|
||||
--tag-color: var(--grey-800);
|
||||
--table-row-hover-background-color: var(--grey-100);
|
||||
--dropdown-item-hover-background-color: var(--grey-100);
|
||||
--dropdown-item-hover-color: var(--text);
|
||||
--button-text-hover-background-color: var(--grey-200);
|
||||
--button-hover-color: var(--grey-600);
|
||||
|
||||
// Custom color variables we need to override
|
||||
--card-border-color: hsla(var(--grey-100-hsl), 0.3);
|
||||
--logo-text-color: var(--grey-700);
|
||||
// Custom color variables we need to override
|
||||
--card-border-color: hsla(var(--grey-100-hsl), 0.3);
|
||||
--logo-text-color: var(--grey-700);
|
||||
|
||||
// Slightly different primary color to make sure it has a sufficent contrast ratio
|
||||
--primary-h: 217deg;
|
||||
--primary-s: 98%;
|
||||
--primary-l: 58%;
|
||||
// Slightly different primary color to make sure it has a sufficent contrast ratio
|
||||
--primary-h: 217deg;
|
||||
--primary-s: 98%;
|
||||
--primary-l: 58%;
|
||||
|
||||
--scheme-main-bis: var(--grey-100);
|
||||
--scheme-main-ter: var(--grey-100);
|
||||
--scheme-invert: var(--grey-900);
|
||||
--scheme-invert-bis: var(--grey-900);
|
||||
--scheme-invert-ter: var(--grey-800);
|
||||
--scheme-main-bis: var(--grey-100);
|
||||
--scheme-main-ter: var(--grey-100);
|
||||
--scheme-invert: var(--grey-900);
|
||||
--scheme-invert-bis: var(--grey-900);
|
||||
--scheme-invert-ter: var(--grey-800);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,3 +8,4 @@
|
|||
@import "link-share";
|
||||
@import "loading";
|
||||
@import "flatpickr";
|
||||
@import 'helpers';
|
||||
5
src/styles/theme/helpers.scss
Normal file
5
src/styles/theme/helpers.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.d-print-none {
|
||||
@media print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,10 @@
|
|||
body {
|
||||
background: var(--site-background);
|
||||
min-height: 100vh;
|
||||
|
||||
@media print {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<!-- Content and buttons -->
|
||||
<div class="columns mt-2">
|
||||
<!-- Content -->
|
||||
<div :class="{'is-two-thirds': canWrite}" class="column">
|
||||
<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
|
||||
<div class="columns details">
|
||||
<div class="column assignees" v-if="activeFields.assignees">
|
||||
<!-- Assignees -->
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
<!-- Comments -->
|
||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||
</div>
|
||||
<div class="column is-one-third action-buttons" v-if="canWrite || shouldShowClosePopup">
|
||||
<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || shouldShowClosePopup">
|
||||
<BaseButton @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4 has-text-primary" v-if="shouldShowClosePopup">
|
||||
<icon icon="arrow-left"/>
|
||||
{{ $t('task.detail.closePopup') }}
|
||||
|
|
@ -955,4 +955,10 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
@include modal-transition();
|
||||
|
||||
.detail-content {
|
||||
@media print {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue