feat: better looking search menu on mobile

fix: clipping on home rss feeds
ThaUnknown · Jun 30, 2024 · eb21eff · eb21eff
1 parent 2c67c9e
commit eb21eff
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 24 deletions.
diff --git a/common/components/Search.svelte b/common/components/Search.svelte
@@ -54,7 +54,7 @@
   }
 </script>
 
-<form class='container-fluid py-20 px-50 bg-dark pb-0 position-sticky top-0 search-container z-40' on:input bind:this={form}>
+<form class='container-fluid py-20 px-md-50 px-20 bg-dark pb-0 position-sticky top-0 search-container z-40' on:input bind:this={form}>
   <div class='row'>
     <div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
       <div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>

diff --git a/common/components/cards/FullCard.svelte b/common/components/cards/FullCard.svelte
@@ -13,14 +13,14 @@
   }
 </script>
 
-<div class='d-flex px-20 py-10 position-relative' use:click={viewMedia}>
-  <div class='card m-0 p-0 overflow-hidden pointer content-visibility-auto'
+<div class='d-flex px-20 py-10 position-relative justify-content-center' use:click={viewMedia}>
+  <div class='card m-0 p-0 overflow-hidden pointer content-visibility-auto full-card'
     style:--color={media.coverImage.color || '#1890ff'}>
     <div class='row h-full'>
-      <div class='col-4'>
+      <div class='col-4 img-col'>
         <img loading='lazy' src={media.coverImage.extraLarge || ''} alt='cover' class='cover-img w-full h-full' />
       </div>
-      <div class='col-8 h-full card-grid'>
+      <div class='col h-full card-grid'>
         <div class='px-15 py-10 bg-very-dark'>
           <h5 class='m-0 text-white text-capitalize font-weight-bold'>
             {#if media.mediaListEntry?.status}
@@ -94,7 +94,7 @@
 }
 .card {
   animation: 0.3s ease 0s 1 load-in;
-  width: 50rem !important;
+  width: 52rem !important;
   height: 27rem !important;
   box-shadow: rgba(0, 4, 12, 0.3) 0px 7px 15px, rgba(0, 4, 12, 0.05) 0px 4px 4px;
   contain-intrinsic-height: 27rem;

diff --git a/common/components/cards/FullSkeletonCard.svelte b/common/components/cards/FullSkeletonCard.svelte
@@ -1,5 +1,5 @@
-<div class='d-flex px-20 py-10 position-relative content-visibility-auto'>
-  <div class='card m-0 p-0 overflow-hidden'>
+<div class='d-flex px-20 py-10 position-relative content-visibility-auto justify-content-center'>
+  <div class='card m-0 p-0 overflow-hidden full-card'>
     <div class='row h-full'>
       <div class='col-4 skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
       <div class='col-8 bg-very-dark px-15 py-10'>

diff --git a/common/components/cards/SkeletonCard.svelte b/common/components/cards/SkeletonCard.svelte
@@ -1,5 +1,5 @@
-<div class='d-flex p-20 wrapper content-visibility-auto'>
-  <div class='item d-flex flex-column h-full'>
+<div class='d-flex p-md-20 p-15 wrapper content-visibility-auto'>
+  <div class='item d-flex flex-column h-full small-card'>
     <div class='img w-full rounded skeloader bg-dark-light'><div class='skeleloader-swipe' /></div>
     <div class='skeloader rounded bg-dark-light h-10 w-150 mt-15'><div class='skeleloader-swipe' /></div>
     <div class='skeloader rounded bg-dark-light h-10 w-100 mt-15'><div class='skeleloader-swipe' /></div>
@@ -8,14 +8,12 @@
 
 <style>
   .img {
-    height: 27rem;
+    width: 100%;
+    aspect-ratio: 230/331;
   }
   .item {
     animation: 0.3s ease 0s 1 load-in;
-    width: 19rem
-  }
-  .wrapper {
-    height: 40.6rem;
-    contain-intrinsic-height: 40.6rem;
+    width: 100%;
+    aspect-ratio: 152/296;
   }
 </style>
diff --git a/common/components/cards/SmallCard.svelte b/common/components/cards/SmallCard.svelte
@@ -19,11 +19,11 @@
   }
 </script>
 
