fix(ui): responsive

sawaYch · Apr 9, 2024 · 3098be9 · 3098be9
1 parent fc1a898
commit 3098be9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 42 deletions.
diff --git a/src/components/background.tsx b/src/components/background.tsx
@@ -48,7 +48,7 @@ const PingBgText = ({ bgText }: PingBgTextProps) => (
 const CenterContainer = ({ children }: PropsWithChildren) => (
   <div
     id="bg-center-container"
-    className="fixed flex items-center justify-center break-all transition-all pointer-events-none w-lvw h-lvh opacity-bg"
+    className="fixed flex items-center justify-center break-all transition-all pointer-events-none w-lvw h-lvh opacity-bg !z-0"
   >
     {children}
   </div>

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -12,7 +12,6 @@ import { ActionIcon } from '@mantine/core';
 import cn from 'classnames';
 import { FaChevronUp } from '@react-icons/all-files/fa/FaChevronUp';
 import { motion, useCycle, useScroll } from 'framer-motion';
-import BackgroundContainer from './background-container';
 import Powerline from './powerline';
 import Footer from './footer';
 import ApplicationPane from './application-pane';
@@ -146,10 +145,9 @@ const ContentWrapper = forwardRef<
     id="main"
     ref={ref}
     className={cn(
-      'z-40 flex flex-col items-center w-dvw flex-auto overflow-x-hidden min-h-dvh pb-[44px]',
+      '!z-[60] flex flex-col items-center w-dvw flex-auto overflow-x-hidden min-h-dvh relative',
       {
         '!touch-none !overflow-y-hidden': isOpen,
-        '!pb-[100px]': isTablet,
       }
     )}
   >
@@ -193,28 +191,23 @@ const Layout: FC<PropsWithChildren<PageProps>> = ({ children, location }) => {
   useFixScrollRestoration(location, scrollToTop);
 
   return (
-    <>
+    <div className="font-primary">
       <SEOHead />
-      <BackgroundContainer>
-        <Background />
-        <ContentWrapper isOpen={isOpen}>{children}</ContentWrapper>
-        <ProgressIndicator
-          scrollYProgress={scrollYProgress}
-          location={location}
-        />
-        <BackToTopButton
-          scrollToTop={scrollToTop}
-          show={isVisible && !isOpen}
-        />
-        <ApplicationMenu
-          isOpen={isOpen}
-          location={location}
-          toggleAppMenu={toggleAppMenu}
-        />
-        <Powerline onAppIconClick={toggleAppMenu} location={location} />
-        <Footer />
-      </BackgroundContainer>
-    </>
+      <Background />
+      <ContentWrapper isOpen={isOpen}>{children}</ContentWrapper>
+      <ProgressIndicator
+        scrollYProgress={scrollYProgress}
+        location={location}
+      />
+      <BackToTopButton scrollToTop={scrollToTop} show={isVisible && !isOpen} />
+      <ApplicationMenu
+        isOpen={isOpen}
+        location={location}
+        toggleAppMenu={toggleAppMenu}
+      />
+      <Powerline onAppIconClick={toggleAppMenu} location={location} />
+      <Footer />
+    </div>
   );
 };
 

diff --git a/src/pages/artworks.tsx b/src/pages/artworks.tsx
@@ -173,7 +173,6 @@ const ArtworksPage = ({
             </motion.div>
           ))}
       </motion.div>
-
       <AnimatePresence>
         {artwork && (
           <motion.div
@@ -304,7 +303,6 @@ const ArtworksPage = ({
                   </>
                 )}
               </TransformWrapper>
-
               <div
                 className={cn(
                   'fixed z-[61] left-4 bottom-0 bg-dracula-darker w-fit h-fit px-4 cursor-pointer flex pt-1 justify-center items-center rounded-t-md text-dracula-dark-300 select-none',

diff --git a/src/pages/blogs.tsx b/src/pages/blogs.tsx
@@ -142,7 +142,10 @@ PageProps<Queries.BlogsPageQuery>) => {
 
   return (
     <>
-      <div className="flex items-center justify-center select-none">
+      <div
+        id="blog-page-heading"
+        className="flex items-center justify-center select-none"
+      >
         <Cube
           color="purple"
           icon={<BiBookBookmark size="3.5rem" />}
@@ -160,7 +163,10 @@ PageProps<Queries.BlogsPageQuery>) => {
           </div>
         </div>
       </div>
-      <div className="flex flex-col items-center gap-1 ipad:flex-row">
+      <div
+        id="blog-page-tag-section"
+        className="flex flex-col items-center gap-1 ipad:flex-row"
+      >
         <div className="px-4 py-1 mx-4 border rounded-lg w-fit border-dracula-dark-600 bg-dracula-dark/10 backdrop-blur-md">
           <div className="absolute w-10 text-center -translate-y-4 -skew-x-12 border rounded-lg bg-dracula-dark backdrop-blur-sm border-dracula-dark-600">
             <div className="skew-x-12">TAG</div>
@@ -187,17 +193,19 @@ PageProps<Queries.BlogsPageQuery>) => {
           </div>
         </div>
       </div>
-      <hr className="w-48 h-1 mx-auto my-2 border-0 rounded bg-gradient-to-r from-pink-500 to-violet-500" />
-      <AnimatePresence>
-        {filteredBlogData?.length === 0 || filteredBlogData == null ? (
-          <div className="flex flex-col items-center justify-center w-full uppercase min-h-[25.5rem]">
-            <div className="flex gap-2">
-              <FaRegFrownOpen size="1.2rem" />
-              No post is found !
-            </div>
-          </div>
-        ) : (
+      <hr
+        id="blog-page-separator"
+        className="w-48 h-1 mx-auto my-2 border-0 rounded bg-gradient-to-r from-pink-500 to-violet-500"
+      />
+      {filteredBlogData?.length === 0 || filteredBlogData == null ? (
+        <div className="flex flex-col items-center justify-center flex-1 w-full h-full pb-24 uppercase">
+          <FaRegFrownOpen size="1.2rem" />
+          No post is found !
+        </div>
+      ) : (
+        <AnimatePresence>
           <motion.div
+            id="blog-page-list-container"
             variants={{
               hidden: {
                 transition: {
@@ -214,7 +222,7 @@ PageProps<Queries.BlogsPageQuery>) => {
               },
             }}
             initial="hidden"
-            className="flex flex-col w-full gap-2 px-10 mt-2 mb-2 h-[calc(100vh-18rem)] ipad:w-1/2" // NOTE: tweak: not using card grid
+            className="flex flex-col flex-1 w-screen gap-2 mt-2 mb-20 ipad:w-2/3" // NOTE: tweak: not using card grid
           >
             <AutoSizer>
               {({ width, height }) => (
@@ -229,8 +237,8 @@ PageProps<Queries.BlogsPageQuery>) => {
               )}
             </AutoSizer>
           </motion.div>
-        )}
-      </AnimatePresence>
+        </AnimatePresence>
+      )}
     </>
   );
 };