Ailur
/
burgernotes
3
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

changes

This commit is contained in:
maaa 2023-08-04 19:48:26 +02:00
parent 793367713e
commit fd2b000731
3 changed files with 92 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
static/css/style.css
View File

@ -74,6 +74,10 @@ body {
text-align: left; text-align: left;
} }
.notesBar .loadingStuff {
border: none;
}
.notesBar .selected { .notesBar .selected {
background-color: #157efb !important; background-color: #157efb !important;
color: white color: white
@ -105,6 +109,10 @@ body {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
} }
.noteBox:focus {
outline: none
}
.optionsCoverDiv { .optionsCoverDiv {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -145,9 +153,11 @@ body {
border-radius: 99px; border-radius: 99px;
height: 7px; height: 7px;
} }
.optionsDiv progress::-moz-progress-bar { .optionsDiv progress::-moz-progress-bar {
background: #157efb; background: #157efb;
} }
.optionsDiv progresss::-webkit-progress-value { .optionsDiv progresss::-webkit-progress-value {
background: #157efb; background: #157efb;
} }
@ -247,94 +257,94 @@ body {
/* dark theme, slightly modified */ /* dark theme, slightly modified */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--gray-950: #030712; --gray-950: #030712;
--gray-900: #111827; --gray-900: #111827;
--gray-800: #1f2937; --gray-800: #1f2937;
--gray-700: #374151; --gray-700: #374151;
--gray-600: #4b5563; --gray-600: #4b5563;
--gray-500: #6b7280; --gray-500: #6b7280;
--gray-400: #9ca3af; --gray-400: #9ca3af;
--gray-300: #d1d5db; --gray-300: #d1d5db;
--gray-200: #e5e7eb; --gray-200: #e5e7eb;
--gray-100: #f3f4f6; --gray-100: #f3f4f6;
--gray-50: #f9fafb; --gray-50: #f9fafb;
} }
body { body {
color: white; color: white;
background-color: #030303; background-color: #030303;
} }
.topBar { .topBar {
background-color: rgba(18, 18, 18, 0.5); background-color: rgba(18, 18, 18, 0.5);
border-color: #303030; border-color: #303030;
} }
.notesBar { .notesBar {
background-color: #030303; background-color: #030303;
border: solid; border: solid;
border-width: 0px; border-width: 0px;
border-right-width: 1px; border-right-width: 1px;
border-color: #303030; border-color: #303030;
} }
.noteBox { .noteBox {
background-color: #030303; background-color: #030303;
color: white; color: white;
} }
.notesBar button { .notesBar button {
color: white; color: white;
} }
.notesBar .newNote img { .notesBar .newNote img {
filter: invert(1); filter: invert(1);
} }
.notesBar button { .notesBar button {
background-color: #141414; background-color: #141414;
border: none; border: none;
} }
.notesBar .selected { .notesBar .selected {
border-color: #0d51a1 !important; border-color: #0d51a1 !important;
} }
.optionsDiv { .optionsDiv {
background-color: var(--gray-800); background-color: var(--gray-800);
color: white; color: white;
border: 1px solid var(--gray-700); border: 1px solid var(--gray-700);
} }
.optionsDiv .exit { .optionsDiv .exit {
background-color: var(--gray-700); background-color: var(--gray-700);
color: white; color: white;
} }
.mainDiv .feature { .mainDiv .feature {
background-color: #141414; background-color: #141414;
border: solid; border: solid;
border-width: 1px; border-width: 1px;
border-color: #303030; border-color: #303030;
} }
.inoutdiv { .inoutdiv {
border: 1px solid var(--gray-700); border: 1px solid var(--gray-700);
border-radius: 8px; border-radius: 8px;
background-color: var(--gray-800); background-color: var(--gray-800);
box-shadow: none; box-shadow: none;
} }
.inoutdiv input { .inoutdiv input {
border: solid 1px var(--gray-600); border: solid 1px var(--gray-600);
background-color: var(--gray-700); background-color: var(--gray-700);
color: white; color: white;
} }
.inoutdiv button { .inoutdiv button {
background-color: var(--gray-700); background-color: var(--gray-700);
color: white; color: white;
border: 1px solid var(--gray-600); border: 1px solid var(--gray-600);
} }
} }

22
static/js/main.js
View File

@ -26,6 +26,11 @@ let notesBar = document.getElementById("notesBar")
let notesDiv = document.getElementById("notesDiv") let notesDiv = document.getElementById("notesDiv")
let newNote = document.getElementById("newNote") let newNote = document.getElementById("newNote")
let noteBox = document.getElementById("noteBox") let noteBox = document.getElementById("noteBox")
let loadingStuff = document.getElementById("loadingStuff")
for (let i = 0; i < 10; i++) {
notesDiv.appendChild(loadingStuff.cloneNode())
}
let selectedNote = 0 let selectedNote = 0
let timer let timer
@ -125,14 +130,14 @@ deleteMyAccountButton.addEventListener("click", (event) => {
"Content-type": "application/json; charset=UTF-8" "Content-type": "application/json; charset=UTF-8"
} }
}) })
.then((response) => response) .then((response) => response)
.then((response) => { .then((response) => {
if (response.status == 200) { if (response.status == 200) {
window.location.href = "/api/logout" window.location.href = "/api/logout"
} else { } else {
alert("failed to delete account (" + String(response.status) + ")") alert("failed to delete account (" + String(response.status) + ")")
} }
}) })
} }
}); });
@ -212,6 +217,7 @@ function updateNotes() {
}) })
.then((response) => response) .then((response) => response)
.then((response) => { .then((response) => {
document.querySelectorAll(".loadingStuff").forEach((el) => el.remove());
async function doStuff() { async function doStuff() {
document.querySelectorAll(".noteButton").forEach((el) => el.remove()); document.querySelectorAll(".noteButton").forEach((el) => el.remove());
noteBox.readOnly = true noteBox.readOnly = true

3
templates/app.html
View File

@ -19,8 +19,9 @@
</div> </div>
<div id="notesBar" class="notesBar"> <div id="notesBar" class="notesBar">
<button id="newNote" class="newNote"><img id="newNoteImage" src="/static/svg/add.svg">new note</button> <button id="newNote" class="newNote"><img id="newNoteImage" draggable="false" src="/static/svg/add.svg">new note</button>
<div id="notesDiv" class="notesDiv"> <div id="notesDiv" class="notesDiv">
<button class="loadingStuff" id="loadingStuff"></button>
</div> </div>
</div> </div>