More legal characters

changed publicationviewer width

Dockerfile

@@ -3,13 +3,11 @@
 FROM mcr.microsoft.com/dotnet/sdk:7.0 as build-env
 WORKDIR /src
 COPY . /src/
-RUN ls /src
 RUN dotnet restore Tranga-API/Tranga-API.csproj
 RUN dotnet publish -c Release -o /publish
 
 FROM mcr.microsoft.com/dotnet/aspnet:7.0 as runtime
 WORKDIR /publish
 COPY --from=build-env /publish .
-RUN ls /publish
 EXPOSE 80
 ENTRYPOINT ["dotnet", "/publish/Tranga-API.dll"]

Tranga-API/Program.cs

@@ -8,24 +8,28 @@ string logsFolderPath = RuntimeInformation.IsOSPlatform(OSPlatform.Linux) ? "/va
 string logFilePath = Path.Join(logsFolderPath, $"log-{DateTime.Now:dd-M-yyyy-HH-mm-ss}.txt");
 string settingsFilePath = Path.Join(applicationFolderPath, "settings.json");
 
-Directory.CreateDirectory(applicationFolderPath);
-Directory.CreateDirectory(downloadFolderPath);
 Directory.CreateDirectory(logsFolderPath);
-
-Console.WriteLine($"Application-Folder: {applicationFolderPath}");
-Console.WriteLine($"Download-Folder-Path: {downloadFolderPath}");
-Console.WriteLine($"Logfile-Path: {logFilePath}");
-Console.WriteLine($"Settings-File-Path: {settingsFilePath}");
-
 Logger logger = new(new[] { Logger.LoggerType.FileLogger, Logger.LoggerType.ConsoleLogger }, Console.Out, Console.Out.Encoding, logFilePath);
-        
+
-logger.WriteLine("Tranga_CLI", "Loading Taskmanager.");
+logger.WriteLine("Tranga", "Loading settings.");
+
 TrangaSettings settings;
 if (File.Exists(settingsFilePath))
     settings = TrangaSettings.LoadSettings(settingsFilePath);
 else
     settings = new TrangaSettings(downloadFolderPath, applicationFolderPath, null);
 
+Directory.CreateDirectory(settings.workingDirectory);
+Directory.CreateDirectory(settings.downloadLocation);
+Directory.CreateDirectory(settings.coverImageCache);
+
+logger.WriteLine("Tranga",$"Application-Folder: {settings.workingDirectory}");
+logger.WriteLine("Tranga",$"Settings-File-Path: {settings.settingsFilePath}");
+logger.WriteLine("Tranga",$"Download-Folder-Path: {settings.downloadLocation}");
+logger.WriteLine("Tranga",$"Logfile-Path: {logFilePath}");
+logger.WriteLine("Tranga",$"Image-Cache-Path: {settings.coverImageCache}");
+
+logger.WriteLine("Tranga", "Loading Taskmanager.");
 TaskManager taskManager = new (settings, logger);
 
 var builder = WebApplication.CreateBuilder(args);

Tranga.sln.DotSettings

@@ -1,3 +1,4 @@
 <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=Komga/@EntryIndexedValue">True</s:Boolean>
+	<s:Boolean x:Key="/Default/UserDictionary/Words/=Taskmanager/@EntryIndexedValue">True</s:Boolean>
 	<s:Boolean x:Key="/Default/UserDictionary/Words/=Tranga/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>

Tranga/Chapter.cs

@@ -1,4 +1,5 @@
 using System.Globalization;
+using System.Text.RegularExpressions;
 
 namespace Tranga;
 
@@ -14,14 +15,15 @@ public struct Chapter
     public string url { get; }
     public string fileName { get; }
     public string sortNumber { get; }
