From b19bdc7e4ef1e3123a62ffd4a9921c7625eb4f41 Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Fri, 18 Aug 2023 12:25:53 -0400
Subject: [PATCH] Updated styles a bit.

---
 litelist-app/src/assets/base.css              |   6 +-
 litelist-app/src/components/LogOutButton.vue  |  13 +-
 litelist-app/src/components/PageContainer.vue |  20 +++
 litelist-app/src/views/ListsView.vue          | 114 ++++++++++--------
 litelist-app/src/views/LoginView.vue          |  70 ++++++-----
 litelist-app/src/views/SingleListView.vue     |  75 +++++++-----
 6 files changed, 174 insertions(+), 124 deletions(-)
 create mode 100644 litelist-app/src/components/PageContainer.vue

diff --git a/litelist-app/src/assets/base.css b/litelist-app/src/assets/base.css
index 08c11b9..ad6866f 100644
--- a/litelist-app/src/assets/base.css
+++ b/litelist-app/src/assets/base.css
@@ -1,4 +1,8 @@
 body {
     font-family: sans-serif;
     margin: 0;
-}
\ No newline at end of file
+}
+
+button {
+    font-size: medium;
+}
diff --git a/litelist-app/src/components/LogOutButton.vue b/litelist-app/src/components/LogOutButton.vue
index 9d9cba1..34a4d26 100644
--- a/litelist-app/src/components/LogOutButton.vue
+++ b/litelist-app/src/components/LogOutButton.vue
@@ -9,19 +9,12 @@ async function doLogOut() {
 </script>
 
 <template>
-  <div class="button-container">
-    <button @click="doLogOut()">
-      Log Out
-    </button>
-  </div>
+  <button @click="doLogOut()">
+    Log Out
+  </button>
 </template>
 
 <style scoped>
-.button-container {
-  max-width: 50ch;
-  margin: 0 auto;
-}
-
 button {
   font-size: medium;
 }
diff --git a/litelist-app/src/components/PageContainer.vue b/litelist-app/src/components/PageContainer.vue
new file mode 100644
index 0000000..075052a
--- /dev/null
+++ b/litelist-app/src/components/PageContainer.vue
@@ -0,0 +1,20 @@
+<!--
+This is a generic container to wrap around a page's content to keep it within
+a mobile-friendly width.
+-->
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page-container">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  max-width: 50ch;
+  margin: 0 auto;
+  padding: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/litelist-app/src/views/ListsView.vue b/litelist-app/src/views/ListsView.vue
index 067cdd8..b0aaaad 100644
--- a/litelist-app/src/views/ListsView.vue
+++ b/litelist-app/src/views/ListsView.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import {useAuthStore} from "@/stores/auth";
 import {nextTick, onMounted, ref, type Ref} from "vue";
-import type {NoteList} from "@/api/lists";
+import type {Note, NoteList} from "@/api/lists";
 import {createNoteList, getNoteLists} from "@/api/lists";
 import {useRouter} from "vue-router";
 import {stringToColor} from "@/util";
 import LogOutButton from "@/components/LogOutButton.vue";
+import PageContainer from "@/components/PageContainer.vue";
 
 const authStore = useAuthStore()
 const router = useRouter()
@@ -46,65 +47,71 @@ async function createList() {
       newListModel.value.description
   )
   noteLists.value = await getNoteLists(authStore.token)
+  creatingNewList.value = false
+}
+
+function getListItemStyle(list: NoteList) {
+  return {
+    "background-color": stringToColor(list.name, 100, 92),
+    "border-color": stringToColor(list.name, 100, 50)
+  }
 }
 </script>
 
 <template>
-  <header>
-    <h1>Lists</h1>
+  <PageContainer>
+    <header>
+      <h1>Lists</h1>
+      <div>
+        <button @click="toggleCreatingNewList()">
+          Create New List
+        </button>
+      </div>
+    </header>
+
+    <form v-if="creatingNewList" @submit.prevent="createList()">
+      <div class="form-row">
+        <label for="list-name">Name</label>
+        <input type="text" id="list-name" required minlength="3" v-model="newListModel.name"/>
+      </div>
+      <div class="form-row">
+        <label for="list-description">Description</label>
+        <input type="text" id="list-description" v-model="newListModel.description"/>
+      </div>
+      <div class="form-row">
+        <button type="submit">Create List</button>
+      </div>
+    </form>
+
+    <div
+        class="note-list-item"
+        v-for="list in noteLists"
+        :key="list.id"
+        @click="goToList(list.id)"
+        :style="getListItemStyle(list)"
+    >
+      <h3 v-text="list.name"></h3>
+      <p v-text="list.description"></p>
+    </div>
+
     <div>
