improve styles for small screen

one-zero-eight · Nov 30, 2024 · 9647633 · 9647633
1 parent 7c86675
commit 9647633
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/frontend/src/components/mahjong/Controls.tsx b/frontend/src/components/mahjong/Controls.tsx
@@ -8,6 +8,7 @@ export type Plate = {
   items: { icon?: React.ReactNode, text?: React.ReactNode }[]
   onClick?: () => void
   clickable?: boolean
+  hideOnSmall?: boolean
 }
 
 export function Controls({
@@ -44,7 +45,7 @@ function PlatesGroup({
       {plates.map(plate => (
         <div
           key={plate.id}
-          className={cn(styles.plate, plate.clickable && styles.clickable)}
+          className={cn(styles.plate, plate.clickable && styles.clickable, plate.hideOnSmall && 'hidden sm:block')}
           onClick={() => {
             if (plate.clickable) {
               playClick()
@@ -56,8 +57,8 @@ function PlatesGroup({
         >
           {plate.items.map((item, i) => (
             <div key={i} className="flex items-center gap-2">
-              {item.icon && <div className={cn('h-fit text-[2rem] leading-[0]', styles.plateIcon)}>{item.icon}</div>}
-              {item.text && <div className={cn('h-fit text-[1.5rem] leading-none', styles.plateText)}>{item.text}</div>}
+              {item.icon && <div className={cn('h-fit text-[1rem] sm:text-[1.25rem] lg:text-[2rem] leading-[0]', styles.plateIcon)}>{item.icon}</div>}
+              {item.text && <div className={cn('h-fit text-[0.75rem] sm:text-[1rem] lg:text-[1.5rem] leading-none', styles.plateText)}>{item.text}</div>}
             </div>
           ))}
         </div>

diff --git a/frontend/src/components/mahjong/Mahjong.module.scss b/frontend/src/components/mahjong/Mahjong.module.scss
@@ -160,6 +160,10 @@ $z-back: 0;
   align-items: flex-start;
   justify-content: center;
   gap: 12px;
+
+  @media (max-width: 800px) {
+    gap: 6px;
+  }
 }
 
 .plate {
@@ -185,6 +189,11 @@ $z-back: 0;
     0px 4px 4px rgba(0, 0, 0, 0.25),
     inset 0px 4px 6px rgba(0, 0, 0, 0.15);
   border-radius: 0px 0px 6px 6px;
+
+  @media (max-width: 800px) {
+    padding: 2px 6px;
+    gap: 8px;
+  }
 }
 
 @keyframes glow {

diff --git a/frontend/src/components/mahjong/Mahjong.tsx b/frontend/src/components/mahjong/Mahjong.tsx
@@ -259,7 +259,7 @@ export function Mahjong({ level }: { level: LevelInfo }) {
   return (
     <div className="h-full px-2 pb-2 pt-[60px]">
       <Controls
-        className="fixed top-0 w-full px-16"
+        className="fixed inset-x-0 top-0 w-full md:px-16"
         platesLeading={[
           {
             id: 'exit',
@@ -300,8 +300,8 @@ export function Mahjong({ level }: { level: LevelInfo }) {
           },
           {
             id: 'clicks',
-            items: [{ icon: <span className="iconify ph--cursor" />, text: clicksCount.toString() },
-            ],
+            items: [{ icon: <span className="iconify ph--cursor" />, text: clicksCount.toString() }],
+            hideOnSmall: true,
           },
 
         ]}