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

@@ -3,6 +3,8 @@ name: Docker Image CI
 on:
   push:
     branches: [ "cuttingedge" ]
+  pull_request:
+    branches: [ "cuttingedge" ] 
   workflow_dispatch:
 
 jobs:
@@ -22,7 +24,7 @@ jobs:
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.3.0
+        uses: docker/setup-buildx-action@v3.1.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,7 +37,7 @@ jobs:
       - name: Build and push Website
         uses: docker/build-push-action@v4.1.1
         with:
-          context: ./Website
+          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

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

@@ -2,7 +2,9 @@ name: Docker Image CI
 
 on:
   push:
-    branches: [ "cuttingedge" ]
+    branches: [ "dev" ]
+  pull_request:
+    branches: [ "dev" ]
   workflow_dispatch:
 
 jobs:
@@ -22,7 +24,7 @@ jobs:
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.3.0
+        uses: docker/setup-buildx-action@v3.1.0
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -35,9 +37,11 @@ jobs:
       - name: Build and push Website
         uses: docker/build-push-action@v4.1.1
         with:
-          context: ./Website
+          context: ./
           file: ./Dockerfile
-          #platforms: linux/amd63,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
+          #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

Website/apiConnector.js

@@ -41,13 +41,9 @@ async function GetData(uri){
     return json;
 }
 
