ami/tl-vikunja
1
0
Fork 0
Code

fix(project): make sure gantt and kanban views shared with link share are full width

Browse Source 
Resolves https://github.com/go-vikunja/vikunja/issues/258
This commit is contained in:
kolaente 2024-05-07 16:53:21 +02:00
parent 053c4d5842
commit fa628edc0c
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
3 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/components/home/contentLinkShare.vue
View File

@ -1,26 +1,27 @@
<template> <template>
<div <div
:class="[background ? 'has-background' : '', $route.name as string +'-view']" :class="{
'has-background': background,
'link-share-is-fullwidth': isFullWidth,
}"
:style="{'background-image': `url(${background})`}" :style="{'background-image': `url(${background})`}"
class="link-share-container" class="link-share-container"
> >
<div class="container has-text-centered link-share-view"> <div class="has-text-centered link-share-view">
<div class="column is-10 is-offset-1"> <Logo
<Logo v-if="logoVisible"
v-if="logoVisible" class="logo"
class="logo" />
/> <h1
<h1 :class="{'m-0': !logoVisible}"
:class="{'m-0': !logoVisible}" :style="{ 'opacity': currentProject?.title === '' ? '0': '1' }"
:style="{ 'opacity': currentProject?.title === '' ? '0': '1' }" class="title"
class="title" >
> {{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }} </h1>
</h1> <div class="box has-text-left view">
<div class="box has-text-left view"> <router-view />
<router-view /> <PoweredByLink />
<PoweredByLink />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -30,11 +31,13 @@
import {computed} from 'vue' import {computed} from 'vue'
import {useBaseStore} from '@/stores/base' import {useBaseStore} from '@/stores/base'
import {useRoute} from 'vue-router'
import Logo from '@/components/home/Logo.vue' import Logo from '@/components/home/Logo.vue'
import PoweredByLink from './PoweredByLink.vue' import PoweredByLink from './PoweredByLink.vue'
import {useProjectStore} from '@/stores/projects' import {useProjectStore} from '@/stores/projects'
import {useLabelStore} from '@/stores/labels' import {useLabelStore} from '@/stores/labels'
import {PROJECT_VIEW_KINDS} from '@/modelTypes/IProjectView'
const baseStore = useBaseStore() const baseStore = useBaseStore()
const currentProject = computed(() => baseStore.currentProject) const currentProject = computed(() => baseStore.currentProject)
@ -46,6 +49,20 @@ projectStore.loadAllProjects()
const labelStore = useLabelStore() const labelStore = useLabelStore()
labelStore.loadAllLabels() labelStore.loadAllLabels()
const route = useRoute()
const isFullWidth = computed(() => {
const viewId = route.params?.viewId ?? null
const projectId = route.params?.projectId ?? null
if (!viewId || !projectId) {
return false
}
const view = projectStore.projects[Number(projectId)]?.views.find(v => v.id === Number(viewId))
return view?.viewKind === PROJECT_VIEW_KINDS.KANBAN ||
view?.viewKind === PROJECT_VIEW_KINDS.GANTT
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -57,20 +74,34 @@ labelStore.loadAllLabels()
.logo { .logo {
max-width: 300px; max-width: 300px;
width: 90%; width: 90%;
margin: 2rem 0 1.5rem; margin: 1rem auto 2rem;
height: 100px; height: 100px;
} }
.column {
max-width: 100%;
}
.title { .title {
text-shadow: 0 0 1rem var(--white); text-shadow: 0 0 1rem var(--white);
} }
// FIXME: this should be defined somewhere deep .link-share-view {
.link-share-view .card { width: 100%;
background-color: var(--white); max-width: $desktop;
margin: 0 auto;
}
.link-share-container.link-share-is-fullwidth {
.link-share-view {
max-width: 100vw;
}
}
.link-share-container:not(.has-background) {
:deep(.loader-container, .gantt-chart-container > .card) {
box-shadow: none !important;
border: none;
.task-add {
padding: 1rem 0 0;
}
}
} }
</style> </style>

9
frontend/src/modelTypes/IProjectView.ts
View File

@ -1,8 +1,13 @@
import type {IAbstract} from './IAbstract' import type {IAbstract} from './IAbstract'
import type {IProject} from '@/modelTypes/IProject' import type {IProject} from '@/modelTypes/IProject'
export const PROJECT_VIEW_KINDS = ['list', 'gantt', 'table', 'kanban'] export const PROJECT_VIEW_KINDS = {
export type ProjectViewKind = typeof PROJECT_VIEW_KINDS[number] LIST: 'list',
GANTT: 'gantt',
TABLE: 'table',
KANBAN: 'kanban',
} as const
export type ProjectViewKind = typeof PROJECT_VIEW_KINDS[keyof typeof PROJECT_VIEW_KINDS]
export const PROJECT_VIEW_BUCKET_CONFIGURATION_MODES = ['none', 'manual', 'filter'] export const PROJECT_VIEW_BUCKET_CONFIGURATION_MODES = ['none', 'manual', 'filter']
export type ProjectViewBucketConfigurationMode = typeof PROJECT_VIEW_BUCKET_CONFIGURATION_MODES[number] export type ProjectViewBucketConfigurationMode = typeof PROJECT_VIEW_BUCKET_CONFIGURATION_MODES[number]

29
frontend/src/styles/theme/link-share.scss
View File

@ -14,33 +14,4 @@
border-radius: $radius !important; border-radius: $radius !important;
} }
} }
}
.link-share-container {
&.project\.gantt-view,
&.project\.kanban-view {
.container {
max-width: 100vw;
.column {
width: 100%;
margin: 0;
}
}
}
}
.link-share-container:not(.has-background) {
.list-view {
max-width: 100%;
}
.loader-container, .gantt-chart-container > .card {
box-shadow: none !important;
border: none;
.task-add {
padding: 1rem 0 0;
}
}
} }