zoldar/jenot
1
0
Fork 0
mirror of https://github.com/zoldar/jenot.git synced 2026-01-03 06:22:55 +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>
<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>
<form id="new-account-form" class="hidden" action="/account/new" method="post">
<button type="submit">New account</button>
</form>
<form id="logout-form" class="hidden" action="/account/logout" method="post">
<button type="submit">Log out</button>
</form>
<button id="enable-notifications" class="hidden"">Enable notifications</button>
<button id="test-notifications">Send test notification</button>
<div class="hidden">
<!-- Hidden for now, until push notifications are implemented -->
<button id="enable-notifications" class="hidden">
Enable notifications
</button>
<button id="test-notifications">Send test notification</button>
</div>
</nav>
<note-form mode="add" id="new-note">
<div class="note">
<p class="content">
</p>
<p class="content"></p>
<div class="toolbar">
<button class="add">➕</button>
<button class="tasklist-mode">☑️</button>
@ -55,8 +76,7 @@
<note-form mode="edit" id="edit-note" class="hidden">
<div class="note">
<p class="content">
</p>
<p class="content"></p>
<div class="toolbar">
<button class="save">💾</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 ul {
display: flex;
flex-direction: column;
gap: 5px;
wdith: 100%;
list-style-type: none;
margin: 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 {
display: flex;
gap: 6px;
align-items: baseline;
margin-bottom: 4px;
}
task-list-item .handle button {
@ -153,31 +180,54 @@ note-form .content {
min-height: 2.5em;
}
note-form .toolbar {
display: flex;
justify-content: space-between;
}
note-form .note {
display: flex;
flex-direction: column;
gap: 8px;
gap: 12px;
}
/* Styles */
:root {
--gap-1: 10px;
}
* {
font-family: Arial, Helvetica, sans-serif;
color: #222;
}
div#content {
#content {
display: flex;
flex-direction: column;
gap: 1em;
/* width: 270px; */
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 {
/* min-width: 240px; */
background: beige;
box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 0.8);
padding: 4px 8px;
margin-bottom: 20px;
}
.note.readonly ul {