v2024.02.29

notable/models.py

@@ -131,7 +131,7 @@ def all(cls, sort: str = "favorited", filter: str = None):
             x = [Note(i) for i in config.HOME_DIR.glob("**/*.txt")]
         return sorted(
             x,
-            key=attrgetter(sort),
+            key=attrgetter(sort, "last_modified"),
             reverse=sort in ["favorited", "last_modified", "date_created"],
         )
 
@@ -156,6 +156,8 @@ def to_dict(self) -> dict:
             "markdown": markdown.markdown(self.content),
             "favorited": self.favorited,
             "folder": self.folder,
+            "last_modified": self.last_modified.strftime("%-m/%-d/%y @ %-I:%M %p"),
+            "date_created": self.date_created.strftime("%-m/%-d/%y @ %-I:%M %p"),
         }
 
     def __str__(self):

notable/web/static/App.css

@@ -1,173 +1,180 @@
-* {
-  font-family: "Nunito Sans";
-}
-
 :root,
 html[data-theme="light"] {
   --primary-bg: #cccccc;
   --primary-txt: #1a1a1a;
   --btn-color: #1a1a1a;
-  --btn-hover: #cccccc;
+  --btn-hover-text: #cccccc;
 }
 
 html[data-theme="dark"] {
   --primary-bg: #1a1a1a;
   --primary-txt: #cccccc;
   --btn-color: #cccccc;
-  --btn-hover: #1a1a1a;
+  --btn-hover-text: #1a1a1a;
+}
+
+html[data-theme="caramel"] {
+  --primary-bg: #e4beaf;
+  --primary-txt: #1a1a1a;
+  --btn-color: #1a1a1a;
+  --btn-hover-text: #e4beaf;
 }
 
