From b4f58c84d6287dcc7270fc26c86226da2d6881c8 Mon Sep 17 00:00:00 2001 From: catto Date: Sat, 13 Apr 2024 17:32:40 +0200 Subject: [PATCH] reorder elements --- index.html | 37 ++++++++++--------- src/main.ts | 22 ++++++++---- src/styles.css | 97 ++++++++++++++++++++++++++++++-------------------- 3 files changed, 95 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index bc664d2..f7a0b2d 100644 --- a/index.html +++ b/index.html @@ -19,30 +19,33 @@ +
+

Snotes Deck

+ +
+ + +
+
-

Snotes Deck Test

- - -
- +
+
+ +
+
+
- - - +

-

+
-
-
- -
\ No newline at end of file diff --git a/src/main.ts b/src/main.ts index ae44ea2..e7928e4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,7 +5,7 @@ import { Note } from "./model"; let notesMsgEl: HTMLElement | null; //let createMsgEl: HTMLElement | null; -let createNoteContentEl: HTMLInputElement | null; +let createNoteContentEl: HTMLTextAreaElement | null; let createNoteTagEl: HTMLInputElement | null; let noteSidebarContainerEl: HTMLDivElement | null; @@ -25,9 +25,9 @@ async function createNote() { // read async function showNotes() { if (notesMsgEl) { - const notesJson: string = await invoke("get_notes_list"); - const formattedJson = JSON.stringify(JSON.parse(notesJson), null, 2); // Indentation of 2 spaces - notesMsgEl.textContent = formattedJson; + //const notesJson: string = await invoke("get_notes_list"); + //const formattedJson = JSON.stringify(JSON.parse(notesJson), null, 2); // Indentation of 2 spaces + //notesMsgEl.textContent = formattedJson; const array: Array = await retrieveNotes(); @@ -82,7 +82,7 @@ window.addEventListener("DOMContentLoaded", () => { // createMsgEl = document.querySelector("#create-msg"); notesMsgEl = document.querySelector("#notes-list"); showNotes(); - document.querySelector("#create-form")?.addEventListener("submit", (e) => { + document.querySelector("#save-button")?.addEventListener("click", (e) => { e.preventDefault(); createNote(); showNotes(); @@ -99,10 +99,14 @@ function fillNoteSidebar(noteArray: Note[]) { noteSidebarContainerEl = document.querySelector("#note-sidebar-container"); if (noteSidebarContainerEl) { + // clear previously existing elements + noteSidebarContainerEl.innerHTML = ""; + noteArray.forEach((note) => { // Create HTML elements for each note const noteEl: HTMLDivElement = document.createElement('div'); noteEl.classList.add('sidebar-note'); + noteEl.addEventListener("click", () => handleSidebarNoteClick(note.id), false); const idSpan: HTMLSpanElement = document.createElement('span'); idSpan.classList.add('sidebar-note-id'); @@ -110,7 +114,9 @@ function fillNoteSidebar(noteArray: Note[]) { const contentSpan: HTMLSpanElement = document.createElement('span'); contentSpan.classList.add('sidebar-note-content'); - contentSpan.textContent = note.content.substring(0, 20); + + // Show ... when text is too long + contentSpan.textContent = note.content.length > 20 ? note.content.substring(0, 20) + "..." : note.content as string; contentSpan.title = note.content as string; const tagSpan: HTMLSpanElement = document.createElement('span'); @@ -129,3 +135,7 @@ function fillNoteSidebar(noteArray: Note[]) { } +function handleSidebarNoteClick(id: Number): any { + console.log("huh " + id); +} + diff --git a/src/styles.css b/src/styles.css index 5b833f6..adcbcf6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -4,7 +4,7 @@ line-height: 24px; font-weight: 400; - background-color: #0f0f0f; + background-color: #252525; color: #f6f6f6; font-synthesis: none; @@ -12,26 +12,36 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; + +} + +#button-row { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: 0; + } .container { margin: 0; - padding-top: 10vh; + padding-top: 2vh; + display: flex; + flex-direction: row; + justify-content: space-between; + text-align: center; + + height: 80vh; +} + +.editor { + background-color: #24c8db; + margin-left: 1em; + width: 100%; + height: 100%; + display: flex; flex-direction: column; - justify-content: center; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); } .row { @@ -61,8 +71,8 @@ button { font-size: 1em; font-weight: 500; font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; + color: #ffffff; + background-color: #770079; transition: border-color 0.25s; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } @@ -80,6 +90,33 @@ button:active { background-color: #e8e8e8; } +#create-tag{ + margin: 0.5em; +} + +#create-input{ + margin: 0.5em; + + height: 100%; + + font-size: 16px; + line-height: 1.5; + + padding: 10px; + + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + + resize: none; +} + +#create-input:focus { + border-color: #cf66e9; + box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); + outline: none; /* Remove default focus outline */ +} + input, button { outline: none; @@ -94,27 +131,6 @@ button { margin-right: 5px; } -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - - button:active { - background-color: #0f0f0f69; - } -} - .sidebar { @@ -129,6 +145,11 @@ button { margin-bottom: 10px; } +.sidebar-note:hover { + cursor: pointer; + background-color: #770079; +} + .sidebar-note-id { margin-right: 10px; font-weight: bold;