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 · 2024-02-27 15:31:55 +00:00 · 2024-01-31 19:12:05 +01:00 · 2023-12-31 17:32:23 +01:00 · 2023-11-12 13:48:28 +01:00 · 2023-11-12 13:28:41 +01:00
9 changed files with 949 additions and 45 deletions
--- a/.github/workflows/docker-image-cuttingedge.yml
+++ b/.github/workflows/docker-image-cuttingedge.yml
@ -22,7 +22,7 @@ jobs:
      # https://github.com/marketplace/actions/docker-setup-buildx
      - name: Set up Docker 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
      - name: Login to Docker Hub
--- a/.github/workflows/docker-image-dev.yml
+++ b/.github/workflows/docker-image-dev.yml
@ -22,7 +22,7 @@ jobs:
      # https://github.com/marketplace/actions/docker-setup-buildx
      - name: Set up Docker 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
      - name: Login to Docker Hub
--- a/.github/workflows/docker-image-master.yml
+++ b/.github/workflows/docker-image-master.yml
@ -24,7 +24,7 @@ jobs:
      # https://github.com/marketplace/actions/docker-setup-buildx
      - name: Set up Docker 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
      - name: Login to Docker Hub
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@ -163,13 +163,23 @@ function UpdateDownloadLocation(downloadLocation){
    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){
    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
    PostData(uri);
 }

 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);
 }

@ -188,6 +198,11 @@ function UpdateNtfy(ntfyEndpoint, ntfyAuth){
    PostData(uri);
 }

