From 6932084040d0af7c93f942f4995c20aa4bccdf3e Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 14:23:41 -0800
Subject: [PATCH] 14.10 Add a Scroll Area

---
 src/pages/PageTodo.vue | 68 +++++++++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/pages/PageTodo.vue b/src/pages/PageTodo.vue
index 9bffd1c..7dcdeaa 100644
--- a/src/pages/PageTodo.vue
+++ b/src/pages/PageTodo.vue
@@ -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>