Tutorials/Quasar_Todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

14.10 Add a Scroll Area

Browse Source
This commit is contained in:
Fredrick W Warren 2021-02-11 14:23:41 -08:00
parent 2f86fc56ce
commit 6932084040
1 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/PageTodo.vue
View File

@ -1,37 +1,42 @@
<template>
<q-page class="q-pa-md">
<q-page>
<div class="row q-mb-lg">
<search />
<sort />
</div>
<div class="q-pa-md absolute full-width full-height column">
<div class="relative-position">
<p
v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
No Search Results
</p>
<noTasks
v-if="!Object.keys(tasksTodo).length && !search" />
<div class="row q-mb-lg">
<search />
<sort />
</div>
<tasks-todo
v-if="Object.keys(tasksTodo).length"
:tasksTodo="tasksTodo" />
<q-scroll-area class="q-scroll-area-tasks">
<p
v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
No Search Results
</p>
<noTasks
v-if="!Object.keys(tasksTodo).length && !search" />
<tasks-completed
v-if="Object.keys(tasksCompleted).length"
:tasksCompleted="tasksCompleted" />
</div>
<tasks-todo
v-if="Object.keys(tasksTodo).length"
:tasksTodo="tasksTodo" />
<div class="absolute-bottom text-center q-mb-lg">
<q-btn
@click="showAddTask = true"
round
color="primary"
size="24px"
icon="add"
/>
</div>
<tasks-completed
v-if="Object.keys(tasksCompleted).length"
:tasksCompleted="tasksCompleted"
class="q-mb-xl" />
</q-scroll-area>
<div class="absolute-bottom text-center q-mb-lg">
<q-btn
@click="showAddTask = true"
round
color="primary"
size="24px"
icon="add"
/>
</div>
</div>
<q-dialog v-model="showAddTask">
<add-task @close="showAddTask = false" />
@ -75,3 +80,10 @@ export default {
}
}
</script>
<style>
.q-scroll-area-tasks {
display: flex;
flex-grow: 1;
}
</style>