local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: add print styles

Browse source
This commit is contained in:
kolaente 2022-06-02 23:00:21 +02:00
parent 1deb0a58bd
commit 6fc87e1515
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
10 changed files with 101 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/home/TheNavigation.vue
View file

@ -2,7 +2,7 @@
<header <header
:class="{'has-background': background}" :class="{'has-background': background}"
aria-label="main navigation" 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"> <router-link :to="{name: 'home'}" class="logo-link">
<Logo width="164" height="48"/> <Logo width="164" height="48"/>

29
src/components/home/contentAuth.vue
View file

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

6
src/components/input/editor.vue
View file

@ -16,11 +16,11 @@
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText"> <p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
{{ emptyText }} {{ emptyText }}
<template v-if="isEditEnabled"> <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> </template>
</p> </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"> <li v-if="isEditEnabled && !showPreviewText && showSave">
<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a> <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> <a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
@ -30,7 +30,7 @@
</li> </li>
</ul> </ul>
<template v-else-if="isEditEnabled && showSave"> <template v-else-if="isEditEnabled && showSave">
<ul v-if="showEditButton" class="actions"> <ul v-if="showEditButton" class="actions d-print-none">
<li> <li>
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a> <a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
</li> </li>

6
src/components/tasks/partials/comments.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="content details" v-if="enabled"> <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"> <span class="icon is-grey">
<icon :icon="['far', 'comments']"/> <icon :icon="['far', 'comments']"/>
</span> </span>
@ -29,7 +29,7 @@
<img <img
:src="c.author.getAvatarUrl(20)" :src="c.author.getAvatarUrl(20)"
alt="" alt=""
class="image is-avatar" class="image is-avatar d-print-none"
height="20" height="20"
width="20" width="20"
/> />
@ -82,7 +82,7 @@
/> />
</div> </div>
</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"> <figure class="media-left is-hidden-mobile">
<img <img
:src="userAvatar" :src="userAvatar"

2
src/components/tasks/partials/relatedTasks.vue
View file

@ -3,7 +3,7 @@
<x-button <x-button
v-if="editEnabled && Object.keys(relatedTasks).length > 0" v-if="editEnabled && Object.keys(relatedTasks).length > 0"
@click="showNewRelationForm = !showNewRelationForm" @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}" :class="{'is-active': showNewRelationForm}"
v-tooltip="$t('task.relation.add')" v-tooltip="$t('task.relation.add')"
variant="secondary" variant="secondary"

112
src/styles/custom-properties/colors.scss
View file

