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

Compare commits

base: glax:d1f12186f2ffef17995eb2a14f80780310876fea
Branches Tags
glax:master
glax:cuttingedge
glax:vite-react-ts
glax:frontend-v2
glax:dev
..
compare: glax:31a03a54bb3c89b33e73fab8f7771b73d568151e
Branches Tags
glax:master
glax:cuttingedge
glax:vite-react-ts
glax:frontend-v2
glax:dev

36 Commits
d1f12186f2 ... 31a03a54bb

Author SHA1 Message Date
Glax
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
glax
18d3a09d93 https://github.com/C9Glax/tranga/issues/109 2024-01-31 19:12:05 +01:00
glax
0bc3147bb3 #36 Remove docker-compose 2023-12-31 17:32:23 +01:00
glax
43cbb80eec Fix overflow of tooltip release-status. 2023-11-12 13:48:28 +01:00
glax
95876f1a53 New scrollbar, fix some overflow by scrollbar 2023-11-12 13:28:41 +01:00
Glax
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
Glax
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
Glax
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
Glax
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
Glax
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
Glax
b47ba90f20
Merge branch 'master' into fix-update-button 2023-10-30 19:21:22 +01:00
glax
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
Glax
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
glax
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
Show Stats Expand all files Collapse all files

2
.github/workflows/docker-image-cuttingedge.yml vendored
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

2
.github/workflows/docker-image-dev.yml vendored
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

2
.github/workflows/docker-image-master.yml vendored
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

17
Website/apiConnector.js
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);

17
Website/index.html
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>

100
Website/interaction.js
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;

104
Website/style.css → Website/styles/style_default.css
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;
} }

727
Website/styles/style_mangahover.css Normal file
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;
}

21
docker-compose.yaml
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