Folders, icons and dark theme
This commit is contained in:
parent
77b7719192
commit
5b385a852f
|
|
@ -1,9 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<script src="js/feather.min.js"></script>
|
||||
<script src="js/nashboard.js"></script>
|
||||
<script src="js/mainpage.js"></script>
|
||||
<title>NashBoard</title>
|
||||
|
|
@ -13,11 +15,23 @@
|
|||
<span></span>
|
||||
</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">
|
||||
<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>
|
||||
<p id="bookmark_tags" class="tags"></p>
|
||||
<div id="bookmark_tags" class="tags"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,4 +41,7 @@
|
|||
<div id="bookmarks"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,3 +1,7 @@
|
|||
if (!localStorage.getItem("SessionID")) {
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
|
||||
window.addEventListener("load", async () => {
|
||||
console.log("loading...");
|
||||
const rootFolder = await getFolder();
|
||||
|
|
@ -6,25 +10,58 @@ window.addEventListener("load", async () => {
|
|||
bm.textContent = "Нет закладок";
|
||||
return;
|
||||
}
|
||||
const template = document.querySelector("#bookmark");
|
||||
const tagtempl = document.querySelector("#booktag");
|
||||
if (!template) {
|
||||
if (!bookmark || !folder) {
|
||||
return;
|
||||
}
|
||||
for (let f of rootFolder.folder.ChildFolders) {
|
||||
const clone = createFolderElement(f);
|
||||
bm.appendChild(clone);
|
||||
}
|
||||
for (let b of rootFolder.folder.ChildBookmarks) {
|
||||
const clone = template.content.cloneNode(true);
|
||||
clone.querySelector("#bookmark_name").textContent = b.Name;
|
||||
const clone = createBookmarkElement(b);
|
||||
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");
|
||||
link.setAttribute("href", b.Url);
|
||||
link.textContent = b.Url;
|
||||
for (let tag of b.Tags) {
|
||||
link.setAttribute("href", bookmark.Url);
|
||||
link.textContent = bookmark.Url;
|
||||
for (let tag of bookmark.Tags) {
|
||||
const t = tagtempl.content.cloneNode(true);
|
||||
const el = t.querySelector("span");
|
||||
el.addEventListener("onclick", () => alert(tag));
|
||||
el.textContent = "#" + tag;
|
||||
clone.querySelector("#bookmark_tags").appendChild(t);
|
||||
}
|
||||
|
||||
bm.appendChild(clone);
|
||||
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(`${bookmark.Name} was deleted`);
|
||||
e.stopPropagation();
|
||||
});
|
||||
return clone;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,25 @@
|
|||
--col-acc-2: #f36d6d;
|
||||
--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-2: var(--col-gr-700);
|
||||
--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,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -29,7 +44,7 @@ h6 {
|
|||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--col-main);
|
||||
color: var(--col-fg-2);
|
||||
background-color: var(--col-bg-1);
|
||||
font-family: "Iosevka Aile Web";
|
||||
box-sizing: border-box;
|
||||
|
|
@ -50,11 +65,18 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 1em;
|
||||
color: var(--col-fg-1);
|
||||
background-color: var(--col-bg-2);
|
||||
box-shadow: 2px 2px 100px #1115;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--col-acc-1);
|
||||
}
|
||||
|
||||
#bookmarks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -68,8 +90,29 @@ body {
|
|||
background-color: var(--col-bg-2);
|
||||
box-shadow: 2px 2px 100px #1115;
|
||||
text-align: left;
|
||||
padding: 1em;
|
||||
padding: 1em 2.5em 1em 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 {
|
||||
|
|
@ -80,13 +123,21 @@ form {
|
|||
|
||||
input {
|
||||
background-color: var(--col-bg-3);
|
||||
color: var(--col-fg-1);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 1em 1em;
|
||||
font-size: 1em;
|
||||
box-shadow: 2px 2px 50px #1115;
|
||||
transition: all 200ms ease;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
input:hover,
|
||||
input:focus {
|
||||
box-shadow: 2px 2px 50px var(--col-acc-2);
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
button,
|
||||
.btn {
|
||||
|
|
|
|||
Loading…
Reference in New Issue