-async function PostData(uri, body){
+async function PostData(uri){
     let request = await fetch(uri, {
-        method: 'POST',
+        method: 'POST'
-        headers: {
-            'Accept': 'application/json'
-        },
-        body: body
     });
     //console.log(request);
 }
@@ -59,132 +55,131 @@ function DeleteData(uri){
 }
 
 async function Ping(){
-  let ret = await GetData(`${apiUri}/v2/Ping`);
+  let ret = await GetData(`${apiUri}/Ping`);
   return ret;
 }
 
 async function GetAvailableControllers(){
-    var uri = `${apiUri}/v2/Connector/Types`;
+    var uri = apiUri + "/Connectors";
     let json = await GetData(uri);
     return json;
 }
 
 async function GetPublicationFromConnector(connector, title){
-  var uri = `${apiUri}/v2/Connector/${connector}/GetManga`;
+  var uri;
-  if(title.startsWith("http")){
+  if(title.includes("http")){
-    uri += `?url=${title}`
+    uri = `${apiUri}/Manga/FromConnector?connector=${connector}&url=${title}`;
   }else{
-    uri += `?title=${title}`
+    uri = `${apiUri}/Manga/FromConnector?connector=${connector}&title=${title}`;
   }
   let json = await GetData(uri);
   return json;
 }
 
-async function GetCoverUrl(internalId){
+async function GetChapters(connector, internalId, language){
-    return `${apiUri}/v2/Manga/${internalId}/Cover`;
+    var uri = `${apiUri}/Manga/Chapters?connector=${connector}&internalId=${internalId}&translatedLanguage=${language}`;
+    let json = await GetData(uri);
+    return json;
+}
+
+function GetCoverUrl(internalId){
+  return `${apiUri}/Manga/Cover?internalId=${internalId}`;
 }
 
 async function GetAllJobs(){
-	var uri = `${apiUri}/v2/Jobs`;
+	var uri = `${apiUri}/Jobs`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetRunningJobs(){
-    var uri = `${apiUri}/v2/Jobs/Running`;
+    var uri = `${apiUri}/Jobs/Running`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetWaitingJobs(){
-    var uri = `${apiUri}/v2/Jobs/Waiting`;
+    var uri = `${apiUri}/Jobs/Waiting`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetMonitorJobs(){
-  var uri = `${apiUri}/v2/Jobs/Monitoring`;
+  var uri = `${apiUri}/Jobs/MonitorJobs`;
   let json = await GetData(uri);
   return json;
 }
 
-async function GetJob(jobId){
+async function GetProgress(jobId){
-    var uri = `${apiUri}/v2/Job/${jobId}`;
+    var uri = `${apiUri}/Jobs/Progress?jobId=${jobId}`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetSettings(){
-    var uri = `${apiUri}/v2/Settings`;
+    var uri = `${apiUri}/Settings`;
     let json = await GetData(uri);
     return json;
 }
 
 async function GetAvailableNotificationConnectors(){
-	var uri = `${apiUri}/v2/NotificationConnector/Types`;
+	var uri = `${apiUri}/NotificationConnectors/Types`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetNotificationConnectors(){
-	var uri = `${apiUri}/v2/NotificationConnector`;
+	var uri = `${apiUri}/NotificationConnectors`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetAvailableLibraryConnectors(){
-	var uri = `${apiUri}/v2/LibraryConnector/Types`;
+	var uri = `${apiUri}/LibraryConnectors/Types`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetLibraryConnectors(){
-	var uri = `${apiUri}/v2/LibraryConnector`;
+	var uri = `${apiUri}/LibraryConnectors`;
 	let json = await GetData(uri);
 	return json;
 }
 
 async function GetRateLimits() {
-    var uri = `${apiUri}/v2/Settings/RateLimit`
+    var uri = `${apiUri}/Settings/customRequestLimit`
     let json = await GetData(uri);
     return json;
 }
 
-async function GetMangaChapters(connector, internalId) {
+function CreateMonitorJob(connector, internalId, language, interval, folder, chapterNo){
-    var uri = `${apiUri}/v2/Manga/${internalId}`
+    var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}&customFolderName=${folder}`;
-    let json = await GetData(uri);
+    //console.log(uri);
-    return json;
+	PostData(uri);
 }
 
-function CreateMonitorJob(internalId, language, interval, folder = null, chapterNo){
+function CreateDownloadNewChaptersJob(connector, internalId, language){
-    var uri = `${apiUri}/v2/Job/Create/MonitorManga`;
+    var uri = `${apiUri}/Jobs/DownloadNewChapters?connector=${connector}&internalId=${internalId}&translatedLanguage=${language}`;
-    let data = `{ "internalId": ${internalId}, "language": ${language}, "interval": ${interval}, "startChapter": ${chapterNo}, "customFolder": ${folder} }`
+    PostData(uri);
-    PostData(uri, data);
-}
-
-function CreateDownloadNewChaptersJob(internalId, language){
-    var uri = `${apiUri}/v2/Job/Create/DownloadNewChaptersJob`;
-    let data = `{ "internalId": ${internalId}, "language": ${language} }`
-    PostData(uri, data);
 }
 
 function StartJob(jobId){
-    var uri = `${apiUri}/v2/Job/${jobId}/StartNow`;
+    var uri = `${apiUri}/Jobs/StartNow?jobId=${jobId}`;
     PostData(uri);
 }
 
 function UpdateDownloadLocation(downloadLocation){
-    var uri = `${apiUri}/v2/Settings/DownloadLocation`;
+    var uri = `${apiUri}/Settings/UpdateDownloadLocation?downloadLocation=${downloadLocation}`;
-    PostData(uri, `{ "location": ${location} }`);	
+    PostData(uri);	
 }
 
-function RefreshMangaMetadata(internalId) {
+function RefreshLibraryMetadata() {
-    var uri = `${apiUri}/v2/Job/Create/UpdateMetaDataJob`;
+    var uri = `${apiUri}/Jobs/UpdateMetadata`;
-    PostData(uri, `{ "internalId": ${internalId} }`);
+    PostData(uri);
 }
 
 async function DownloadLogs() {
-    var uri = `${apiUri}/v2/LogFile`;
+    var uri = `${apiUri}/LogFile`;
 
     //Below taken from https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
     fetch(uri)
@@ -247,119 +242,126 @@ Date.prototype.timeNow = function () {
 
 function UpdateAprilFoolsMode() { 
 	checkBox = document.getElementById("aprilFoolsMode");
-	var uri = `${apiUri}/v2/Settings/AprilFoolsMode`;
+	var uri = `${apiUri}/Settings/AprilFoolsMode?enabled=${checkBox.checked}`;
-	PostData(uri, `{ "value": ${checkBox.checked} }` );
+	PostData(uri);
 }
 
 function ResetRateLimits() {
-	var uri = `${apiUri}/v2/Settings/RateLimit`;
+	var uri = `${apiUri}/Settings/customRequestLimit/Reset`;
 	PostData(uri);
 	OpenSettings();
 }
 
 function ResetUserAgent() {
-	var uri = `${apiUri}/v2/Settings/UserAgent`;
+	var uri = `${apiUri}/Settings/userAgent/Reset`;
 	PostData(uri);
 	OpenSettings();
 }
 
 //Komga
 function UpdateKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/v2/LibraryConnector/Komga`;
+    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
-    PostData(uri, `{ "url": ${komgaUrl}, "auth": ${komgaAuth} }`);
+    PostData(uri);
 }
 
 function ResetKomga(){
-    var uri = `${apiUri}/v2/LibraryConnector/Komga`;
+    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Komga`;
-    DeleteData(uri);
+    PostData(uri);
 }
 
 function TestKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/v2/LibraryConnector/Komga/Test`;
+    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
-    PostData(uri, `{ "url": ${komgaUrl}, "auth": ${komgaAuth} }`);
+    PostData(uri);
 }
 
 
 //Kavita
 function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/v2/LibraryConnector/Kavita`;
+    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
-    PostData(uri, `{ "url": ${kavitaUrl}, "uasername": ${kavitaUsername}, "password": ${kavitaPassword} }`);
+    PostData(uri);
 }
 
 function ResetKavita(){
-    var uri = `${apiUri}/v2/LibraryConnector/Kavita`;
+    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Kavita`;
-    DeleteData(uri);
+    PostData(uri);
 }
 
 function TestKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/v2/LibraryConnector/Kavita/Test`;
+    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
-    PostData(uri, `{ "url": ${kavitaUrl}, "uasername": ${kavitaUsername}, "password": ${kavitaPassword} }`);
+    PostData(uri);
 }
 
 //Gotify
 function UpdateGotify(gotifyUrl, gotifyAppToken){
-    var uri = `${apiUri}/v2/NotificationConnector/Gotify`;
+    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
-    PostData(uri, `{ "url": ${gotifyUrl}, "appToken": ${gotifyAppToken} }`);
+    PostData(uri);
 }
 
 function ResetGotify(){
-    var uri = `${apiUri}/v2/NotificationConnector/Gotify`;
+    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Gotify`;
-    DeleteData(uri);
+    PostData(uri);
 }
 
 function TestGotify(gotifyUrl, gotifyAppToken){
-    var uri = `${apiUri}/v2/NotificationConnector/Gotify/Test`;
+    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
-    PostData(uri, `{ "url": ${gotifyUrl}, "appToken": ${gotifyAppToken} }`);
+    PostData(uri);
 }
 
 //LunaSea
 function UpdateLunaSea(lunaseaWebhook){
-    var uri = `${apiUri}/v2/NotificationConnector/LunaSea`;
+    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
-    PostData(uri, `{ "webhook": ${lunaseaWebhook} }`);
+    PostData(uri);
 }
 
 function ResetLunaSea(){
-    var uri = `${apiUri}/v2/NotificationConnector/LunaSea`;
+    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=LunaSea`;
-    DeleteData(uri);
+    PostData(uri);
 }
 
 function TestLunaSea(lunaseaWebhook){
-    var uri = `${apiUri}/v2/NotificationConnector/LunaSea/Test`;
+    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
-    PostData(uri, `{ "webhook": ${lunaseaWebhook} }`);
+    PostData(uri);
 }
 
 //Ntfy
-function UpdateNtfy(ntfyEndpoint, ntfyUser, ntfyPass){
+function UpdateNtfy(ntfyEndpoint, ntfyAuth){
-    var uri = `${apiUri}/v2/NotificationConnector/Ntfy`;
+    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
-    PostData(uri, `{ "url": ${ntfyEndpoint}, "username": ${ntfyUser}, "password": ${ntfyPass} }`);
+    PostData(uri);
 }
 
 function ResetNtfy(){
-    var uri = `${apiUri}/v2/NotificationConnector/Ntfy`;
+    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Ntfy`;
-    DeleteData(uri);
+    PostData(uri);
 }
 
-function TestNtfy(ntfyEndpoint, ntfyUser, ntfyPass){
+function TestNtfy(ntfyEndpoint, ntfyAuth){
-    var uri = `${apiUri}/v2/NotificationConnector/Ntfy/Test`;
+    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
-    PostData(uri, `{ "url": ${ntfyEndpoint}, "username": ${ntfyUser}, "password": ${ntfyPass} }`);
+    PostData(uri);
 }
 
 function UpdateUserAgent(userAgent){
-    var uri = `${apiUri}/v2/Settings/UserAgent`;
+    var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`;
-    PostData(uri, `{ "value": ${userAgent} }`);
+    PostData(uri);
 }
 
-function UpdateRateLimit(rateLimitType, rateLimitValue) {
+function UpdateRateLimit(byteValue, rateLimit) {
-    var uri = `${apiUri}/v2/Settings/RateLimit/${rateLimitType}`;
+    var uri = `${apiUri}/Settings/customRequestLimit?requestType=${byteValue}&requestsPerMinute=${rateLimit}`;
-    PostData(uri, `{ "value": ${rateLimitValue} }`);
+    PostData(uri);
 }
 
 function RemoveJob(jobId){
-    var uri = `${apiUri}/v2/Job/${jobId}`;
+    var uri = `${apiUri}/Jobs?jobId=${jobId}`;
     DeleteData(uri);
 }
 
 function CancelJob(jobId){
-    var uri = `${apiUri}/v2/Job/${jobId}/Cancel`;
+    var uri = `${apiUri}/Jobs/Cancel?jobId=${jobId}`;
     PostData(uri);
 }
+
+async function GetLogmessages(count){
+	var uri = `${apiUri}/LogMessages?count=${count}`;
+	let json = await GetData(uri);
+    console.log(json);
+	return json;
+}

Website/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,10 +6,6 @@
   <link id='basestyle' rel="stylesheet" href="styles/base.css">
   <link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap" rel="stylesheet">
 </head>
 <body>
   <wrapper>
@@ -235,12 +231,11 @@
                   <div class="section-item">
                     <span class="title"><img src='connector-icons/ntfy.svg'>Ntfy<connector-configured id="ntfyConfigured"></connector-configured></span>
                     <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
-                    <label for="ntfyUser"></label><input placeholder="Username" id="ntfyUser" type="text">
+                    <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
-                    <label for="ntfyPass"></label><input placeholder="Password" id="ntfyPass" type="password">
                     <div class="section-buttons-container">
-                      <span onclick="TestNtfy(ntfyEndpoint.value, ntfyUser.value, ntfyPass.value);" class='section-button' id="test-connector">Test</span>
+                      <span onclick="TestNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button' id="test-connector">Test</span>
                       <span onclick="ClearNtfy()" class='section-button' id="reset">Reset</span>
-                      <span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyUser.value, ntfyPass.value);" class='section-button'>Apply</span>
+                      <span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button'>Apply</span>
                   </div>
                   </div>
                 </div>
@@ -258,32 +253,24 @@
 		
 	  <popup id="publicationViewerPopup">
         <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
-        <popup-window>
+        <publication-viewer>
-          <border-bar>
+          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
-            <popup-title><a class="mangaTitle" id="publicationViewerName"></a></popup-title><status-filter id="publicationViewerStatus"></status-filter>
+          <publication-details>
-            <popup-close onclick="publicationViewerPopup.style.display = 'none'">&times</popup-close>
+            <publication-name id="publicationViewerName">Best Manga there is</publication-name>
-          </border-bar>
+            <publication-tags id="publicationViewerTags">A Manga</publication-tags>
-          <manga-details>
+            <publication-author id="publicationViewerAuthor">Glax</publication-author>
-
+            <publication-description id="publicationViewerDescription">
-            <img-container>
+              An interesting description. The description is very intriguing, yet wholesome.
-              <img id="pubviewcover">
+            </publication-description>
-              <manga-connector id="publicationViewerConnector"></manga-connector>
+            <publication-interactions>
-              <span class="latest-chapter-no" id="publicationViewerChapterNo"></span>
+              <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
-            </img-container>
+              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
-            <div style="height: 100%;">
+              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
-              <tag-cloud id="publicationViewerTags"></tag-cloud>
+              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
-              <div class="mangaDescription" id="publicationViewerDescription"></div>
+              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
-            </div>
+            </publication-interactions>
-          </manga-details>
+          </publication-details>
-          <!-- <manga-chapter id="publicationViewerChapters"></manga-chapter> -->
+        </publication-viewer>
-          <border-bar>
-            <div class="button-container">
-              <border-bar-button onclick="RefreshMangaMetadata(selectedManga.internalId)">Refresh Metadata</border-bar-button>
-              <border-bar-button id="reset" onclick="RemoveJob(selectedJob.id); UpdateJobs(); mangaViewerPopup.style.display = 'none'">Remove Manga</border-bar-button>
-              <border-bar-button class="primary" onclick="StartJob(selectedJob.id); mangaViewerPopup.style.display = 'none'">Start Job</border-bar-button>
-            </div>
-          </border-bar>
-        </popup-window>
       </popup>
 
       <popup id="jobStatusView">

Website/interaction.js

@@ -1,4 +1,4 @@
-let monitoringJobsCount = 0;
+let monitoringJobsCount = 0;
 let runningJobs = [];
 let waitingJobs = [];
 let notificationConnectorTypes = [];
@@ -19,6 +19,11 @@ const filterContent = document.querySelector("#filterContent");
 const settingsCog = document.querySelector("#settingscog");
 const filterFunnel = document.querySelector("#filterFunnel");
 const tasksContent = document.querySelector("content");
+const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
+const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
+const startJobButton = document.querySelector("#startJobButton");
+const cancelJobButton = document.querySelector("#cancelJobButton");
+const deleteJobButton = document.querySelector("#deleteJobButton");
 
 //Manga viewer popup
 const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
@@ -26,10 +31,8 @@ const mangaViewerWindow = document.querySelector("publication-viewer");
 const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
 const mangaViewerName = document.querySelector("#publicationViewerName");
 const mangaViewerTags = document.querySelector("#publicationViewerTags");
+const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const mangaViewCover = document.querySelector("#pubviewcover");
-const mangaViewConn = document.querySelector('#publicationViewerConnector');
-const mangaViewStatus = document.querySelector('#publicationViewerStatus');
-const mangaViewChapterNo = document.querySelector('#publicationViewerChapterNo');
 
 //General Rate Limits
 const defaultRL = document.querySelector("#defaultRL");
@@ -60,8 +63,7 @@ const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
 
 //Ntfy
 const settingNtfyEndpoint = document.querySelector("#ntfyEndpoint");
-const settingNtfyUser = document.querySelector("#ntfyUser");
+const settingNtfyAuth = document.querySelector("#ntfyAuth");
-const settingNtfyPass = document.querySelector("#ntfyPass");
 
 //Connector Configured
 const settingKomgaConfigured = document.querySelector("#komgaConfigured");
@@ -155,8 +157,8 @@ function Setup(){
     GetSettings().then((json) => {
       //console.log(json);
       settingApiUri.placeholder = apiUri;
-      settingDownloadLocation.placeholder = json.downloadLocation;
+      settingDownloadLocation.value = json.downloadLocation;
-      settingUserAgent.placeholder = json.userAgent;
+      settingUserAgent.value = json.userAgent;
       settingAprilFoolsMode.checked = json.aprilFoolsMode;
     });
     GetRateLimits().then((json) => {
@@ -473,7 +475,7 @@ function CreateSearchResult(manga, connector) {
 
   //Description
   var description = document.createElement('div');
-  description.className = 'mangaDescription abbreviated';
+  description.className = 'mangaDescription';
   description.innerText = manga.description;
   mangaDetails.appendChild(description);
 
@@ -485,7 +487,7 @@ function CreateSearchResult(manga, connector) {
   
   folderRow = document.createElement('row');
   folderLabel = document.createElement('label');
-  folderLabel.innerText = 'Download Folder';
+  folderLabel.innerText = 'Download Folder:';
   folderRow.appendChild(folderLabel);
   folderInput = document.createElement('input');
   downloadFolder = manga.folderName;
@@ -497,7 +499,7 @@ function CreateSearchResult(manga, connector) {
 
   intervalRow = document.createElement('row');
   intervalLabel = document.createElement('label');
-  intervalLabel.innerText = 'Job Interval';
+  intervalLabel.innerText = 'Job Interval:';
   intervalRow.appendChild(intervalLabel);
   intervalInput = document.createElement('input');
   intervalInput.placeholder = '03:00:00 (HH:MM:SS)';
@@ -508,7 +510,7 @@ function CreateSearchResult(manga, connector) {
 
   chapterRow = document.createElement('row');
   chapterLabel = document.createElement('label');
-  chapterLabel.innerText = 'Download from Chapter';
+  chapterLabel.innerText = 'Download from Chapter:';
   chapterRow.appendChild(chapterLabel);
   chapterInput = document.createElement('input');
   chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString();
@@ -549,13 +551,15 @@ function IsInLibrary(id) {
 }
 
 function AddManga(id, connector) {
-  console.log('Adding Manga');
+  //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 != '') {
+  if (folderInput == null || folderInput == '') {
+    mangaFolder = document.getElementById(id.concat('-downloadfolder')).placeholder;
+  } else {
     mangaFolder = folderInput;
   }
   
@@ -576,93 +580,65 @@ function AddManga(id, connector) {
   CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
 }
 
+createMonitorJobButton.addEventListener("click", () => {
+  CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
+  UpdateJobs();
+  mangaViewerPopup.style.display = "none";
+});
+startJobButton.addEventListener("click", () => {
+  StartJob(selectedJob.id);
+  mangaViewerPopup.style.display = "none";
+});
+cancelJobButton.addEventListener("click", () => {
+  CancelJob(selectedJob.id);
+  mangaViewerPopup.style.display = "none";
+});
+deleteJobButton.addEventListener("click", () => {
+  RemoveJob(selectedJob.id);
+  UpdateJobs();
+  mangaViewerPopup.style.display = "none";
+});
+
 function ShowMangaWindow(job, manga, event, add){
     selectedManga = manga;
     selectedJob = job;
+    //Show popup
+    mangaViewerPopup.style.display = "block";
     
-    //Title
+    //Set position to mouse-position
+    if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight)
+        mangaViewerWindow.style.top = `${event.clientY}px`;
+    else
+        mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`;
+    
+    if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth)
+        mangaViewerWindow.style.left = `${event.clientX}px`;
+    else
+        mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`;
+    
+    //Edit information inside the window
     mangaViewerName.innerText = manga.sortName;
-    mangaViewerName.href = manga.websiteUrl;
+    mangaViewerTags.innerText = manga.tags.join(", ");
-
-    //Author and Genre Tag Cloud
-    mangaViewerTags.replaceChildren();
-    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);
-  
-      mangaViewerTags.appendChild(authorCard);
-    });
-    manga.tags.forEach(tag => {
-      var tagElement = document.createElement('manga-tag');
-      tagElement.innerText = tag;
-      mangaViewerTags.appendChild(tagElement);
-    });
-
-    //Description
     mangaViewerDescription.innerText = manga.description;
-
+    mangaViewerAuthor.innerText = manga.authors.join(',');
-    //Image and Connector
     mangaViewCover.src = GetCoverUrl(manga.internalId);
-    mangaViewConn.innerText = job.mangaConnector.name.toUpperCase();
+    toEditId = manga.internalId;
-    mangaViewConn.style.backgroundColor = stringToColour(job.mangaConnector.name);
-    mangaViewChapterNo.innerText = manga.latestChapterAvailable.toString();
     
-    //Release Status
+    //Check what action should be listed
-    switch(manga.releaseStatus){
+    if(add){
-      case 0:
+        createMonitorJobButton.style.display = "initial";
-        mangaViewStatus.setAttribute("release-status", "Ongoing");
+        createDownloadChapterJobButton.style.display = "none";
-        mangaViewStatus.innerText = "Ongoing";
+        cancelJobButton.style.display = "none";
-        break;
+        startJobButton.style.display = "none";
-      case 1:
+        deleteJobButton.style.display = "none";
-        mangaViewStatus.setAttribute("release-status", "Completed");
+    }
-        mangaViewStatus.innerText = "Completed";
+    else{
-        break;
+        createMonitorJobButton.style.display = "none";
-      case 2:
+        createDownloadChapterJobButton.style.display = "none";
-        mangaViewStatus.setAttribute("release-status", "On Hiatus");
+        cancelJobButton.style.display = "initial";
-        mangaViewStatus.innerText = "On Hiatus";
+        startJobButton.style.display = "initial";
-        break;
+        deleteJobButton.style.display = "initial";
-      case 3:
-        mangaViewStatus.setAttribute("release-status", "Cancelled");
-        mangaViewStatus.innerText = "Cancelled";
-        break;
-      case 4:
-        mangaViewStatus.setAttribute("release-status", "Upcoming");
-        mangaViewStatus.innerText = "Upcoming";
-        break;
-      default:
-        mangaViewStatus.setAttribute("release-status", "Status Unavailable");
-        mangaViewStatus.innerText = "Status Unavailable";
-        break;
     }
-
-    // //Individual Manga Chapters
-    // chapters = document.querySelector('#publicationViewerChapters');
-    // chapters.replaceChildren();
-    // var mangaChapters = GetMangaChapters(job.mangaConnector.name, manga.internalId);
-
-    // mangaChapters.then(value => {
-
-    //   sortedChapters = value.sort((a, b) => b.chapterNumber - a.chapterNumber);
-
-    //   sortedChapters.forEach(chapter => {
-    //     chapterNo = chapter.chapterNumber;
-    //     var chapterElement = document.createElement('chapter-row');
-    //     chapterElement.innerText = chapter.fileName;
-    //     chapters.appendChild(chapterElement);
-    // })
-    // }).then(() => { 
-    //   //Show popup
-    //   mangaViewerPopup.style.display = "block";
-    // });
-
-    mangaViewerPopup.style.display = "block"
 }
 
 function HidePublicationPopup(){
@@ -759,7 +735,7 @@ settingGotifyUrl.addEventListener("keypress", (event) => { if(event.key === "Ent
 settingGotifyAppToken.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(); });
-settingNtfyPass.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(); });
 
@@ -786,8 +762,7 @@ function OpenSettings(){
   settingGotifyUrl.value = "";
   settingGotifyAppToken.value = "";
   settingLunaseaWebhook.value = "";
-  settingNtfyUser.value = "";
+  settingNtfyAuth.value = "";
-  settingNtfyPass.value = "";
   settingNtfyEndpoint.value = "";
   settingUserAgent.value = "";
   settingApiUri.value = "";
@@ -800,10 +775,10 @@ function OpenSettings(){
   
   GetSettings().then((json) => {
     //console.log(json);
-    settingApiUri.placeholder = apiUri;
+    settingApiUri.value = apiUri;
-    settingUserAgent.placeholder = json.userAgent;
+    settingUserAgent.value = json.userAgent;
     settingAprilFoolsMode.checked = json.aprilFoolsMode;
-    settingDownloadLocation.placeholder = json.downloadLocation;
+    settingDownloadLocation.value = json.downloadLocation;
     //console.log(json.styleSheet);
   });
   GetRateLimits().then((json) => {
@@ -820,15 +795,15 @@ function OpenSettings(){
       switch(libraryConnectorTypes[connector.libraryType]){
         case "Kavita":
           settingKavitaConfigured.setAttribute("configuration", "Active");
-          settingKavitaUrl.placeholder = connector.baseUrl;
+          settingKavitaUrl.value = connector.baseUrl;
-          settingKavitaUser.placeholder = "***";
+          settingKavitaUser.value = "***";
-          settingKavitaPass.placeholder = "***";
+          settingKavitaPass.value = "***";
           break;
         case "Komga":
           settingKomgaConfigured.setAttribute("configuration", "Active");
-          settingKomgaUrl.placeholder = connector.baseUrl;
+          settingKomgaUrl.value = connector.baseUrl;
-          settingKomgaUser.placeholder = "***";
+          settingKomgaUser.value = "***";
-          settingKomgaPass.placeholder = "***";
+          settingKomgaPass.value = "***";
           break;
         default:
           console.log("Unknown type");
@@ -841,19 +816,18 @@ function OpenSettings(){
     json.forEach(connector => {
       switch(notificationConnectorTypes[connector.notificationConnectorType]){
         case "Gotify":
-          settingGotifyUrl.placeholder = connector.endpoint;
+          settingGotifyUrl.value = connector.endpoint;
-          settingGotifyAppToken.placeholder = "***";
+          settingGotifyAppToken.value = "***";
           settingGotifyConfigured.setAttribute("configuration", "Active");
           break;
         case "LunaSea":
           settingLunaseaConfigured.setAttribute("configuration", "Active");
-          settingLunaseaWebhook.placeholder = connector.id;
+          settingLunaseaWebhook.value = connector.id;
           break;
         case "Ntfy":
           settingNtfyConfigured.setAttribute("configuration", "Active");
-          settingNtfyEndpoint.placeholder = connector.endpoint;
+          settingNtfyEndpoint.value = connector.endpoint;
-          settingNtfyUser.placeholder = "***"
+          settingNtfyAuth.value = "***";
-          settingNtfyPass.placeholder = "***";
           break;
         default:
           console.log("Unknown type");
@@ -896,8 +870,7 @@ function ClearLunasea(){
 
 function ClearNtfy(){
   settingNtfyEndpoint.value = "";
-  settingNtfyUser.value = "";
+  settingNtfyAuth.value = "";
-  settingNtfyPass.value = "";
   settingNtfyConfigured.setAttribute("configuration", "Not Configured");
   ResetNtfy();
 }
@@ -931,8 +904,8 @@ function UpdateSettings(){
   }
   
   if(settingNtfyEndpoint.value != "" &&
-    settingNtfyUser.value != ""){
+    settingNtfyAuth.value != ""){
-    UpdateNtfy(settingNtfyEndpoint.value, settingNtfyUser.value, settingNtfyPass.value);
+    UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value);
   }
   
   if(settingUserAgent.value != ""){
@@ -1056,14 +1029,16 @@ function createJob(jobjson){
     title.innerText = manga.sortName;
   details.appendChild(title);
   
-  var progressBarContainer = document.createElement('div');
+  var progressBar = document.createElement("progress");
-  progressBarContainer.className = 'progress-container';
+  progressBar.className = "jobProgressBar";
-
-  var progressBar = document.createElement("div");
-  progressBar.className = "pending";
   progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
-  progressBarContainer.appendChild(progressBar);
+  details.appendChild(progressBar);
-  details.appendChild(progressBarContainer);
+  
+  var progressSpan = document.createElement("span");
+  progressSpan.className = "jobProgressSpan";
+  progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
+  progressSpan.innerText = "Pending...";
+  details.appendChild(progressSpan);
   
   var cancelSpan = document.createElement("span");
   cancelSpan.className = "jobCancel";
@@ -1083,12 +1058,18 @@ function ShowJobQueue(){
 function UpdateJobProgress(jobId){
   GetProgress(jobId).then((json) => {
     var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`);
+    var progressSpan = document.querySelector(`#jobProgressSpan${GetValidSelector(jobId)}`);
     if(progressBar != null && json.progress != 0){
-      progressBar.className = 'jobProgressBar';
+      progressBar.value = json.progress;
+    }
+    if(progressSpan != null){
+      var percentageStr = "0%";
+      var timeleftStr = "00:00:00";
+      if(json.progress != 0){
         percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress);
-      console.log(percentageStr);
+        timeleftStr = json.timeRemaining.split('.')[0];
-      progressBar.style.width = percentageStr;
+      }
-      progressBar.innerText = percentageStr;
+      progressSpan.innerText = `${percentageStr} ${timeleftStr}`;
     }
   });
 }
@@ -1098,7 +1079,7 @@ function GetValidSelector(str){
     return clean.join('');
 }
 
-function stringToColour(str) {
+const stringToColour = (str) => {
   let hash = 0;
   str.split('').forEach(char => {
     hash = char.charCodeAt(0) + ((hash << 5) - hash)

Website/styles/base.css

@@ -1,4 +1,4 @@
-:root{
+:root{
     --background-color: #030304;
     --second-background-color: white;
     --primary-color: #f5a9b8;
@@ -20,7 +20,6 @@ body{
     background-color: var(--background-color);
     font-family: "Inter", sans-serif;
     overflow-x: hidden;
-    font-weight: 400;
 }
 
 wrapper {
@@ -421,14 +420,11 @@ popup popup-window {
     overflow: hidden;
 }
 
-/*Remove below when individual chapter download is implemented*/
+popup#jobStatusView popup-window {
-#publicationViewerPopup > popup-window {
+    left: 10%;
-    height: fit-content;
+    top: 10%;
-    width: auto; 
+    height: 80%;
-    max-width: 80%;
+    width: 80%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
 }
 
 popup-content{
@@ -646,9 +642,9 @@ a:active {
     user-select: none; /* Standard syntax */
 }
 
-#reset:hover {
+.section-button#reset:hover {
-    color: rgb(255, 44, 29);
+    color: red;
-    border-color: rgb(255, 44, 29);
+    border-color: red;
 }
 .section-buttons-container > .section-button:hover {
     border-color: var(--secondary-color);
@@ -715,6 +711,111 @@ blur-background {
     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;
@@ -812,21 +913,22 @@ popup-content #loaderdiv {
 
 #newMangaResult > .section-item {
     flex-direction: row;
+    min-height: 300px;
+    flex-grow: 0;
     width: auto;
-    height: auto;
     padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 img-container {
-    height: 300px;
+    height: 100%;
-    width: 180px;
+    width: 200px;
     position: relative;
     left: 0;
     top: 0;
     border-radius: 10px;
     overflow: hidden;
-    flex-shrink: 0;
-    flex-grow: 0;
 }
 
 img-container > img {
@@ -855,43 +957,6 @@ manga-connector {
     text-align: center;
 }
 
-manga-details {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    margin: 2px;
-}
-
-manga-details > .mangaDescription {
-    width: 100%;
-}
-
-manga-chapter {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    border-style: solid;
-    border-width: 2px;
-    margin: 5px;
-    border-radius: 10px;
-    border-color: #bbb;
-    scrollbar-width: thin;
-    scrollbar-color:  var(--secondary-color) var(--second-background-color);
-}
-
-chapter-row {
-    font-size: 12pt;
-    width: 100%;
-    border-style: solid;
-    border-color: #ccc;
-    border-width: 1px;
-    padding-left: 50px;
-    padding-top: 7px;
-    padding-bottom: 7px;
-}
-
 span.latest-chapter-no {
     position: absolute;
     right: 5px;
@@ -906,26 +971,28 @@ span.latest-chapter-no {
 }
 
 div.new-manga-download-settings {
-    position: relative;
+    position: absolute;
     overflow: hidden;
-    width: calc(100%-20px);
+    bottom: 0;
+    right: 0;
+    width: 100%;
     height: auto;
     padding: 10px;
 }
 
 .new-manga-download-settings > row {
-    width: 80%;
+    width: 50%;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    margin-top: 20px;
+    align-items: center;
     margin-left: 5px;
+    margin-bottom: 5px;
 }
 
 .new-manga-download-settings > row > label {
+    margin-left: 15px;
     text-wrap: nowrap;
-    font-size: 10pt;
+    font-size: 11pt;
-    font-weight: bold;
-    color: #474646;
 }
 
 .new-manga-download-settings > row > input {
@@ -937,42 +1004,14 @@ div.new-manga-download-settings {
     border-style: solid;
     border-color: lightgray;
     outline: none;
+    text-align: end;
     float: right;
-    width: 100%;
+    width: 300px;
 }
 .new-manga-download-settings > row > input:focus {
     border-color: var(--secondary-color);
 }
 
-@media only screen and (max-width: 768px) {
-    /* For mobile phones: */
-    img-container {
-      display: none;
-    }
-
-    .section-item > tag-cloud {
-        display: none !important;
-    }
-    .new-manga-download-settings > row, .downloadManga, border-bar-button.in-library { 
-        width: calc(100% - 25px) !important;
-        align-self: center;
-        position: relative;
-    }
-
-    popup popup-window {
-        width: 100%;
-        height: calc(100% - var(--topbar-height));
-        top: var(--topbar-height);
-        left: 0;
-        border-radius: 0;
-    }
-
-    .section-item {
-        width: 100% !important;
-    }
-}
-
-
 .section-item > .jobImage {
   height: 100%;
   width: auto;
@@ -1091,26 +1130,17 @@ author-tag > img {
 
 .mangaDescription {
     font-size: 10pt;
+    max-height: 120px;
+    overflow-y: auto;
     padding: 4px;
     height: auto;
     margin: 2px;
 }
 
-.abbreviated {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 10;
-    line-clamp: 10;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    word-wrap: break-word;
-}
-
 .downloadManga {
-    position: relative;
+    position: absolute;
-    float: right;
+    right: 10px;
-    width: fit-content;
+    bottom: 10px;
-    margin: 5px 5px 0 auto;
 
     border-radius: 5px;
     padding: 5px 10px;
@@ -1118,10 +1148,9 @@ author-tag > img {
 }
 
 border-bar-button.in-library {
-    position: relative;
+    position: absolute;
-    float: right;
+    right: 10px;
-    margin: 5px 5px 0 auto;
+    bottom: 10px;
-    width: fit-content;
 
     border-radius: 5px;
     padding: 5px 10px;
@@ -1130,7 +1159,6 @@ border-bar-button.in-library {
     background-color: #08962e;
     color: #fff;
     border: none;
-    cursor: default;
 }
 
 border-bar-button.in-library:hover {
@@ -1138,48 +1166,16 @@ border-bar-button.in-library:hover {
     color: #fff;
 }
 
-.section-item > .jobDetails > .progress-container {
+.section-item > .jobDetails > .jobProgressBar {
   margin: 5px;
-  height: 15px;
+  height: 10px;
-  border-radius: 12px;
+  border-radius: 7px;
-  overflow: hidden;
-  background-color: #999999;
-  position: relative;
 }
 
-.progress-container > .jobProgressBar {
+.section-item > .jobDetails > .jobProgressSpan {
-    margin: 0px;
+    margin: 5px;
-    display: block;
+    margin-left: auto;
-    height: 15px;
+    margin-right: 5px;
-    padding-left: 5px;
-    border-radius: 12px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: #0075fa;
-    color: white;
-    justify-content: left;
-    font-size: 8pt;
-    line-height: 15px;
-}
-
-.progress-container > .pending { 
-    width: 50%;
-    display: block;
-    height: 15px;
-    top: 0%;
-    position: absolute;
-    border-radius: 12px;
-    background-color: #0075fa;
-    animation: bounce;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-}
-
-@keyframes bounce {
-    0%      {width: 10%; transform: translateX(0);};
-    50%     {width: 50%; transform: translateX(100%);};
-    100%    {width: 10%; transform: translateX(0);};
 }
 
 .section-item > .jobDetails > .jobCancel {