Gallery full screen

masa-finance · Apr 27, 2023 · fd183a4 · fd183a4
1 parent b55ede4
commit fd183a4
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 12 deletions.
diff --git a/src/components/masa-interface/pages/gallery/gallery.stories.tsx b/src/components/masa-interface/pages/gallery/gallery.stories.tsx
@@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Gallery } from '.';
 import { GalleryItem } from './galleryItem';
 
-
 const customRenderPokeSBT = {
   name: 'PokeSBT',
   address: '0xD1C64fa4aDc003Ed92A10558572CbC499C7cA18A',

diff --git a/src/components/masa-interface/pages/gallery/gallery.tsx b/src/components/masa-interface/pages/gallery/gallery.tsx
@@ -40,10 +40,7 @@ export interface CustomGallerySBT {
   }>;
 }
 export const Gallery = ({ setIndex, context }) => {
-  const { useModalSize, masa, connect } = useMasa();
-
-  useModalSize?.({ width: 1100, height: 800 });
-
+  const { masa, connect } = useMasa();
   return (
     <div className="masa-gallery-container">
       {masa ? (

diff --git a/src/components/masa-interface/pages/gallery/index.tsx b/src/components/masa-interface/pages/gallery/index.tsx
@@ -147,7 +147,18 @@ const useSavedSbts = (prefix): any[] => {
 
 const GalleryContainer = () => {
   const pages = [Gallery];
-  const { soulnames, greens, creditScores } = useMasa();
+  const { soulnames, greens, creditScores, useModalSize, fullScreenGallery } =
+    useMasa();
+
+  useModalSize?.(
+    fullScreenGallery
+      ? {
+          width: window.innerWidth * 0.95,
+          height: window.innerHeight * 0.95,
+        }
+      : { width: 1100, height: 800 }
+  );
+
   const { sbts, badges } = useTabs();
 
   const tabs: Tabs[] = [

diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss
@@ -652,13 +652,16 @@
         background-color: black;
 
         width: calc((100% - 80px) / 4);
-        max-height: 50%;
+        max-width: 250px;
+        max-height: 340px;
 
         display: flex;
         flex-direction: column;
         align-items: center;
-        z-index: 20;
-        perspective: 1000px;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.8);
+        }
 
         img {
           width: 100%;

diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx
@@ -40,6 +40,7 @@ export interface MasaContextProviderProps extends MasaShape {
   environmentName?: EnvironmentNameEx;
   arweaveConfig?: ArweaveConfig;
   customGallerySBT?: CustomGallerySBT[];
+  fullScreenGallery?: boolean;
 }
 
 export const MasaContextProvider = ({
@@ -58,8 +59,10 @@ export const MasaContextProvider = ({
   verbose = false,
   // force specific network
   forceNetwork,
-  // Custom SBT render for gallery
+  // custom SBT render for gallery
   customGallerySBT,
+  // render gallery in full screen
+  fullScreenGallery,
 }: MasaContextProviderProps): JSX.Element => {
   // masa
   const [masaInstance, setMasaInstance] = useState<Masa | undefined>();
@@ -291,7 +294,7 @@ export const MasaContextProvider = ({
 
     // gallery
     customGallerySBT,
-
+    fullScreenGallery,
     // custom SBTs
     customSBTs,
   };

diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts
@@ -112,7 +112,7 @@ export interface MasaShape {
 
   // gallery
   customGallerySBT?: CustomGallerySBT[];
-
+  fullScreenGallery?: boolean;
   // customSBTs
   customSBTs?: any[];
 }
diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx
@@ -262,6 +262,7 @@ const Template: Story = (props: Args) => {
         company="Masa"
         forceNetwork={'goerli'}
         customGallerySBT={[customRenderPokeSBT]}
+        fullScreenGallery
       >
         <Component {...props} />
       </MasaProvider>