-      <button @click="toggleCreatingNewList()">
-        Create New List
-      </button>
+      <LogOutButton/>
     </div>
-  </header>
-
-  <form v-if="creatingNewList" class="new-list-form" @submit.prevent="createList()">
-    <div class="form-row">
-      <label for="list-name">Name</label>
-      <input type="text" id="list-name" required minlength="3" v-model="newListModel.name"/>
-    </div>
-    <div class="form-row">
-      <label for="list-description">Description</label>
-      <input type="text" id="list-description" v-model="newListModel.description"/>
-    </div>
-    <div class="form-row">
-      <button type="submit">Create List</button>
-    </div>
-  </form>
-
-  <div
-      class="note-list-item"
-      v-for="list in noteLists"
-      :key="list.id"
-      @click="goToList(list.id)"
-      :style="{'background-color': stringToColor(list.name, 100, 90)}"
-  >
-    <h3 v-text="list.name"></h3>
-    <p v-text="list.description"></p>
-  </div>
-
-  <div>
-    <LogOutButton/>
-  </div>
+  </PageContainer>
 </template>
 
 <style scoped>
 h1 {
   text-align: center;
 }
-header {
-  max-width: 50ch;
-  margin: 0 auto;
-}
 
 .note-list-item {
   display: block;
-  max-width: 50ch;
-  margin: 1rem auto;
-  padding: 1rem;
+  margin: 1rem 0;
+  padding: 0.5rem;
   border-radius: 1rem;
-  border: 2px solid black;
+  border-style: solid;
+  border-width: 3px;
   position: relative;
 }
 
@@ -122,16 +129,23 @@ header {
   font-size: small;
 }
 
