From 957d15860021057f729ae5fb3fb90ed9d59a9a67 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Sat, 30 Nov 2024 00:50:36 +0100
Subject: [PATCH] Make a number of styling and layout improvements

---
 priv/static/index.html | 48 ++++++++++++++++++++++----------
 priv/static/style.css  | 62 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 90 insertions(+), 20 deletions(-)
diff --git a/priv/static/index.html b/priv/static/index.html
index 70b6546..2c38bdb 100644
--- a/priv/static/index.html
+++ b/priv/static/index.html
@@ -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>
diff --git a/priv/static/style.css b/priv/static/style.css
index ae75b1f..cb5d8a2 100644
--- a/priv/static/style.css
+++ b/priv/static/style.css
@@ -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 {
