feat: [#84] Implemented media query for iPad pro

annabranco · Jan 24, 2021 · abf2d6b · abf2d6b
1 parent 5cc8595
commit abf2d6b
Show file tree

Hide file tree

Showing 11 changed files with 308 additions and 146 deletions.
diff --git a/src/components/ActionButton/styles.js b/src/components/ActionButton/styles.js
@@ -164,6 +164,12 @@ export const ActionIcon = styled.i`
     }
     return null;
   }}
+
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    height: 60px;
+    width: 60px;
+    font-size: 3rem;
+  }
 `;
 ActionIcon.displayName = 'ActionIcon';
 
@@ -180,6 +186,10 @@ export const CarActionIcon = styled.i`
     css`
       font-size: 1.5rem;
     `}
+
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    font-size: 2rem;
+  }
 `;
 CarActionIcon.displayName = 'CarActionIcon';
 
@@ -195,6 +205,10 @@ export const CarIcon = styled.i`
     css`
       font-size: 2rem;
     `}
+
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    font-size: 2.7rem;
+  }
 `;
 CarIcon.displayName = 'CarIcon';
 
@@ -227,6 +241,11 @@ export const CarIconWrapper = styled.div`
     }
   }
 
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    height: 76px;
+    width: 76px;
+  }
+
   ${({ manyButtons }) =>
     manyButtons &&
     css`

diff --git a/src/components/Items/ItemWrapper/styles.js b/src/components/Items/ItemWrapper/styles.js
@@ -59,7 +59,7 @@ export const ActionButtonsWrapper = styled.div`
     return null;
   }}
 
-  @media all and (min-width: 768px) {
+  @media all and (min-width: 701px) {
     top: 50%;
   }
 
@@ -95,7 +95,7 @@ export const Item = styled.div`
     width: 85px;
   }
 
-  @media all and (min-width: 768px) {
+  @media all and (min-width: 701px) {
     height: 270px;
     width: 200px;
 
@@ -116,6 +116,18 @@ export const Item = styled.div`
       `}
   }
 
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    height: 370px;
+    width: 260px;
+
+    ${({ trade }) =>
+      trade &&
+      css`
+        height: 300px;
+        width: 200px;
+      `}
+  }
+
   @media all and (min-width: 1400px) {
     height: 320px;
     width: 240px;
@@ -184,7 +196,7 @@ export const ItemBlank = styled.div`
     font-size: 1.1rem;
   }
 
-  @media all and (min-width: 768px) {
+  @media all and (min-width: 701px) {
     cursor: ${({ allSlotsAreEmpty, damageMode, canSearch, setupMode, trade }) =>
       (damageMode && !allSlotsAreEmpty) || (!canSearch && !trade && !setupMode)
         ? 'not-allowed'
@@ -201,6 +213,18 @@ export const ItemBlank = styled.div`
       `}
   }
 
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    height: 370px;
+    width: 260px;
+
+    ${({ trade }) =>
+      trade &&
+      css`
+        height: 300px;
+        width: 200px;
+      `}
+  }
+
   @media all and (min-width: 1400px) {
     height: 320px;
     width: 240px;
@@ -253,7 +277,7 @@ export const ItemWrapper = styled.div`
     return null;
   }}
 
