Poster: Fix issues i made 11 days ago

sbondCo · Oct 3, 2024 · 48814c2 · 48814c2
1 parent 5a70b8a
commit 48814c2
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 112 deletions.
diff --git a/src/lib/poster/ExtraDetails.svelte b/src/lib/poster/ExtraDetails.svelte
@@ -103,6 +103,7 @@
     background-color: $poster-extra-detail-bg-color;
     border-radius: 10px;
     transition: opacity 100ms ease-out;
+    pointer-events: none !important;
 
     & > div {
       padding: 8px 3px;

diff --git a/src/lib/poster/GamePoster.svelte b/src/lib/poster/GamePoster.svelte
@@ -141,6 +141,11 @@
   }}
   on:mouseleave={() => (posterActive = false)}
   on:click={() => (posterActive = true)}
+  on:keyup={(e) => {
+    if (e.key === "Tab") {
+      e.currentTarget.scrollIntoView({ block: "center" });
+    }
+  }}
   on:keypress={() => console.log("on kpress")}
   class={`${posterActive ? "active " : ""}${pinned ? "pinned " : ""}`}
 >
@@ -171,9 +176,11 @@
       <ExtraDetails details={extraDetails} {status} {rating} />
     {/if}
     <div
-      on:click={() => {
+      on:click={(e) => {
         if (typeof onClick !== "undefined") {
           onClick();
+          // Prevent the link inside this div from being clicked in this case.
+          e.preventDefault();
           return;
         }
         if (posterActive && link) goto(link);
@@ -184,19 +191,15 @@
       role="button"
       tabindex="-1"
     >
-      <h2>
-        {#if typeof onClick === "undefined" && link}
-          <a data-sveltekit-preload-data="tap" href={link}>
-            {title}
-          </a>
-        {:else}
+      <a data-sveltekit-preload-data="tap" href={link}>
+        <h2>
           {title}
-        {/if}
-        {#if year}
-          <time>{year}</time>
-        {/if}
-      </h2>
-      <span>{media.summary}</span>
+          {#if year}
+            <time>{year}</time>
+          {/if}
+        </h2>
+        <span>{media.summary}</span>
+      </a>
 
       {#if !hideButtons}
         <div class="buttons">
@@ -217,6 +220,15 @@
     outline: 3px solid gold;
   }
 
+  li {
+    &:not(.active) {
+      .container .inner,
+      .container .inner .buttons {
+        pointer-events: none !important;
+      }
+    }
+  }
+
   .container {
     display: flex;
     flex-flow: column;
@@ -299,6 +311,10 @@
       background-color: transparent;
       transition: opacity 150ms cubic-bezier(0.19, 1, 0.22, 1);
 
+      & > a {
+        height: 100%;
+      }
+
       h2 {
         font-family:
           sans-serif,
@@ -344,19 +360,16 @@
       font-size: 11px;
     }
 
-    &:hover,
-    &:has(:focus-visible) {
+    .active & {
       transform: scale(1.3);
       z-index: 99;
     }
 
-    &.small:hover,
-    &.small:has(:focus-visible) {
+    .active &.small {
       transform: scale(1.1);
     }
 
-    &:hover,
-    &:has(:focus-visible),
+    .active &,
     &:global(.details-shown) {
       img {
         filter: blur(4px) grayscale(80%);

diff --git a/src/lib/poster/Poster.svelte b/src/lib/poster/Poster.svelte
@@ -113,6 +113,11 @@
   }}
   on:mouseleave={() => (posterActive = false)}
   on:click={() => (posterActive = true)}
+  on:keyup={(e) => {
+    if (e.key === "Tab") {
+      e.currentTarget.scrollIntoView({ block: "center" });
+    }
+  }}
   on:keypress={() => console.log("on kpress")}
   class={`${posterActive ? "active " : ""}${pinned ? "pinned " : ""}`}
 >
@@ -139,9 +144,11 @@
       <ExtraDetails details={extraDetails} {status} {rating} />
     {/if}
     <div
-      on:click={() => {
+      on:click={(e) => {
         if (typeof onClick !== "undefined") {
           onClick();
+          // Prevent the link inside this div from being clicked in this case.
+          e.preventDefault();
           return;
         }
         if (posterActive && link) goto(link);
@@ -152,19 +159,15 @@
       role="button"
       tabindex="-1"
     >
-      <h2>
-        {#if typeof onClick === "undefined" && link}
-          <a data-sveltekit-preload-data="tap" href={link}>
-            {title}
-          </a>
-        {:else}
+      <a data-sveltekit-preload-data="tap" href={link}>
+        <h2>
           {title}
-        {/if}
-        {#if year}
-          <time>{year}</time>
-        {/if}
-      </h2>
-      <span>{media.overview}</span>
+          {#if year}
+            <time>{year}</time>
+          {/if}
+        </h2>
+        <span>{media.overview}</span>
+      </a>
 
       {#if !hideButtons}
         <div class="buttons">
@@ -185,6 +188,15 @@
     outline: 3px solid gold;
   }
 
+  li {
+    &:not(.active) {
+      .container .inner,
+      .container .inner .buttons {
+        pointer-events: none !important;
+      }
+    }
+  }
+
   .container {
     display: flex;
     flex-flow: column;
@@ -247,6 +259,10 @@
       background-color: transparent;
       transition: opacity 150ms cubic-bezier(0.19, 1, 0.22, 1);
 
+      & > a {
+        height: 100%;
+      }
+
       h2 {
         font-family:
           sans-serif,
@@ -292,19 +308,16 @@
       font-size: 11px;
     }
 
-    &:hover,
-    &:has(:focus-visible) {
+    .active & {
       transform: scale(1.3);
       z-index: 99;
     }
 
-    &.small:hover,
-    &.small:has(:focus-visible) {
+    .active &.small {
       transform: scale(1.1);
     }
 
-    &:hover,
-    &:has(:focus-visible),
+    .active &,
     &:global(.details-shown) {
       img {
         filter: blur(4px) grayscale(80%);

diff --git a/src/lib/poster/PosterRating.svelte b/src/lib/poster/PosterRating.svelte
@@ -67,60 +67,65 @@
       {/if}
     </span>
 
-    {#if ratingsShown}
-      <div class={["small-scrollbar", direction, isUsingThumbs ? "is-using-thumbs" : ""].join(" ")}>
-        {#if isUsingThumbs}
-          <button
-            on:click={() => handleStarClick(1)}
-            class="plain{rating && rating > 0 && rating < 5 ? ' active' : ''}"
-            style="display: flex; justify-content: center;"
-          >
-            <i style="display: flex; width: 35px;"><Icon i="thumb-down" /></i>
-          </button>
-          <button
-            on:click={() => handleStarClick(5)}
-            class="plain{rating && rating > 4 && rating < 9 ? ' active' : ''}"
-            style="display: flex; justify-content: center;"
+    <div
+      class={[
+        ratingsShown ? "shown" : "",
+        "small-scrollbar",
+        direction,
+        isUsingThumbs ? "is-using-thumbs" : ""
+      ].join(" ")}
+    >
+      {#if isUsingThumbs}
+        <button
+          on:click={() => handleStarClick(1)}
+          class="plain{rating && rating > 0 && rating < 5 ? ' active' : ''}"
+          style="display: flex; justify-content: center;"
+        >
+          <i style="display: flex; width: 35px;"><Icon i="thumb-down" /></i>
+        </button>
+        <button
+          on:click={() => handleStarClick(5)}
+          class="plain{rating && rating > 4 && rating < 9 ? ' active' : ''}"
+          style="display: flex; justify-content: center;"
+        >
+          <span
+            style="display: flex; transform: translate(0px, -2px); font-size: 40px; height: 40px; font-family: 'Shrikhand';"
           >
-            <span
-              style="display: flex; transform: translate(0px, -2px); font-size: 40px; height: 40px; font-family: 'Shrikhand';"
-            >
-              -
-            </span>
-          </button>
+            -
+          </span>
+        </button>
+        <button
+          on:click={() => handleStarClick(9)}
+          class="plain{rating && rating > 8 ? ' active' : ''}"
+          style="display: flex; justify-content: center;"
+        >
+          <i style="display: flex; width: 35px;"><Icon i="thumb-up" /></i>
+        </button>
+      {:else}
+        {@const stars =
+          settings?.ratingSystem == RatingSystem.OutOf5
+            ? [5, 4, 3, 2, 1]
+            : [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]}
+        {#each stars as v}
           <button
-            on:click={() => handleStarClick(9)}
-            class="plain{rating && rating > 8 ? ' active' : ''}"
-            style="display: flex; justify-content: center;"
+            class="plain{rating === v ? ' active' : ''}"
+            on:click={(ev) => {
+              ev.stopPropagation();
+              handleStarClick(settings?.ratingSystem === RatingSystem.OutOf5 ? v * 2 : v);
+              ratingsShown = false;
+            }}
           >
-            <i style="display: flex; width: 35px;"><Icon i="thumb-up" /></i>
+            {#if settings?.ratingSystem === RatingSystem.OutOf100}
+              {v * 10}
+            {:else if settings?.ratingSystem === RatingSystem.OutOf5}
+              {v}
+            {:else}
+              {v}
+            {/if}
           </button>
-        {:else}
-          {@const stars =
-            settings?.ratingSystem == RatingSystem.OutOf5
-              ? [5, 4, 3, 2, 1]
-              : [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]}
-          {#each stars as v}
-            <button
-              class="plain{rating === v ? ' active' : ''}"
-              on:click={(ev) => {
-                ev.stopPropagation();
-                handleStarClick(settings?.ratingSystem === RatingSystem.OutOf5 ? v * 2 : v);
-                ratingsShown = false;
-              }}
-            >
-              {#if settings?.ratingSystem === RatingSystem.OutOf100}
-                {v * 10}
-              {:else if settings?.ratingSystem === RatingSystem.OutOf5}
-                {v}
-              {:else}
-                {v}
-              {/if}
-            </button>
-          {/each}
-        {/if}
-      </div>
-    {/if}
+        {/each}
+      {/if}
+    </div>
   {:else if rating}
     <span class="rating-text">
       {rating}
@@ -223,6 +228,10 @@
       z-index: 40;
       box-shadow: 0px 0px 1px #000;
 
+      &:not(.shown) {
+        display: none;
+      }
+
       &.bot {
         top: calc(100% + 2px);
         border-radius: 0 0 4px 4px;