multiple viewing modes

src/lib/components/anilistItems.svelte

@@ -72,7 +72,7 @@
     }
 	.items {
 		display: grid;
-  		align-items: center;
+  		align-items: flex-start;
 		gap: 1rem;
 		grid-template-columns: repeat(auto-fit, 11rem);
 	}

src/lib/components/item.svelte

@@ -17,10 +17,17 @@
     export var coverColor: string | null = null;
 </script>
 
-<div class="item" class:grid={$showType == "grid"} class:comfortable={$showType == "comfortable"} class:coverOnly={$showType == "cover-only"} class:list={$showType == "list"}>
-    <div class="flex" class:r18 on:click>
+<div on:click class="item" class:grid={$showType == "grid"} class:comfortable={$showType == "comfortable"} class:coverOnly={$showType == "cover-only"} class:list={$showType == "list"}>
+    <div class="flex" class:r18>
         {#if cover}
-            <img class="cover" style="{coverColor ? "--box-shadow-color: " + coverColor : ""}" draggable="false" src="{cover}" alt="{title}" {title} width={coverWidth} height={coverHeight}>
+            <div class="cover-container" width={coverWidth} height={coverHeight}>
+                <img class="cover" style="{coverColor ? "--box-shadow-color: " + coverColor : ""}" draggable="false" src="{cover}" alt="{title}" {title} width={coverWidth} height={coverHeight}>
+                {#if $showType == "grid"}
+                    <div class="over">
+                        {title}
+                    </div>
+                {/if}
+            </div>
         {:else}
             Broken art
         {/if}
@@ -40,6 +47,11 @@
             {/if}
         </div>
     </div>
+    {#if $showType == "comfortable"}
+        <div>
+            {title}
+        </div>
+    {/if}
 </div>
 
 <style>
@@ -67,6 +79,27 @@
     .flex {
         display: flex;
         gap: 1rem;
+    }
+    .cover-container {
+        position: relative;
+    }
+    .over {
+        display: -webkit-box;
+        position: absolute;
+        visibility: visible;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        line-height: 1.5rem;
+        max-height: calc(2rem + 2*1.4rem);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.7) 100%);
+        color: white;
+        padding: 1.5rem 0.5rem 0.5rem 0.5rem;
+        border-radius: 5px;
     }
 	.item img {
         --box-shadow-color: white;
@@ -76,11 +109,9 @@
 		box-shadow: 0 0 0 var(--box-shadow-color);
 		transition: .4s box-shadow, .3s height;
 	}
-	@media(prefers-reduced-motion) {
-		.item img, .item:hover img {
-			box-shadow: none;
-		}
-	}
+    .item.list img.cover {
+        height: 8rem;
+    }
 	.item:hover img {
 		box-shadow: 0 0 20px var(--box-shadow-color);
 	}

src/lib/components/navbar.svelte

@@ -18,18 +18,26 @@
 
 	const anilistID = hostname === "manga.danbulant.eu" ? "8374" : "8375";
     var focused = false;
-    var width;
+    var width: number;
     var small = width < 600;
     $: small = width < 600;
+    var textfield: HTMLInputElement;
+
+    function handleKeyDown(e: KeyboardEvent) {
+        if(e.key === "k" && e.ctrlKey) {
+            e.preventDefault();
+            textfield.focus();
+        }
+    }
 </script>
 
-<svelte:window bind:innerWidth={width} />
+<svelte:window bind:innerWidth={width} on:keydown={handleKeyDown} />
 
 <div class="navbar flex" class:full-text={small && focused}>
     <h1>Library</h1>
 
     <div class="search">
-        <input type="text" on:focus={() => focused = true} on:blur={() => focused = false} placeholder="{isLogedIn() ? "Search for manga or enter URL of mangadex.org manga" : "Enter UUID or URL of mangadex.org manga"}" bind:value={name}>
+        <input type="text" bind:this={textfield} on:focus={() => focused = true} on:blur={() => focused = false} placeholder="{isLogedIn() ? "Search for manga or enter URL of mangadex.org manga" : "Enter UUID or URL of mangadex.org manga"}" bind:value={name}>
         <button on:click={open}>➜</button>
     </div>
 
@@ -61,11 +69,13 @@
     }
     .navbar {
         position: fixed;
+        z-index: 10;
         top: 0;
         left: 0;
         width: 100vw;
         height: 4rem;
-        background: black;
+        background: rgb(0,0,0,0.9);
+        backdrop-filter: blur(25px);
         border-bottom: 1px solid gray;
         gap: 1rem;
         padding: 0 1rem;

src/lib/components/showTypeChooser.svelte

@@ -7,8 +7,8 @@
 <div>
     <button on:click={() => $showType = "grid"} class:active={$showType == "grid"}>Grid</button><!--
     --><button on:click={() => $showType = "list"} class:active={$showType == "list"}>List</button><!--
-    <!-- -><button on:click={() => $showType = "comfortable"} class:active={$showType == "comfortable"}>Comfortable grid</button><!--
-    -><button on:click={() => $showType = "cover-only"} class:active={$showType == "cover-only"}>Cover only</button> -->
+    --><button on:click={() => $showType = "comfortable"} class:active={$showType == "comfortable"}>Comfortable</button><!--
+    --><button on:click={() => $showType = "cover-only"} class:active={$showType == "cover-only"}>Cover</button>
 </div>
 
 <style>