ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: grid for list cards

Browse Source
This commit is contained in:
Dominik Pschenitschni
2022-11-15 17:25:52 +01:00
parent 4b47478440
commit 42e9f306e8
9 changed files with 340 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/Home.vue
View File

@ -40,17 +40,11 @@
</template>
<div v-if="listHistory.length > 0" class="is-max-width-desktop has-text-left mt-4">
<h3>{{ $t('home.lastViewed') }}</h3>
<div class="is-flex list-cards-wrapper-2-rows">
<list-card
v-for="(l, k) in listHistory"
:key="`l${k}`"
:list="l"
/>
</div>
<ListCardGrid :lists="listHistory" v-cy="'listCardGrid'" />
</div>
<ShowTasks
v-if="hasLists"
class="mt-4"
class="show-tasks"
:key="showTasksKey"
/>
</div>
@ -61,7 +55,7 @@ import {ref, computed} from 'vue'
import Message from '@/components/misc/message.vue'
import ShowTasks from '@/views/tasks/ShowTasks.vue'
import ListCard from '@/components/list/partials/list-card.vue'
import ListCardGrid from '@/components/list/partials/ListCardGrid.vue'
import AddTask from '@/components/tasks/add-task.vue'
import {getHistory} from '@/modules/listHistory'
@ -113,14 +107,8 @@ function updateTaskList() {
}
</script>
<style lang="scss" scoped>
.list-cards-wrapper-2-rows {
flex-wrap: wrap;
max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px);
overflow: hidden;
@media screen and (max-width: $mobile) {
max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px);
}
<style scoped lang="scss">
.show-tasks {
margin-top: 2rem;
}
</style>

53
src/views/namespaces/ListNamespaces.vue
View File

@ -15,28 +15,28 @@
</div>
</header>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
<p v-if="namespaces.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
{{ $t('namespace.noneAvailable') }}
<router-link :to="{name: 'namespace.create'}">
<BaseButton :to="{name: 'namespace.create'}">
{{ $t('namespace.create.title') }}.
</router-link>
</BaseButton>
</p>
<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
<x-button
v-if="n.id > 0 && n.lists.length > 0"
:to="{name: 'list.create', params: {namespaceId: n.id}}"
class="is-pulled-right"
variant="secondary"
v-if="n.id > 0 && n.lists.length > 0"
icon="plus"
>
{{ $t('list.create.header') }}
</x-button>
<x-button
v-if="n.isArchived"
:to="{name: 'namespace.settings.archive', params: {id: n.id}}"
class="is-pulled-right mr-4"
variant="secondary"
v-if="n.isArchived"
icon="archive"
>
{{ $t('namespace.unarchive') }}
@ -44,26 +44,22 @@
<h2 class="namespace-title">
<span v-cy="'namespace-title'">{{ getNamespaceTitle(n) }}</span>
<span class="is-archived" v-if="n.isArchived">
<span v-if="n.isArchived" class="is-archived">
{{ $t('namespace.archived') }}
</span>
</h2>
<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="n.lists.length === 0">
<p v-if="n.lists.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
{{ $t('namespace.noLists') }}
<router-link :to="{name: 'list.create', params: {namespaceId: n.id}}">
<BaseButton :to="{name: 'list.create', params: {namespaceId: n.id}}">
{{ $t('namespace.createList') }}
</router-link>
</BaseButton>
</p>
<div class="lists">
<list-card
v-for="l in n.lists"
:key="`l${l.id}`"
:list="l"
:show-archived="showArchived"
/>
</div>
<ListCardGrid v-else
:lists="n.lists"
:show-archived="showArchived"
/>
</section>
</div>
</template>
@ -72,8 +68,9 @@
import {computed} from 'vue'
import {useI18n} from 'vue-i18n'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import ListCard from '@/components/list/partials/list-card.vue'
import ListCardGrid from '@/components/list/partials/ListCardGrid.vue'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
import {useTitle} from '@/composables/useTitle'
@ -89,11 +86,10 @@ const showArchived = useStorage('showArchived', false)
const loading = computed(() => namespaceStore.isLoading)
const namespaces = computed(() => {
return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
// return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {
// n.lists = n.lists.filter(l => !l.isArchived)
// return n
// })
return namespaceStore.namespaces.filter(namespace => showArchived.value
? true
: !namespace.isArchived,
)
})
</script>
@ -121,10 +117,8 @@ const namespaces = computed(() => {
}
}
.namespace {
& + & {
margin-top: 1rem;
}
.namespace:not(:first-child) {
margin-top: 1rem;
}
.namespace-title {
@ -142,9 +136,4 @@ const namespaces = computed(() => {
background: var(--white-translucent);
margin-left: .5rem;
}
.lists {
display: flex;
flex-flow: row wrap;
}
</style>