Merge pull request #284 from mgguild/update-mobile-view

Mobile view fix
mgguild · Oct 26, 2023 · cf16af3 · cf16af3
2 parents fc9ab8f + 598ac2f
commit cf16af3
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "https-browserify": "^1.0.0",
     "keccak256": "^1.0.6",
     "merkletreejs": "^0.3.9",
+    "perfect-scrollbar": "^1.5.5",
     "playfab-sdk": "^2.133.230804",
     "playfab-web-sdk": "^1.151.230804",
     "polyfill": "^0.1.0",

diff --git a/src/Components/Pages/Lore.tsx b/src/Components/Pages/Lore.tsx
@@ -3,6 +3,37 @@ import { SectHdr, TitleCard, SectCont } from '../Styled';
 import { useState, useMemo } from 'react';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { Carousel } from 'react-responsive-carousel';
+import React from 'react';
+
+const CustomCarousel = styled(Carousel)`
+  .control-arrow {
+    background-color: transparent; 
+  }
+
+  .control-arrow:before {
+    color: #FFFFFF; 
+    font-size: 50px; 
+    
+    @media (max-width: 820px){
+        font-size: 32px;
+    } 
+    @media (max-width: 575px) {
+        font-size: 20px;
+    }
+
+    @media (max-width: 375px) {
+        font-size: 20px;
+    }
+  }
+
+  .control-prev.control-arrow:before {
+    content: '🞀'; 
+  }
+
+  .control-next.control-arrow:before {
+    content: '🞂';
+  }
+`;
 
 const CarouselCont = styled.div`
     display: table-cell;
@@ -67,7 +98,7 @@ const DemoCarousel: React.FC<{ isScreen800: boolean; isScreen650: boolean }> = (
                         isScreen800
                             ? isScreen650
                                 ? 'mobile_lore_sm.png'
-                                : 'mobile_lore.png'
+                                : 'mobile_lore_sm.png'
                             : 'lore.jpg'
                     }`)}
                 />
@@ -93,7 +124,7 @@ const DemoCarousel: React.FC<{ isScreen800: boolean; isScreen650: boolean }> = (
                         isScreen800
                             ? isScreen650
                                 ? 'mobile_lore2_sm.png'
-                                : 'mobile_lore2.png'
+                                : 'mobile_lore2_sm.png'
                             : 'lore_2.png'
                     }`)}
                 />

diff --git a/src/Components/Pages/NFTs.tsx b/src/Components/Pages/NFTs.tsx
@@ -51,11 +51,27 @@ const NFTClasses = styled.div<{ isScreen575?: boolean }>`
     gap: 1rem;
 
     @media (max-width: 575px) {
-        max-height: 10rem;
+        max-height: 7.1rem;
         flex-flow: row wrap;
         overflow: scroll;
         max-width: 100%;
+        gap: 0.39rem
+
+    }
+    /* Adjust the scrollbar width and style */
+    &::-webkit-scrollbar {
+     height: 0px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #888; /* Color of the scrollbar thumb */
+        border-radius: 5px; /* Round the scrollbar thumb */
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: #555; /* Color of the scrollbar thumb on hover */
     }
+
 `;
 
 const NFTClass = styled.div<{ img: string }>`
@@ -70,6 +86,11 @@ const NFTClass = styled.div<{ img: string }>`
     height: 133px;
     cursor: pointer;
 
+    @media (max-width: 575px) {
+    width: 140px;
+    height: 113px;  
+    }
+
     ${({ img }) =>
         img
             ? `

diff --git a/yarn.lock b/yarn.lock
@@ -12850,6 +12850,11 @@ pbkdf2@^3.0.17, pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+perfect-scrollbar@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz"
+  integrity sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"