zoldar/jenot
1
0
Fork 0
mirror of https://github.com/zoldar/jenot.git synced 2026-01-03 14:32:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make a number of styling and layout improvements

Browse source
This commit is contained in:
Adrian Gruntkowski 2024-11-30 00:50:36 +01:00
parent 8dabc770ab
commit 957d158600
2 changed files with 90 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
priv/static/index.html
View file

@ -28,22 +28,43 @@
<body> <body>
<div id="content"> <div id="content">
<h1>Jenot</h1> <nav id="top-bar">
<div>
<a id="login-link" class="hidden" href="/account/authenticate">
Log in
</a>
</div>
<form
id="new-account-form"
class="hidden"
action="/account/new"
method="post"
onsubmit="return confirm('Are you sure you want to create a new account?')"
>
<button type="submit">New account</button>
</form>
<form
id="logout-form"
class="hidden"
action="/account/logout"
method="post"
onsubmit="return confirm('Are you sure you want to log out?')"
>
<button type="submit">Log out</button>
</form>
<a id="login-link" class="hidden" href="/account/authenticate">Log in</a> <div class="hidden">
<form id="new-account-form" class="hidden" action="/account/new" method="post"> <!-- Hidden for now, until push notifications are implemented -->
<button type="submit">New account</button> <button id="enable-notifications" class="hidden">
</form> Enable notifications
<form id="logout-form" class="hidden" action="/account/logout" method="post"> </button>
<button type="submit">Log out</button> <button id="test-notifications">Send test notification</button>
</form> </div>
<button id="enable-notifications" class="hidden"">Enable notifications</button> </nav>
<button id="test-notifications">Send test notification</button>
<note-form mode="add" id="new-note"> <note-form mode="add" id="new-note">
<div class="note"> <div class="note">
<p class="content"> <p class="content"></p>
</p>
<div class="toolbar"> <div class="toolbar">
<button class="add">➕</button> <button class="add">➕</button>
<button class="tasklist-mode">☑️</button> <button class="tasklist-mode">☑️</button>
@ -55,8 +76,7 @@
<note-form mode="edit" id="edit-note" class="hidden"> <note-form mode="edit" id="edit-note" class="hidden">
<div class="note"> <div class="note">
<p class="content"> <p class="content"></p>
</p>
<div class="toolbar"> <div class="toolbar">
<button class="save">💾</button> <button class="save">💾</button>
<button class="tasklist-mode">☑️</button> <button class="tasklist-mode">☑️</button>

62
priv/static/style.css
View file

@ -110,17 +110,44 @@ editable-area textarea:focus {
/* Task list */ /* Task list */
task-list ul { task-list ul {
display: flex;
flex-direction: column;
gap: 5px;
wdith: 100%; wdith: 100%;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
task-list li:has(.checkbox input:checked) {
order: 1;
}
task-list-item .remove {
visibility: hidden;
}
task-list-item:hover .remove {
visibility: visible;
}
task-list-item:has(textarea:focus) .remove {
visibility: visible;
}
task-list-item .checkbox input {
accent-color: gray;
}
task-list-item:has(.checkbox input:checked) editable-area p.display {
text-decoration: line-through;
color: gray;
}
task-list-item { task-list-item {
display: flex; display: flex;
gap: 6px; gap: 6px;
align-items: baseline; align-items: baseline;
margin-bottom: 4px;
} }
task-list-item .handle button { task-list-item .handle button {
@ -153,31 +180,54 @@ note-form .content {
min-height: 2.5em; min-height: 2.5em;
} }
note-form .toolbar {
display: flex;
justify-content: space-between;
}
note-form .note { note-form .note {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 12px;
} }
/* Styles */ /* Styles */
:root {
--gap-1: 10px;
}
* { * {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
color: #222; color: #222;
} }
div#content { #content {
display: flex;
flex-direction: column;
gap: 1em;
/* width: 270px; */ /* width: 270px; */
max-width: 1200px; max-width: 1200px;
margin: 10px auto 0 auto; margin: var(--gap-1) auto 0 auto;
padding: 0 var(--gap-1);
}
#top-bar {
display: flex;
flex-direction: row-reverse;
gap: var(--gap-1);
}
#notes {
display: flex;
flex-direction: column;
gap: 20px;
} }
.note { .note {
/* min-width: 240px; */
background: beige; background: beige;
box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 0.8); box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 0.8);
padding: 4px 8px; padding: 4px 8px;
margin-bottom: 20px;
} }
.note.readonly ul { .note.readonly ul {