From 27730985147b21b72b3186e0132a7dfee52fa6c1 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Wed, 25 Oct 2023 20:56:19 -0400 Subject: [PATCH 01/10] Modified Manga CSS Hover Styling --- Website/style.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Website/style.css b/Website/style.css index 486a5dd..60e75d3 100644 --- a/Website/style.css +++ b/Website/style.css @@ -208,17 +208,29 @@ publication{ flex-shrink: 0; } +publication:hover { + background-color: black; +} + +publication:hover > img { + opacity: 0.5; +} + +publication:hover > publication-information { + display: flex; + opacity:1; +} + publication::after{ content: ''; position: absolute; left: 0; top: 0; border-radius: 5px; width: 100%; height: 100%; - background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); } publication-information { - display: flex; + display: none; flex-direction: column; justify-content: start; } From 961a4d7acde46891370fe8ca22b04627f3ff8d5e Mon Sep 17 00:00:00 2001 From: db-2001 Date: Wed, 25 Oct 2023 21:02:27 -0400 Subject: [PATCH 02/10] Modified Manga CSS Hover Styling --- Website/style.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Website/style.css b/Website/style.css index 486a5dd..60e75d3 100644 --- a/Website/style.css +++ b/Website/style.css @@ -208,17 +208,29 @@ publication{ flex-shrink: 0; } +publication:hover { + background-color: black; +} + +publication:hover > img { + opacity: 0.5; +} + +publication:hover > publication-information { + display: flex; + opacity:1; +} + publication::after{ content: ''; position: absolute; left: 0; top: 0; border-radius: 5px; width: 100%; height: 100%; - background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); } publication-information { - display: flex; + display: none; flex-direction: column; justify-content: start; } From 332108780fb41c947d3937a1f9206ca6ef81dc5c Mon Sep 17 00:00:00 2001 From: db-2001 Date: Thu, 26 Oct 2023 09:18:05 -0400 Subject: [PATCH 03/10] Created separate css files for default and new hover dynamics --- Website/index.html | 2 +- Website/style_default.css | 638 ++++++++++++++++++++ Website/{style.css => style_mangahover.css} | 4 +- 3 files changed, 641 insertions(+), 3 deletions(-) create mode 100644 Website/style_default.css rename Website/{style.css => style_mangahover.css} (99%) diff --git a/Website/index.html b/Website/index.html index 6ae6379..ef99a3d 100644 --- a/Website/index.html +++ b/Website/index.html @@ -3,7 +3,7 @@ Tranga - + diff --git a/Website/style_default.css b/Website/style_default.css new file mode 100644 index 0000000..8534325 --- /dev/null +++ b/Website/style_default.css @@ -0,0 +1,638 @@ +:root{ + --background-color: #030304; + --second-background-color: #fff; + --primary-color: #f5a9b8; + --secondary-color: #5bcefa; + --accent-color: #fff; + --topbar-height: 60px; + box-sizing: border-box; +} + +body{ + padding: 0; + margin: 0; + height: 100vh; + background-color: var(--background-color); + font-family: "Inter", sans-serif; + overflow-x: hidden; +} + +wrapper { + display: flex; + flex-flow: column; + flex-wrap: nowrap; + height: 100vh; +} + +background-placeholder{ + background-color: var(--second-background-color); + opacity: 1; + position: absolute; + width: 100%; + height: 100%; + border-radius: 0 0 5px 0; + z-index: -1; +} + +topbar { + display: flex; + align-items: center; + height: var(--topbar-height); + background-color: var(--secondary-color); + z-index: 100; + box-shadow: 0 0 20px black; +} + +titlebox { + position: relative; + display: flex; + margin: 0 0 0 40px; + height: 100%; + align-items:center; + justify-content:center; +} + +titlebox span{ + cursor: default; + font-size: 24pt; + font-weight: bold; + background: linear-gradient(150deg, var(--primary-color), var(--accent-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-left: 20px; +} + +titlebox img { + height: 100%; + margin-right: 10px; + cursor: grab; +} + +spacer{ + flex-grow: 1; +} + +searchdiv{ + display: block; + margin: 0 10px 0 0; +} + +#searchbox { + padding: 3px 10px; + border: 0; + border-radius: 4px; + font-size: 14pt; + width: 250px; +} + +#settingscog { + cursor: pointer; + margin: 0px 30px; + height: 50%; + filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%); +} + +viewport { + position: relative; + display: flex; + flex-flow: row; + flex-wrap: nowrap; + flex-grow: 1; + height: 100%; + overflow-y: scroll; +} + +footer { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100%; + height: 40px; + align-items: center; + justify-content: center; + background-color: var(--primary-color); + align-content: center; +} + +footer > div { + height: 100%; + margin: 0 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + cursor: pointer; +} + +footer > div > *{ + height: 40%; + margin: 0 5px; +} + +#madeWith { + flex-grow: 1; + text-align: right; + margin-right: 20px; + cursor: url("media/blahaj.png"), grab; +} + +content { + position: relative; + flex-grow: 1; + border-radius: 5px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; + align-content: start; +} + +#settingsPopup{ + z-index: 300; +} + +#settingsPopup popup-content{ + flex-direction: column; + align-items: start; + margin: 15px 10px; +} + +#settingsPopup popup-content > * { + margin: 5px 10px; +} + +#settingsPopup popup-content .title { + font-weight: bolder; +} + +#addPublication { + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 20px; + position: relative; +} + +#addPublication p{ + width: 100%; + text-align: center; + font-size: 150pt; + vertical-align: middle; + line-height: 300px; + margin: 0; + color: var(--accent-color); +} + +.pill { + flex-grow: 0; + height: 14pt; + font-size: 12pt; + border-radius: 9pt; + background-color: var(--primary-color); + padding: 2pt 17px; + color: black; +} + +publication{ + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 20px; + position: relative; + flex-shrink: 0; +} + +publication::after{ + content: ''; + position: absolute; + left: 0; top: 0; + border-radius: 5px; + width: 100%; height: 100%; + background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); +} + +publication-information { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-information * { + z-index: 1; + color: var(--accent-color); +} + +connector-name{ + width: fit-content; + margin: 10px 0; +} + +publication-name{ + width: fit-content; + font-size: 16pt; + font-weight: bold; +} + +publication img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; + border-radius: 5px; +} + +popup{ + display: none; + width: 100%; + min-height: 100%; + top: 0; + left: 0; + position: fixed; + z-index: 2; + flex-direction: column; +} + + +popup popup-window { + position: absolute; + z-index: 3; + left: 25%; + top: 100px; + width: 50%; + display: flex; + flex-direction: column; + background-color: var(--second-background-color); + border-radius: 3px; + overflow: hidden; +} + +popup popup-window popup-title { + height: 30px; + font-size: 14pt; + font-weight: bolder; + padding: 5px 10px; + margin: 0; + display: flex; + align-items: center; + background-color: var(--primary-color); + color: var(--accent-color) +} + +popup popup-window popup-content{ + margin: 15px 10px; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +popup popup-window popup-content div > * { + margin: 2px 3px 0 0; +} + +popup popup-window popup-content input, select { + padding: 3px 4px; + width: 130px; + border: 1px solid lightgrey; + background-color: var(--accent-color); + border-radius: 3px; +} + +#newMangaPopup > div { + z-index: 3; + position: relative; +} + +#newMangaPopup > #newMangaPopupSelector { + width: 600px; + height: 40px; + margin: 80px auto 0; +} + +#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage { + margin: 0; + display: inline-block; + height: 40px; +} + +#newMangaPopup #newMangaConnector { + width: 100px; + padding: 0 0 0 5px; + border-radius: 5px 0 0 5px; + border: 0; + border-right: 1px solid darkgray; +} + +#newMangaPopup #newMangaTitle{ + width: 445px; + padding: 0 5px 0 5px; + border: 0; +} + +#newMangaPopup #newMangaTranslatedLanguage { + width: 45px; + border-radius: 0 5px 5px 0; + border: 0; + border-left: 1px solid darkgray; + margin-left: -5px; +} + +#newMangaResult { + display: none; + flex-direction: row; + justify-content: flex-start; + margin: 5px auto 0; + border-radius: 5px; + padding: 5px; + width: min-content; + max-width: 98%; + max-height: 400px; + overflow-x: scroll; + overflow-y: hidden; +} + +blur-background { + width: 100%; + height: 100%; + position: absolute; + left: 0; + background: rgba(245, 169, 184, 0.58); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(4.5px); + -webkit-backdrop-filter: blur(4.5px); +} + +#publicationViewerPopup{ + z-index: 5; +} + +publication-viewer{ + display: block; + width: 460px; + position: absolute; + top: 200px; + left: 400px; + background-color: var(--accent-color); + border-radius: 5px; + overflow: hidden; + padding: 15px; +} + +publication-viewer::after{ + content: ''; + position: absolute; + left: 0; top: 0; + border-radius: 5px; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.8); + backdrop-filter: blur(3px); +} + +publication-viewer img { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 5px; + z-index: 0; +} + +publication-viewer publication-information > * { + margin: 5px 0; +} + +publication-viewer publication-information publication-name { + width: initial; + overflow-x: scroll; + white-space: nowrap; + scrollbar-width: none; +} + +publication-viewer publication-information publication-tags::before { + content: "Tags"; + display: block; + font-weight: bolder; +} + +publication-viewer publication-information publication-tags { + overflow-x: scroll; + white-space: nowrap; + scrollbar-width: none; +} + +publication-viewer publication-information publication-author::before { + content: "Author: "; + font-weight: bolder; +} + +publication-viewer publication-information publication-description::before { + content: "Description"; + display: block; + font-weight: bolder; +} + +publication-viewer publication-information publication-description { + font-size: 12pt; + margin: 5px 0; + height: 145px; + overflow-x: scroll; +} + +publication-viewer publication-information publication-interactions { + display: flex; + flex-direction: row; + justify-content: end; + align-items: start; + width: 100%; +} + +publication-viewer publication-information publication-interactions > * { + margin: 0 10px; + font-size: 16pt; + cursor: pointer; +} + +publication-viewer publication-information publication-interactions publication-starttask { + color: var(--secondary-color); +} + +publication-viewer publication-information publication-interactions publication-delete { + color: red; +} + +publication-view publication-information publication-interactions publication-canceltask { + color: yellow; +} + +publication-viewer publication-information publication-interactions publication-add { + color: limegreen; +} + +footer-tag-popup { + display: none; + padding: 2px 4px; + position: fixed; + bottom: 58px; + left: 20px; + background-color: var(--second-background-color); + z-index: 8; + border-radius: 5px; + max-height: 400px; +} + +footer-tag-content{ + position: relative; + max-height: 400px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + overflow-y: scroll; +} + +footer-tag-content > * { + margin: 2px 5px; +} + +footer-tag-popup::before{ + content: ""; + width: 0; + height: 0; + position: absolute; + border-right: 10px solid var(--second-background-color); + border-left: 10px solid transparent; + border-top: 10px solid var(--second-background-color); + border-bottom: 10px solid transparent; + left: 0; + bottom: -17px; + border-radius: 0 0 0 5px; +} + +#loaderdiv { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 200; +} + +#loader { + border: 16px solid transparent; + border-top: 16px solid var(--secondary-color); + border-bottom: 16px solid var(--primary-color); + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; + position: absolute; + left: calc(50% - 60px); + top: calc(50% - 120px); + z-index: 201; +} + +#loaderText { + position: relative; + margin: 0 auto; + top: calc(50% + 80px); + z-index: 201; + text-align: center; + color: var(--second-background-color); + font-size: 20pt; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +#jobStatusView { + z-index: 50; +} + +#jobStatusView > popup-window { + top: 80px; + width: 50%; + max-height: calc(100% - 140px); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + background-color: transparent; +} + +#jobStatusView > popup-window > div { + overflow-y: scroll; + overflow-x: hidden; + width: 50%; + margin: 0; + max-height: 100%; +} + +#jobStatusView > popup-window > div > div { + overflow-x: hidden; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + width: 100%; + margin: 0; +} + +.jobWrapper { + width: 90%; + margin: 2px 5%; + height: 100px; + position: relative; + flex-shrink: 0; + background-color: rgba(187,187,187,0.4); + border-radius: 3px; +} + +.jobWrapper > .jobImage { + height: 90%; + width: 20%; + left: 5px; + object-fit: contain; + position: absolute; + top: 5%; +} + +.jobWrapper > .jobTitle { + position: absolute; + left: calc(20% + 10px); + top: 5px; +} + +.jobWrapper > .jobProgressBar { + position: absolute; + left: calc(20% + 10px); + bottom: calc(12pt + 10px); + width: calc(80% - 20px); + height: 10px; +} + +.jobWrapper > .jobProgressSpan { + position: absolute; + right: 10px; + bottom: calc(12pt + 20px); + width: 60%; + text-align: right; +} + +.jobWrapper > .jobCancel { + position: absolute; + right: 10px; + bottom: 5px; + font-size: 12pt; + color: var(--secondary-color); + cursor: pointer; +} \ No newline at end of file diff --git a/Website/style.css b/Website/style_mangahover.css similarity index 99% rename from Website/style.css rename to Website/style_mangahover.css index 60e75d3..9068d1a 100644 --- a/Website/style.css +++ b/Website/style_mangahover.css @@ -212,8 +212,8 @@ publication:hover { background-color: black; } -publication:hover > img { - opacity: 0.5; +publication:hover::after{ + background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); } publication:hover > publication-information { From b233e80178391324b2aaa062ea95bb57b91b6a7a Mon Sep 17 00:00:00 2001 From: db-2001 Date: Thu, 26 Oct 2023 09:24:50 -0400 Subject: [PATCH 04/10] Fixed publication-details pop-up Renamed the pop-up for the publication details and then added CSS so it shows up on both style sheets. --- Website/index.html | 4 ++-- Website/style_default.css | 11 +++++++++++ Website/style_mangahover.css | 11 +++++++++++ 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/Website/index.html b/Website/index.html index ef99a3d..10bda53 100644 --- a/Website/index.html +++ b/Website/index.html @@ -102,7 +102,7 @@ cover - + Best Manga there is A Manga Glax @@ -116,7 +116,7 @@ Monitor ➕ Download Chapter 📥 - + diff --git a/Website/style_default.css b/Website/style_default.css index 8534325..0eb14c4 100644 --- a/Website/style_default.css +++ b/Website/style_default.css @@ -239,6 +239,17 @@ publication-name{ font-weight: bold; } +publication-details { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-details * { + z-index: 1; + color: var(--accent-color); +} + publication img { position: absolute; top: 0; diff --git a/Website/style_mangahover.css b/Website/style_mangahover.css index 9068d1a..e7ed527 100644 --- a/Website/style_mangahover.css +++ b/Website/style_mangahover.css @@ -251,6 +251,17 @@ publication-name{ font-weight: bold; } +publication-details { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-details * { + z-index: 1; + color: var(--accent-color); +} + publication img { position: absolute; top: 0; From 7e6ea37d14f5b5460afe0721f6f19075fae06ce7 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Thu, 26 Oct 2023 09:37:28 -0400 Subject: [PATCH 05/10] Changed the remaining css properties so that interactions work --- Website/style_default.css | 26 +++++++++++++------------- Website/style_mangahover.css | 26 +++++++++++++------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/Website/style_default.css b/Website/style_default.css index 0eb14c4..0de7061 100644 --- a/Website/style_default.css +++ b/Website/style_default.css @@ -419,48 +419,48 @@ publication-viewer img { z-index: 0; } -publication-viewer publication-information > * { +publication-viewer publication-details > * { margin: 5px 0; } -publication-viewer publication-information publication-name { +publication-viewer publication-details publication-name { width: initial; overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } -publication-viewer publication-information publication-tags::before { +publication-viewer publication-details publication-tags::before { content: "Tags"; display: block; font-weight: bolder; } -publication-viewer publication-information publication-tags { +publication-viewer publication-details publication-tags { overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } -publication-viewer publication-information publication-author::before { +publication-viewer publication-details publication-author::before { content: "Author: "; font-weight: bolder; } -publication-viewer publication-information publication-description::before { +publication-viewer publication-details publication-description::before { content: "Description"; display: block; font-weight: bolder; } -publication-viewer publication-information publication-description { +publication-viewer publication-details publication-description { font-size: 12pt; margin: 5px 0; height: 145px; overflow-x: scroll; } -publication-viewer publication-information publication-interactions { +publication-viewer publication-details publication-interactions { display: flex; flex-direction: row; justify-content: end; @@ -468,25 +468,25 @@ publication-viewer publication-information publication-interactions { width: 100%; } -publication-viewer publication-information publication-interactions > * { +publication-viewer publication-details publication-interactions > * { margin: 0 10px; font-size: 16pt; cursor: pointer; } -publication-viewer publication-information publication-interactions publication-starttask { +publication-viewer publication-details publication-interactions publication-starttask { color: var(--secondary-color); } -publication-viewer publication-information publication-interactions publication-delete { +publication-viewer publication-details publication-interactions publication-delete { color: red; } -publication-view publication-information publication-interactions publication-canceltask { +publication-view publication-details publication-interactions publication-canceltask { color: yellow; } -publication-viewer publication-information publication-interactions publication-add { +publication-viewer publication-details publication-interactions publication-add { color: limegreen; } diff --git a/Website/style_mangahover.css b/Website/style_mangahover.css index e7ed527..949a185 100644 --- a/Website/style_mangahover.css +++ b/Website/style_mangahover.css @@ -431,48 +431,48 @@ publication-viewer img { z-index: 0; } -publication-viewer publication-information > * { +publication-viewer publication-details > * { margin: 5px 0; } -publication-viewer publication-information publication-name { +publication-viewer publication-details publication-name { width: initial; overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } -publication-viewer publication-information publication-tags::before { +publication-viewer publication-details publication-tags::before { content: "Tags"; display: block; font-weight: bolder; } -publication-viewer publication-information publication-tags { +publication-viewer publication-details publication-tags { overflow-x: scroll; white-space: nowrap; scrollbar-width: none; } -publication-viewer publication-information publication-author::before { +publication-viewer publication-details publication-author::before { content: "Author: "; font-weight: bolder; } -publication-viewer publication-information publication-description::before { +publication-viewer publication-details publication-description::before { content: "Description"; display: block; font-weight: bolder; } -publication-viewer publication-information publication-description { +publication-viewer publication-details publication-description { font-size: 12pt; margin: 5px 0; height: 145px; overflow-x: scroll; } -publication-viewer publication-information publication-interactions { +publication-viewer publication-details publication-interactions { display: flex; flex-direction: row; justify-content: end; @@ -480,25 +480,25 @@ publication-viewer publication-information publication-interactions { width: 100%; } -publication-viewer publication-information publication-interactions > * { +publication-viewer publication-details publication-interactions > * { margin: 0 10px; font-size: 16pt; cursor: pointer; } -publication-viewer publication-information publication-interactions publication-starttask { +publication-viewer publication-details publication-interactions publication-starttask { color: var(--secondary-color); } -publication-viewer publication-information publication-interactions publication-delete { +publication-viewer publication-details publication-interactions publication-delete { color: red; } -publication-view publication-information publication-interactions publication-canceltask { +publication-view publication-details publication-interactions publication-canceltask { color: yellow; } -publication-viewer publication-information publication-interactions publication-add { +publication-viewer publication-details publication-interactions publication-add { color: limegreen; } From 5abebcf3b51e4c569753919b79b6f310870ad389 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Thu, 26 Oct 2023 23:23:08 -0400 Subject: [PATCH 06/10] Added api calls for setting css stylesheet --- Website/apiConnector.js | 5 +++++ Website/index.html | 6 +++++- Website/interaction.js | 19 ++++++++++++++++++- Website/{ => styles}/style_default.css | 0 Website/{ => styles}/style_mangahover.css | 0 5 files changed, 28 insertions(+), 2 deletions(-) rename Website/{ => styles}/style_default.css (100%) rename Website/{ => styles}/style_mangahover.css (100%) diff --git a/Website/apiConnector.js b/Website/apiConnector.js index 43276b1..dd07d41 100644 --- a/Website/apiConnector.js +++ b/Website/apiConnector.js @@ -163,6 +163,11 @@ function UpdateDownloadLocation(downloadLocation){ PostData(uri); } +function ChangeStyleSheet(sheet){ + var uri = `${apiUri}/Settings/ChangeStyleSheet?styleSheet=${sheet}`; + PostData(uri); +} + function UpdateKomga(komgaUrl, komgaAuth){ var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; PostData(uri); diff --git a/Website/index.html b/Website/index.html index 10bda53..ef7a60a 100644 --- a/Website/index.html +++ b/Website/index.html @@ -3,7 +3,7 @@ Tranga - + @@ -91,6 +91,10 @@
Configured: ✅❌
+
+ +
+
diff --git a/Website/interaction.js b/Website/interaction.js index 5fcaf1d..9d81bc4 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -37,6 +37,7 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured"); const settingGotifyConfigured = document.querySelector("#gotifyConfigured"); const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured"); const settingApiUri = document.querySelector("#settingApiUri"); +const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox"); const newMangaPopup = document.querySelector("#newMangaPopup"); const newMangaConnector = document.querySelector("#newMangaConnector"); const newMangaTitle = document.querySelector("#newMangaTitle"); @@ -271,11 +272,19 @@ function OpenSettings(){ settingGotifyAppToken.value = ""; settingLunaseaWebhook.value = ""; settingApiUri.value = ""; + settingMangaHoverCheckbox.checked = false; GetSettings().then((json) => { //console.log(json); settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; + if (json.styleSheet == 'default') { + settingMangaHoverCheckbox.checked = false; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + } else { + settingMangaHoverCheckbox.checked = true; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + } }); GetLibraryConnectors().then((json) => { //console.log(json); @@ -328,6 +337,15 @@ function UpdateSettings(){ setCookie("apiUri", apiUri); Setup(); } + + // If the checkbox is checked, set the style to style_mangahover.css and + if (document.getElementById("mangaHoverCheckbox").checked == true){ + ChangeStyleSheet('hover') + console.log('Changing theme to mangahover') + } else { + ChangeStyleSheet('default'); + console.log('Changing theme to default') + } if(settingKomgaUrl.value != "" && settingKomgaUser.value != "" && @@ -373,7 +391,6 @@ function UpdateJobs(){ monitoringJobsCount = json.length; } }); - GetWaitingJobs().then((json) => { jobsQueuedTag.innerText = json.length; diff --git a/Website/style_default.css b/Website/styles/style_default.css similarity index 100% rename from Website/style_default.css rename to Website/styles/style_default.css diff --git a/Website/style_mangahover.css b/Website/styles/style_mangahover.css similarity index 100% rename from Website/style_mangahover.css rename to Website/styles/style_mangahover.css From 15d20a236b29daa55f574519cb1055e619f9de98 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Fri, 27 Oct 2023 10:48:08 -0400 Subject: [PATCH 07/10] Added empty
and set stylesheet on Setup(), Added an empty
to mitigate merge conflicts. Running GetSettings in Setup so that the webpage CSS is set up whenever the website runs for the first time and not just when the settings get opened. This shouldn't cause any issues even though setup is called a few times throughout the code. --- Website/index.html | 3 +++ Website/interaction.js | 14 ++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/Website/index.html b/Website/index.html index ef7a60a..9dc5459 100644 --- a/Website/index.html +++ b/Website/index.html @@ -90,6 +90,9 @@ LunaSea
Configured: ✅❌
+
+
+
diff --git a/Website/interaction.js b/Website/interaction.js index 9d81bc4..673c7be 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -78,6 +78,19 @@ function Setup(){ ResetContent(); UpdateJobs(); + GetSettings().then((json) => { + console.log(json); + settingDownloadLocation.innerText = json.downloadLocation; + settingApiUri.placeholder = apiUri; + console.log(json.styleSheet); + if (json.styleSheet == 'default') { + settingMangaHoverCheckbox.checked = false; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + } else { + settingMangaHoverCheckbox.checked = true; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + } + }); setInterval(() => { UpdateJobs(); }, 1000); @@ -278,6 +291,7 @@ function OpenSettings(){ //console.log(json); settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; + console.log(json.styleSheet); if (json.styleSheet == 'default') { settingMangaHoverCheckbox.checked = false; document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); From 2381a8913b0bc2c6fce4af19eab3465cb51acbaa Mon Sep 17 00:00:00 2001 From: db-2001 Date: Fri, 27 Oct 2023 11:18:37 -0400 Subject: [PATCH 08/10] Changed the style sheet selection logic so the default is actually the default. If the styleSheet property doesn't exist or isn't equal to a valid string, it used to default to the mangahover.css from the else statement. Logically, that means that mangahover was the default instead of the actual default. This has been rectified. --- Website/interaction.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Website/interaction.js b/Website/interaction.js index 673c7be..fea905b 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -83,12 +83,12 @@ function Setup(){ settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; console.log(json.styleSheet); - if (json.styleSheet == 'default') { - settingMangaHoverCheckbox.checked = false; - document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); - } else { + if (json.styleSheet == 'hover') { settingMangaHoverCheckbox.checked = true; document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + } else { + settingMangaHoverCheckbox.checked = false; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); } }); setInterval(() => { @@ -292,12 +292,12 @@ function OpenSettings(){ settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; console.log(json.styleSheet); - if (json.styleSheet == 'default') { - settingMangaHoverCheckbox.checked = false; - document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); - } else { + if (json.styleSheet == 'hover') { settingMangaHoverCheckbox.checked = true; document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + } else { + settingMangaHoverCheckbox.checked = false; + document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); } }); GetLibraryConnectors().then((json) => { From 5698c93439bdf4fb5c3d13ec0c8e770ca2236244 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Fri, 27 Oct 2023 11:38:35 -0400 Subject: [PATCH 09/10] Merged properly.... I think? Got rid of empty div --- Website/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/Website/index.html b/Website/index.html index 3ff0ddd..9cf6850 100644 --- a/Website/index.html +++ b/Website/index.html @@ -96,9 +96,6 @@
Configured: ✅❌
-
-
-
From 1f3ed66f97445375ae178bd205634656cad3bf84 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Sun, 29 Oct 2023 22:24:16 -0400 Subject: [PATCH 10/10] Fixes after merge broke some stuff --- Website/interaction.js | 10 ++++---- Website/styles/style_default.css | 40 +++++++++++--------------------- 2 files changed, 19 insertions(+), 31 deletions(-) diff --git a/Website/interaction.js b/Website/interaction.js index 38fdf89..859de7f 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -82,10 +82,10 @@ function Setup(){ ResetContent(); UpdateJobs(); GetSettings().then((json) => { - console.log(json); + //console.log(json); settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; - console.log(json.styleSheet); + //console.log(json.styleSheet); if (json.styleSheet == 'hover') { settingMangaHoverCheckbox.checked = true; document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); @@ -299,7 +299,7 @@ function OpenSettings(){ //console.log(json); settingDownloadLocation.innerText = json.downloadLocation; settingApiUri.placeholder = apiUri; - console.log(json.styleSheet); + //console.log(json.styleSheet); if (json.styleSheet == 'hover') { settingMangaHoverCheckbox.checked = true; document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); @@ -368,10 +368,10 @@ function UpdateSettings(){ // If the checkbox is checked, set the style to style_mangahover.css and if (document.getElementById("mangaHoverCheckbox").checked == true){ ChangeStyleSheet('hover') - console.log('Changing theme to mangahover') + //console.log('Changing theme to mangahover') } else { ChangeStyleSheet('default'); - console.log('Changing theme to default') + //console.log('Changing theme to default') } if(settingKomgaUrl.value != "" && diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css index f468079..19c0f52 100644 --- a/Website/styles/style_default.css +++ b/Website/styles/style_default.css @@ -1,4 +1,4 @@ -:root{ +:root{ --background-color: #030304; --second-background-color: #fff; --primary-color: #f5a9b8; @@ -208,29 +208,23 @@ publication{ flex-shrink: 0; } -publication:hover { - background-color: black; -} - -publication:hover > img { - opacity: 0.5; -} - -publication:hover > publication-information { - display: flex; - opacity:1; -} - publication::after{ content: ''; position: absolute; left: 0; top: 0; border-radius: 5px; width: 100%; height: 100%; + background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); } publication-information { - display: none; + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-details { + display: flex; flex-direction: column; justify-content: start; } @@ -240,6 +234,11 @@ publication-information * { color: var(--accent-color); } +publication-details * { + z-index: 1; + color: var(--accent-color); +} + connector-name{ width: fit-content; margin: 10px 0; @@ -251,17 +250,6 @@ publication-name{ font-weight: bold; } -publication-details { - display: flex; - flex-direction: column; - justify-content: start; -} - -publication-details * { - z-index: 1; - color: var(--accent-color); -} - publication img { position: absolute; top: 0;