glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

publication viewer tags and styling

Browse Source
This commit is contained in:
glax 2023-05-31 17:54:09 +02:00
parent 3dc376c19f
commit 0940afe41f
3 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Website/index.html
View File

@ -61,6 +61,7 @@
<img id="pubviewcover" src="media/cover.jpg" alt="cover"> <img id="pubviewcover" src="media/cover.jpg" alt="cover">
<publication-information> <publication-information>
<publication-name id="publicationViewerName">Tensei Pandemic</publication-name> <publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
<publication-tags id="publicationViewerTags"></publication-tags>
<publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author> <publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
<publication-description id="publicationViewerDescription">Imamura Hinata is a high school boy with a cute appearance. <publication-description id="publicationViewerDescription">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… 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…

3
Website/interaction.js
View File

@ -14,6 +14,7 @@ const publicationViewerPopup = document.querySelector("#publicationViewerPopup")
const publicationViewerWindow = document.querySelector("publication-viewer"); const publicationViewerWindow = document.querySelector("publication-viewer");
const publicationViewerDescription = document.querySelector("#publicationViewerDescription"); const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
const publicationViewerName = document.querySelector("#publicationViewerName"); const publicationViewerName = document.querySelector("#publicationViewerName");
const publicationViewerTags = document.querySelector("#publicationViewerTags");
const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor"); const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
const pubviewcover = document.querySelector("#pubviewcover"); const pubviewcover = document.querySelector("#pubviewcover");
const publicationDelete = document.querySelector("publication-delete"); const publicationDelete = document.querySelector("publication-delete");
@ -169,6 +170,7 @@ function ShowPublicationViewerWindow(publicationId, event, add){
//Edit information inside the window //Edit information inside the window
var publication = publications.filter(pub => pub.internalId === publicationId)[0]; var publication = publications.filter(pub => pub.internalId === publicationId)[0];
publicationViewerName.innerText = publication.sortName; publicationViewerName.innerText = publication.sortName;
publicationViewerTags.innerText = publication.tags.join(", ");
publicationViewerDescription.innerText = publication.description; publicationViewerDescription.innerText = publication.description;
publicationViewerAuthor.innerText = publication.author; publicationViewerAuthor.innerText = publication.author;
pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`; pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`;
@ -296,7 +298,6 @@ function ShowQueuedTasks(event){
} }
}); });
} }
function ShowAllTasks(event){ function ShowAllTasks(event){
GetDownloadTasks() GetDownloadTasks()
.then(json => { .then(json => {

35
Website/style.css
View File

@ -376,14 +376,13 @@ addtask-settings addtask-setting{
publication-viewer{ publication-viewer{
display: block; display: block;
width: 450px; width: 450px;
height: 300px;
position: absolute; position: absolute;
top: 200px; top: 200px;
left: 400px; left: 400px;
background-color: var(--accent-color); background-color: var(--accent-color);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
padding: 30px; padding: 15px;
} }
publication-viewer::after{ publication-viewer::after{
@ -391,7 +390,8 @@ publication-viewer::after{
position: absolute; position: absolute;
left: 0; top: 0; left: 0; top: 0;
border-radius: 5px; border-radius: 5px;
width: 100%; height: 100%; width: 100%;
height: 100%;
background: rgba(0,0,0,0.8); background: rgba(0,0,0,0.8);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
@ -407,16 +407,32 @@ publication-viewer img {
z-index: 0; z-index: 0;
} }
publication-viewer publication-information publication-name{ publication-viewer publication-information > * {
margin: 5px 0; margin: 5px 0;
} }
publication-viewer publication-information publication-author { publication-viewer publication-information publication-name {
margin: 5px 0; 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 { publication-viewer publication-information publication-author::before {
content: "Author: "; content: "Author: ";
font-weight: bolder;
} }
publication-viewer publication-information publication-description::before { publication-viewer publication-information publication-description::before {
@ -428,23 +444,20 @@ publication-viewer publication-information publication-description::before {
publication-viewer publication-information publication-description { publication-viewer publication-information publication-description {
font-size: 12pt; font-size: 12pt;
margin: 5px 0; margin: 5px 0;
max-height: 200px; height: 145px;
overflow-x: scroll; overflow-x: scroll;
} }
publication-viewer publication-information publication-interactions { publication-viewer publication-information publication-interactions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: absolute;
justify-content: end; justify-content: end;
align-items: start; align-items: start;
bottom: 0;
left: 0;
width: 100%; width: 100%;
} }
publication-viewer publication-information publication-interactions > * { publication-viewer publication-information publication-interactions > * {
margin: 0 10px 10px 10px; margin: 0 10px;
font-size: 16pt; font-size: 16pt;
} }