Updated styles a bit.
This commit is contained in:
parent
e947d7567a
commit
b19bdc7e4e
|
|
@ -1,4 +1,8 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: medium;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue