Compare commits

..

36 Commits

Author SHA1 Message Date
31a03a54bb
Merge pull request #57 from C9Glax/dependabot/github_actions/docker/setup-buildx-action-3.1.0
Bump docker/setup-buildx-action from 2.10.0 to 3.1.0
2024-02-28 02:35:49 +01:00
dependabot[bot]
83ed99e5db
Bump docker/setup-buildx-action from 2.10.0 to 3.1.0
Bumps [docker/setup-buildx-action](https://github.com/docker/setup-buildx-action) from 2.10.0 to 3.1.0.
- [Release notes](https://github.com/docker/setup-buildx-action/releases)
- [Commits](https://github.com/docker/setup-buildx-action/compare/v2.10.0...v3.1.0)

---
updated-dependencies:
- dependency-name: docker/setup-buildx-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-02-27 15:31:55 +00:00
18d3a09d93 https://github.com/C9Glax/tranga/issues/109 2024-01-31 19:12:05 +01:00
0bc3147bb3 #36 Remove docker-compose 2023-12-31 17:32:23 +01:00
43cbb80eec Fix overflow of tooltip release-status. 2023-11-12 13:48:28 +01:00
95876f1a53 New scrollbar, fix some overflow by scrollbar 2023-11-12 13:28:41 +01:00
42caebf458
Merge pull request #33 from db-2001/update-library-metadat
Added button to settings pop-up to refresh library metadata through POST request
2023-11-03 09:56:36 +01:00
ddee459aa2
Merge pull request #32 from db-2001/persistent-release-status
Move release-status to top right and keep visible
2023-11-03 09:50:24 +01:00
6952bcaa1d
Merge pull request #31 from db-2001/hover-css-onclick
Changed CSS feature to update whenever the checkbox is clicked instead of when the update button is clicked
2023-11-03 09:48:46 +01:00
db-2001
4cd06bd0e0 Added button to settings pop-up to refresh library metadata through POST request 2023-11-02 14:28:28 -04:00
db-2001
d138094a66 Move release-status to top right and keep visible 2023-11-02 14:07:17 -04:00
db-2001
d1dfeadb80 Feature 2023-11-02 13:31:48 -04:00
c315237d64
Merge pull request #27 from db-2001/release-status
Initial feature for Publication Status Indicator
2023-11-02 14:24:20 +01:00
db-2001
830252c8a7 Removed console logging 2023-11-01 20:01:28 -04:00
db-2001
54731e74e3 Revert "Moved tooltip to right for better readability"
This reverts commit 53bb83faca.
2023-11-01 19:58:38 -04:00
db-2001
53bb83faca Moved tooltip to right for better readability 2023-11-01 19:47:21 -04:00
db-2001
b03918ab5c Initial feature 2023-11-01 19:06:47 -04:00
135aca08ab
Merge pull request #22 from db-2001/fix-update-button
Preliminary fix for update button deleting all mangas
2023-10-30 19:21:57 +01:00
b47ba90f20
Merge branch 'master' into fix-update-button 2023-10-30 19:21:22 +01:00
eb13e6e37d Merge branch 'cuttingedge' 2023-10-30 19:14:19 +01:00
db-2001
6245210faf Added GetMonitorJobs back to UpdateJobs 2023-10-30 14:09:41 -04:00
e01683d7f3
Merge pull request #17 from db-2001/dityb
Modified Manga CSS Hover Styling
2023-10-30 18:58:56 +01:00
db-2001
c3a15a354b Preliminary fix for update button deleting all mangas 2023-10-30 13:29:39 -04:00
0b09df67b9 #19 missing field KavitaPassword 2023-10-30 13:36:02 +01:00
db-2001
1f3ed66f97 Fixes after merge broke some stuff 2023-10-29 22:24:16 -04:00
db-2001
5698c93439 Merged properly.... I think? Got rid of empty div 2023-10-27 11:38:35 -04:00
db-2001
fc8388f037 Merge remote-tracking branch 'remotes/origin/master' into dityb 2023-10-27 11:38:13 -04:00
Dity
f6544e743b
Merge branch 'C9Glax:master' into master 2023-10-27 11:24:28 -04:00
db-2001
2381a8913b 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.
2023-10-27 11:18:37 -04:00
db-2001
15d20a236b Added empty <div> and set stylesheet on Setup(),
Added an empty <div> 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.
2023-10-27 10:48:08 -04:00
db-2001
5abebcf3b5 Added api calls for setting css stylesheet 2023-10-26 23:23:08 -04:00
db-2001
7e6ea37d14 Changed the remaining css properties so that interactions work 2023-10-26 09:37:28 -04:00
db-2001
b233e80178 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.
2023-10-26 09:24:50 -04:00
db-2001
332108780f Created separate css files for default and new hover dynamics 2023-10-26 09:18:05 -04:00
db-2001
961a4d7acd Modified Manga CSS Hover Styling 2023-10-25 21:02:27 -04:00
db-2001
2773098514 Modified Manga CSS Hover Styling 2023-10-25 20:56:19 -04:00
9 changed files with 949 additions and 45 deletions

View File

@ -22,7 +22,7 @@ jobs:
# https://github.com/marketplace/actions/docker-setup-buildx # https://github.com/marketplace/actions/docker-setup-buildx
- name: Set up Docker Buildx - name: Set up Docker Buildx
id: buildx id: buildx
uses: docker/setup-buildx-action@v2.10.0 uses: docker/setup-buildx-action@v3.1.0
# https://github.com/docker/login-action#docker-hub # https://github.com/docker/login-action#docker-hub
- name: Login to Docker Hub - name: Login to Docker Hub

View File

@ -22,7 +22,7 @@ jobs:
# https://github.com/marketplace/actions/docker-setup-buildx # https://github.com/marketplace/actions/docker-setup-buildx
- name: Set up Docker Buildx - name: Set up Docker Buildx
id: buildx id: buildx
uses: docker/setup-buildx-action@v2.10.0 uses: docker/setup-buildx-action@v3.1.0
# https://github.com/docker/login-action#docker-hub # https://github.com/docker/login-action#docker-hub
- name: Login to Docker Hub - name: Login to Docker Hub

View File

@ -24,7 +24,7 @@ jobs:
# https://github.com/marketplace/actions/docker-setup-buildx # https://github.com/marketplace/actions/docker-setup-buildx
- name: Set up Docker Buildx - name: Set up Docker Buildx
id: buildx id: buildx
uses: docker/setup-buildx-action@v2.10.0 uses: docker/setup-buildx-action@v3.1.0
# https://github.com/docker/login-action#docker-hub # https://github.com/docker/login-action#docker-hub
- name: Login to Docker Hub - name: Login to Docker Hub

View File

@ -163,13 +163,23 @@ function UpdateDownloadLocation(downloadLocation){
PostData(uri); PostData(uri);
} }
function ChangeStyleSheet(sheet){
var uri = `${apiUri}/Settings/ChangeStyleSheet?styleSheet=${sheet}`;
PostData(uri);
}
function RefreshLibraryMetadata() {
var uri = `${apiUri}/Jobs/UpdateMetadata`;
PostData(uri);
}
function UpdateKomga(komgaUrl, komgaAuth){ function UpdateKomga(komgaUrl, komgaAuth){
var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
PostData(uri); PostData(uri);
} }
function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){ function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){
var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword={kavitaPassword}`; var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
PostData(uri); PostData(uri);
} }
@ -188,6 +198,11 @@ function UpdateNtfy(ntfyEndpoint, ntfyAuth){
PostData(uri); PostData(uri);
} }
function UpdateUserAgent(userAgent){
var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`;
PostData(uri);
}
function RemoveJob(jobId){ function RemoveJob(jobId){
var uri = `${apiUri}/Jobs?jobId=${jobId}`; var uri = `${apiUri}/Jobs?jobId=${jobId}`;
DeleteData(uri); DeleteData(uri);

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tranga</title> <title>Tranga</title>
<link rel="stylesheet" href="style.css"> <link id='pagestyle' rel="stylesheet" href="styles/style_default.css">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head> </head>
<body> <body>
@ -97,9 +97,20 @@
<label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text"> <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
<label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text"> <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
</div> </div>
<div>
<span class="title">UserAgent</span><br />
<label for="userAgent"></label><input style="width: 400px" placeholder="UserAgent" id="userAgent" type="text">
</div>
<div>
<input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
<label for="css-style"> Show manga titles and sources on hover</label><br>
</div>
<div> <div>
<input type="submit" value="Update" onclick="UpdateSettings()"> <input type="submit" value="Update" onclick="UpdateSettings()">
</div> </div>
<div>
<input type="submit" value="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
</div>
</popup-content> </popup-content>
</popup-window> </popup-window>
</popup> </popup>
@ -108,7 +119,7 @@
<blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background> <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
<publication-viewer> <publication-viewer>
<img id="pubviewcover" src="media/cover.jpg" alt="cover"> <img id="pubviewcover" src="media/cover.jpg" alt="cover">
<publication-information> <publication-details>
<publication-name id="publicationViewerName">Best Manga there is</publication-name> <publication-name id="publicationViewerName">Best Manga there is</publication-name>
<publication-tags id="publicationViewerTags">A Manga</publication-tags> <publication-tags id="publicationViewerTags">A Manga</publication-tags>
<publication-author id="publicationViewerAuthor">Glax</publication-author> <publication-author id="publicationViewerAuthor">Glax</publication-author>
@ -122,7 +133,7 @@
<publication-add id="createMonitorJobButton">Monitor </publication-add> <publication-add id="createMonitorJobButton">Monitor </publication-add>
<publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add> <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
</publication-interactions> </publication-interactions>
</publication-information> </publication-details>
</publication-viewer> </publication-viewer>
</popup> </popup>

View File

@ -39,7 +39,9 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
const settingGotifyConfigured = document.querySelector("#gotifyConfigured"); const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured"); const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
const settingNtfyConfigured = document.querySelector("#ntfyConfigured"); const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
const settingUserAgent = document.querySelector("#userAgent");
const settingApiUri = document.querySelector("#settingApiUri"); const settingApiUri = document.querySelector("#settingApiUri");
const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox");
const newMangaPopup = document.querySelector("#newMangaPopup"); const newMangaPopup = document.querySelector("#newMangaPopup");
const newMangaConnector = document.querySelector("#newMangaConnector"); const newMangaConnector = document.querySelector("#newMangaConnector");
const newMangaTitle = document.querySelector("#newMangaTitle"); const newMangaTitle = document.querySelector("#newMangaTitle");
@ -80,6 +82,19 @@ function Setup(){
ResetContent(); ResetContent();
UpdateJobs(); UpdateJobs();
GetSettings().then((json) => {
//console.log(json);
settingDownloadLocation.innerText = json.downloadLocation;
settingApiUri.placeholder = apiUri;
//console.log(json.styleSheet);
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(() => { setInterval(() => {
UpdateJobs(); UpdateJobs();
}, 1000); }, 1000);
@ -87,6 +102,18 @@ function Setup(){
} }
Setup(); Setup();
function updateCSS(){
if (document.getElementById("mangaHoverCheckbox").checked == true){
ChangeStyleSheet('hover')
document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css');
//console.log('Changing theme to mangahover')
} else {
ChangeStyleSheet('default');
document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css');
//console.log('Changing theme to default')
}
}
function ResetContent(){ function ResetContent(){
//Delete everything //Delete everything
tasksContent.replaceChildren(); tasksContent.replaceChildren();
@ -99,6 +126,19 @@ function ResetContent(){
add.appendChild(plus); add.appendChild(plus);
add.addEventListener("click", () => ShowNewMangaSearch()); add.addEventListener("click", () => ShowNewMangaSearch());
tasksContent.appendChild(add); tasksContent.appendChild(add);
//Populate with the monitored mangas
GetMonitorJobs().then((json) => {
//console.log(json);
json.forEach(job => {
var mangaView = CreateManga(job.manga, job.mangaConnector.name);
mangaView.addEventListener("click", (event) => {
ShowMangaWindow(job, job.manga, event, false);
});
tasksContent.appendChild(mangaView);
});
monitoringJobsCount = json.length;
});
} }
function ShowNewMangaSearch(){ function ShowNewMangaSearch(){
@ -136,21 +176,54 @@ function GetNewMangaItems(){
//Returns a new "Publication" Item to display in the jobs section //Returns a new "Publication" Item to display in the jobs section
function CreateManga(manga, connector){ function CreateManga(manga, connector){
//Create a new publication and set an internal ID
var mangaElement = document.createElement('publication'); var mangaElement = document.createElement('publication');
mangaElement.id = GetValidSelector(manga.internalId); mangaElement.id = GetValidSelector(manga.internalId);
//Append the cover image to the publication
var mangaImage = document.createElement('img'); var mangaImage = document.createElement('img');
mangaImage.src = GetCoverUrl(manga.internalId); mangaImage.src = GetCoverUrl(manga.internalId);
mangaElement.appendChild(mangaImage); mangaElement.appendChild(mangaImage);
//Append the publication information to the publication
//console.log(manga);
var info = document.createElement('publication-information'); var info = document.createElement('publication-information');
var connectorName = document.createElement('connector-name'); var connectorName = document.createElement('connector-name');
connectorName.innerText = connector; connectorName.innerText = connector;
connectorName.className = "pill"; connectorName.className = "pill";
connectorName.style.backgroundColor = stringToColour(connector); connectorName.style.backgroundColor = stringToColour(connector);
info.appendChild(connectorName); info.appendChild(connectorName);
var mangaName = document.createElement('publication-name'); var mangaName = document.createElement('publication-name');
mangaName.innerText = manga.sortName; mangaName.innerText = manga.sortName;
//Create the publication status indicator
var releaseStatus = document.createElement('publication-status');
releaseStatus.setAttribute("release-status", manga.releaseStatus);
switch(manga.releaseStatus){
case 0:
releaseStatus.setAttribute("release-status", "Ongoing");
break;
case 1:
releaseStatus.setAttribute("release-status", "Completed");
break;
case 2:
releaseStatus.setAttribute("release-status", "On Hiatus");
break;
case 3:
releaseStatus.setAttribute("release-status", "Cancelled");
break;
case 4:
releaseStatus.setAttribute("release-status", "Upcoming");
break;
default:
releaseStatus.setAttribute("release-status", "Status Unavailable");
break;
}
info.appendChild(mangaName); info.appendChild(mangaName);
mangaElement.appendChild(info); mangaElement.appendChild(info);
mangaElement.appendChild(releaseStatus); //Append the release status indicator to the publication element
return mangaElement; return mangaElement;
} }
@ -158,6 +231,7 @@ createMonitorJobButton.addEventListener("click", () => {
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value); CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
UpdateJobs(); UpdateJobs();
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
ResetContent();
}); });
startJobButton.addEventListener("click", () => { startJobButton.addEventListener("click", () => {
StartJob(selectedJob.id); StartJob(selectedJob.id);
@ -171,6 +245,7 @@ deleteJobButton.addEventListener("click", () => {
RemoveJob(selectedJob.id); RemoveJob(selectedJob.id);
UpdateJobs(); UpdateJobs();
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
ResetContent();
}); });
function ShowMangaWindow(job, manga, event, add){ function ShowMangaWindow(job, manga, event, add){
@ -259,6 +334,7 @@ settingGotifyAppToken.addEventListener("keypress", (event) => { if(event.key ===
settingLunaseaWebhook.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); }); settingLunaseaWebhook.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
settingNtfyEndpoint.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); }); settingNtfyEndpoint.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
settingNtfyAuth.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); }); settingNtfyAuth.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
settingUserAgent.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); }); settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
function OpenSettings(){ function OpenSettings(){
@ -278,12 +354,23 @@ function OpenSettings(){
settingLunaseaWebhook.value = ""; settingLunaseaWebhook.value = "";
settingNtfyAuth.value = ""; settingNtfyAuth.value = "";
settingNtfyEndpoint.value = ""; settingNtfyEndpoint.value = "";
settingUserAgent.value = "";
settingApiUri.value = ""; settingApiUri.value = "";
settingMangaHoverCheckbox.checked = false;
GetSettings().then((json) => { GetSettings().then((json) => {
//console.log(json); //console.log(json);
settingDownloadLocation.innerText = json.downloadLocation; settingDownloadLocation.innerText = json.downloadLocation;
settingApiUri.placeholder = apiUri; settingApiUri.placeholder = apiUri;
settingUserAgent.placeholder = json.userAgent;
//console.log(json.styleSheet);
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) => { GetLibraryConnectors().then((json) => {
//console.log(json); //console.log(json);
@ -368,8 +455,14 @@ function UpdateSettings(){
UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value); UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value);
} }
OpenSettings(); if(settingUserAgent.value != ""){
Setup(); UpdateUserAgent(settingUserAgent.value);
}
setTimeout(() => {
OpenSettings();
Setup();
}, 100)
} }
function utf8_to_b64(str) { function utf8_to_b64(str) {
@ -377,6 +470,7 @@ function utf8_to_b64(str) {
} }
function UpdateJobs(){ function UpdateJobs(){
GetMonitorJobs().then((json) => { GetMonitorJobs().then((json) => {
if(monitoringJobsCount != json.length){ if(monitoringJobsCount != json.length){
ResetContent(); ResetContent();
@ -392,6 +486,7 @@ function UpdateJobs(){
} }
}); });
//Get the jobs that are waiting in the queue
GetWaitingJobs().then((json) => { GetWaitingJobs().then((json) => {
jobsQueuedTag.innerText = json.length; jobsQueuedTag.innerText = json.length;
@ -412,6 +507,7 @@ function UpdateJobs(){
jobStatusWaiting.removeChild(child); jobStatusWaiting.removeChild(child);
}); });
//Get currently running jobs
GetRunningJobs().then((json) => { GetRunningJobs().then((json) => {
jobsRunningTag.innerText = json.length; jobsRunningTag.innerText = json.length;

View File

@ -100,6 +100,8 @@ viewport {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
scrollbar-color: var(--accent-color) var(--primary-color);
scrollbar-width: thin;
} }
footer { footer {
@ -203,7 +205,7 @@ publication{
height: 300px; height: 300px;
border-radius: 5px; border-radius: 5px;
margin: 10px 10px; margin: 10px 10px;
padding: 15px 20px; padding: 15px 19px;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
} }
@ -223,11 +225,22 @@ publication-information {
justify-content: start; justify-content: start;
} }
publication-details {
display: flex;
flex-direction: column;
justify-content: start;
}
publication-information * { publication-information * {
z-index: 1; z-index: 1;
color: var(--accent-color); color: var(--accent-color);
} }
publication-details * {
z-index: 1;
color: var(--accent-color);
}
connector-name{ connector-name{
width: fit-content; width: fit-content;
margin: 10px 0; margin: 10px 0;
@ -239,6 +252,69 @@ publication-name{
font-weight: bold; font-weight: bold;
} }
publication-status {
display:block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 5px;
position: absolute;
top: 5px;
right: 5px;
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
}
publication-status::after {
content: attr(release-status);
position: absolute;
top: 0;
right: 0;
visibility: hidden;
/*Text Properties*/
font-size:10pt;
font-weight:bold;
color:white;
text-align: center;
/*Size*/
padding: 3px 8px;
border-radius: 6px;
border: 0px;
background-color: inherit;
}
publication-status:hover::after{
visibility:visible;
}
publication-status[release-status="Ongoing"]{
background-color: limegreen;
}
publication-status[release-status="Completed"]{
background-color: blueviolet;
}
publication-status[release-status="On Hiatus"]{
background-color: darkorange;
}
publication-status[release-status="Cancelled"]{
background-color: firebrick;
}
publication-status[release-status="Upcoming"]{
background-color: aqua;
}
publication-status[release-status="Status Unavailable"]{
background-color: gray;
}
publication img { publication img {
position: absolute; position: absolute;
top: 0; top: 0;
@ -408,48 +484,48 @@ publication-viewer img {
z-index: 0; z-index: 0;
} }
publication-viewer publication-information > * { publication-viewer publication-details > * {
margin: 5px 0; margin: 5px 0;
} }
publication-viewer publication-information publication-name { publication-viewer publication-details publication-name {
width: initial; width: initial;
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
scrollbar-width: none; scrollbar-width: none;
} }
publication-viewer publication-information publication-tags::before { publication-viewer publication-details publication-tags::before {
content: "Tags"; content: "Tags";
display: block; display: block;
font-weight: bolder; font-weight: bolder;
} }
publication-viewer publication-information publication-tags { publication-viewer publication-details publication-tags {
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
scrollbar-width: none; scrollbar-width: none;
} }
publication-viewer publication-information publication-author::before { publication-viewer publication-details publication-author::before {
content: "Author: "; content: "Author: ";
font-weight: bolder; font-weight: bolder;
} }
publication-viewer publication-information publication-description::before { publication-viewer publication-details publication-description::before {
content: "Description"; content: "Description";
display: block; display: block;
font-weight: bolder; font-weight: bolder;
} }
publication-viewer publication-information publication-description { publication-viewer publication-details publication-description {
font-size: 12pt; font-size: 12pt;
margin: 5px 0; margin: 5px 0;
height: 145px; height: 145px;
overflow-x: scroll; overflow-x: scroll;
} }
publication-viewer publication-information publication-interactions { publication-viewer publication-details publication-interactions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: end;
@ -457,25 +533,25 @@ publication-viewer publication-information publication-interactions {
width: 100%; width: 100%;
} }
publication-viewer publication-information publication-interactions > * { publication-viewer publication-details publication-interactions > * {
margin: 0 10px; margin: 0 10px;
font-size: 16pt; font-size: 16pt;
cursor: pointer; cursor: pointer;
} }
publication-viewer publication-information publication-interactions publication-starttask { publication-viewer publication-details publication-interactions publication-starttask {
color: var(--secondary-color); color: var(--secondary-color);
} }
publication-viewer publication-information publication-interactions publication-delete { publication-viewer publication-details publication-interactions publication-delete {
color: red; color: red;
} }
publication-view publication-information publication-interactions publication-canceltask { publication-view publication-details publication-interactions publication-canceltask {
color: yellow; color: yellow;
} }
publication-viewer publication-information publication-interactions publication-add { publication-viewer publication-details publication-interactions publication-add {
color: limegreen; color: limegreen;
} }

View File

@ -0,0 +1,727 @@
: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;
scrollbar-color: var(--accent-color) var(--primary-color);
scrollbar-width: thin;
}
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 19px;
position: relative;
flex-shrink: 0;
}
publication:hover {
background-color: black;
}
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 {
display: flex;
opacity:1;
}
publication::after{
content: '';
position: absolute;
left: 0; top: 0;
border-radius: 5px;
width: 100%; height: 100%;
}
publication-information {
display: none;
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-status {
display:block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 5px;
position: absolute;
top: 5px;
right: 5px;
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
}
publication-status::after {
content: attr(release-status);
position: absolute;
top: 0;
right: 0;
visibility: hidden;
/*Text Properties*/
font-size:10pt;
font-weight:bold;
color:white;
text-align: center;
/*Size*/
padding: 3px 8px;
border-radius: 6px;
border: 0px;
background-color: inherit;
}
publication-status:hover::after{
visibility:visible;
}
publication-status[release-status="Ongoing"]{
background-color: limegreen;
}
publication-status[release-status="Completed"]{
background-color: blueviolet;
}
publication-status[release-status="On Hiatus"]{
background-color: darkorange;
}
publication-status[release-status="Cancelled"]{
background-color: firebrick;
}
publication-status[release-status="Upcoming"]{
background-color: aqua;
}
publication-status[release-status="Status Unavailable"]{
background-color: gray;
}
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;
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-details > * {
margin: 5px 0;
}
publication-viewer publication-details publication-name {
width: initial;
overflow-x: scroll;
white-space: nowrap;
scrollbar-width: none;
}
publication-viewer publication-details publication-tags::before {
content: "Tags";
display: block;
font-weight: bolder;
}
publication-viewer publication-details publication-tags {
overflow-x: scroll;
white-space: nowrap;
scrollbar-width: none;
}
publication-viewer publication-details publication-author::before {
content: "Author: ";
font-weight: bolder;
}
publication-viewer publication-details publication-description::before {
content: "Description";
display: block;
font-weight: bolder;
}
publication-viewer publication-details publication-description {
font-size: 12pt;
margin: 5px 0;
height: 145px;
overflow-x: scroll;
}
publication-viewer publication-details publication-interactions {
display: flex;
flex-direction: row;
justify-content: end;
align-items: start;
width: 100%;
}
publication-viewer publication-details publication-interactions > * {
margin: 0 10px;
font-size: 16pt;
cursor: pointer;
}
publication-viewer publication-details publication-interactions publication-starttask {
color: var(--secondary-color);
}
publication-viewer publication-details publication-interactions publication-delete {
color: red;
}
publication-view publication-details publication-interactions publication-canceltask {
color: yellow;
}
publication-viewer publication-details 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;
}

View File

@ -1,21 +0,0 @@
version: '3'
services:
tranga-api:
image: glax/tranga-api:cuttingedge
container_name: tranga-api
volumes:
- ./tranga:/usr/share/Tranga-API #1 when replacing ./tranga replace #2 with same value
- ./Manga:/Manga
ports:
- "6531:6531"
restart: unless-stopped
tranga-website:
image: glax/tranga-website:cuttingedge
container_name: tranga-website
volumes:
- ./tranga/imageCache:/usr/share/nginx/html/imageCache:ro #2 when replacing Point to same value as #1/imageCache
ports:
- "9555:80"
depends_on:
- tranga-api
restart: unless-stopped