Style Manga-Display

Fix Manga.GetMangaCoverUrl

Website/modules/Manga.tsx

@@ -4,7 +4,6 @@ import { getData } from '../App';
 export class Manga
 {
     static async GetAllManga(): Promise<IManga[]> {
-        let manga: IManga[] = [];
         console.debug("Getting all Manga");
         return getData("http://127.0.0.1:6531/v2/Mangas")
             .then((json) => {
@@ -40,12 +39,8 @@ export class Manga
             });
     }
 
-    static async GetMangaCoverUrl(internalId: string): Promise<string> {
+    static GetMangaCoverUrl(internalId: string): string {
         console.debug(`Getting Manga Cover-Url ${internalId}`);
-        return await getData(`http://127.0.0.1:6531/v2/Manga/${internalId}/Cover`)
+        return `http://127.0.0.1:6531/v2/Manga/${internalId}/Cover`;
-            .then((json) => {
-                console.debug(`Got Cover-Url of Manga ${internalId}`);
-                return (json.toString());
-            });
     }
 }

Website/modules/interfaces/IManga.tsx

@@ -25,10 +25,25 @@ export default interface IManga{
     "mangaConnector": IMangaConnector
 }
 
-export function HTMLFromIManga(manga: IManga) : ReactElement {
+function ReleaseStatusFromNumber(n: number): string {
-    return (<div className="Manga" key={manga.internalId}>
+    switch(n) {
-        <p>{manga.sortName}</p>
+        case 0: return "Ongoing";
-        <p>Description: {manga.description}</p>
+        case 1: return "Completed";
-        <p>MangaConnector: {manga.mangaConnector.name}</p>
+        case 2: return "OnHiatus";
-    </div>)
+        case 3: return "Cancelled";
+        case 4: return "Unreleased";
+    }
+    return "";
+}
+
+export function HTMLFromIManga(manga: IManga) : ReactElement {
+    return(
+    <div className="Manga" key={manga.internalId}>
+        <img src={Manga.GetMangaCoverUrl(manga.internalId)}></img>
+        <div>
+            <p className="Manga-name">{manga.sortName}</p>
+            <p className="pill connector-name">{manga.mangaConnector.name}</p>
+            <div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div>
+        </div>
+    </div>);
 }

Website/styles/Manga.css

@@ -0,0 +1,119 @@
+.pill {
+    flex-grow: 0;
+    height: 14pt;
+    font-size: 12pt;
+    border-radius: 9pt;
+    background-color: var(--primary-color);
+    padding: 2pt 17px;
+    color: black;
+    width: fit-content;
+    margin: 10px 0;
+}
+
+.Manga{
+    cursor: pointer;
+    background-color: var(--secondary-color);
+    width: 180px;
+    height: 300px;
+    border-radius: 5px;
+    margin: 10px 10px;
+    padding: 15px 19px;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.Manga::after{
+    content: '';
+    position: absolute;
+    left: 0; top: 0;
+    border-radius: 5px;
+    width: 100%; height: 100%;
+    background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
+    z-index: 0;
+}
+
+.Manga-name{
+    width: fit-content;
+    font-size: 16pt;
+    font-weight: bold;
+    color: white;
+}
+
+.Manga-status {
+    display:block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
+}
+
+.Manga-status::after {
+    content: attr(release-status);
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    visibility: hidden;
+
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+
+    /*Size*/
+    padding: 3px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+}
+
+.Manga-status:hover::after{
+    visibility:visible;
+}
+
+
+.Manga-status[release-status="Ongoing"]{
+    background-color: limegreen;
+}
+
+.Manga-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+.Manga-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+.Manga-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+.Manga-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+.Manga-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
+
+.Manga img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 5px;
+    z-index: 0;
+}
+
+.Manga > div {
+    position: absolute;
+    z-index: 1;
+}