-
+    
+    private static readonly Regex LegalCharacters = new Regex(@"([A-z]*[0-9]* *\.*-*,*\]*\[*'*\'*\)*\(*~*!*)*");
     public Chapter(string? name, string? volumeNumber, string? chapterNumber, string url)
     {
         this.name = name;
         this.volumeNumber = volumeNumber is { Length: > 0 } ? volumeNumber : "1";
         this.chapterNumber = chapterNumber;
         this.url = url;
-        string chapterName = string.Concat((name ?? "").Split(Path.GetInvalidFileNameChars()));
+        string chapterName = string.Concat(LegalCharacters.Matches(name ?? ""));
         NumberFormatInfo nfi = new NumberFormatInfo()
         {
             NumberDecimalSeparator = "."

Tranga/Connector.cs

@@ -16,7 +16,9 @@ public abstract class Connector
 
     protected Logger? logger;
 
-    protected Connector(string downloadLocation, Logger? logger)
+    protected string imageCachePath;
+
+    protected Connector(string downloadLocation, string imageCachePath, Logger? logger)
     {
         this.downloadLocation = downloadLocation;
         this.logger = logger;
@@ -24,6 +26,7 @@ public abstract class Connector
         {
             //RequestTypes for RateLimits
         }, logger);
+        this.imageCachePath = imageCachePath;
     }
     
     public abstract string name { get; } //Name of the Connector (e.g. Website)

Tranga/Connectors/MangaDex.cs

@@ -14,11 +14,11 @@ public class MangaDex : Connector
         Manga,
         Feed,
         AtHomeServer,
-        Cover,
+        CoverUrl,
-        Author
+        Author,
     }
 
-    public MangaDex(string downloadLocation, Logger? logger) : base(downloadLocation, logger)
+    public MangaDex(string downloadLocation, string imageCachePath, Logger? logger) : base(downloadLocation, imageCachePath, logger)
     {
         name = "MangaDex";
         this.downloadClient = new DownloadClient(new Dictionary<byte, int>()
@@ -26,7 +26,7 @@ public class MangaDex : Connector
             {(byte)RequestType.Manga, 250},
             {(byte)RequestType.Feed, 250},
             {(byte)RequestType.AtHomeServer, 40},
-            {(byte)RequestType.Cover, 250},
+            {(byte)RequestType.CoverUrl, 250},
             {(byte)RequestType.Author, 250}
         }, logger);
     }
@@ -98,6 +98,10 @@ public class MangaDex : Connector
                     authorId = relationships.FirstOrDefault(relationship => relationship!["type"]!.GetValue<string>() == "author")!["id"]!.GetValue<string>();
                 }
                 string? coverUrl = GetCoverUrl(publicationId, posterId);
+                string? coverCacheName = null;
+                if (coverUrl is not null)
+                    coverCacheName = SaveImage(coverUrl);
+                
                 string? author = GetAuthor(authorId);
 
                 Dictionary<string, string> linksDict = new();
@@ -127,6 +131,7 @@ public class MangaDex : Connector
                     altTitlesDict,
                     tags.ToArray(),
                     coverUrl,
+                    coverCacheName,
                     linksDict,
                     year,
                     originalLanguage,
@@ -232,7 +237,7 @@ public class MangaDex : Connector
         
         //Request information where to download Cover
         DownloadClient.RequestResult requestResult =
-            downloadClient.MakeRequest($"https://api.mangadex.org/cover/{posterId}", (byte)RequestType.Cover);
+            downloadClient.MakeRequest($"https://api.mangadex.org/cover/{posterId}", (byte)RequestType.CoverUrl);
         if (requestResult.statusCode != HttpStatusCode.OK)
             return null;
         JsonObject? result = JsonSerializer.Deserialize<JsonObject>(requestResult.result);
@@ -292,4 +297,20 @@ public class MangaDex : Connector
         //Download cover-Image
         DownloadImage(publication.posterUrl, Path.Join(downloadLocation, publication.folderName, $"cover.{extension}"), this.downloadClient, (byte)RequestType.AtHomeServer);
     }
+
+    private string SaveImage(string url)
+    {
+        string[] split = url.Split('/');
+        string filename = split[^1];
+        string saveImagePath = Path.Join(imageCachePath, filename);
+
+        if (File.Exists(saveImagePath))
+            return filename;
+        
+        DownloadClient.RequestResult coverResult = downloadClient.MakeRequest(url, (byte)RequestType.AtHomeServer);
+        using MemoryStream ms = new();
+        coverResult.result.CopyTo(ms);
+        File.WriteAllBytes(saveImagePath, ms.ToArray());
+        return filename;
+    }
 }