-html[data-theme="manila"] {
-  --primary-bg: #e5b181;
-  --primary-txt: #523f2e;
-  --btn-color: #474448;
-  --btn-hover: #c9bbcd;
+html[data-theme="ocean"] {
+  --primary-bg: #cccccc;
+  --primary-txt: #4558a3;
+  --btn-color: #4558a3;
+  --btn-hover-text: #cccccc;
 }
 
-html[data-theme="looseleaf"] {
-  --primary-bg: #d6d6d6;
-  --primary-txt: #39649d;
-  --btn-color: #8d4545;
-  --btn-hover: #ffb7b7;
+html[data-theme="violet"] {
+  --primary-bg: #cccccc;
+  --primary-txt: #7a4864;
+  --btn-color: #7a4864;
+  --btn-hover-text: #cccccc;
 }
 
-html[data-theme="space"] {
-  --primary-bg: #2b2d42;
-  --primary-txt: #c3c8ff;
-  --btn-color: #ddd5d0;
-  --btn-hover: #393837;
+html[data-theme="navy"] {
+  --primary-bg: #10334c;
+  --primary-txt: #cccccc;
+  --btn-color: #cccccc;
+  --btn-hover-text: #10334c;
 }
 
-html[data-theme="pine"] {
-  --primary-bg: #a3c4bc;
-  --primary-txt: #2d3835;
-  --btn-color: #023c40;
-  --btn-hover: #0cdfee;
+html[data-theme="vanilla"] {
+  --primary-bg: #1a1a1a;
+  --primary-txt: #c1a357;
+  --btn-color: #c1a357;
+  --btn-hover-text: #1a1a1a;
 }
 
-html[data-theme="quartz"] {
-  --primary-bg: #9888a5;
-  --primary-txt: #1f1d21;
-  --btn-color: #001427;
-  --btn-hover: #0483fa;
+html[data-theme="mint"] {
+  --primary-bg: #1a1a1a;
+  --primary-txt: #75cd73;
+  --btn-color: #75cd73;
+  --btn-hover-text: #1a1a1a;
 }
 
-html[data-theme="licorice"] {
-  --primary-bg: #362023;
-  --primary-txt: #ffcad1;
-  --btn-color: #fcfcfc;
-  --btn-hover: #2c2c2c;
+html[data-theme="ruby"] {
+  --primary-bg: #cccccc;
+  --primary-txt: #8b3041;
+  --btn-color: #8b3041;
+  --btn-hover-text: #cccccc;
 }
 
-html[data-theme="magenta"] {
-  --primary-bg: #ede6e3;
-  --primary-txt: #5a5756;
-  --btn-color: #653d51;
-  --btn-hover: #ffb4db;
+html[data-theme="forest"] {
+  --primary-bg: #cccccc;
+  --primary-txt: #2c5c36;
+  --btn-color: #2c5c36;
+  --btn-hover-text: #cccccc;
 }
 
-body,
-nav {
+body {
   background-color: var(--primary-bg);
   color: var(--primary-txt);
 }
 
 .btn {
   background-color: transparent;
-  color: var(--btn-color);
   border-color: var(--btn-color);
-  letter-spacing: 2px;
+  color: var(--btn-color);
+  letter-spacing: 1px;
 }
 
 .btn:hover,
 .btn.active {
   background-color: var(--btn-color);
-  color: var(--btn-hover);
   border-color: transparent;
+  color: var(--btn-hover-text);
 }
 
-a,
-a:hover,
-.nav-link,
-.nav-link:hover,
-.navbar-brand,
-.navbar-brand:hover,
-.navbar-toggler {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
+.view {
+  height: 80% !important;
+}
+
+.border-end {
+  border-color: var(--primary-txt) !important;
+  border-right-style: dotted !important;
 }
 
 .form-control,
 .form-control:focus {
-  background-color: transparent;
+  background-color: var(--primary-bg);
   color: var(--primary-txt);
   border-color: var(--primary-txt);
+  resize: none;
 }
 
-.text-warning {
-  color: darkorange !important;
+::placeholder {
+  color: var(--primary-txt) !important;
+  letter-spacing: 2px !important;
+  opacity: 50% !important;
 }
 
-.dropdown-item {
-  color: var(--primary-txt);
-  letter-spacing: 1px;
-  text-align: center;
+.between {
+  display: flex;
+  justify-content: space-between;
 }
 
-.dropdown-menu {
-  background-color: var(--primary-bg);
-  color: var(--primary-txt);
-  border: 1px solid var(--btn-color);
+.item {
+  cursor: pointer;
 }
 
-.heading {
-  letter-spacing: 1px;
+.selected {
+  background-color: var(--btn-color);
+  border-color: transparent;
+  color: var(--btn-hover-text);
 }
 
-.badge {
-  background-color: transparent;
+#reader code {
+  font-family: monospace;
   color: var(--btn-color);
 }
 
-textarea {
-  resize: none;
+#reader a {
+  color: var(--btn-color);
   font-style: italic;
 }
 
-body {
-  height: 100%;
+#reader img {
+  max-width: 100%;
 }
 
-::placeholder {
-  color: var(--primary-txt) !important;
-  letter-spacing: 1px !important;
-  opacity: 25% !important;
+.dropdown-menu,
+.dropdown-item {
+  background-color: var(--primary-bg);
+  color: var(--primary-txt);
 }
 
-.selected {
-  border-top: 1px dotted var(--primary-txt);
-  border-bottom: 1px dotted var(--primary-txt);
-  font-style: italic;
-  font-weight: bold;
+.dropdown-item:hover {
+  background-color: var(--btn-color);
+  color: var(--btn-hover-text);
 }
 
-.nav-item,
-.navbar-brand {
-  letter-spacing: 1px;
+.dropdown-menu {
+  border-color: var(--btn-color);
+  font-size: small;
 }
 
-#reader img {
-  max-width: 100%;
+.dropdown-item {
+  text-align: center;
 }
 
-#reader a {
-  color: var(--btn-color);
-  text-decoration: underline;
-  font-weight: bold;
+textarea {
+  border: 0 !important;
+  font-style: italic;
 }
 
-#reader code,
-#reader pre {
-  color: var(--btn-color);
+a,
+a:hover {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.badge {
+  font-weight: inherit;
+  color: inherit;
+  border: 1px solid;
+  border-radius: 10px;
 }