From 0940afe41ff508029989af2243a2fccd4287aa50 Mon Sep 17 00:00:00 2001 From: glax Date: Wed, 31 May 2023 17:54:09 +0200 Subject: [PATCH] publication viewer tags and styling --- Website/index.html | 1 + Website/interaction.js | 3 ++- Website/style.css | 35 ++++++++++++++++++++++++----------- 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/Website/index.html b/Website/index.html index e21469f..361afda 100644 --- a/Website/index.html +++ b/Website/index.html @@ -61,6 +61,7 @@ cover Tensei Pandemic + Imamura Hinata Imamura Hinata is a high school boy with a cute appearance. Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different… diff --git a/Website/interaction.js b/Website/interaction.js index b176927..25d4c96 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -14,6 +14,7 @@ const publicationViewerPopup = document.querySelector("#publicationViewerPopup") const publicationViewerWindow = document.querySelector("publication-viewer"); const publicationViewerDescription = document.querySelector("#publicationViewerDescription"); const publicationViewerName = document.querySelector("#publicationViewerName"); +const publicationViewerTags = document.querySelector("#publicationViewerTags"); const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor"); const pubviewcover = document.querySelector("#pubviewcover"); const publicationDelete = document.querySelector("publication-delete"); @@ -169,6 +170,7 @@ function ShowPublicationViewerWindow(publicationId, event, add){ //Edit information inside the window var publication = publications.filter(pub => pub.internalId === publicationId)[0]; publicationViewerName.innerText = publication.sortName; + publicationViewerTags.innerText = publication.tags.join(", "); publicationViewerDescription.innerText = publication.description; publicationViewerAuthor.innerText = publication.author; pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`; @@ -296,7 +298,6 @@ function ShowQueuedTasks(event){ } }); } - function ShowAllTasks(event){ GetDownloadTasks() .then(json => { diff --git a/Website/style.css b/Website/style.css index 8297cc3..51216a1 100644 --- a/Website/style.css +++ b/Website/style.css @@ -376,14 +376,13 @@ addtask-settings addtask-setting{ publication-viewer{ display: block; width: 450px; - height: 300px; position: absolute; top: 200px; left: 400px; background-color: var(--accent-color); border-radius: 5px; overflow: hidden; - padding: 30px; + padding: 15px; } publication-viewer::after{ @@ -391,7 +390,8 @@ publication-viewer::after{ position: absolute; left: 0; top: 0; border-radius: 5px; - width: 100%; height: 100%; + width: 100%; + height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(3px); } @@ -407,16 +407,32 @@ publication-viewer img { z-index: 0; } -publication-viewer publication-information publication-name{ +publication-viewer publication-information > * { margin: 5px 0; } -publication-viewer publication-information publication-author { - 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 { @@ -428,23 +444,20 @@ publication-viewer publication-information publication-description::before { publication-viewer publication-information publication-description { font-size: 12pt; margin: 5px 0; - max-height: 200px; + height: 145px; overflow-x: scroll; } publication-viewer publication-information publication-interactions { display: flex; flex-direction: row; - position: absolute; justify-content: end; align-items: start; - bottom: 0; - left: 0; width: 100%; } publication-viewer publication-information publication-interactions > * { - margin: 0 10px 10px 10px; + margin: 0 10px; font-size: 16pt; }