andrew
/
litelist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated styles a bit.

This commit is contained in:
Andrew Lalis 2023-08-18 12:25:53 -04:00
parent e947d7567a
commit b19bdc7e4e
6 changed files with 174 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
litelist-app/src/assets/base.css
View File

@ -1,4 +1,8 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
} }
button {
font-size: medium;
}

13
litelist-app/src/components/LogOutButton.vue
View File

@ -9,19 +9,12 @@ async function doLogOut() {
</script> </script>
<template> <template>
<div class="button-container"> <button @click="doLogOut()">
<button @click="doLogOut()"> Log Out
Log Out </button>
</button>
</div>
</template> </template>
<style scoped> <style scoped>
.button-container {
max-width: 50ch;
margin: 0 auto;
}
button { button {
font-size: medium; font-size: medium;
} }

20
litelist-app/src/components/PageContainer.vue Normal file
View File

@ -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>

114
litelist-app/src/views/ListsView.vue
View File

@ -1,11 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import {useAuthStore} from "@/stores/auth"; import {useAuthStore} from "@/stores/auth";
import {nextTick, onMounted, ref, type Ref} from "vue"; 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 {createNoteList, getNoteLists} from "@/api/lists";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {stringToColor} from "@/util"; import {stringToColor} from "@/util";
import LogOutButton from "@/components/LogOutButton.vue"; import LogOutButton from "@/components/LogOutButton.vue";
import PageContainer from "@/components/PageContainer.vue";
const authStore = useAuthStore() const authStore = useAuthStore()
const router = useRouter() const router = useRouter()
@ -46,65 +47,71 @@ async function createList() {
newListModel.value.description newListModel.value.description
) )
noteLists.value = await getNoteLists(authStore.token) 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> </script>
<template> <template>
<header> <PageContainer>
<h1>Lists</h1> <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> <div>
<button @click="toggleCreatingNewList()"> <LogOutButton/>
Create New List
</button>
</div> </div>
</header> </PageContainer>
<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>
</template> </template>
<style scoped> <style scoped>
h1 { h1 {
text-align: center; text-align: center;
} }
header {
max-width: 50ch;
margin: 0 auto;
}
.note-list-item { .note-list-item {
display: block; display: block;
max-width: 50ch; margin: 1rem 0;
margin: 1rem auto; padding: 0.5rem;
padding: 1rem;
border-radius: 1rem; border-radius: 1rem;
border: 2px solid black; border-style: solid;
border-width: 3px;
position: relative; position: relative;
} }
@ -122,16 +129,23 @@ header {
font-size: small; font-size: small;
} }
.new-list-form {
max-width: 50ch;
margin: 0 auto;
}
.form-row { .form-row {
margin: 1rem 0; margin: 0.5rem 0;
} }
.form-row label { .form-row label {
display: block; 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> </style>

70
litelist-app/src/views/LoginView.vue
View File

@ -3,6 +3,7 @@ import {ref} from "vue";
import {login, type LoginError} from "@/api/auth"; import {login, type LoginError} from "@/api/auth";
import {useAuthStore} from "@/stores/auth"; import {useAuthStore} from "@/stores/auth";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import PageContainer from "@/components/PageContainer.vue";
const loginModel = ref({ const loginModel = ref({
username: "", username: "",
@ -28,34 +29,36 @@ async function doLogin() {
</script> </script>
<template> <template>
<h1>LiteList</h1> <PageContainer>
<form @submit.prevent="doLogin" @reset="resetLogin"> <h1>LiteList</h1>
<div class="form-row"> <form @submit.prevent="doLogin" @reset="resetLogin">
<label for="username-input">Username</label> <div class="form-row">
<input <label for="username-input">Username</label>
id="username-input" <input
type="text" id="username-input"
name="username" type="text"
required name="username"
v-model="loginModel.username" required
minlength="3" v-model="loginModel.username"
/> minlength="3"
</div> />
<div class="form-row"> </div>
<label for="password-input">Password</label> <div class="form-row">
<input <label for="password-input">Password</label>
id="password-input" <input
type="password" id="password-input"
name="password" type="password"
required name="password"
v-model="loginModel.password" required
minlength="8" v-model="loginModel.password"
/> minlength="8"
</div> />
<div class="form-row"> </div>
<button type="submit">Login</button> <div class="form-row">
</div> <button type="submit">Login</button>
</form> </div>
</form>
</PageContainer>
</template> </template>
<style scoped> <style scoped>
@ -81,13 +84,16 @@ form {
} }
.form-row input { .form-row input {
width: 75%; width: 30ch;
padding: 0.5rem; padding: 0.25rem;
font-size: large; font-size: large;
box-sizing: border-box;
} }
.form-row button { @media (max-width: 480px) {
font-size: medium; .form-row input {
width: 100%;
}
} }
</style> </style>

75
litelist-app/src/views/SingleListView.vue
View File

@ -4,6 +4,8 @@ import {nextTick, onMounted, ref, type Ref} from "vue";
import {useAuthStore} from "@/stores/auth"; import {useAuthStore} from "@/stores/auth";
import {createNote, deleteNote, deleteNoteList, getNoteList} from "@/api/lists"; import {createNote, deleteNote, deleteNoteList, getNoteList} from "@/api/lists";
import {useRoute, useRouter} from "vue-router"; import {useRoute, useRouter} from "vue-router";
import PageContainer from "@/components/PageContainer.vue";
import LogOutButton from "@/components/LogOutButton.vue";
const authStore = useAuthStore() const authStore = useAuthStore()
const route = useRoute() const route = useRoute()
@ -72,7 +74,7 @@ async function createNoteAndRefresh() {
</script> </script>
<template> <template>
<div v-if="list"> <PageContainer v-if="list">
<header> <header>
<h1 v-text="list.name"></h1> <h1 v-text="list.name"></h1>
<p><em v-text="list.description"></em></p> <p><em v-text="list.description"></em></p>
@ -81,10 +83,11 @@ async function createNoteAndRefresh() {
<button @click="deleteList(list.id)"> <button @click="deleteList(list.id)">
Delete this List Delete this List
</button> </button>
<button @click="router.push('/lists')">All Lists</button>
</div> </div>
</header> </header>
<form v-if="creatingNote" @submit.prevent="createNoteAndRefresh()" class="new-note-form"> <form v-if="creatingNote" @submit.prevent="createNoteAndRefresh()">
<div class="form-row"> <div class="form-row">
<label for="note-content">Text</label> <label for="note-content">Text</label>
<input type="text" id="note-content" required minlength="1" v-model="newNoteText"/> <input type="text" id="note-content" required minlength="1" v-model="newNoteText"/>
@ -104,19 +107,21 @@ async function createNoteAndRefresh() {
@click="deleteNoteAndRefresh(note.id)" @click="deleteNoteAndRefresh(note.id)"
/> />
</div> </div>
</div>
<dialog id="list-delete-dialog"> <LogOutButton/>
<form method="dialog">
<p> <dialog id="list-delete-dialog">
Are you sure you want to delete this list? All notes in it will be deleted. <form method="dialog">
</p> <p>
<div> Are you sure you want to delete this list? All notes in it will be deleted.
<button id="delete-cancel-button" value="cancel" formmethod="dialog">Cancel</button> </p>
<button id="delete-confirm-button" value="default">Confirm</button> <div>
</div> <button id="delete-cancel-button" value="cancel" formmethod="dialog">Cancel</button>
</form> <button id="delete-confirm-button" value="default">Confirm</button>
</dialog> </div>
</form>
</dialog>
</PageContainer>
</template> </template>
<style scoped> <style scoped>
@ -124,41 +129,37 @@ h1 {
text-align: center; text-align: center;
} }
header {
max-width: 50ch;
margin: 0 auto;
}
.buttons-list button { .buttons-list button {
margin-right: 1rem; margin-right: 1rem;
font-size: medium; font-size: medium;
} }
.note-item { .note-item {
max-width: 50ch; margin: 1rem 0;
margin: 1rem auto;
border-bottom: 1px solid black;
position: relative; 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 { .note-item-text {
width: 90%; width: 90%;
margin: 0;
} }
.trash-button { .trash-button {
width: 32px; width: 24px;
position: absolute; position: absolute;
top: 0; top: 5px;
right: 0; right: 5px;
} }
.trash-button:hover { .trash-button:hover {
cursor: pointer cursor: pointer;
} background-color: lightgray;
.new-note-form {
max-width: 50ch;
margin: 0 auto;
} }
.form-row { .form-row {
@ -168,4 +169,16 @@ header {
.form-row label { .form-row label {
display: block; 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> </style>