Merge pull request #168 from C9Glax/cuttingedge

Last merge before v2 transition

.github/workflows/docker-image-cuttingedge.yml

@@ -19,12 +19,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.1.0
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,12 +35,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v4.1.1
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./
+          context: .
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-master.yml

@@ -3,8 +3,6 @@ name: Docker Image CI
 on:
   push:
     branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
   workflow_dispatch:
 
 jobs:
@@ -19,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.1.0
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,12 +33,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v4.1.1
+        uses: docker/build-push-action@v6.18.0
         with:
           context: ./
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           pull: true
           push: true
           tags: |

.github/workflows/docker-image-vite-react-ts.yml

@@ -2,9 +2,7 @@ name: Docker Image CI
 
 on:
   push:
-    branches: [ "dev" ]
+    branches: [ "vite-react-ts" ]
-  pull_request:
-    branches: [ "dev" ]
   workflow_dispatch:
 
 jobs:
@@ -19,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.1.0
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,13 +33,13 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v4.1.1
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./
+          context: .
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
           platforms: linux/amd64
           pull: true
           push: true
           tags: |
-            glax/tranga-website:dev
+            glax/tranga-website:Server-V2

README.md

@@ -1,11 +1,6 @@
-<!-- PROJECT SHIELDS -->
+# Testers for V2 wanted!
-<!--
+
-*** I'm using markdown "reference style" links for readability.
+[Details](https://github.com/C9Glax/tranga/pull/355#issuecomment-2764217944)
-*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
-*** See the bottom of this document for the declaration of the reference variables
-*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
-*** https://www.markdownguide.org/basic-syntax/#reference-style-links
--->
 
 <!-- PROJECT LOGO -->
 <br />

Website/apiConnector.js

@@ -1,11 +1,7 @@
-//let apiUri = `${window.location.protocol}//${window.location.host}/api`
+if(getCookie("apiUri") != ""){
-
+    apiUri = getCookie("apiUri");
-let apiUri = `http://192.168.1.79:6531`;
+}
-
+setCookie("apiUri", apiUri);
-// if(getCookie("apiUri") != ""){
-//     apiUri = getCookie("apiUri");
-// }
-// setCookie("apiUri", apiUri);
 
 function setCookie(cname, cvalue) {
   const d = new Date();
@@ -152,10 +148,9 @@ async function GetRateLimits() {
     return json;
 }
 
-function CreateMonitorJob(connector, internalId, language, interval, folder, chapterNo){
+function CreateMonitorJob(connector, internalId, language){
-    var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}&customFolderName=${folder}`;
+    var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00&translatedLanguage=${language}`;
-    //console.log(uri);
+    PostData(uri);
-	PostData(uri);
 }
 
 function CreateDownloadNewChaptersJob(connector, internalId, language){
@@ -240,24 +235,6 @@ Date.prototype.timeNow = function () {
      return ((this.getHours() < 10)?"0":"") + this.getHours() +"_"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +"_"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
 }
 
-function UpdateAprilFoolsMode() { 
-	checkBox = document.getElementById("aprilFoolsMode");
-	var uri = `${apiUri}/Settings/AprilFoolsMode?enabled=${checkBox.checked}`;
-	PostData(uri);
-}
-
-function ResetRateLimits() {
-	var uri = `${apiUri}/Settings/customRequestLimit/Reset`;
-	PostData(uri);
-	OpenSettings();
-}
-
-function ResetUserAgent() {
-	var uri = `${apiUri}/Settings/userAgent/Reset`;
-	PostData(uri);
-	OpenSettings();
-}
-
 //Komga
 function UpdateKomga(komgaUrl, komgaAuth){
     var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;

Website/defaultApiUri.js

@@ -0,0 +1 @@
+let apiUri = `${window.location.protocol}//${window.location.host.split(':')[0]}:6531`

Website/index.html

@@ -23,7 +23,7 @@
     <filter-box id="filterBox">
       <border-bar>
         <popup-title>Filter by: </popup-title>
-        <popup-close onclick="filterBox.style.display = 'none';" >&times</popup-close>
+        <popup-close onclick="filterBox.classList.toggle('animate')" >&times</popup-close>
       </border-bar>
       <popup-content id="filterContent">
         <div class="popup-section">
@@ -68,27 +68,16 @@
       
       <popup id="newMangaPopup">
         <blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
-        <popup-window>
+        <div id="newMangaPopupSelector">
-          <border-bar>
+          <select id="newMangaConnector" />
-            <popup-title>Search</popup-title>
+          <input type="text" placeholder="Title" id="newMangaTitle" />
-            <popup-close onclick="newMangaPopup.style.display = 'none'">&times</popup-close>
+          <select id="newMangaTranslatedLanguage">
-          </border-bar>
+            <option selected="selected">en</option>
-          <popup-content>
+            <option>it</option>
-            <div id="loaderdiv">
+            <option>de</option>
-              <div id="loader"></div>
+          </select>
-            </div>
+        </div>
-            <div id="newMangaPopupSelector">
+        <div id="newMangaResult"></div>
-              <select id="newMangaConnector">
-              <input type="text" placeholder="Title" id="newMangaTitle" />
-              <select id="newMangaTranslatedLanguage">
-                <option selected="selected">EN</option>
-                <option>IT</option>
-                <option>DE</option>
-              </select>
-            </div>
-            <div id="newMangaResult"></div>
-          </popup-content>
-        </popup-window>
       </popup>
       
       <popup id="settingsPopup">
@@ -108,14 +97,7 @@
                   <row><label for="settingApiUri">API URI:</label><input placeholder="https://" type="text" id="settingApiUri"></row>
                   <row><label for="userAgent">User Agent:</label><input placeholder="UserAgent" id="userAgent" type="text"></row>
                   <row>
-                    <label for="aprilFoolsMode">Skip Chapters on April 1st:</label>
+                    <border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
-                    <label class="switch-toggle">
-                      <input type="checkbox" onclick="UpdateAprilFoolsMode()" id="aprilFoolsMode">
-                      <span class="slider"></span>
-                    </label>
-                  </row>
-                  <row>
-                    <border-bar-button class="section" onclick="ResetUserAgent()">Reset User Agent</border-bar-button>
                     <border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>
                   </row>
                 </div>
@@ -125,19 +107,13 @@
                   <row><label for="CoverRL">Manga Covers:</label><input id="coverRL" type="text"></row>
                   <row><label for="ImageRL">Manga Images:</label><input id="imageRL" type="text"></row>
                   <row><label for="InfoRL">Manga Info:</label><input id="infoRL" type="text"></row>
-                  <row>
-                    <border-bar-button class="section" onclick="ResetRateLimits()">Reset All Rate Limits</border-bar-button>
-                  </row>
                 </div>
                 <div class="section-item dyn-height">
-                  <span class="title">Library</span>
+                  <span class="title">Appearance</span>
-                  <row><label for="cssStyle">Appearance Style:</label><select id="cssStyle">
+                  <row><label for="cssStyle">Library Style:</label><select id="cssStyle">
                     <option id="card_compact" value="card_compact">Cards (Compact)</option>
                     <option id="card_hover" value="card_hover">Cards (Hover)</option>
                   </select></row>
-                  <row> 
-                    <border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
-                  </row>
                 </div>
               </div>
             </div>
@@ -305,7 +281,6 @@
           </border-bar>
 
         </popup-window>
-      </popup>
     </viewport>
 	  
     <footer>
@@ -318,7 +293,8 @@
       <p id="madeWith">Made with Blåhaj 🦈</p>
     </footer> 
   </wrapper>
-  
+
+  <script src="defaultApiUri.js"></script>
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>

Website/interaction.js

@@ -15,7 +15,6 @@ let statusNameMatch = [];
 const searchBox = document.querySelector("#searchbox");
 const settingsPopup = document.querySelector("#settingsPopup");
 const filterBox = document.querySelector("#filterBox");
-const filterContent = document.querySelector("#filterContent");
 const settingsCog = document.querySelector("#settingscog");
 const filterFunnel = document.querySelector("#filterFunnel");
 const tasksContent = document.querySelector("content");
@@ -74,17 +73,12 @@ const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
 
 const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
-const settingAprilFoolsMode = document.querySelector("#aprilFoolsMode");
 const settingCSSStyle = document.querySelector('#cssStyle');
-const settingDownloadLocation = [];
-
-//Search and Add
 const newMangaPopup = document.querySelector("#newMangaPopup");
 const newMangaConnector = document.querySelector("#newMangaConnector");
 const newMangaTitle = document.querySelector("#newMangaTitle");
 const newMangaResult = document.querySelector("#newMangaResult");
 const newMangaTranslatedLanguage = document.querySelector("#newMangaTranslatedLanguage");
-const newMangaLoader = document.querySelector("popup-content #loaderdiv");
 
 //Jobs
 const jobsRunningTag = document.querySelector("#jobsRunningTag");
@@ -157,9 +151,6 @@ function Setup(){
     GetSettings().then((json) => {
       //console.log(json);
       settingApiUri.placeholder = apiUri;
-      settingDownloadLocation.value = json.downloadLocation;
-      settingUserAgent.value = json.userAgent;
-      settingAprilFoolsMode.checked = json.aprilFoolsMode;
     });
     GetRateLimits().then((json) => {
       defaultRL.placeholder = json.Default + ' Requests/Minute';
@@ -183,7 +174,7 @@ function Setup(){
     }
     setInterval(() => {
       UpdateJobs();
-    }, 1000);
+    }, 5000);
   });
   //Clear the previous values if any exist.
   searchBox.value = "";
@@ -192,15 +183,6 @@ function Setup(){
 }
 Setup();
 
-function ToggleFilterBox() {
-  if (filterBox.style.display == 'none') {
-    filterBox.style.display = 'flex';
-  } else {
-    filterBox.style.display = 'none';
-  }
-  filterContent.scrollTop = 0;
-}
-
 function ToggleFilterConnector(connector, event) {
   //console.log("Initial Array:");
   //console.log(connectorMatch);
@@ -297,30 +279,31 @@ function ShowNewMangaSearch(){
   newMangaTitle.value = "";
   newMangaPopup.style.display = "block";
   newMangaResult.replaceChildren();
-  newMangaLoader.style.display = 'none';
 }
 
 newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
 
+
+
+
 function GetNewMangaItems(){
-  
+  if(newMangaTitle.value.length < 4)
-  if(newMangaTitle.value.length < 4) {
     return;
-  }
+  
   newMangaResult.replaceChildren();
   newMangaConnector.disabled = true;
   newMangaTitle.disabled = true;
   newMangaTranslatedLanguage.disabled = true;
-  newMangaLoader.style.display = 'block';
   GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => {
     //console.log(json);
-    newMangaLoader.style.display = 'none';
-    newMangaResult.scrollTop = 0;
     if(json.length > 0)
       newMangaResult.style.display = "flex";
     json.forEach(result => {
-      var searchResult = CreateSearchResult(result, newMangaConnector.value)
+      var mangaElement = CreateManga(result, newMangaConnector.value)
-      newMangaResult.appendChild(searchResult);
+      newMangaResult.appendChild(mangaElement);
+      mangaElement.addEventListener("click", (event) => {
+        ShowMangaWindow(null, result, event, true);
+      });
     });
     
     newMangaConnector.disabled = false;
@@ -382,204 +365,6 @@ function CreateManga(manga, connector){
     return mangaElement;
 }
 
-//Returns a new "Search Result" item to display in the search window
-function CreateSearchResult(manga, connector) {
-  //Create a new publication and set an internal ID
-  var searchResult = document.createElement('div');
-  searchResult.id = GetValidSelector(manga.internalId);
-  searchResult.className = "section-item";
-  
-//Append the cover image to the publication
-  var imageCont = document.createElement('img-container');
-
-  var mangaImage = document.createElement('img');
-  mangaImage.src = GetCoverUrl(manga.internalId);
-  imageCont.appendChild(mangaImage);
-
-  var connectorName = document.createElement('manga-connector');
-  connectorName.innerText = connector.toUpperCase();
-  connectorName.style.backgroundColor = stringToColour(connector);
-  imageCont.appendChild(connectorName);
-
-  var chapterNo = document.createElement('span');
-  chapterNo.className = 'latest-chapter-no';
-  chapterNo.innerText = manga.latestChapterAvailable.toString();
-  imageCont.appendChild(chapterNo);
-
-  searchResult.appendChild(imageCont);
-
-  var mangaDetails = document.createElement('div');
-  mangaDetails.className = 'jobDetails';
-
-  var headerRow = document.createElement('header-row');
-  
-  var mangaTitle = document.createElement('a');
-  mangaTitle.innerText = manga.sortName;
-  mangaTitle.href = manga.websiteUrl;
-  mangaTitle.className = 'mangaTitle';
-  headerRow.appendChild(mangaTitle);
-
-  //Create the publication status indicator
-  var releaseStatus = document.createElement('status-filter');
-  switch(manga.releaseStatus){
-    case 0:
-      releaseStatus.setAttribute("release-status", "Ongoing");
-      releaseStatus.innerText = "Ongoing";
-      break;
-    case 1:
-      releaseStatus.setAttribute("release-status", "Completed");
-      releaseStatus.innerText = "Completed";
-      break;
-    case 2:
-      releaseStatus.setAttribute("release-status", "On Hiatus");
-      releaseStatus.innerText = "On Hiatus";
-      break;
-    case 3:
-      releaseStatus.setAttribute("release-status", "Cancelled");
-      releaseStatus.innerText = "Cancelled";
-      break;
-    case 4:
-      releaseStatus.setAttribute("release-status", "Upcoming");
-      releaseStatus.innerText = "Upcoming";
-      break;
-    default:
-      releaseStatus.setAttribute("release-status", "Status Unavailable");
-      releaseStatus.innerText = "Status Unavailable";
-      break;
-  }
-  headerRow.appendChild(releaseStatus);
-
-  mangaDetails.appendChild(headerRow);
-
-  //Genres
-  var tagCloud = document.createElement('tag-cloud');
-  manga.authors.forEach(author => {
-    var authorCard = document.createElement('author-tag');
-
-    var personImg = document.createElement('img');
-    personImg.src = 'media/person.svg';
-    authorCard.appendChild(personImg);
-
-    var authorName = document.createElement('span');
-    authorName.innerText = author;
-    authorCard.appendChild(authorName);
-
-    tagCloud.appendChild(authorCard);
-  });
-  manga.tags.forEach(tag => {
-    var tagElement = document.createElement('manga-tag');
-    tagElement.innerText = tag;
-    tagCloud.appendChild(tagElement);
-  });
-  mangaDetails.appendChild(tagCloud);
-
-  //Description
-  var description = document.createElement('div');
-  description.className = 'mangaDescription';
-  description.innerText = manga.description;
-  mangaDetails.appendChild(description);
-
-  searchResult.appendChild(mangaDetails);
-
-  //Download Settings
-  var dlSett = document.createElement('div');
-  dlSett.className = 'new-manga-download-settings'
-  
-  folderRow = document.createElement('row');
-  folderLabel = document.createElement('label');
-  folderLabel.innerText = 'Download Folder:';
-  folderRow.appendChild(folderLabel);
-  folderInput = document.createElement('input');
-  downloadFolder = manga.folderName;
-  folderInput.placeholder = downloadFolder.toString();
-  folderInput.type = 'text';
-  folderInput.id = manga.internalId.concat('-downloadfolder')
-  folderRow.appendChild(folderInput);
-  dlSett.appendChild(folderRow);
-
-  intervalRow = document.createElement('row');
-  intervalLabel = document.createElement('label');
-  intervalLabel.innerText = 'Job Interval:';
-  intervalRow.appendChild(intervalLabel);
-  intervalInput = document.createElement('input');
-  intervalInput.placeholder = '03:00:00 (HH:MM:SS)';
-  intervalInput.type = 'text';
-  intervalInput.id = manga.internalId.concat('-downloadinterval')
-  intervalRow.appendChild(intervalInput);
-  dlSett.appendChild(intervalRow);
-
-  chapterRow = document.createElement('row');
-  chapterLabel = document.createElement('label');
-  chapterLabel.innerText = 'Download from Chapter:';
-  chapterRow.appendChild(chapterLabel);
-  chapterInput = document.createElement('input');
-  chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString();
-  chapterInput.type = 'number';
-  chapterInput.id = manga.internalId.concat('-downloadchapter')
-  chapterRow.appendChild(chapterInput);
-  dlSett.appendChild(chapterRow);
-
-  dlButton = document.createElement('border-bar-button');
-  if (IsInLibrary(manga.internalId)) {
-    dlButton.className = 'section in-library';
-    dlButton.innerText = 'In Library';
-  } else {
-    dlButton.className = 'section downloadManga';
-    dlButton.innerText = 'Monitor Manga';
-    dlButton.addEventListener('click', function() { AddManga(manga.internalId, connector) });
-  }
-  
-
-  dlSett.appendChild(dlButton);
-
-  mangaDetails.appendChild(dlSett);
-
-//Append the publication information to the publication
-  //console.log(manga);
-  return searchResult;
-}
-
-function IsInLibrary(id) {
-  matchFound = false;
-  tasksContent.childNodes.forEach(publication => {
-    if (id.toLowerCase().includes(publication.id.toLowerCase())) {
-      console.log('Match found');
-      matchFound = true;
-    }
-  });
-  return matchFound;
-}
-
-function AddManga(id, connector) {
-  //console.log('Adding Manga');
-  mangaID = id;
-  mangaConnector = connector; 
-  mangaLanguage = document.getElementById('newMangaTranslatedLanguage').value.toLowerCase();
-
-  folderInput = document.getElementById(id.concat('-downloadfolder')).value;
-  if (folderInput == null || folderInput == '') {
-    mangaFolder = document.getElementById(id.concat('-downloadfolder')).placeholder;
-  } else {
-    mangaFolder = folderInput;
-  }
-  
-  intervalInput = document.getElementById(id.concat('-downloadinterval')).value;
-  if (intervalInput == null || intervalInput == '') {
-    mangaInterval = '03:00:00';
-  } else {
-    mangaInterval = intervalInput;
-  }
-
-  chapterInput = document.getElementById(id.concat('-downloadchapter')).value;
-  if (chapterInput == null || chapterInput == '') {
-    mangaChapter = 0;
-  } else {
-    mangaChapter = chapterInput;
-  }
-
-  CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
-}
-
 createMonitorJobButton.addEventListener("click", () => {
   CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
   UpdateJobs();
@@ -722,7 +507,7 @@ settingsCog.addEventListener("click", () => {
 });
 
 filterFunnel.addEventListener("click", () => {
-  ToggleFilterBox();
+  filterBox.classList.toggle("animate");
 });
 
 settingKomgaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
@@ -775,10 +560,8 @@ function OpenSettings(){
   
   GetSettings().then((json) => {
     //console.log(json);
-    settingApiUri.value = apiUri;
+    settingApiUri.placeholder = apiUri;
-    settingUserAgent.value = json.userAgent;
+    settingUserAgent.placeholder = json.userAgent;
-    settingAprilFoolsMode.checked = json.aprilFoolsMode;
-    settingDownloadLocation.value = json.downloadLocation;
     //console.log(json.styleSheet);
   });
   GetRateLimits().then((json) => {
@@ -795,15 +578,15 @@ function OpenSettings(){
       switch(libraryConnectorTypes[connector.libraryType]){
         case "Kavita":
           settingKavitaConfigured.setAttribute("configuration", "Active");
-          settingKavitaUrl.value = connector.baseUrl;
+          settingKavitaUrl.placeholder = connector.baseUrl;
-          settingKavitaUser.value = "***";
+          settingKavitaUser.placeholder = "***";
-          settingKavitaPass.value = "***";
+          settingKavitaPass.placeholder = "***";
           break;
         case "Komga":
           settingKomgaConfigured.setAttribute("configuration", "Active");
-          settingKomgaUrl.value = connector.baseUrl;
+          settingKomgaUrl.placeholder = connector.baseUrl;
-          settingKomgaUser.value = "***";
+          settingKomgaUser.placeholder = "***";
-          settingKomgaPass.value = "***";
+          settingKomgaPass.placeholder = "***";
           break;
         default:
           console.log("Unknown type");
@@ -816,18 +599,18 @@ function OpenSettings(){
     json.forEach(connector => {
       switch(notificationConnectorTypes[connector.notificationConnectorType]){
         case "Gotify":
-          settingGotifyUrl.value = connector.endpoint;
+          settingGotifyUrl.placeholder = connector.endpoint;
-          settingGotifyAppToken.value = "***";
+          settingGotifyAppToken.placeholder = "***";
           settingGotifyConfigured.setAttribute("configuration", "Active");
           break;
         case "LunaSea":
           settingLunaseaConfigured.setAttribute("configuration", "Active");
-          settingLunaseaWebhook.value = connector.id;
+          settingLunaseaWebhook.placeholder = connector.id;
           break;
         case "Ntfy":
           settingNtfyConfigured.setAttribute("configuration", "Active");
-          settingNtfyEndpoint.value = connector.endpoint;
+          settingNtfyEndpoint.placeholder = connector.endpoint;
-          settingNtfyAuth.value = "***";
+          settingNtfyAuth.placeholder = "***";
           break;
         default:
           console.log("Unknown type");
@@ -1090,4 +873,4 @@ const stringToColour = (str) => {
     colour += value.toString(16).padStart(2, '0')
   }
   return colour
-}
+}

Website/media/check-circle.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-check-circle" viewBox="0 0 16 16">
-  
-  <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
-</svg>

Website/media/person.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-person" viewBox="0 0 16 16">
-  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
-</svg>

Website/styles/base.css

@@ -95,6 +95,10 @@ filter-box {
     height: 600px;
 }
 
+filter-box.animate {
+    display: flex;
+}
+
 filter-box border-bar popup-title{
     font-size: 12pt;
 }
@@ -145,10 +149,6 @@ status-filter {
     user-select: none; /* Standard syntax */
 }
 
-row > status-filter {
-    cursor: default;
-}
-
 status-filter[release-status="Ongoing"]{
     background-color: limegreen;
 }
@@ -421,10 +421,10 @@ popup popup-window {
 }
 
 popup#jobStatusView popup-window {
-    left: 10%;
+    left: 20%;
-    top: 10%;
+    top: 20%;
-    height: 80%;
+    height: 60%;
-    width: 80%;
+    width: 60%;
 }
 
 popup-content{
@@ -651,49 +651,57 @@ a:active {
     color: var(--secondary-color);
 }
 
- #newMangaPopupSelector {
+#newMangaPopup > div {
-    display: flex;
+  z-index: 3;
-    padding: 5px;
+  position: relative;
-    margin: 10px;
+}
-    width: calc(100%-20px)
+
- }
+#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: 5px;
+  padding: 0 0 0 5px;
-  border-radius: 10px;
+  border-radius: 5px 0 0 5px;
-  border: 0;;
+  border: 0;
+  border-right: 1px solid darkgray;
 }
 
 #newMangaPopup #newMangaTitle{
-    margin: 0px 10px;
+  width: 445px;
-    padding: 5px;
+  padding: 0 5px 0 5px;
-    height: 20px;
+  border: 0;
-    border-radius: 10px;
-    border-style: solid;
-    outline: none;
-    flex-grow: 1;
-    width: auto;
 }
 
 #newMangaPopup #newMangaTranslatedLanguage {
-  width: 60px;
+  width: 45px;
-  padding: 5px;
+  border-radius: 0 5px 5px 0;
-  border-radius: 10px;
   border: 0;
+  border-left: 1px solid darkgray;
+  margin-left: -5px;
 }
 
 #newMangaResult {
   display: none;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: flex-start;
-  margin: 5px;
+  margin: 5px auto 0;
   border-radius: 5px;
   padding: 5px;
-  width: 98%;
+  width: min-content;
-  height: 100%;
+  max-width: 98%;
-  overflow-y: scroll;
+  max-height: 400px;
-  overflow-x: hidden;
+  overflow-x: scroll;
+  overflow-y: hidden;
 }
 
 blur-background {
@@ -878,10 +886,6 @@ footer-tag-popup::before{
   z-index: 201;
 }
 
-popup-content #loaderdiv {
-    display: none;
-}
-
 #loaderText {
   position: relative;
   margin: 0 auto;
@@ -911,107 +915,6 @@ popup-content #loaderdiv {
     overflow: hidden;
 }
 
-#newMangaResult > .section-item {
-    flex-direction: row;
-    min-height: 300px;
-    flex-grow: 0;
-    width: auto;
-    padding: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-img-container {
-    height: 100%;
-    width: 200px;
-    position: relative;
-    left: 0;
-    top: 0;
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-img-container > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 0;
-    border-radius: 5px;
-}
-
-manga-connector {
-    display: block;
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-
-    /*Text Properties*/
-    font-size:8pt;
-    font-weight:bold;
-    color:white;
-    text-align: center;
-}
-
-span.latest-chapter-no {
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    padding: 5px 10px 5px 10px;
-    border-radius: 5px;
-
-    font-size: 10pt;
-    font-weight: bold;
-    color: white;
-    background-color: var(--primary-color);;
-}
-
-div.new-manga-download-settings {
-    position: absolute;
-    overflow: hidden;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: auto;
-    padding: 10px;
-}
-
-.new-manga-download-settings > row {
-    width: 50%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 5px;
-    margin-bottom: 5px;
-}
-
-.new-manga-download-settings > row > label {
-    margin-left: 15px;
-    text-wrap: nowrap;
-    font-size: 11pt;
-}
-
-.new-manga-download-settings > row > input {
-    margin-left: auto;
-    margin-right: 5px; 
-    padding: 5px;
-    height: 20px;
-    border-radius: 10px;
-    border-style: solid;
-    border-color: lightgray;
-    outline: none;
-    text-align: end;
-    float: right;
-    width: 300px;
-}
-.new-manga-download-settings > row > input:focus {
-    border-color: var(--secondary-color);
-}
-
 .section-item > .jobImage {
   height: 100%;
   width: auto;
@@ -1024,9 +927,7 @@ div.new-manga-download-settings {
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: calc(100% - 15px);
+    width: 100%;
-    margin-left: 7px;
-    position: relative;
 }
 
 .section-item > .jobDetails > .jobTitle {
@@ -1036,136 +937,6 @@ div.new-manga-download-settings {
   text-wrap: wrap;
 }
 
-header-row {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    flex-wrap: wrap;
-    align-items: center
-}
-
-.mangaTitle {
-    margin: 5px;
-    font-size: 14pt;
-    font-weight: bold;
-    text-wrap: wrap;
-    display: flex;
-}
-
-tag-cloud {
-    display: inline-flex;
-    flex-direction: row;
-    margin-left: 10px;
-    width: calc(100% - 30px);
-    flex-wrap: wrap;
-}
-
-manga-tag {
-    display: inline-block;
-    height: 24px;
-    line-height: 24px;
-    position: relative;
-    margin: 0 5px 8px 17px;
-    padding: 0 10px 0 12px;
-    background: darkslategrey;
-    -webkit-border-bottom-right-radius: 3px;    
-    border-bottom-right-radius: 3px;
-    -webkit-border-top-right-radius: 3px;    
-    border-top-right-radius: 3px;
-    color: #fff;
-    font-size: 11px;
-    text-decoration: none;
-    font-weight: bold;
-}
-
-manga-tag:before {
-    content: "";
-    position: absolute;
-    top:0;
-    left: -12px;
-    width: 0;
-    height: 0;
-    border-color: transparent darkslategrey transparent transparent;
-    border-style: solid;
-    border-width: 12px 12px 12px 0;
-}
-
-manga-tag:after {
-    content: "";
-    position: absolute;
-    top: 10px;
-    left: 1px;
-    float: left;
-    width: 5px;
-    height: 5px;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    background: #fff;
-}
-
-author-tag {
-    display: inline-block;
-    height: 24px;
-    line-height: 24px;
-    position: relative;
-    margin-left: 0px;
-    margin-right: 5px;
-    padding: 0 5px 0 5px;
-    background: #800000;
-    border-radius: 5px;
-    color: #fff;
-    font-size: 11px;
-    text-decoration: none;
-    font-weight: bold;
-    align-items: center;
-    display: flex;
-}
-
-author-tag > img {
-    height: 18px; 
-    width: 18px;
-    float: left;
-    background: #800000;
-}
-
-.mangaDescription {
-    font-size: 10pt;
-    max-height: 120px;
-    overflow-y: auto;
-    padding: 4px;
-    height: auto;
-    margin: 2px;
-}
-
-.downloadManga {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-
-    border-radius: 5px;
-    padding: 5px 10px;
-    font-size: 10pt;
-}
-
-border-bar-button.in-library {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-
-    border-radius: 5px;
-    padding: 5px 10px;
-    font-size: 10pt;
-
-    background-color: #08962e;
-    color: #fff;
-    border: none;
-}
-
-border-bar-button.in-library:hover {
-    border: none;
-    color: #fff;
-}
-
 .section-item > .jobDetails > .jobProgressBar {
   margin: 5px;
   height: 10px;
@@ -1186,62 +957,4 @@ border-bar-button.in-library:hover {
   font-size: 12pt;
   color: var(--secondary-color);
   cursor: pointer;
-}
+}
-
-
- /* The switch - the box around the slider */
- .switch-toggle {
-    position: relative;
-    width: 40px;
-    height: 20px;
-    margin-left: auto;
-    float: right;
-    margin-right: 2px;
-  }
-  
-  /* Hide default HTML checkbox */
-  .switch-toggle input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  /* The slider */
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;    border-radius: 34px;
-  }
-  
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 12px;
-    width: 12px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-    border-radius: 50%;
-  }
-  
-  input:checked + .slider {
-    background-color: var(--primary-color);
-  }
-  
-  input:focus + .slider {
-    box-shadow: 0 0 1px var(--primary-color);
-  }
-  
-  input:checked + .slider:before {
-    -webkit-transform: translateX(20px);
-    -ms-transform: translateX(20px);
-    transform: translateX(20px);
-  }