+function UpdateUserAgent(userAgent){
+    var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`;
+    PostData(uri);
+}
+
 function RemoveJob(jobId){
    var uri = `${apiUri}/Jobs?jobId=${jobId}`;
    DeleteData(uri);
--- a/Website/index.html
+++ b/Website/index.html
@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <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">
 </head>
 <body>
@ -97,9 +97,20 @@
              <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
              <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
            </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>
              <input type="submit" value="Update" onclick="UpdateSettings()">
            </div>
+            <div>
+              <input type="submit" value="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
+            </div>
          </popup-content>
        </popup-window>
      </popup>
@ -108,7 +119,7 @@
        <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
        <publication-viewer>
          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
-          <publication-information>
+          <publication-details>
            <publication-name id="publicationViewerName">Best Manga there is</publication-name>
            <publication-tags id="publicationViewerTags">A Manga</publication-tags>
            <publication-author id="publicationViewerAuthor">Glax</publication-author>
@ -122,7 +133,7 @@
              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
            </publication-interactions>
-          </publication-information>
+          </publication-details>
        </publication-viewer>
      </popup>
      
--- a/Website/interaction.js
+++ b/Website/interaction.js
@ -39,7 +39,9 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
 const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
 const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
 const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
+const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
+const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox");
 const newMangaPopup = document.querySelector("#newMangaPopup");
 const newMangaConnector = document.querySelector("#newMangaConnector");
 const newMangaTitle = document.querySelector("#newMangaTitle");
@ -80,6 +82,19 @@ function Setup(){
    
    ResetContent();
    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(() => {
      UpdateJobs();
    }, 1000);
@ -87,6 +102,18 @@ function 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(){
    //Delete everything
    tasksContent.replaceChildren();
@ -99,6 +126,19 @@ function ResetContent(){
    add.appendChild(plus);
    add.addEventListener("click", () => ShowNewMangaSearch());
    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(){
@ -136,21 +176,54 @@ function GetNewMangaItems(){

 //Returns a new "Publication" Item to display in the jobs section
 function CreateManga(manga, connector){
+  //Create a new publication and set an internal ID
    var mangaElement = document.createElement('publication');
    mangaElement.id = GetValidSelector(manga.internalId);
+    
+  //Append the cover image to the publication
    var mangaImage = document.createElement('img');
    mangaImage.src = GetCoverUrl(manga.internalId);
    mangaElement.appendChild(mangaImage);
+  
+//Append the publication information to the publication
+    //console.log(manga);
    var info = document.createElement('publication-information');
    var connectorName = document.createElement('connector-name');
    connectorName.innerText = connector;
    connectorName.className = "pill";
    connectorName.style.backgroundColor = stringToColour(connector);
    info.appendChild(connectorName);
+
    var mangaName = document.createElement('publication-name');
    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);
    mangaElement.appendChild(info);
+    mangaElement.appendChild(releaseStatus);                  //Append the release status indicator to the publication element
    return mangaElement;
 }

@ -158,6 +231,7 @@ createMonitorJobButton.addEventListener("click", () => {
  CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
  UpdateJobs();
  mangaViewerPopup.style.display = "none";
+  ResetContent();
 });
 startJobButton.addEventListener("click", () => {
  StartJob(selectedJob.id);
@ -171,6 +245,7 @@ deleteJobButton.addEventListener("click", () => {
  RemoveJob(selectedJob.id);
  UpdateJobs();
  mangaViewerPopup.style.display = "none";
+  ResetContent();
 });

 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(); });
 settingNtfyEndpoint.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(); });

 function OpenSettings(){
@ -278,12 +354,23 @@ function OpenSettings(){
  settingLunaseaWebhook.value = "";
  settingNtfyAuth.value = "";
  settingNtfyEndpoint.value = "";
+  settingUserAgent.value = "";
  settingApiUri.value = "";
+  settingMangaHoverCheckbox.checked = false;
  
  GetSettings().then((json) => {
    //console.log(json);
    settingDownloadLocation.innerText = json.downloadLocation;
    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) => {
    //console.log(json);
@ -368,8 +455,14 @@ function UpdateSettings(){
    UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value);
  }
  
-  OpenSettings();
-  Setup();
+  if(settingUserAgent.value != ""){
+      UpdateUserAgent(settingUserAgent.value);
+  }
+  
+  setTimeout(() => {
+      OpenSettings();
+      Setup();
+  }, 100)
 }

 function utf8_to_b64(str) {
@ -377,6 +470,7 @@ function utf8_to_b64(str) {
 }

 function UpdateJobs(){
+
  GetMonitorJobs().then((json) => {
    if(monitoringJobsCount != json.length){
      ResetContent();
@ -391,7 +485,8 @@ function UpdateJobs(){
      monitoringJobsCount = json.length;
    }
  });
-    
+
+  //Get the jobs that are waiting in the queue
  GetWaitingJobs().then((json) => {
    jobsQueuedTag.innerText = json.length;
    
@ -412,6 +507,7 @@ function UpdateJobs(){
      jobStatusWaiting.removeChild(child);
  });
  
+  //Get currently running jobs
  GetRunningJobs().then((json) => {
    jobsRunningTag.innerText = json.length;
    
--- a/Website/styles/style_default.css
+++ b/Website/styles/style_default.css
@ -100,6 +100,8 @@ viewport {
    flex-grow: 1;
    height: 100%;
    overflow-y: scroll;
+    scrollbar-color: var(--accent-color) var(--primary-color);
+    scrollbar-width: thin;
 }

 footer {
@ -203,7 +205,7 @@ publication{
    height: 300px;
    border-radius: 5px;
    margin: 10px 10px;
-    padding: 15px 20px;
+    padding: 15px 19px;
    position: relative;
    flex-shrink: 0;
 }
@ -223,11 +225,22 @@ publication-information {
    justify-content: start;
 }

+publication-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+}
+
 publication-information * {
    z-index: 1;
    color: var(--accent-color);
 }

+publication-details * {
+    z-index: 1;
+    color: var(--accent-color);
+}
+
 connector-name{
    width: fit-content;
    margin: 10px 0;
@ -239,6 +252,69 @@ publication-name{
    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 {
    position: absolute;
    top: 0;
@ -408,48 +484,48 @@ publication-viewer img {
    z-index: 0;
 }

-publication-viewer publication-information > * {
+publication-viewer publication-details > * {
    margin: 5px 0;
 }

-publication-viewer publication-information publication-name {
+publication-viewer publication-details publication-name {
    width: initial;
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none;
 }

-publication-viewer publication-information publication-tags::before {
+publication-viewer publication-details publication-tags::before {
    content: "Tags";
    display: block;
    font-weight: bolder;
 }

-publication-viewer publication-information publication-tags {
+publication-viewer publication-details publication-tags {
    overflow-x: scroll;
    white-space: nowrap;
    scrollbar-width: none;
 }

-publication-viewer publication-information publication-author::before {
+publication-viewer publication-details publication-author::before {
    content: "Author: ";
    font-weight: bolder;
 }

-publication-viewer publication-information publication-description::before {
+publication-viewer publication-details publication-description::before {
    content: "Description";
    display: block;
    font-weight: bolder;
 }

-publication-viewer publication-information publication-description {
+publication-viewer publication-details publication-description {
    font-size: 12pt;
    margin: 5px 0;
    height: 145px;
    overflow-x: scroll;
 }

-publication-viewer publication-information publication-interactions {
+publication-viewer publication-details publication-interactions {
    display: flex;
    flex-direction: row;
    justify-content: end;
@ -457,25 +533,25 @@ publication-viewer publication-information publication-interactions {
    width: 100%;
 }

-publication-viewer publication-information publication-interactions > * {
+publication-viewer publication-details publication-interactions > * {
    margin: 0 10px;
    font-size: 16pt;
    cursor: pointer;
 }

-publication-viewer publication-information publication-interactions publication-starttask {
+publication-viewer publication-details publication-interactions publication-starttask {
    color: var(--secondary-color);
 }

-publication-viewer publication-information publication-interactions publication-delete {
+publication-viewer publication-details publication-interactions publication-delete {
    color: red;
 }

-publication-view publication-information publication-interactions publication-canceltask {
+publication-view publication-details publication-interactions publication-canceltask {
  color: yellow;
 }

-publication-viewer publication-information publication-interactions publication-add {
+publication-viewer publication-details publication-interactions publication-add {
    color: limegreen;
 }

--- a/Website/styles/style_mangahover.css
+++ b/Website/styles/style_mangahover.css
@ -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;
+}
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -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
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