Tranga/Publication.cs

@@ -1,4 +1,5 @@
 using System.Text;
+using System.Text.RegularExpressions;
 using Newtonsoft.Json;
 
 namespace Tranga;
@@ -15,6 +16,7 @@ public readonly struct Publication
     public string? description { get; }
     public string[] tags { get; }
     public string? posterUrl { get; }
+    public string? coverFileNameInCache { get; }
     public Dictionary<string,string> links { get; }
     public int? year { get; }
     public string? originalLanguage { get; }
@@ -23,20 +25,23 @@ public readonly struct Publication
     public string publicationId { get; }
     public string internalId { get; }
 
-    public Publication(string sortName, string? author, string? description, Dictionary<string,string> altTitles, string[] tags, string? posterUrl, Dictionary<string,string>? links, int? year, string? originalLanguage, string status, string publicationId)
+    private static readonly Regex LegalCharacters = new Regex(@"([A-z]*[0-9]* *\.*-*,*\]*\[*'*\'*\)*\(*~*!*)*");
+
+    public Publication(string sortName, string? author, string? description, Dictionary<string,string> altTitles, string[] tags, string? posterUrl, string? coverFileNameInCache, Dictionary<string,string>? links, int? year, string? originalLanguage, string status, string publicationId)
     {
         this.sortName = sortName;
         this.author = author;
         this.description = description;
         this.altTitles = altTitles;
         this.tags = tags;
+        this.coverFileNameInCache = coverFileNameInCache;
         this.posterUrl = posterUrl;
         this.links = links ?? new Dictionary<string, string>();
         this.year = year;
         this.originalLanguage = originalLanguage;
         this.status = status;
         this.publicationId = publicationId;
-        this.folderName = string.Concat(sortName.Split(Path.GetInvalidPathChars().Concat(Path.GetInvalidFileNameChars()).ToArray()));
+        this.folderName = string.Concat(LegalCharacters.Matches(sortName));
         string onlyLowerLetters = string.Concat(this.sortName.ToLower().Where(Char.IsLetter));
         this.internalId = Convert.ToBase64String(Encoding.ASCII.GetBytes($"{onlyLowerLetters}{this.year}"));
     }

Tranga/TaskManager.cs

@@ -21,11 +21,12 @@ public class TaskManager
 
     /// <param name="downloadFolderPath">Local path to save data (Manga) to</param>
     /// <param name="workingDirectory">Path to the working directory</param>
+    /// <param name="imageCachePath">Path to the cover-image cache</param>
     /// <param name="komgaBaseUrl">The Url of the Komga-instance that you want to update</param>
     /// <param name="komgaUsername">The Komga username</param>
     /// <param name="komgaPassword">The Komga password</param>
     /// <param name="logger"></param>
