reorder elements
This commit is contained in:
parent
0d853db108
commit
b4f58c84d6
37
index.html
37
index.html
|
|
@ -19,30 +19,33 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<h1>Snotes Deck</h1>
|
||||
|
||||
<div id="button-row">
|
||||
<button class="row" id="show-notes-button">Refresh Notes</button>
|
||||
<button type="submit" id="save-button">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1>Snotes Deck Test</h1>
|
||||
|
||||
|
||||
<form class="row" id="create-form">
|
||||
<input id="create-input" placeholder="Note..." />
|
||||
<div class="sidebar">
|
||||
<div class="note-sidebar-container" id="note-sidebar-container">
|
||||
<!--
|
||||
<span class="sidebar-note-id">1</span>
|
||||
<span class="sidebar-note-content">Lorem ipsum dolor sit amet...</span>
|
||||
<span class="sidebar-note-tag">Tag</span>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor">
|
||||
<input id="create-tag" placeholder="Tag..." />
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
<textarea id="create-input" placeholder="Note..." ></textarea>
|
||||
<p id="create-msg"></p>
|
||||
|
||||
<button class="row" id="show-notes-button">Refresh Notes</button>
|
||||
<p style="white-space: pre-line" id="notes-list"></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="note-sidebar-container" id="note-sidebar-container">
|
||||
<!--
|
||||
<span class="sidebar-note-id">1</span>
|
||||
<span class="sidebar-note-content">Lorem ipsum dolor sit amet...</span>
|
||||
<span class="sidebar-note-tag">Tag</span>
|
||||
-->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
22
src/main.ts
22
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<any> = 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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue