nefrace
/
Nashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Folders, icons and dark theme

This commit is contained in:
nefrace 2022-12-14 12:10:00 +03:00
parent 77b7719192
commit 5b385a852f
4 changed files with 2256 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/index.html
View File

@ -1,9 +1,11 @@
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" /> <link rel="stylesheet" href="styles/main.css" />
<script src="js/feather.min.js"></script>
<script src="js/nashboard.js"></script> <script src="js/nashboard.js"></script>
<script src="js/mainpage.js"></script> <script src="js/mainpage.js"></script>
<title>NashBoard</title> <title>NashBoard</title>
@ -13,11 +15,23 @@
<span></span> <span></span>
</template> </template>
<template id="folder">
<div class="card">
<div class="xmark">
<i data-feather-t="x"></i>
</div>
<h3><i data-feather-t="folder"> </i><span id="folder_name"> </span></h3>
</div>
</template>
<template id="bookmark"> <template id="bookmark">
<div class="card"> <div class="card">
<h3 id="bookmark_name"></h3> <div class="xmark">
<i data-feather-t="x"></i>
</div>
<h3><i data-feather-t="link"> </i><span id="bookmark_name"></span></h3>
<a id="bookmark_link" href=""></a> <a id="bookmark_link" href=""></a>
<p id="bookmark_tags" class="tags"></p> <div id="bookmark_tags" class="tags"></div>
</div> </div>
</template> </template>
@ -27,4 +41,7 @@
<div id="bookmarks"></div> <div id="bookmarks"></div>
</div> </div>
</body> </body>
<script>
feather.replace();
</script>
</html> </html>

2130
static/js/feather.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

59
static/js/mainpage.js
View File

@ -1,3 +1,7 @@
if (!localStorage.getItem("SessionID")) {
window.location.href = "/login.html";
}
window.addEventListener("load", async () => { window.addEventListener("load", async () => {
console.log("loading..."); console.log("loading...");
const rootFolder = await getFolder(); const rootFolder = await getFolder();
@ -6,25 +10,58 @@ window.addEventListener("load", async () => {
bm.textContent = "Нет закладок"; bm.textContent = "Нет закладок";
return; return;
} }
const template = document.querySelector("#bookmark"); if (!bookmark || !folder) {
const tagtempl = document.querySelector("#booktag");
if (!template) {
return; return;
} }
for (let f of rootFolder.folder.ChildFolders) {
const clone = createFolderElement(f);
bm.appendChild(clone);
}
for (let b of rootFolder.folder.ChildBookmarks) { for (let b of rootFolder.folder.ChildBookmarks) {
const clone = template.content.cloneNode(true); const clone = createBookmarkElement(b);
clone.querySelector("#bookmark_name").textContent = b.Name; bm.appendChild(clone);
}
feather.replace();
});
function createFolderElement(folder) {
const template = document.querySelector("#folder");
const clone = template.content.firstElementChild.cloneNode(true);
clone.querySelector("#folder_name").textContent = folder.Name;
clone.addEventListener("click", () => {
alert(folder.Name);
});
for (let el of clone.querySelectorAll("[data-feather-t]")) {
el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
}
clone.querySelector(".xmark").addEventListener("click", (e) => {
alert(`${folder.Name} was deleted`);
e.stopPropagation();
});
return clone;
}
function createBookmarkElement(bookmark) {
const template = document.querySelector("#bookmark");
const tagtempl = document.querySelector("#booktag");
const clone = template.content.firstElementChild.cloneNode(true);
clone.querySelector("#bookmark_name").textContent = bookmark.Name;
const link = clone.querySelector("#bookmark_link"); const link = clone.querySelector("#bookmark_link");
link.setAttribute("href", b.Url); link.setAttribute("href", bookmark.Url);
link.textContent = b.Url; link.textContent = bookmark.Url;
for (let tag of b.Tags) { for (let tag of bookmark.Tags) {
const t = tagtempl.content.cloneNode(true); const t = tagtempl.content.cloneNode(true);
const el = t.querySelector("span"); const el = t.querySelector("span");
el.addEventListener("onclick", () => alert(tag)); el.addEventListener("onclick", () => alert(tag));
el.textContent = "#" + tag; el.textContent = "#" + tag;
clone.querySelector("#bookmark_tags").appendChild(t); clone.querySelector("#bookmark_tags").appendChild(t);
} }
for (let el of clone.querySelectorAll("[data-feather-t]")) {
bm.appendChild(clone); el.setAttribute("data-feather", el.getAttribute("data-feather-t"));
} }
}); clone.querySelector(".xmark").addEventListener("click", (e) => {
alert(`${bookmark.Name} was deleted`);
e.stopPropagation();
});
return clone;
}

55
static/styles/main.css
View File

@ -13,10 +13,25 @@
--col-acc-2: #f36d6d; --col-acc-2: #f36d6d;
--col-acc-0: #993d3d; --col-acc-0: #993d3d;
--col-fg-1: var(--col-gr-100);
--col-fg-2: var(--col-gr-200);
--col-fg-3: var(--col-gr-300);
--col-bg-1: var(--col-gr-600); --col-bg-1: var(--col-gr-600);
--col-bg-2: var(--col-gr-700); --col-bg-2: var(--col-gr-700);
--col-bg-3: var(--col-gr-800); --col-bg-3: var(--col-gr-800);
} }
@media (prefers-color-scheme: dark) {
:root {
--col-fg-1: var(--col-gr-800);
--col-fg-2: var(--col-gr-700);
--col-fg-3: var(--col-gr-600);
--col-bg-1: var(--col-gr-300);
--col-bg-2: var(--col-gr-200);
--col-bg-3: var(--col-gr-100);
}
}
h1, h1,
h2, h2,
h3, h3,
@ -29,7 +44,7 @@ h6 {
body { body {
min-height: 100vh; min-height: 100vh;
color: var(--col-main); color: var(--col-fg-2);
background-color: var(--col-bg-1); background-color: var(--col-bg-1);
font-family: "Iosevka Aile Web"; font-family: "Iosevka Aile Web";
box-sizing: border-box; box-sizing: border-box;
@ -50,11 +65,18 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 1em; border-radius: 1em;
color: var(--col-fg-1);
background-color: var(--col-bg-2); background-color: var(--col-bg-2);
box-shadow: 2px 2px 100px #1115; box-shadow: 2px 2px 100px #1115;
padding: 1em;
text-align: center; text-align: center;
} }
a {
text-decoration: none;
color: var(--col-acc-1);
}
#bookmarks { #bookmarks {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -68,8 +90,29 @@ body {
background-color: var(--col-bg-2); background-color: var(--col-bg-2);
box-shadow: 2px 2px 100px #1115; box-shadow: 2px 2px 100px #1115;
text-align: left; text-align: left;
padding: 1em; padding: 1em 2.5em 1em 1em;
margin: 1em; margin: 1em;
transition: all 200ms ease;
position: relative;
z-index: 0;
}
.card .xmark {
position: absolute;
display: block;
width: 0.8em;
height: 0.8em;
/* border: 1px solid red; */
right: 1em;
top: 1em;
}
.card:hover {
box-shadow: 2px 2px 50px var(--col-acc-2);
transform: scale(1.1);
z-index: 1;
}
.tags {
font-size: 0.8em;
color: var(--col-fg-3);
} }
form { form {
@ -80,13 +123,21 @@ form {
input { input {
background-color: var(--col-bg-3); background-color: var(--col-bg-3);
color: var(--col-fg-1);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 1em 1em; padding: 1em 1em;
font-size: 1em; font-size: 1em;
box-shadow: 2px 2px 50px #1115;
transition: all 200ms ease;
margin: 1em 0; margin: 1em 0;
} }
input:hover,
input:focus {
box-shadow: 2px 2px 50px var(--col-acc-2);
}
input[type="submit"], input[type="submit"],
button, button,
.btn { .btn {