glax/Tranga
2
0
Fork 0
Code Issues Pull Requests Releases 25 Activity

Compare commits

base: glax:3e56ef842b34f309e260f194213e2b814094402b
Branches Tags
glax:master
glax:Server-V2
glax:asuratoon
glax:cuttingedge
glax:cuttingedge-merge-ServerV2
glax:dev
glax:1.5
glax:1.4.2
glax:1.4.1
glax:1.4
glax:v1.3
glax:v1.2
glax:1.1.1
glax:1.1
glax:1.0
glax:0.7
glax:0.6.2
glax:0.6.1
glax:0.6
glax:0.5.1
glax:0.5
glax:0.4.1
glax:0.4
glax:0.3.3
glax:0.3.2
glax:0.3.1
glax:0.3
glax:0.2.2
glax:0.2.1
glax:v0.2
glax:v0.1
...
compare: glax:8d3b8be95c438aa2ca20b4b1eea6791a7d4c7cd5
Branches Tags
glax:master
glax:Server-V2
glax:asuratoon
glax:cuttingedge
glax:cuttingedge-merge-ServerV2
glax:dev
glax:1.5
glax:1.4.2
glax:1.4.1
glax:1.4
glax:v1.3
glax:v1.2
glax:1.1.1
glax:1.1
glax:1.0
glax:0.7
glax:0.6.2
glax:0.6.1
glax:0.6
glax:0.5.1
glax:0.5
glax:0.4.1
glax:0.4
glax:0.3.3
glax:0.3.2
glax:0.3.1
glax:0.3
glax:0.2.2
glax:0.2.1
glax:v0.2
glax:v0.1

4 Commits
3e56ef842b ... 8d3b8be95c

Author SHA1 Message Date
glax
8d3b8be95c settings placeholders for komga if configured 2023-05-31 17:55:09 +02:00
glax
60519910de cursors 2023-05-31 17:54:54 +02:00
glax
0940afe41f publication viewer tags and styling 2023-05-31 17:54:09 +02:00
glax
3dc376c19f favicon 2023-05-31 17:52:47 +02:00
3 changed files with 47 additions and 13 deletions
Show Stats Expand all files Collapse all files

2
Website/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tranga</title> <title>Tranga</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head> </head>
<body> <body>
<wrapper> <wrapper>
@ -60,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…

18
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");
@ -78,6 +79,11 @@ function NewSearch(){
selectRecurrence.disabled = true; selectRecurrence.disabled = true;
connectorSelect.disabled = true; connectorSelect.disabled = true;
searchPublicationQuery.disabled = true; searchPublicationQuery.disabled = true;
//Waitcursor
document.body.style.cursor = "wait";
selectRecurrence.style.cursor = "wait";
connectorSelect.style.cursor = "wait";
searchPublicationQuery.style.cursor = "wait";
//Empty previous results //Empty previous results
selectPublication.replaceChildren(); selectPublication.replaceChildren();
@ -96,6 +102,11 @@ function NewSearch(){
selectRecurrence.disabled = false; selectRecurrence.disabled = false;
connectorSelect.disabled = false; connectorSelect.disabled = false;
searchPublicationQuery.disabled = false; searchPublicationQuery.disabled = false;
//Cursor
document.body.style.cursor = "initial";
selectRecurrence.style.cursor = "initial";
connectorSelect.style.cursor = "initial";
searchPublicationQuery.style.cursor = "initial";
}); });
} }
@ -169,6 +180,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}`;
@ -230,8 +242,11 @@ function GetSettingsClick(){
GetSettings().then(json => { GetSettings().then(json => {
settingDownloadLocation.innerText = json.downloadLocation; settingDownloadLocation.innerText = json.downloadLocation;
if(json.komga != null) if(json.komga != null) {
settingKomgaUrl.placeholder = json.komga.baseUrl; settingKomgaUrl.placeholder = json.komga.baseUrl;
settingKomgaUser.placeholder = "Configured";
settingKomgaPass.placeholder = "***";
}
}); });
GetKomgaTask().then(json => { GetKomgaTask().then(json => {
@ -296,7 +311,6 @@ function ShowQueuedTasks(event){
} }
}); });
} }
function ShowAllTasks(event){ function ShowAllTasks(event){
GetDownloadTasks() GetDownloadTasks()
.then(json => { .then(json => {

40
Website/style.css
View File

@ -53,6 +53,7 @@ titlebox {
} }
titlebox span{ titlebox span{
cursor: default;
font-size: 24pt; font-size: 24pt;
font-weight: bold; font-weight: bold;
background: linear-gradient(150deg, var(--primary-color), var(--accent-color)); background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
@ -64,6 +65,7 @@ titlebox span{
titlebox img { titlebox img {
height: 100%; height: 100%;
margin-right: 10px; margin-right: 10px;
cursor: grab;
} }
spacer{ spacer{
@ -119,6 +121,7 @@ footer > div {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
cursor: pointer;
} }
footer > div > *{ footer > div > *{
@ -130,6 +133,7 @@ footer > div > *{
flex-grow: 1; flex-grow: 1;
text-align: right; text-align: right;
margin-right: 20px; margin-right: 20px;
cursor: url("media/blahaj.png"), grab;
} }
content { content {
@ -376,14 +380,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 +394,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 +411,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,24 +448,22 @@ 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;
cursor: pointer;
} }
publication-viewer publication-information publication-interactions publication-starttask { publication-viewer publication-information publication-interactions publication-starttask {