steffeydev
/
vikunja-frontend
forked from vikunja/frontend
1
0
Fork 0
Code Pull Requests Activity

feat: optimize print view for project views

This commit is contained in:
kolaente 2023-05-30 19:50:37 +02:00
parent b3666ec27e
commit 8e2c76a33e
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/home/TheNavigation.vue
View File

@ -8,7 +8,8 @@
<MenuButton class="menu-button" /> <MenuButton class="menu-button" />
<div v-if="currentProject?.id" class="project-title-wrapper"> <div v-if="currentProject?.id" class="project-title-wrapper">
<h1 class="project-title">{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }} <h1 class="project-title">
{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
</h1> </h1>
<BaseButton :to="{ name: 'project.info', params: { projectId: currentProject.id } }" class="project-title-button"> <BaseButton :to="{ name: 'project.info', params: { projectId: currentProject.id } }" class="project-title-button">

29
src/components/misc/card.vue
View File

@ -24,12 +24,12 @@
}" }"
> >
<div :class="{'content': hasContent}"> <div :class="{'content': hasContent}">
<slot /> <slot/>
</div> </div>
</div> </div>
<footer v-if="$slots.footer" class="card-footer"> <footer v-if="$slots.footer" class="card-footer">
<slot name="footer" /> <slot name="footer"/>
</footer> </footer>
</div> </div>
</template> </template>
@ -76,22 +76,27 @@ defineEmits(['close'])
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .card {
background-color: var(--white); background-color: var(--white);
border-radius: $radius; border-radius: $radius;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--card-border-color); border: 1px solid var(--card-border-color);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
@media print {
box-shadow: none;
border: none;
}
} }
.card-header { .card-header {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid var(--card-border-color); border-bottom: 1px solid var(--card-border-color);
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
} }
.card-footer { .card-footer {
background-color: var(--grey-50); background-color: var(--grey-50);
border-top: 0; border-top: 0;
padding: var(--modal-card-head-padding); padding: var(--modal-card-head-padding);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

17
src/components/project/ProjectWrapper.vue
View File

@ -3,7 +3,11 @@
:class="{ 'is-loading': projectService.loading, 'is-archived': currentProject?.isArchived}" :class="{ 'is-loading': projectService.loading, 'is-archived': currentProject?.isArchived}"
class="loader-container" class="loader-container"
> >
<div class="switch-view-container"> <h1 class="project-title-print">
{{ getProjectTitle(currentProject) }}
</h1>
<div class="switch-view-container d-print-none">
<div class="switch-view"> <div class="switch-view">
<BaseButton <BaseButton
v-shortcut="'g l'" v-shortcut="'g l'"
@ -197,4 +201,15 @@ watch(
.is-archived .notification.is-warning { .is-archived .notification.is-warning {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.project-title-print {
display: none;
font-size: 1.75rem;
text-align: center;
margin-bottom: .5rem;
@media print {
display: block;
}
}
</style> </style>

2
src/views/project/ProjectList.vue
View File

@ -55,7 +55,7 @@
<card :padding="false" :has-content="false" class="has-overflow"> <card :padding="false" :has-content="false" class="has-overflow">
<add-task <add-task
v-if="!project.isArchived && canWrite" v-if="!project.isArchived && canWrite"
class="list-view__add-task" class="list-view__add-task d-print-none"
ref="addTaskRef" ref="addTaskRef"
:default-position="firstNewPosition" :default-position="firstNewPosition"
@taskAdded="updateTaskList" @taskAdded="updateTaskList"