-.new-list-form {
-  max-width: 50ch;
-  margin: 0 auto;
-}
-
 .form-row {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .form-row label {
   display: block;
 }
+
+.form-row input {
+  font-size: medium;
+  padding: 0.25rem;
+  box-sizing: border-box;
+}
+
+@media (max-width: 480px) {
+  .form-row input {
+    width: 100%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/litelist-app/src/views/LoginView.vue b/litelist-app/src/views/LoginView.vue
index d1b1e47..01637fc 100644
--- a/litelist-app/src/views/LoginView.vue
+++ b/litelist-app/src/views/LoginView.vue
@@ -3,6 +3,7 @@ import {ref} from "vue";
 import {login, type LoginError} from "@/api/auth";
 import {useAuthStore} from "@/stores/auth";
 import {useRouter} from "vue-router";
+import PageContainer from "@/components/PageContainer.vue";
 
 const loginModel = ref({
   username: "",
@@ -28,34 +29,36 @@ async function doLogin() {
 </script>
 
 <template>
-  <h1>LiteList</h1>
-  <form @submit.prevent="doLogin" @reset="resetLogin">
-    <div class="form-row">
-      <label for="username-input">Username</label>
-      <input
-          id="username-input"
-          type="text"
-          name="username"
-          required
-          v-model="loginModel.username"
-          minlength="3"
-      />
-    </div>
-    <div class="form-row">
-      <label for="password-input">Password</label>
-      <input
-          id="password-input"
-          type="password"
-          name="password"
-          required
-          v-model="loginModel.password"
-          minlength="8"
-      />
-    </div>
-    <div class="form-row">
-      <button type="submit">Login</button>
-    </div>
-  </form>
+  <PageContainer>
+    <h1>LiteList</h1>
+    <form @submit.prevent="doLogin" @reset="resetLogin">
+      <div class="form-row">
+        <label for="username-input">Username</label>
+        <input
+            id="username-input"
+            type="text"
+            name="username"
+            required
+            v-model="loginModel.username"
+            minlength="3"
+        />
+      </div>
+      <div class="form-row">
+        <label for="password-input">Password</label>
+        <input
+            id="password-input"
+            type="password"
+            name="password"
+            required
+            v-model="loginModel.password"
+            minlength="8"
+        />
+      </div>
+      <div class="form-row">
+        <button type="submit">Login</button>
+      </div>
+    </form>
+  </PageContainer>
 </template>
 
 <style scoped>
@@ -81,13 +84,16 @@ form {
 }
 
 .form-row input {
-  width: 75%;
-  padding: 0.5rem;
+  width: 30ch;
+  padding: 0.25rem;
   font-size: large;
+  box-sizing: border-box;
 }
 
-.form-row button {
-  font-size: medium;
+@media (max-width: 480px) {
+  .form-row input {
+    width: 100%;
+  }
 }
 
 </style>
\ No newline at end of file
diff --git a/litelist-app/src/views/SingleListView.vue b/litelist-app/src/views/SingleListView.vue
index dc07aeb..b155e13 100644
--- a/litelist-app/src/views/SingleListView.vue
+++ b/litelist-app/src/views/SingleListView.vue
@@ -4,6 +4,8 @@ import {nextTick, onMounted, ref, type Ref} from "vue";
 import {useAuthStore} from "@/stores/auth";
 import {createNote, deleteNote, deleteNoteList, getNoteList} from "@/api/lists";
 import {useRoute, useRouter} from "vue-router";
+import PageContainer from "@/components/PageContainer.vue";
+import LogOutButton from "@/components/LogOutButton.vue";
 
 const authStore = useAuthStore()
 const route = useRoute()
@@ -72,7 +74,7 @@ async function createNoteAndRefresh() {
 </script>
 
 <template>
-  <div v-if="list">
+  <PageContainer v-if="list">
     <header>
       <h1 v-text="list.name"></h1>
       <p><em v-text="list.description"></em></p>
@@ -81,10 +83,11 @@ async function createNoteAndRefresh() {
         <button @click="deleteList(list.id)">
           Delete this List
         </button>
+        <button @click="router.push('/lists')">All Lists</button>
       </div>
     </header>
 
-    <form v-if="creatingNote" @submit.prevent="createNoteAndRefresh()" class="new-note-form">
+    <form v-if="creatingNote" @submit.prevent="createNoteAndRefresh()">
       <div class="form-row">
         <label for="note-content">Text</label>
         <input type="text" id="note-content" required minlength="1" v-model="newNoteText"/>
@@ -104,19 +107,21 @@ async function createNoteAndRefresh() {
           @click="deleteNoteAndRefresh(note.id)"
       />
     </div>
-  </div>
 
-  <dialog id="list-delete-dialog">
-    <form method="dialog">
-      <p>
-        Are you sure you want to delete this list? All notes in it will be deleted.
-      </p>
-      <div>
-        <button id="delete-cancel-button" value="cancel" formmethod="dialog">Cancel</button>
-        <button id="delete-confirm-button" value="default">Confirm</button>
-      </div>
-    </form>
-  </dialog>
+    <LogOutButton/>
+
+    <dialog id="list-delete-dialog">
+      <form method="dialog">
+        <p>
+          Are you sure you want to delete this list? All notes in it will be deleted.
+        </p>
+        <div>
+          <button id="delete-cancel-button" value="cancel" formmethod="dialog">Cancel</button>
+          <button id="delete-confirm-button" value="default">Confirm</button>
+        </div>
+      </form>
+    </dialog>
+  </PageContainer>
 </template>
 
 <style scoped>
@@ -124,41 +129,37 @@ h1 {
   text-align: center;
 }
 
-header {
-  max-width: 50ch;
-  margin: 0 auto;
-}
-
 .buttons-list button {
   margin-right: 1rem;
   font-size: medium;
 }
 
 .note-item {
-  max-width: 50ch;
-  margin: 1rem auto;
-  border-bottom: 1px solid black;
+  margin: 1rem 0;
   position: relative;
+  background-color: #fff2bd;
+  color: #212121;
+  font-size: large;
+  padding: 0.5rem;
+  min-height: 40px;
+  box-shadow: 2px 2px 4px 1px black;
 }
 
 .note-item-text {
   width: 90%;
+  margin: 0;
 }
 
 .trash-button {
-  width: 32px;
+  width: 24px;
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
 }
 
 .trash-button:hover {
-  cursor: pointer
-}
-
-.new-note-form {
-  max-width: 50ch;
-  margin: 0 auto;
+  cursor: pointer;
+  background-color: lightgray;
 }
 
 .form-row {
@@ -168,4 +169,16 @@ header {
 .form-row label {
   display: block;
 }
+
+.form-row input {
+  font-size: medium;
+  padding: 0.25rem;
+  box-sizing: border-box;
+}
+
+@media(max-width: 480px) {
+  .form-row input {
+    width: 100%;
+  }
+}
 </style>
\ No newline at end of file