refactor: ui explore view responsivity (#236)

* refactor: clean up nfa search code and add base responsivity

* refactor: clean up nfa list code

* refactor: rename explore header fragment files

* refactor: nfa list items sizing

* feat: add vertical padding for page content

* refactor: make navbar not break the layout

ui/src/app.tsx

@@ -6,7 +6,7 @@ import { AppPage, ToastProvider } from './components';
 import {
   ComponentsTest,
   CreateAP,
-  Explore,
+  ExploreView,
   IndexedNFAView,
   Mint,
 } from './views';
@@ -19,7 +19,7 @@ export const App: React.FC = () => {
         <ToastProvider />
         <AppPage>
           <Routes>
-            <Route path="/" element={<Explore />} />
+            <Route path="/" element={<ExploreView />} />
             <Route path="/mint" element={<Mint />} />
             <Route path="/create-ap/:id" element={<CreateAP />} />
             <Route path="/nfa/:id" element={<IndexedNFAView />} />

ui/src/components/layout/nav-bar/nav-bar.styles.ts

@@ -13,6 +13,7 @@ export abstract class NavBarStyles {
     backgroundColor: '$black',
     zIndex: '$sticky',
     height: '$22',
+    overflow: 'hidden', // TODO: this must be worked on for responsive layout
   });
 
   static readonly Content = styled('div', {

ui/src/components/layout/page/page.styles.ts

@@ -9,7 +9,8 @@ export abstract class PageStyles {
   public static readonly Content = styled('div', {
     width: '100%',
     minHeight: '85vh',
-    maxWidth: '$7xl',
+    maxWidth: '$6xl',
+    padding: '0 $6',
     margin: '0 auto',
     display: 'grid',
   });

ui/src/components/nfa-card/nfa-card.styles.ts

@@ -8,7 +8,7 @@ export const NFACardStyles = {
   Container: styled(Link, {
     display: 'flex',
     flexDirection: 'column',
-    width: '14.6875rem',
+    minWidth: '12.5rem',
     padding: 0,
     overflow: 'hidden',
     cursor: 'pointer',
@@ -60,6 +60,11 @@ export const NFACardStyles = {
     fontSize: '$xl',
     fontWeight: '$medium',
     lineHeight: 1.4,
+
+    maxWidth: 'auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   }),
   Content: styled('span', {
     all: 'unset',
@@ -79,7 +84,7 @@ export const NFACardStyles = {
   Skeleton: {
     Preview: styled(Skeleton, {
       width: '100%',
-      height: 'calc(14.6875rem - 2px)',
+      aspectRatio: 1,
     }),
 
     Title: styled(Skeleton, {

ui/src/components/nfa-card/nfa-card.tsx

@@ -60,8 +60,7 @@ export const NFACard: React.FC<NFACardProps> = forwardStyledRef<
             alignItems: 'center',
           }}
         >
-          {/* TODO: treat names bigger than space in layout when designs are done */}
-          <S.Title>{data.name}</S.Title>
+          <S.Title title={data.name}>{data.name}</S.Title>
           {/* TODO: set correct value when it gets available on contract side */}
           <Badge verified={Math.random() > 0.5} />
         </Flex>

ui/src/views/explore/explore-header/explore-header.fragment.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components';
 
 import { ExploreHeaderStyles as S } from './explore-header.styles';
 
-export const ExploreHeader: React.FC = () => (
+export const ExploreHeaderFragment: React.FC = () => (
   <S.Container>
     <S.Text>
       <S.GrayText>

ui/src/views/explore/explore-header/index.ts

@@ -0,0 +1 @@
+export * from './explore-header.fragment';

ui/src/views/explore/explore-list/explore-list-container.tsx

@@ -1,16 +0,0 @@
-import { Flex } from '@/components';
-
-import { Explore } from '../explore.context';
-import { NFAListFragment } from './nfa-list';
-import { NFASearchFragment } from './nfa-search';
-
-export const ExploreListContainer: React.FC = () => {
-  return (
-    <Flex css={{ flexDirection: 'column' }}>
-      <Explore.Provider>
-        <NFASearchFragment />
-        <NFAListFragment />
-      </Explore.Provider>
-    </Flex>
-  );
-};

ui/src/views/explore/explore-list/explore-list.fragment.tsx

@@ -0,0 +1,12 @@
+import { Explore } from '../explore.context';
+import { NFAListFragment } from './nfa-list.fragment';
+import { NFASearchFragment } from './nfa-search.fragment';
+
+export const ExploreListFragment: React.FC = () => {
+  return (
+    <Explore.Provider>
+      <NFASearchFragment />
+      <NFAListFragment />
+    </Explore.Provider>
+  );
+};

ui/src/views/explore/explore-list/index.ts

@@ -1 +1 @@
-export * from './explore-list-container';
+export * from './explore-list.fragment';

ui/src/views/explore/explore-list/nfa-list.fragment.tsx

@@ -1,11 +1,12 @@
 import { useQuery } from '@apollo/client';
 import { useEffect } from 'react';
 
-import { Flex, NFACard, NFACardSkeleton } from '@/components';
+import { NFACard, NFACardSkeleton } from '@/components';
 import { lastNFAsPaginatedDocument } from '@/graphclient';
 import { useWindowScrollEnd } from '@/hooks';
 
-import { Explore } from '../../explore.context';
+import { Explore } from '../explore.context';
+import { NFAListFragmentStyles as S } from './nfa-list.styles';
 
 const pageSize = 10; //Set this size to test pagination
 
@@ -15,6 +16,8 @@ const LoadingSkeletons: React.FC = () => (
     <NFACardSkeleton />
     <NFACardSkeleton />
     <NFACardSkeleton />
+    <NFACardSkeleton />
+    <NFACardSkeleton />
   </>
 );
 
@@ -61,29 +64,16 @@ export const NFAListFragment: React.FC = () => {
   if (queryError) return <div>Error</div>; //TODO handle error
 
   return (
-    <Flex
-      css={{
-        flexDirection: 'column',
-        gap: '$2',
-        my: '$6',
-        minHeight: '50vh',
-        marginBottom: '30vh', // TODO: remove this if we add page footer
-      }}
-    >
-      <Flex css={{ gap: '$6', flexWrap: 'wrap' }}>
-        {tokens.map((token) => (
-          <NFACard data={token} key={token.id} />
-        ))}
-        {isLoading && <LoadingSkeletons />}
-        {!isLoading && tokens.length === 0 && (
-          // TODO: update this after designs are done
-          <div
-            className={`relative cursor-default select-none pt-2 px-3.5 pb-4 text-slate11 text-center`}
-          >
-            Nothing found.
-          </div>
-        )}
-      </Flex>
-    </Flex>
+    <S.Container>
+      {tokens.map((token) => (
+        <NFACard data={token} key={token.id} />
+      ))}
+
+      {isLoading && <LoadingSkeletons />}
+
+      {!isLoading && tokens.length === 0 && (
+        <S.EmptyMessage>Nothing found.</S.EmptyMessage>
+      )}
+    </S.Container>
   );
 };

ui/src/views/explore/explore-list/nfa-list.styles.ts

@@ -0,0 +1,24 @@
+import { styled } from '@/theme';
+
+export const NFAListFragmentStyles = {
+  Container: styled('div', {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(12.5rem, 1fr))',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    gap: '$6',
+    my: '$6',
+    minHeight: '50vh',
+    marginBottom: '30vh', // TODO: remove this if we add page footer
+
+    '@media (min-width: 1080px)': {
+      gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
+    },
+  }),
+  EmptyMessage: styled('span', {
+    padding: '$2 $3 $4 $3',
+    textAlign: 'center',
+    color: '$slate11',
+    width: '100%',
+  }),
+};

ui/src/views/explore/explore-list/nfa-list/index.ts

@@ -1 +0,0 @@
-export * from './nfa-list';

ui/src/views/explore/explore-list/nfa-search.fragment.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 
-import { Dropdown, DropdownItem, Flex, Input } from '@/components';
+import { Dropdown, DropdownItem, Input } from '@/components';
 import { useDebounce } from '@/hooks';
 
 import { Explore } from '../explore.context';
-import { ResultsContainer, ResultsNumber, ResultsText } from './results.styles';
+import { NFASearchFragmentStyles as S } from './nfa-search.styles';
 
 const orderResults: DropdownItem[] = [
   { value: 'newest', label: 'Newest' },
@@ -62,17 +62,18 @@ export const NFASearchFragment: React.FC = () => {
   };
 
   return (
-    <Flex css={{ justifyContent: 'space-between' }}>
-      <ResultsContainer>
-        <ResultsText>All NFAs </ResultsText>
-        <ResultsNumber>(3,271)</ResultsNumber>
-      </ResultsContainer>
-      <Flex css={{ gap: '$3' }}>
+    <S.Container>
+      <S.Data.Wrapper>
+        <S.Data.Text>All NFAs&nbsp;</S.Data.Text>
+        <S.Data.Number>(3,271)</S.Data.Number>
+      </S.Data.Wrapper>
+
+      <S.Input.Wrapper>
         <Input
           placeholder="Search"
           leftIcon="search"
-          css={{ width: '23rem' }}
           onChange={handleSearchChange}
+          wrapperClassName="flex-1"
         />
         <Dropdown
           items={orderResults}
@@ -82,7 +83,7 @@ export const NFASearchFragment: React.FC = () => {
           textColor="slate11"
           optionsWidth="40"
         />
-      </Flex>
-    </Flex>
+      </S.Input.Wrapper>
+    </S.Container>
   );
 };

ui/src/views/explore/explore-list/nfa-search.styles.ts

@@ -0,0 +1,36 @@
+import { Flex } from '@/components';
+import { styled } from '@/theme';
+
+export const NFASearchFragmentStyles = {
+  Container: styled(Flex, {
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    gap: '$3',
+  }),
+
+  Data: {
+    Wrapper: styled('div', {
+      fontSize: '$xl',
+      fontWeight: '$bold',
+      display: 'flex',
+      alignItems: 'center',
+    }),
+
+    Text: styled('span', {
+      color: '$slate12',
+    }),
+
+    Number: styled('span', {
+      color: '$slate11',
+    }),
+  },
+
+  Input: {
+    Wrapper: styled(Flex, {
+      gap: '$3',
+      width: '100%',
+      maxWidth: '30rem',
+      justifySelf: 'center',
+    }),
+  },
+};

ui/src/views/explore/explore-list/results.styles.ts

@@ -1,16 +0,0 @@
-import { styled } from '@/theme';
-
-export const ResultsContainer = styled('div', {
-  fontSize: '$xl',
-  fontWeight: '$bold',
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const ResultsText = styled('span', {
-  color: '$slate12',
-});
-
-export const ResultsNumber = styled('span', {
-  color: '$slate11',
-});

ui/src/views/explore/explore.styles.ts

@@ -4,7 +4,5 @@ import { styled } from '@/theme';
 export abstract class Explore {
   static readonly Container = styled(Flex, {
     flexDirection: 'column',
-    width: '63.4rem', //TODO replace for max-width
-    margin: '0 auto',
   });
 }

ui/src/views/explore/explore.tsx

@@ -1,12 +1,12 @@
 import { Explore as ES } from './explore.styles';
-import { ExploreHeader } from './explore-header';
-import { ExploreListContainer } from './explore-list';
+import { ExploreHeaderFragment } from './explore-header';
+import { ExploreListFragment } from './explore-list';
 
-export const Explore: React.FC = () => {
+export const ExploreView: React.FC = () => {
   return (
     <ES.Container>
-      <ExploreHeader />
-      <ExploreListContainer />
+      <ExploreHeaderFragment />
+      <ExploreListFragment />
     </ES.Container>
   );
 };