-    public TaskManager(string downloadFolderPath, string workingDirectory, string? komgaBaseUrl = null, string? komgaUsername = null, string? komgaPassword = null, Logger? logger = null)
+    public TaskManager(string downloadFolderPath, string workingDirectory, string imageCachePath, string? komgaBaseUrl = null, string? komgaUsername = null, string? komgaPassword = null, Logger? logger = null)
     {
         this.logger = logger;
         _allTasks = new HashSet<TrangaTask>();
@@ -37,7 +38,7 @@ public class TaskManager
         this.settings = new TrangaSettings(downloadFolderPath, workingDirectory, newKomga);
         ExportData();
         
-        this._connectors = new Connector[]{ new MangaDex(downloadFolderPath, logger) };
+        this._connectors = new Connector[]{ new MangaDex(downloadFolderPath, imageCachePath, logger) };
         foreach(Connector cConnector in this._connectors)
             _taskQueue.Add(cConnector, new List<TrangaTask>());
         
@@ -58,7 +59,7 @@ public class TaskManager
     public TaskManager(TrangaSettings settings, Logger? logger = null)
     {
         this.logger = logger;
-        this._connectors = new Connector[]{ new MangaDex(settings.downloadLocation, logger) };
+        this._connectors = new Connector[]{ new MangaDex(settings.downloadLocation, settings.coverImageCache, logger) };
         foreach(Connector cConnector in this._connectors)
             _taskQueue.Add(cConnector, new List<TrangaTask>());
         _allTasks = new HashSet<TrangaTask>();

Tranga/TrangaSettings.cs

@@ -9,6 +9,7 @@ public class TrangaSettings
     [JsonIgnore]public string settingsFilePath => Path.Join(workingDirectory, "settings.json");
     [JsonIgnore]public string tasksFilePath => Path.Join(workingDirectory, "tasks.json");
     [JsonIgnore]public string knownPublicationsPath => Path.Join(workingDirectory, "knownPublications.json");
+    [JsonIgnore] public string coverImageCache => Path.Join(workingDirectory, "imageCache");
     public Komga? komga { get; set; }
 
     public TrangaSettings(string downloadLocation, string workingDirectory, Komga? komga)

Website/index.html

@@ -18,12 +18,6 @@
     <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
   </topbar>
   <viewport>
-    <sidebar>
-      <background-placeholder></background-placeholder>
-      
-      <spacer></spacer>
-      <p style="text-align: center">Made with Blåhaj 🦈</p>
-    </sidebar>
     <content>
       <div id="addPublication">
         <p>+</p>
@@ -76,25 +70,33 @@
         </publication-information>
       </publication-viewer>
     </popup>
-    
+    <popup id="settingsPopup">
+      <blur-background id="blurBackgroundSettingsPopup"></blur-background>
+      <settings>
+        <span class="title">Settings</span>
+        <div>
+          <span class="title">Download Location:</span>
+          <span id="downloadLocation"></span>
+        </div>
+        <div>
+          <span class="title">API-URI</span>
+          <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
+        </div>
+        <komga-settings>
+          <span class="title">Komga</span>
+          <div>Configured: <span id="komgaConfigured">✅❌</span></div>
+          <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
+          <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
+          <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
+          <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
+          <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
+        </komga-settings>
+      </settings>
+    </popup>
   </viewport>
-  
+  <footer>
-  <settingstab id="settingstab">
+    <p style="text-align: center">Made with Blåhaj 🦈</p>
-    <span class="title">Download Location:</span>
+  </footer>  
-    <span id="downloadLocation"></span>
-    <span class="title">API-URI</span>
-    <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
-    <komga-settings>
-      <span class="title">Komga</span>
-      <div>Configured: <span id="komgaConfigured">✅❌</span></div>
-      <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
-      <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
-      <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
-      <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
-      <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
-    </komga-settings>
-  </settingstab>
-  
   <script src="apiConnector.js"></script>
   <script src="interaction.js"></script>
 </body>

Website/interaction.js

@@ -1,31 +1,11 @@
-const slideInRight = [
+let publications = [];
-    { right: "-20rem" },
-    { right: "0" }
-];
-
-const slideInRightTiming = {
-    duration: 200,
-    iterations: 1,
-    fill: "forwards",
-    easing: "ease-out"
-}
-
-const slideOutRightTiming = {
-    direction: "reverse",
-    duration: 200,
-    iterations: 1,
-    fill: "forwards",
-    easing: "ease-in"
-}
-
-let publications = [];
 let tasks = [];
 let toEditId;
 
 const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
 const selectPublication = document.querySelector("#taskSelectOutput");
 const connectorSelect = document.querySelector("#connectors");
-const settingsTab = document.querySelector("#settingstab");
+const settingsPopup = document.querySelector("#settingsPopup");
 const settingsCog = document.querySelector("#settingscog");
 const selectRecurrence = document.querySelector("#selectReccurrence");
 const tasksContent = document.querySelector("content");
@@ -49,6 +29,7 @@ const settingApiUri = document.querySelector("#settingApiUri");
 
 
 settingsCog.addEventListener("click", () => OpenSettings());
+document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
 closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
 document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
 document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
@@ -111,7 +92,7 @@ function CreatePublication(publication, connector){
     var publicationElement = document.createElement('publication');
     publicationElement.setAttribute("id", publication.internalId);
     var img = document.createElement('img');
-    img.src = publication.posterUrl;
+    img.src = `imageCache/${publication.coverFileNameInCache}`;
     publicationElement.appendChild(img);
     var info = document.createElement('publication-information');
     var connectorName = document.createElement('connector-name');
@@ -139,15 +120,6 @@ function AddTaskClick(){
     HidePublicationPopup();
 }
 
-let slideIn = true;
-function slide() {
-    if (slideIn)
-        settingsTab.animate(slideInRight, slideInRightTiming);
-    else
-        settingsTab.animate(slideInRight, slideOutRightTiming);
-    slideIn = !slideIn;
-}
-
 function ResetContent(){
     //Delete everything
     tasksContent.replaceChildren();
@@ -162,16 +134,28 @@ function ResetContent(){
     tasksContent.appendChild(add);
 }
 function ShowPublicationViewerWindow(publicationId, event, add){
+
+
+    //Show popup
+    publicationViewerPopup.style.display = "block";
+    
     //Set position to mouse-position
-    publicationViewerWindow.style.top = `${event.clientY - 60}px`;
+    if(event.clientY < window.innerHeight - publicationViewerWindow.offsetHeight)
-    publicationViewerWindow.style.left = `${event.clientX}px`;
+        publicationViewerWindow.style.top = `${event.clientY}px`;
+    else
+        publicationViewerWindow.style.top = `${event.clientY - publicationViewerWindow.offsetHeight}px`;
+    
+    if(event.clientX < window.innerWidth - publicationViewerWindow.offsetWidth)
+        publicationViewerWindow.style.left = `${event.clientX}px`;
+    else
+        publicationViewerWindow.style.left = `${event.clientX - publicationViewerWindow.offsetWidth}px`;
     
     //Edit information inside the window
     var publication = publications.filter(pub => pub.internalId === publicationId)[0];
     publicationViewerName.innerText = publication.sortName;
     publicationViewerDescription.innerText = publication.description;
     publicationViewerAuthor.innerText = publication.author;
-    pubviewcover.src = publication.posterUrl;
+    pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`;
     toEditId = publicationId;
     
     //Check what action should be listed
@@ -183,9 +167,6 @@ function ShowPublicationViewerWindow(publicationId, event, add){
         publicationAdd.style.display = "none";
         publicationDelete.style.display = "block";
     }
-    
-    //Show popup
-    publicationViewerPopup.style.display = "block";
 }
 
 function HidePublicationPopup(){
@@ -214,7 +195,11 @@ const fadeInTiming = {
 
 function OpenSettings(){
     GetSettingsClick();
-    slide();
+    settingsPopup.style.display = "flex";
+}
+
+function HideSettings(){
+    settingsPopup.style.display = "none";
 }
 
 function GetSettingsClick(){

Website/style.css

@@ -35,6 +35,8 @@ topbar {
     align-items: center;
     height: var(--topbar-height);
     background-color: var(--secondary-color);
+    z-index: 100;
+    box-shadow: 0 0 20px black;
 }
 
 titlebox {
@@ -70,9 +72,9 @@ searchdiv{
 }
 
 #searchbox {
-    padding: 6px 8px;
+    padding: 3px 10px;
     border: 0;
-    border-radius: 3px;
+    border-radius: 4px;
     font-size: 14pt;
     width: 250px;
 }
@@ -80,7 +82,7 @@ searchdiv{
 #settingscog {
     cursor: pointer;
     margin: 0px 30px;
-    height: calc(100% - 40px);
+    height: 50%;
     filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%);
 }
 
@@ -90,22 +92,24 @@ viewport {
     flex-flow: row;
     flex-wrap: nowrap;
     flex-grow: 1;
+    height: 100%;
+    overflow-y: scroll;
 }
 
-sidebar{
+footer {
-    position: relative;
-    width: 20rem;
-    margin-bottom: 20px;
-    border-radius: 0 0 5px 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    justify-content: space-evenly;
+    background-color: var(--primary-color);
 }
 
 content {
     position: relative;
     flex-grow: 1;
-    margin: 0 10px 10px 10px;
     border-radius: 5px;
     display: flex;
     flex-direction: row;
@@ -114,35 +118,28 @@ content {
     align-content: start;
 }
 
-settingstab{
+settings {
-    position: absolute;
+    width: 50%;
-    right: -20rem;
+    background-color: var(--accent-color);
-    bottom: 0;
-    background-color: rgba(0,0,0,0.5);
-    width: 20rem;
-    height: calc(100% - var(--topbar-height) - 40px);
-    margin-bottom: 10px;
-    border-radius: 5px 0 0 5px;
     display: flex;
     flex-direction: column;
-    flex-wrap: nowrap;
+    z-index: 10;
+    position: absolute;
+    left: 25%;
+    top: 25%;
+    border-radius: 5px;
 }
 
-settingstab > * {
+#settingsPopup{
-    margin: 0 20px;
+    z-index: 10;
 }
 
-settingstab input {
+settings > *{
-    padding: 3px;
+    margin: 10px 5px;
-    border-radius: 3px;
-    border: 0;
-    margin: 2px 20px;
 }
 
-settingstab .title {
+settings .title {
-    font-size: 14pt;
     font-weight: bolder;
-    margin-top: 20px;
 }
 
 komga-settings {
@@ -153,7 +150,7 @@ komga-settings {
 }
 
 komga-settings input {
-    margin: 2px 0;
+    margin: 3px 0;
 }
 
 #addPublication {
@@ -183,7 +180,8 @@ komga-settings input {
     font-size: 12pt;
     border-radius: 9pt;
     background-color: var(--primary-color);
-    padding: 2pt 20px;
+    padding: 2pt 17px;
+    color: black;
 }
 
 publication{
@@ -203,7 +201,7 @@ publication::after{
     left: 0; top: 0;
     border-radius: 5px;
     width: 100%; height: 100%;
-    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.1));
+    background: linear-gradient(rgba(0,0,0,0.7), rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.2));
 }
 
 publication-information {
@@ -234,7 +232,9 @@ publication img {
     left: 0;
     width: 100%;
     height: 100%;
+    object-fit: cover;
     z-index: 0;
+    border-radius: 5px;
 }
 
 popup{
@@ -243,7 +243,7 @@ popup{
     min-height: 100%;
     top: 0;
     left: 0;
-    position: absolute;
+    position: fixed;
     z-index: 2;
 }
 
@@ -268,7 +268,6 @@ addtask-window {
     max-height: 80%;
     padding: 0;
     background-color: var(--accent-color);
-    z-index: 5;
     border-radius: 5px;
 }
 
@@ -339,12 +338,12 @@ addtask-settings addtask-setting{
 }
 
 #publicationViewerPopup{
-    z-index: 6;
+    z-index: 5;
 }
 
 publication-viewer{
     display: block;
-    width: 500px;
+    width: 450px;
     height: 300px;
     position: absolute;
     top: 200px;
@@ -372,8 +371,9 @@ publication-viewer img {
     position: absolute;
     left: 0;
     top: 0;
-    min-height: 100%;
+    height: 100%;
-    max-width: 100%;
+    width: 100%;
+    object-fit: cover;
     border-radius: 5px;
     z-index: 0;
 }

docker-compose.yaml

@@ -3,7 +3,7 @@
     image: glax/tranga-api:latest
     container_name: tranga-api
     volumes:
-      - ./tranga:/usr/share/Tranga-API
+      - ./tranga:/usr/share/Tranga-API #1 when replacing ./tranga replace #2 with same value
       - ./Manga:/Manga
     ports:
       - 6531:80
@@ -11,5 +11,9 @@
   tranga-website:
     image: glax/tranga-website:latest
     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
+      - 9555:80
+    depends_on: 
+      - tranga-api