@ -170,7 +170,7 @@
//--grey-lighter: #dbdbdb; //--grey-lighter: #dbdbdb;
--white-ter: whitesmoke; --white-ter: whitesmoke;
--white-bis: #fafafa; --white-bis: #fafafa;
// END core Bulma color variables // END core Bulma color variables
// Vikunja specific variables // Vikunja specific variables
@ -191,10 +191,10 @@
// Overrides of Bulma defaults // Overrides of Bulma defaults
--scheme-main: var(--white); --scheme-main: var(--white);
--grey-darker: var(--grey-700); --grey-darker: var(--grey-700);
--grey-dark: var(--grey-800); --grey-dark: var(--grey-800);
--grey: var(--grey-500); --grey: var(--grey-500);
--grey-light: var(--grey-300); --grey-light: var(--grey-300);
--grey-lighter: var(--grey-200); --grey-lighter: var(--grey-200);
--grey-lightest: var(--grey-100); --grey-lightest: var(--grey-100);
--input-border-color: var(--grey-200); --input-border-color: var(--grey-200);
@ -218,21 +218,21 @@
--warning-a: 1; --warning-a: 1;
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a)); --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-h: 146.3deg;
--success-s: 100%; --success-s: 100%;
--success-l: 42.9%; --success-l: 42.9%;
--success-a: 1; --success-a: 1;
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a)); --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-h: 3.3deg;
--danger-s: 100%; --danger-s: 100%;
--danger-l: 60.6%; --danger-l: 60.6%;
--danger-a: 1; --danger-a: 1;
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a)); --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-h: 217deg;
--primary-s: 98%; --primary-s: 98%;
--primary-l: 53%; --primary-l: 53%;
@ -255,56 +255,58 @@
--card-border-color: var(--grey-200); --card-border-color: var(--grey-200);
--logo-text-color: hsl(180, 1%, 15%); --logo-text-color: hsl(180, 1%, 15%);
&.dark { @media screen {
// Light mode colours reversed for dark mode &.dark {
--grey-900-hsl: 210, 20%, 98%; // Light mode colours reversed for dark mode
--grey-900: hsl(var(--grey-900-hsl)); --grey-900-hsl: 210, 20%, 98%;
--grey-800: hsl(220, 14.3%, 95.9%); --grey-900: hsl(var(--grey-900-hsl));
--grey-700: hsl(220, 13%, 91%); --grey-800: hsl(220, 14.3%, 95.9%);
--grey-600: hsl(216, 12.2%, 83.9%); --grey-700: hsl(220, 13%, 91%);
--grey-500-hsl: 217.9, 10.6%, 64.9%; --grey-600: hsl(216, 12.2%, 83.9%);
--grey-500: hsl(var(--grey-500-hsl)); --grey-500-hsl: 217.9, 10.6%, 64.9%;
--grey-400: hsl(220, 8.9%, 46.1%); --grey-500: hsl(var(--grey-500-hsl));
--grey-300: hsl(215, 13.8%, 34.1%); --grey-400: hsl(220, 8.9%, 46.1%);
--grey-200: hsl(216.9, 19.1%, 26.7%); --grey-300: hsl(215, 13.8%, 34.1%);
--grey-100-hsl: 215, 27.9%, 16.9%; --grey-200: hsl(216.9, 19.1%, 26.7%);
--grey-100: hsl(var(--grey-100-hsl)); --grey-100-hsl: 215, 27.9%, 16.9%;
--grey-50-hsl: 220.9, 39.3%, 11%; --grey-100: hsl(var(--grey-100-hsl));
--grey-50: hsl(var(--grey-50-hsl)); --grey-50-hsl: 220.9, 39.3%, 11%;
--grey-50: hsl(var(--grey-50-hsl));
// Dark grey looks better than black // Dark grey looks better than black
--white: var(--grey-50); --white: var(--grey-50);
--black-l: 100%; --black-l: 100%;
// Text renders better in grey than black // Text renders better in grey than black
--text: var(--grey-800); --text: var(--grey-800);
--text-invert: #000; --text-invert: #000;
--text-light: var(--grey-300); --text-light: var(--grey-300);
--text-strong: var(--grey-900); --text-strong: var(--grey-900);
// Elements that rely on Bulma defaults in light mode but // Elements that rely on Bulma defaults in light mode but
// need to be overriden in dark mode // need to be overriden in dark mode
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6); --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
--tag-color: var(--grey-800); --tag-color: var(--grey-800);
--table-row-hover-background-color: var(--grey-100); --table-row-hover-background-color: var(--grey-100);
--dropdown-item-hover-background-color: var(--grey-100); --dropdown-item-hover-background-color: var(--grey-100);
--dropdown-item-hover-color: var(--text); --dropdown-item-hover-color: var(--text);
--button-text-hover-background-color: var(--grey-200); --button-text-hover-background-color: var(--grey-200);
--button-hover-color: var(--grey-600); --button-hover-color: var(--grey-600);
// Custom color variables we need to override // Custom color variables we need to override
--card-border-color: hsla(var(--grey-100-hsl), 0.3); --card-border-color: hsla(var(--grey-100-hsl), 0.3);
--logo-text-color: var(--grey-700); --logo-text-color: var(--grey-700);
// Slightly different primary color to make sure it has a sufficent contrast ratio // Slightly different primary color to make sure it has a sufficent contrast ratio
--primary-h: 217deg; --primary-h: 217deg;
--primary-s: 98%; --primary-s: 98%;
--primary-l: 58%; --primary-l: 58%;
--scheme-main-bis: var(--grey-100); --scheme-main-bis: var(--grey-100);
--scheme-main-ter: var(--grey-100); --scheme-main-ter: var(--grey-100);
--scheme-invert: var(--grey-900); --scheme-invert: var(--grey-900);
--scheme-invert-bis: var(--grey-900); --scheme-invert-bis: var(--grey-900);
--scheme-invert-ter: var(--grey-800); --scheme-invert-ter: var(--grey-800);
}
} }
} }

3
src/styles/theme/_index.scss
View file

@ -7,4 +7,5 @@
@import "form"; @import "form";
@import "link-share"; @import "link-share";
@import "loading"; @import "loading";
@import "flatpickr"; @import "flatpickr";
@import 'helpers';

5
src/styles/theme/helpers.scss Normal file
View file

@ -0,0 +1,5 @@
.d-print-none {
@media print {
display: none !important;
}
}

4
src/styles/theme/theme.scss
View file

@ -26,6 +26,10 @@
body { body {
background: var(--site-background); background: var(--site-background);
min-height: 100vh; min-height: 100vh;
@media print {
background: #fff;
}
} }
h1, h1,

10
src/views/tasks/TaskDetailView.vue
View file

@ -14,7 +14,7 @@
<!-- Content and buttons --> <!-- Content and buttons -->
<div class="columns mt-2"> <div class="columns mt-2">
<!-- Content --> <!-- 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="columns details">
<div class="column assignees" v-if="activeFields.assignees"> <div class="column assignees" v-if="activeFields.assignees">
<!-- Assignees --> <!-- Assignees -->
@ -246,7 +246,7 @@
<!-- Comments --> <!-- Comments -->
<comments :can-write="canWrite" :task-id="taskId"/> <comments :can-write="canWrite" :task-id="taskId"/>
</div> </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"> <BaseButton @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4 has-text-primary" v-if="shouldShowClosePopup">
<icon icon="arrow-left"/> <icon icon="arrow-left"/>
{{ $t('task.detail.closePopup') }} {{ $t('task.detail.closePopup') }}
@ -955,4 +955,10 @@ $flash-background-duration: 750ms;
} }
@include modal-transition(); @include modal-transition();
.detail-content {
@media print {
width: 100% !important;
}
}
</style> </style>