-<div class='d-flex p-20 position-relative first-check' use:hoverClick={[viewMedia, setHoverState]}>
+<div class='d-flex p-md-20 p-15 position-relative first-check' use:hoverClick={[viewMedia, setHoverState]}>
   {#if preview}
     <PreviewCard {media} />
   {/if}
-  <div class='item d-flex flex-column h-full pointer content-visibility-auto'>
+  <div class='item small-card d-flex flex-column h-full pointer content-visibility-auto'>
     {#if $page === 'schedule'}
       <div class='w-full text-center pb-10'>
         {#if media.airingSchedule?.nodes?.[0]?.airingAt}
@@ -67,12 +67,13 @@
     -webkit-box-orient: vertical;
   }
   img {
-    height: 27rem;
+    width: 100%;
+    aspect-ratio: 230/331;
   }
   .item {
     animation: 0.3s ease 0s 1 load-in;
-    width: 19rem;
-    contain-intrinsic-height: 36.7rem;
+    width: 100%;
+    aspect-ratio: 152/296;
   }
   .cover-img {
     background-color: var(--color) !important;

diff --git a/common/css.css b/common/css.css
@@ -196,4 +196,11 @@ img[src=''], img[src=' '] {
 .px-50 {
   padding-left: 5rem;
   padding-right: 5rem;
+}
+
+@media (min-width: 769px) {
+  .px-md-50 {
+    padding-left: 5rem !important;
+    padding-right: 5rem !important;
+  }
 }
diff --git a/common/modules/sections.js b/common/modules/sections.js
@@ -67,7 +67,8 @@ function createSections () {
         title,
         load: (page = 1, perPage = 12) => RSSManager.getMediaForRSS(page, perPage, url),
         preview: writable(RSSManager.getMediaForRSS(1, 12, url)),
-        variables: { disableSearch: true }
+        variables: { disableSearch: true },
+        isRSS: true
       }
 
       // update every 30 seconds

diff --git a/common/views/AiringSchedule.svelte b/common/views/AiringSchedule.svelte
@@ -22,6 +22,9 @@
     const res = await anilistClient.search({ format: 'TV', ...SectionsManager.sanitiseObject(variables), year, season, status: 'RELEASING', page: 1, perPage: 50 })
     results.data.Page.media = results.data.Page.media.concat(res.data.Page.media)
 
+    // filter out entries without airing schedule and duplicates [only allow first occurence]
+    results.data.Page.media = results.data.Page.media.filter((media, index, self) => media.airingSchedule?.nodes?.[0]?.airingAt && self.findIndex(m => m.id === media.id) === index)
+
     results.data.Page.media.sort((a, b) => a.airingSchedule?.nodes?.[0]?.airingAt - b.airingSchedule?.nodes?.[0]?.airingAt)
 
     return results

diff --git a/common/views/Home/Section.svelte b/common/views/Home/Section.svelte
@@ -39,7 +39,7 @@
   <div class='pr-10 ml-auto font-size-12' use:click={_click}>View More</div>
 </span>
 <div class='position-relative'>
-  <div class='pb-10 w-full d-flex flex-row justify-content-start gallery'>
+  <div class='pb-10 w-full d-flex flex-row justify-content-start gallery' class:isRSS={opts.isRSS}>
     {#each $preview || fakecards as card}
       <Card {card} />
     {/each}
@@ -66,6 +66,12 @@
     overflow-x: scroll;
     flex-shrink: 0;
   }
+  .gallery.isRSS {
+    overflow-x: clip;
+  }
+  .gallery :global(.item.small-card) {
+    width: 19rem !important
+  }
   .gallery::-webkit-scrollbar {
     display: none;
   }

diff --git a/common/views/Search.svelte b/common/views/Search.svelte
@@ -66,7 +66,7 @@
 
 <div class='bg-dark h-full w-full overflow-y-scroll d-flex flex-wrap flex-row root overflow-x-hidden justify-content-center align-content-start' use:smoothScroll bind:this={container} on:scroll={infiniteScroll}>
   <Search bind:search={$search} on:input={update} />
-  <div class='w-full d-flex flex-wrap flex-row px-50 justify-content-center align-content-start'>
+  <div class='w-full d-grid d-md-flex flex-wrap flex-row px-md-50 px-20 justify-content-center align-content-start'>
     {#key $key}
       {#each $items as card}
         <Card {card} />
@@ -77,3 +77,20 @@
     {/key}
   </div>
 </div>
+
+<style>
+  .d-grid:has(.item.small-card) {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important
+  }
+  .d-grid:has(.card.full-card) {
+    grid-template-columns: repeat(auto-fill, minmax(52rem, 1fr)) !important
+  }
+  .d-grid {
+    grid-template-columns: repeat(auto-fill, minmax(36rem, 1fr))
+  }
+  @media (min-width: 769px) {
+    .d-grid :global(.item.small-card) {
+      width: 19rem !important;
+    }
+  }
+</style>