minor galley optimizations #7

ukorvl · Aug 24, 2023 · d0f6c5c · d0f6c5c
1 parent d90d87c
commit d0f6c5c
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 12 deletions.
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
@@ -1,5 +1,6 @@
 import {Metadata} from 'next';
 import Gallery from '@/components/Gallery/Gallery';
+import './styles.css';
 
 export const metadata: Metadata = {
   title: 'Gallery',

diff --git a/app/gallery/styles.css b/app/gallery/styles.css
@@ -0,0 +1,8 @@
+.pswp__img {
+  cursor: none !important;
+}
+
+.pswp {
+  z-index: 1000 !important;
+  --pswp-bg: theme("colors.alternate");
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,7 @@ import Footer from '@/components/Footer/Footer';
 import WithGtag from '@/lib/gtag/WithGtag';
 import meta from './metadata';
 import {kumbhSans, robotoMono} from './fonts';
-import './globals.css';
+import './styles.css';
 
 export const metadata = meta;
 

diff --git a/app/globals.css → app/styles.css b/app/globals.css → app/styles.css
diff --git a/app/teachers/page.tsx b/app/teachers/page.tsx
@@ -45,6 +45,7 @@ export default function Teachers() {
         text="BOOK A LESSON"
         className={CATLinkCn}
         path="/contact"
+        customTransition={{delay: 0.5}}
       />
     </div>
   );

diff --git a/components/CATLink/CATLink.tsx b/components/CATLink/CATLink.tsx
@@ -15,8 +15,10 @@ type CATLinkProps = {
   path: LinkProps['href'];
   className?: string;
   customVariants?: HTMLMotionProps<'div'>['variants'];
+  customTransition?: HTMLMotionProps<'div'>['transition'];
 };
 
+const defaultTransition = {delay: 1.2};
 const defaultVariants = {
   visible: {opacity: 1, y: 0, scale: 1},
   hidden: {opacity: 0, y: '2rem', scale: 0.9},
@@ -30,10 +32,16 @@ const linkCn = clsx('tracking-wider', 'animated-link');
  * @param {CATLinkProps} props Props.
  * @returns React component.
  */
-export default function CATLink({text, className, customVariants, path}: CATLinkProps) {
+export default function CATLink({
+  text,
+  className,
+  customVariants,
+  path,
+  customTransition,
+}: CATLinkProps) {
   return (
     <AppearInViewport
-      transition={{delay: 1.2}}
+      transition={{...defaultTransition, ...customTransition}}
       className={twMerge(containerCn, className)}
       variants={{...defaultVariants, ...customVariants}}
     >

diff --git a/components/Gallery/Gallery.tsx b/components/Gallery/Gallery.tsx
@@ -9,10 +9,11 @@ import GalleryItem from './GalleryItem';
 const containerCn = clsx('flex', 'flex-wrap', 'gap-4', 'justify-center');
 const galleryId = 'images';
 const photoSwipeOptions: GalleryProps['options'] = {
-  zoom: true,
+  zoom: false,
   bgOpacity: 0.9,
   closeOnVerticalDrag: true,
   showHideAnimationType: 'fade',
+  doubleTapAction: false,
 };
 
 /**

diff --git a/components/Teachers/Teacher.tsx b/components/Teachers/Teacher.tsx
@@ -26,14 +26,7 @@ const variants = {
 };
 
 const cardCn = clsx('aspect-square', 'relative', 'filter grayscale-50', 'overflow-hidden');
-const imgCn = clsx(
-  'object-cover',
-  'w-full',
-  'h-full',
-  'hover:transform hover:scale-110 hover:duration-2000',
-  'duration-500',
-  'ease-in',
-);
+const imgCn = clsx('object-cover', 'w-full', 'h-full');
 
 /**
  * @param {TeacherBlockProps} props Props.

diff --git a/lib/customCursor/customCursorOptions.ts b/lib/customCursor/customCursorOptions.ts
@@ -9,6 +9,10 @@ const options: Options = {
   innerSize: 12,
   outerStyle: {
     border: '2px solid white',
+    zIndex: 1001,
+  },
+  innerStyle: {
+    zIndex: 1001,
   },
   outerSize: 20,
   outerScale: 2,