Enhance border rounding, test transitions too

diff --git a/archived.js b/archived.js
index 382335f987b3fe22cf574aefdbf0e3a22a6fe142..71e8a11d3a760246b88b33e6ace6c8cd8cd28994 100644 (file)
--- a/archived.js
+++ b/archived.js
@@ -5,7 +5,8 @@ var todos = {
 var archived = [];
 var theme = {
   colorScheme: "default",
-  css: ""
+  css: "",
+  showCompleted: false
 };
 
 if (localStorage.getItem("todos")) {

diff --git a/index.html b/index.html
index 092a4ee11726778ca6ae66bf45f5dc09f987b23a..06d115f7d655f53365de937b5c4a2664ac2d64b8 100644 (file)
--- a/index.html
+++ b/index.html
@@ -25,6 +25,8 @@
                <path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z" />
           </svg>
         </button>
+      </div>
+      <div>
         <div id="todos"></div>
         <button id="showCompleted">
           <svg id="showCompleted_open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

diff --git a/index.js b/index.js
index 8f11f5ad45d5de0675af1688c1f1efa013af0ea4..9a1eaa8cef115f5eba640bae6d729eff759baffe 100644 (file)
--- a/index.js
+++ b/index.js
@@ -5,7 +5,8 @@ var todos = {
 var archived = [];
 var theme = {
   colorScheme: "default",
-  css: ""
+  css: "",
+  showCompleted: false
 };
 
 if (localStorage.getItem("todos")) {
@@ -47,6 +48,8 @@ if (window.location.hash.length > 0) {
 
 document.getElementById("createTodo").addEventListener("click", () => {
 
+  document.documentElement.scrollTop = 0;
+
   todos.uncompleted = [
     {
       description: ""
@@ -55,12 +58,31 @@ document.getElementById("createTodo").addEventListener("click", () => {
 
   hydrateUncompleted();
   applyListeners();
+  document.getElementById("todo-uncompleted-0-description").focus();
   backupData();
 });
 
+const todosCompleted = document.getElementById("todos-completed");
+
+const doShowCompleted = (backup = false) => {
+
+  if (theme.showCompleted) {
+
+    todosCompleted.classList.remove("hidden");
+  } else {
+
+    todosCompleted.classList.add("hidden");
+  }
+
+  if (backup) backupData();
+}
+
+doShowCompleted()
+
 document.getElementById("showCompleted").addEventListener("click", () => {
 
-  document.getElementById("todos-completed").classList.toggle("hidden");
+  theme.showCompleted = !theme.showCompleted;
+  doShowCompleted(true);
   resizeTextHeights();
 });
 

diff --git a/settings.js b/settings.js
index 16233578b711e21f1be01b13b87d9d3238f73328..05a2ab4d24930ccffa9f5847d28b62446e4163b0 100644 (file)
--- a/settings.js
+++ b/settings.js
@@ -5,7 +5,8 @@ var todos = {
 var archived = [];
 var theme = {
   colorScheme: "default",
-  css: ""
+  css: "",
+  showCompleted: false
 };
 
 if (localStorage.getItem("todos")) {

diff --git a/style.css b/style.css
index 80b8790a10d007e3cf089f2bc5ed7e3567b5a014..dcb4ef82587f0b62719d1a62eddb5ed9a569e3a4 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,5 +1,8 @@
 :root {
   color-scheme: light dark;
+
+  --border-radius-inner: 0.25rem;
+  --border-radius-outer: calc(var(--border-radius-inner) * 2);
 }
 
 body {
@@ -77,6 +80,10 @@ header {
   }
 }
 
+body:has(#todos) header > hr {
+  margin-bottom: 0;
+}
+
 nav {
   display: flex;
   flex-wrap: wrap;
@@ -85,8 +92,9 @@ nav {
 
 #main {
   display: flex;
+  flex-direction: column;
   width: 100%;
-  justify-content: center;
+  align-items: center;
   & > div, #todos, #todos-completed, #archived {
     max-width: 400px;
     width: 100%;
@@ -96,9 +104,24 @@ nav {
   }
 }
 
+#todos:not(:has(*)) {
+  display: none !important;
+}
+
+#archived todo:first-child {
+  border-top-left-radius: var(--border-radius-outer) !important;
+  border-top-right-radius: var(--border-radius-outer) !important;
+}
+
+#todos-completed todo:last-child,
+#archived todo:last-child {
+  border-bottom-left-radius: var(--border-radius-outer) !important;
+  border-bottom-right-radius: var(--border-radius-outer) !important;
+}
+
 todo {
   background-color: var(--background-secondary);
-  border-radius: 0.5rem;
+  border-radius: var(--border-radius-inner);
   display: flex;
   padding: 0.5rem;
   gap: 0.5rem;
@@ -130,6 +153,7 @@ todo {
         cursor: pointer;
         &:hover {
           text-decoration: underline;
+          background-color: var(--background-tertiary);
         }
       }
     }
@@ -140,7 +164,7 @@ button {
   color: var(--text-primary);
   background-color: var(--background-secondary);
   border: unset;
-  border-radius: 0.5rem;
+  border-radius: var(--border-radius-outer);
   width: 100%;
   display: flex;
   align-items: center;
@@ -149,6 +173,28 @@ button {
   cursor: pointer;
 }
 
+todo, button {
+  transition: 0.05s ease-in;
+}
+
+div:has(> #createTodo) {
+  position: sticky;
+  top: 0;
+
+  padding: 0.5rem 0 0.25rem;
+  background-color: var(--background-primary);
+}
+
+#createTodo {
+  border-bottom-left-radius: var(--border-radius-inner);
+  border-bottom-right-radius: var(--border-radius-inner);
+}
+
+#showCompleted {
+  border-top-left-radius: var(--border-radius-inner);
+  border-top-right-radius: var(--border-radius-inner);
+}
+
 .themes {
   display: flex;
   flex-wrap: wrap;
@@ -214,6 +260,11 @@ div:has(> #todos-completed.hidden),
   display: none;
 }
 
+#main div:not(:has(#todos-completed.hidden)) #showCompleted {
+  border-bottom-left-radius: var(--border-radius-inner);
+  border-bottom-right-radius: var(--border-radius-inner);
+}
+
 @media screen and (max-width: 400px) {
   h3 {
     font-size: 1.5rem !important;