-  @media all and (min-width: 768px) {
+  @media all and (min-width: 701px) {
     margin: 50px 10px 0;
   }
 

diff --git a/src/components/MainMenu/index.js b/src/components/MainMenu/index.js
@@ -15,8 +15,8 @@ import {
   ThunderOverlay,
   Version,
   ZombicideLogo,
-  ZombieIntro,
-  ZombieIntroShadow
+  ZombieImage,
+  ZombieImageShadow
 } from './styles';
 import { ZOMBIES_INTRO } from '../../setup/zombies';
 import { CONTINUE, NEW_GAME, STOP_SOUND, TEST_SOUND } from '../../constants';
@@ -56,8 +56,8 @@ const MainMenu = ({ loadedGame, setInitialCharacters }) => {
         <ZombicideLogo src={Logo} />
         <MainTitle>PARTY</MainTitle>
       </LogoArea>
-      <ZombieIntro src={zombieImage.current} />
-      <ZombieIntroShadow src={zombieImage.current} />
+      <ZombieImage src={zombieImage.current} />
+      <ZombieImageShadow src={zombieImage.current} />
       <ButtonsArea delay>
         <StyledLink to="/new">
           <SelectionButton>{NEW_GAME}</SelectionButton>

diff --git a/src/components/MainMenu/styles.js b/src/components/MainMenu/styles.js
@@ -259,32 +259,37 @@ export const ZombicideLogo = styled.img`
 `;
 ZombicideLogo.displayName = 'ZombicideLogo';
 
-export const ZombieIntro = styled.img`
-  label: ZombieIntro;
+export const ZombieImage = styled.img`
+  label: ZombieImage;
   z-index: 11;
   position: absolute;
-  top: 60px;
+  top: 10%;
   width: 300px;
   animation-name: ${Appear};
   animation-duration: 4s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
 
+  @media (min-width: 320px) and (min-height: 640px) {
+    top: 10%;
+    width: 90%;
+  }
+
   @media all and (min-width: 768px) {
     top: 150px;
     width: 576px;
   }
 
-  /* @media all and (min-height: 1000px) {
-    top: 15%;
-    width: 75%;
-  } */
-
   @media all and (min-width: 1024px) {
     top: 100px;
     width: 400px;
   }
 
+  @media (min-width: 320px) and (min-height: 1300px) {
+    top: 5%;
+    width: 80%;
+  }
+
   @media all and (min-width: 1200px) {
     top: 40px;
     width: 400px;
@@ -295,10 +300,10 @@ export const ZombieIntro = styled.img`
     width: 500px;
   }
 `;
-ZombieIntro.displayName = 'ZombieIntro';
+ZombieImage.displayName = 'ZombieImage';
 
-export const ZombieIntroShadow = styled(ZombieIntro)`
-  label: ZombieIntroShadow;
+export const ZombieImageShadow = styled(ZombieImage)`
+  label: ZombieImageShadow;
   position: absolute;
   z-index: 10;
   top: 60px;
@@ -311,25 +316,33 @@ export const ZombieIntroShadow = styled(ZombieIntro)`
   animation-fill-mode: forwards;
   ${Shadow}
 
-  @media all and (min-width: 768px) {
+  @media (min-width: 320px) and (min-height: 640px) {
+    top: 10%;
+    height: 30%;
+    width: 90%;
+    margin: 230px 0 0 -50px;
+  }
+
+  @media all and (min-width: 710px) {
     top: 460px;
     height: 480px;
     width: 576px;
     margin: 0 0 0 -75px;
   }
 
-  /* @media all and (min-height: 1000px) {
-    top: 17%;
-    width: 75%;
-    margin: 100px 0 0 -105px;
-  } */
-
   @media all and (min-width: 1024px) {
     top: 100px;
     width: 400px;
     margin: 85px 0 0 -82px;
   }
 
+  @media (min-width: 1024px) and (min-height: 1300px) {
+    top: 5%;
+    height: 480px;
+    width: 80%;
+    margin: 595px 0 0 -82px;
+  }
+
   @media all and (min-width: 1200px) {
     top: 260px;
     height: 340px;
@@ -344,4 +357,4 @@ export const ZombieIntroShadow = styled(ZombieIntro)`
     margin: 0 0 0 -60px;
   }
 `;
-ZombieIntroShadow.displayName = 'ZombieIntroShadow';
+ZombieImageShadow.displayName = 'ZombieImageShadow';
diff --git a/src/components/Sections/PlayersSection/index.js b/src/components/Sections/PlayersSection/index.js
@@ -1216,7 +1216,8 @@ const PlayersSection = ({
           {/* ----- ITEMS AREA ----- */}
           {character.wounded !== KILLED && (
             <>
-              {!dropMode &&
+              {!slot &&
+                !dropMode &&
                 character.actionsLeft &&
                 checkIfHasAnyActionLeft(character.actionsLeft) && (
                   <CardsActions>
@@ -1305,7 +1306,8 @@ const PlayersSection = ({
                     />
                   ))}
               </CharItems>
-              {character.inHand &&
+              {!slot &&
+                character.inHand &&
                 character.inBackpack &&
                 (!checkIfAllSlotsAreEmpty(character.inHand) ||
                   !checkIfAllSlotsAreEmpty(character.inBackpack)) && (