fix few mobile bugs, add image optimization, add expand text feature,…

… improve watch list, improve dynamic grid
hikka-io · Apr 8, 2024 · 0002b61 · 0002b61
1 parent 1f1e01d
commit 0002b61
Show file tree

Hide file tree

Showing 37 changed files with 263 additions and 200 deletions.
diff --git a/app/(pages)/anime/[slug]/components/characters.tsx b/app/(pages)/anime/[slug]/components/characters.tsx
@@ -36,7 +36,7 @@ const Characters = ({ extended }: Props) => {
                     className={clsx(
                         'grid grid-cols-3 gap-4 md:grid-cols-5 lg:gap-8',
                         extended && 'md:grid-cols-6',
-                        !extended && 'grid-flow-col grid-cols-scroll-5 overflow-x-auto no-scrollbar -mx-4 px-4'
+                        !extended && 'grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto no-scrollbar -mx-4 px-4'
                     )}
                 >
                     {(extended ? main : main.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/anime/[slug]/components/cover.tsx b/app/(pages)/anime/[slug]/components/cover.tsx
@@ -12,7 +12,7 @@ const Cover = ({ anime }: Props) => {
 
     return (
         <div className="flex items-center px-16 md:px-48 lg:px-0">
-            <EntryCard poster={anime.poster}>
+            <EntryCard posterProps={{ priority: true }} poster={anime.poster}>
                 <div className="absolute bottom-2 right-2 z-[1]">
                     <FavoriteButton slug={anime.slug} content_type="anime" />
                 </div>

diff --git a/app/(pages)/anime/[slug]/components/description.tsx b/app/(pages)/anime/[slug]/components/description.tsx
@@ -2,10 +2,15 @@
 
 import { useState } from 'react';
 
+
+
 import { useParams } from 'next/navigation';
 
+
+
 import MDViewer from '@/components/markdown/viewer/MD-viewer';
 import SubHeader from '@/components/sub-header';
+import TextExpand from '@/components/text-expand';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 
@@ -51,9 +56,11 @@ const Description = () => {
                     )}
                 </ToggleGroup>
             </SubHeader>
-            <MDViewer>
-                {data[active] || data.synopsis_ua || data.synopsis_en}
-            </MDViewer>
+            <TextExpand>
+                <MDViewer>
+                    {data[active] || data.synopsis_ua || data.synopsis_en}
+                </MDViewer>
+            </TextExpand>
         </div>
     );
 };

diff --git a/app/(pages)/anime/[slug]/components/franchise.tsx b/app/(pages)/anime/[slug]/components/franchise.tsx
@@ -46,7 +46,7 @@ const Franchise = ({ extended }: Props) => {
                 className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-8',
                     extended && 'md:grid-cols-5',
-                    !extended && 'no-scrollbar grid-min-10 -mx-4 grid-flow-col grid-cols-scroll-4 overflow-x-auto px-4',
+                    !extended && 'no-scrollbar grid-min-10 -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4',
                 )}/*repeat(2, minmax(0, 1fr))*/
             >
                 {filteredData.map((anime) => (

diff --git a/app/(pages)/anime/[slug]/components/links.tsx b/app/(pages)/anime/[slug]/components/links.tsx
@@ -86,7 +86,7 @@ const Links = ({ extended }: Props) => {
                 className={cn(
                     'grid gap-4 md:grid-cols-3 lg:gap-8',
                     !extended &&
-                        'no-scrollbar grid-min-14 -mx-4 grid-flow-col grid-cols-scroll-3 overflow-x-auto px-4',
+                        'no-scrollbar grid-min-14 -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4',
                 )}
             >
                 {active === 'general' &&

diff --git a/app/(pages)/anime/[slug]/components/media.tsx b/app/(pages)/anime/[slug]/components/media.tsx
@@ -81,13 +81,13 @@ const Media = ({ extended }: Props) => {
                         'grid-cols-3 md:grid-cols-6',
                     active === 'music' &&
                         !extended &&
-                        'grid-cols-scroll-4 md:grid-cols-4',
+                        'grid-cols-scroll auto-cols-scroll md:grid-cols-4',
                     active === 'video' &&
                         extended &&
                         'grid-cols-2 md:grid-cols-4',
                     active === 'video' &&
                         !extended &&
-                        'grid-min-10 grid-cols-scroll-3 md:grid-cols-3',
+                        'grid-min-10 grid-cols-scroll auto-cols-scroll md:grid-cols-3',
                 )}
             >
                 {active === 'music' &&

diff --git a/app/(pages)/anime/[slug]/components/staff.tsx b/app/(pages)/anime/[slug]/components/staff.tsx
@@ -44,7 +44,7 @@ const Staff = ({ extended }: Props) => {
                 className={clsx(
                     'grid grid-cols-3 gap-4 md:grid-cols-4 lg:gap-8',
                     extended && 'md:grid-cols-6',
-                    !extended && 'grid-flow-col grid-cols-scroll-4 overflow-x-auto no-scrollbar -mx-4 px-4'
+                    !extended && 'grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto no-scrollbar -mx-4 px-4'
                 )}
             >
                 {filteredData.map((staff) => (

diff --git a/app/(pages)/anime/[slug]/layout.tsx b/app/(pages)/anime/[slug]/layout.tsx
@@ -172,7 +172,7 @@ const AnimeLayout = async ({ params: { slug }, children }: Props) => {
                         urlPrefix={'/anime/' + slug}
                     />
                 </Breadcrumbs>
-                <SubBar mobileOnly>
+                <SubBar>
                     <InternalNavBar
                         routes={ANIME_NAV_ROUTES}
                         urlPrefix={'/anime/' + slug}

diff --git a/app/(pages)/characters/[slug]/components/anime.tsx b/app/(pages)/characters/[slug]/components/anime.tsx
@@ -34,7 +34,7 @@ const Anime = ({ extended }: Props) => {
             <div
                 className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
-                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-5 overflow-x-auto px-4'
+                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4'
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/characters/[slug]/components/voices.tsx b/app/(pages)/characters/[slug]/components/voices.tsx
@@ -35,7 +35,7 @@ const Voices = ({ extended }: Props) => {
             <div
                 className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
-                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-5 overflow-x-auto px-4'
+                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4'
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/characters/[slug]/layout.tsx b/app/(pages)/characters/[slug]/layout.tsx
@@ -122,7 +122,7 @@ const CharacterLayout = async ({ params: { slug }, children }: Props) => {
                         urlPrefix={'/characters/' + slug}
                     />
                 </Breadcrumbs>
-                <SubBar mobileOnly>
+                <SubBar>
                     <InternalNavBar
                         routes={CHARACTER_NAV_ROUTES}
                         urlPrefix={'/characters/' + slug}

diff --git a/app/(pages)/collections/(collections)/components/ui/collection-item.tsx b/app/(pages)/collections/(collections)/components/ui/collection-item.tsx
@@ -91,7 +91,7 @@ const CollectionItem = ({ collection }: Props) => {
             <div
                 className={cn(
                     'grid flex-nowrap gap-4 md:grid-cols-5 lg:grid-cols-7 lg:gap-8',
-                    'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-7 overflow-x-auto px-4',
+                    'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4',
                 )}
             >
                 {collection.collection.map((item) => (

diff --git a/app/(pages)/collections/[reference]/components/collection-title.tsx b/app/(pages)/collections/[reference]/components/collection-title.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import MDViewer from '@/components/markdown/viewer/MD-viewer';
 import SubHeader from '@/components/sub-header';
+import TextExpand from '@/components/text-expand';
 import { useCollectionContext } from '@/services/providers/collection-provider';
 
 const CollectionTitle = () => {
@@ -13,9 +14,9 @@ const CollectionTitle = () => {
         <div className="flex flex-col gap-2">
             <SubHeader title={title || 'Нова колекція'} />
             {description && (
-                <MDViewer className="text-muted-foreground">
-                    {description}
-                </MDViewer>
+                <TextExpand>
+                    <MDViewer>{description}</MDViewer>
+                </TextExpand>
             )}
         </div>
     );

diff --git a/app/(pages)/edit/components/edit-list/components/edit-row.tsx b/app/(pages)/edit/components/edit-list/components/edit-row.tsx
@@ -32,7 +32,7 @@ const EditRow = ({ edit }: Props) => {
     return (
         <TableRow
             key={edit.edit_id}
-            className={clsx('hover:cursor-pointer hover:bg-secondary/60')}
+            className={clsx('hover:cursor-pointer')}
             onClick={() => router.push(`/edit/${edit.edit_id}`)}
         >
             <TableCell className="w-8">

diff --git a/app/(pages)/edit/layout.tsx b/app/(pages)/edit/layout.tsx
@@ -27,7 +27,7 @@ const EditListLayout = ({ children }: Props) => {
             <Breadcrumbs>
                 <NavMenu routes={EDIT_NAV_ROUTES} urlPrefix="/edit" />
             </Breadcrumbs>
-            <SubBar mobileOnly>
+            <SubBar>
                 <InternalNavBar routes={EDIT_NAV_ROUTES} urlPrefix="/edit" />
             </SubBar>
             {children}

diff --git a/app/(pages)/people/[slug]/components/anime.tsx b/app/(pages)/people/[slug]/components/anime.tsx
@@ -35,7 +35,7 @@ const Anime = ({ extended }: Props) => {
             <div
                 className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
-                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-5 overflow-x-auto px-4'
+                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4'
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/people/[slug]/components/characters.tsx b/app/(pages)/people/[slug]/components/characters.tsx
@@ -35,7 +35,7 @@ const Characters = ({ extended }: Props) => {
             <div
                 className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
-                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-5 overflow-x-auto px-4'
+                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4'
 
                 )}
             >

diff --git a/app/(pages)/people/[slug]/layout.tsx b/app/(pages)/people/[slug]/layout.tsx
@@ -107,7 +107,7 @@ const PersonLayout = async ({ params: { slug }, children }: Props) => {
                         urlPrefix={'/people/' + slug}
                     />
                 </Breadcrumbs>
-                <SubBar mobileOnly>
+                <SubBar>
                     <InternalNavBar
                         routes={PERSON_NAV_ROUTES}
                         urlPrefix={'/people/' + slug}

diff --git a/app/(pages)/u/[username]/components/favorites/_components/anime.tsx b/app/(pages)/u/[username]/components/favorites/_components/anime.tsx
@@ -45,7 +45,7 @@ const Component = ({ extended }: Props) => {
                     className={cn(
                         'grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8',
                         !extended &&
-                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-6 overflow-x-auto px-4',
+                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4',
                     )}
                 >
                     {filteredData.map((res) => (

diff --git a/app/(pages)/u/[username]/components/favorites/_components/characters.tsx b/app/(pages)/u/[username]/components/favorites/_components/characters.tsx
@@ -43,7 +43,7 @@ const Component = ({ extended }: Props) => {
                     className={cn(
                         'grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8',
                         !extended &&
-                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-6 overflow-x-auto px-4',
+                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4',
                     )}
                 >
                     {filteredData.map((res) => (

diff --git a/app/(pages)/u/[username]/components/favorites/_components/collections.tsx b/app/(pages)/u/[username]/components/favorites/_components/collections.tsx
@@ -43,7 +43,7 @@ const Component = ({ extended }: Props) => {
                     className={cn(
                         'grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8',
                         !extended &&
-                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-6 overflow-x-auto px-4',
+                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4',
                     )}
                 >
                     {filteredData.map((res) => (

diff --git a/app/(pages)/u/[username]/layout.tsx b/app/(pages)/u/[username]/layout.tsx
@@ -101,8 +101,8 @@ const Component = async ({ params: { username }, children }: Props) => {
                             src={user.cover}
                             className="relative size-full object-cover"
                             alt="cover"
-                            width={1500}
-                            height={500}
+                            fill
+                            priority
                         />
                     </div>
                 )}
@@ -118,7 +118,7 @@ const Component = async ({ params: { username }, children }: Props) => {
                         urlPrefix={'/u/' + username}
                     />
                 </Breadcrumbs>
-                <SubBar mobileOnly>
+                <SubBar>
                     <InternalNavBar
                         routes={USER_NAV_ROUTES}
                         urlPrefix={'/u/' + username}