GuillaumeHemmen/pokemon-js
1
0
Fork 0
mirror of https://github.com/chase-manning/pokemon-js.git synced 2025-08-26 03:07:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🐛 fix mobile media queries

Browse source
This commit is contained in:
Chase Manning 2023-10-12 15:29:10 +01:00
commit dd387dc5b7
21 changed files with 53 additions and 53 deletions

10
public/styles/css-pokemon-gameboy.css
View file

@ -19,7 +19,7 @@ h6 {
padding: 1em; padding: 1em;
max-width: 100%; max-width: 100%;
@media (max-width: 768px) { @media (max-width: 1000px) {
border-image: url("./images/frame.png") 7 round; border-image: url("./images/frame.png") 7 round;
border-width: 7px; border-width: 7px;
} }
@ -111,7 +111,7 @@ button,
margin-top: 13px; margin-top: 13px;
margin-bottom: 7px; margin-bottom: 7px;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
margin-top: 7px; margin-top: 7px;
@ -122,7 +122,7 @@ button,
.no-select-button { .no-select-button {
padding: 0 0 0 0.2em; padding: 0 0 0 0.2em;
@media (max-width: 768px) { @media (max-width: 1000px) {
padding: 0 0 0 0.5em; padding: 0 0 0 0.5em;
} }
} }
@ -144,7 +144,7 @@ button,
2em 5em 0 #181010, 3em 5em 0 #181010, 1em 6em 0 #181010, 2em 6em 0 #181010; 2em 5em 0 #181010, 3em 5em 0 #181010, 1em 6em 0 #181010, 2em 6em 0 #181010;
} }
@media (max-width: 768px) { @media (max-width: 1000px) {
.active-button::before { .active-button::before {
left: -1px; left: -1px;
top: -2px; top: -2px;
@ -178,7 +178,7 @@ ul.buttons li {
padding: 0; padding: 0;
margin: 0.5em; margin: 0.5em;
@media (max-width: 768px) { @media (max-width: 1000px) {
margin: 0; margin: 0;
} }
} }

2
src/App.tsx
View file

@ -16,7 +16,7 @@ const StyledApp = styled.div`
padding: 5px; padding: 5px;
padding-bottom: 28px; padding-bottom: 28px;
@media (min-width: 768px) { @media (min-width: 1000px) {
padding: 5px; padding: 5px;
} }
`; `;

2
src/app/LearnMove.tsx
View file

@ -24,7 +24,7 @@ const TextContainer = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

2
src/components/Arrow.tsx
View file

@ -11,7 +11,7 @@ interface ArrowProps {
const StyledArrow = styled(PixelImage)<ArrowProps>` const StyledArrow = styled(PixelImage)<ArrowProps>`
height: ${(props) => (props.$menu ? "23px" : "3vh")}; height: ${(props) => (props.$menu ? "23px" : "3vh")};
@media (max-width: 768px) { @media (max-width: 1000px) {
height: ${(props) => (props.$menu ? "11px" : "8px")}; height: ${(props) => (props.$menu ? "11px" : "8px")};
} }
`; `;

2
src/components/ConfirmationMenu.tsx
View file

@ -16,7 +16,7 @@ const Container = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

4
src/components/Evolution.tsx
View file

@ -14,7 +14,7 @@ const StyledEvolution = styled.div`
background: var(--bg); background: var(--bg);
height: 80%; height: 80%;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 70%; height: 70%;
} }
`; `;
@ -233,7 +233,7 @@ const TextContainer = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

4
src/components/Frame.tsx
View file

@ -30,7 +30,7 @@ const StyledFrame = styled.div<FrameProps>`
font-size: 30px; font-size: 30px;
font-family: "PokemonGB"; font-family: "PokemonGB";
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 9px; font-size: 9px;
} }
} }
@ -53,7 +53,7 @@ const StyledFrame = styled.div<FrameProps>`
transform: rotate(90deg); transform: rotate(90deg);
animation: ${animation} 1s infinite; animation: ${animation} 1s infinite;
@media (max-width: 768px) { @media (max-width: 1000px) {
bottom: ${(props) => (props.$flashing ? "13px" : "-1000px")}; bottom: ${(props) => (props.$flashing ? "13px" : "-1000px")};
right: 10px; right: 10px;
width: 1.3px; width: 1.3px;

2
src/components/GameboyMenu.tsx
View file

@ -99,7 +99,7 @@ const Text = styled.div`
-webkit-animation: ${colorAnimation} 3s 1 linear forwards; -webkit-animation: ${colorAnimation} 3s 1 linear forwards;
animation: ${colorAnimation} 3s 1 linear forwards; animation: ${colorAnimation} 3s 1 linear forwards;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 2.5rem; font-size: 2.5rem;
} }
`; `;

4
src/components/HealthBar.tsx
View file

@ -15,7 +15,7 @@ const HealthContainer = styled.div`
width: 75.2%; width: 75.2%;
height: 46%; height: 46%;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
top: 40%; top: 40%;
} }
@ -52,7 +52,7 @@ const Image = styled(PixelImage)<ImageProps>`
position: relative; position: relative;
height: ${(props) => (props.$big ? "6px" : "5px")}; height: ${(props) => (props.$big ? "6px" : "5px")};
@media (min-width: 769px) { @media (min-width: 1000px) {
height: 2.5vh; height: 2.5vh;
} }
`; `;

6
src/components/Menu.tsx
View file

@ -29,7 +29,7 @@ const StyledMenu = styled.div<MenuProps>`
width: ${(props) => width: ${(props) =>
props.$compact ? "410px" : props.$wide ? "100%" : "auto"}; props.$compact ? "410px" : props.$wide ? "100%" : "auto"};
@media (max-width: 768px) { @media (max-width: 1000px) {
width: ${(props) => width: ${(props) =>
props.$compact ? "130px" : props.$wide ? "100%" : "auto"}; props.$compact ? "130px" : props.$wide ? "100%" : "auto"};
} }
@ -48,7 +48,7 @@ const Bold = styled.div`
margin-left: 45px; margin-left: 45px;
font-size: 3rem; font-size: 3rem;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
margin-left: 15px; margin-left: 15px;
@ -61,7 +61,7 @@ const ArrowContainer = styled.div`
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@media (max-width: 768px) { @media (max-width: 1000px) {
top: auto; top: auto;
bottom: -1px; bottom: -1px;
left: 1px; left: 1px;

4
src/components/MoveSelect.tsx
View file

@ -18,7 +18,7 @@ const Stats = styled.div`
width: 35rem; width: 35rem;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
bottom: 6rem; bottom: 6rem;
left: 0; left: 0;
width: 50%; width: 50%;
@ -34,7 +34,7 @@ const StatsRow = styled.div`
width: 100%; width: 100%;
margin-top: 5px; margin-top: 5px;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 1rem; font-size: 1rem;
margin-top: 2px; margin-top: 2px;
} }

2
src/components/Pc.tsx
View file

@ -39,7 +39,7 @@ const TextContainer = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

4
src/components/PokeMart.tsx
View file

@ -40,7 +40,7 @@ const TextContainer = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;
@ -72,7 +72,7 @@ const MoneyHeader = styled.div`
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 10px; font-size: 10px;
padding: 3px; padding: 3px;
padding-bottom: 0; padding-bottom: 0;

2
src/components/PokemonCenter.tsx
View file

@ -30,7 +30,7 @@ const TextContainer = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

18
src/components/PokemonEncounter.tsx
View file

@ -79,7 +79,7 @@ const StyledPokemonEncounter = styled.div`
width: 100%; width: 100%;
height: 80%; height: 80%;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 70%; height: 70%;
padding-top: 3px; padding-top: 3px;
} }
@ -114,7 +114,7 @@ const Name = styled.div`
font-family: "PokemonGB"; font-family: "PokemonGB";
text-transform: uppercase; text-transform: uppercase;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 13px; font-size: 13px;
} }
`; `;
@ -124,7 +124,7 @@ const Level = styled.div`
margin: 0 12vh; margin: 0 12vh;
font-family: "PressStart2P", sans-serif; font-family: "PressStart2P", sans-serif;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 12px; font-size: 12px;
margin: 0 28px; margin: 0 28px;
} }
@ -134,7 +134,7 @@ const HealthBarContainer = styled.div`
margin: 0 3.3vh; margin: 0 3.3vh;
margin-top: 1.2vh; margin-top: 1.2vh;
@media (max-width: 768px) { @media (max-width: 1000px) {
margin: 0 8px; margin: 0 8px;
} }
`; `;
@ -145,7 +145,7 @@ const Health = styled.div`
font-size: 5vh; font-size: 5vh;
margin: 0 3.3vh; margin: 0 3.3vh;
margin-top: 1.2vh; margin-top: 1.2vh;
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 13px; font-size: 13px;
margin: 0 8px; margin: 0 8px;
margin-top: 3px; margin-top: 3px;
@ -361,14 +361,14 @@ const Corner = styled.img`
transform: translateY(-50%); transform: translateY(-50%);
height: 8vh; height: 8vh;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 19px; height: 19px;
} }
`; `;
const CornerContainer = styled.div` const CornerContainer = styled.div`
height: 5vh; height: 5vh;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 10px; height: 10px;
} }
`; `;
@ -376,7 +376,7 @@ const CornerContainer = styled.div`
const CornerRight = styled.img` const CornerRight = styled.img`
height: 8vh; height: 8vh;
transform: translateY(-70%) scaleX(-1); transform: translateY(-70%) scaleX(-1);
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 19px; height: 19px;
} }
`; `;
@ -389,7 +389,7 @@ const TextContainer = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

2
src/components/PokemonList.tsx
View file

@ -31,7 +31,7 @@ const Container = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

14
src/components/PokemonRow.tsx
View file

@ -88,7 +88,7 @@ const StyledPokemonRow = styled.div`
margin-bottom: 1px; margin-bottom: 1px;
align-items: center; align-items: center;
@media (min-width: 769px) { @media (min-width: 1000px) {
margin-bottom: 1vh; margin-bottom: 1vh;
} }
`; `;
@ -107,7 +107,7 @@ const Image = styled.img`
// The sprites seemd a bit yellow, so I added a hue-rotate filter to make them more red // The sprites seemd a bit yellow, so I added a hue-rotate filter to make them more red
filter: hue-rotate(-25deg); filter: hue-rotate(-25deg);
@media (min-width: 769px) { @media (min-width: 1000px) {
height: 8vh; height: 8vh;
margin-right: 4vh; margin-right: 4vh;
} }
@ -126,7 +126,7 @@ const Name = styled.div`
font-family: "PokemonGB"; font-family: "PokemonGB";
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 769px) { @media (min-width: 1000px) {
font-size: 3.7vh; font-size: 3.7vh;
transform: translateY(1vh); transform: translateY(1vh);
} }
@ -135,7 +135,7 @@ const Name = styled.div`
const HealthBarContainer = styled.div` const HealthBarContainer = styled.div`
margin-left: 10px; margin-left: 10px;
@media (min-width: 769px) { @media (min-width: 1000px) {
margin-left: 4vh; margin-left: 4vh;
} }
`; `;
@ -147,7 +147,7 @@ const StatsContainer = styled.div`
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
@media (min-width: 769px) { @media (min-width: 1000px) {
margin-left: 4vh; margin-left: 4vh;
} }
`; `;
@ -158,7 +158,7 @@ const Level = styled.div`
margin-bottom: 2px; margin-bottom: 2px;
margin-top: 1px; margin-top: 1px;
@media (min-width: 769px) { @media (min-width: 1000px) {
font-size: 3.3vh; font-size: 3.3vh;
margin-bottom: 1vh; margin-bottom: 1vh;
margin-top: 0.5vh; margin-top: 0.5vh;
@ -170,7 +170,7 @@ const Health = styled.div`
margin-left: 10px; margin-left: 10px;
font-family: "PokemonGB"; font-family: "PokemonGB";
@media (min-width: 769px) { @media (min-width: 1000px) {
font-size: 3.3vh; font-size: 3.3vh;
margin-left: 4vh; margin-left: 4vh;
} }

6
src/components/Text.tsx
View file

@ -49,12 +49,12 @@ const StyledText = styled.div<TextProps>`
font-size: 30px; font-size: 30px;
font-family: "PokemonGB"; font-family: "PokemonGB";
@media (max-width: 768px) { @media (max-width: 1000px) {
font-size: 9px; font-size: 9px;
} }
} }
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
@ -76,7 +76,7 @@ const StyledText = styled.div<TextProps>`
transform: rotate(90deg); transform: rotate(90deg);
animation: ${flashing} 1s infinite; animation: ${flashing} 1s infinite;
@media (max-width: 768px) { @media (max-width: 1000px) {
bottom: ${(props) => (props.$done ? "13px" : "-100px")}; bottom: ${(props) => (props.$done ? "13px" : "-100px")};
right: 10px; right: 10px;
width: 1.3px; width: 1.3px;

2
src/components/TextThenAction.tsx
View file

@ -14,7 +14,7 @@ const StyledTextThenAction = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

2
src/components/TrainerEncounter.tsx
View file

@ -30,7 +30,7 @@ const StyledTrainerEncounter = styled.div`
height: 20%; height: 20%;
z-index: 100; z-index: 100;
@media (max-width: 768px) { @media (max-width: 1000px) {
height: 30%; height: 30%;
} }
`; `;

12
src/components/gameboy.css
View file

@ -28,7 +28,7 @@
border-bottom: 2px solid #9998eb; border-bottom: 2px solid #9998eb;
} }
@media (min-width: 768px) { @media (min-width: 1000px) {
.gameboy::after { .gameboy::after {
display: none; display: none;
} }
@ -40,7 +40,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media (min-width: 768px) { @media (min-width: 1000px) {
height: 100%; height: 100%;
} }
} }
@ -49,7 +49,7 @@
width: 100%; width: 100%;
min-height: 250px; min-height: 250px;
@media (min-width: 768px) { @media (min-width: 1000px) {
display: none; display: none;
} }
} }
@ -63,7 +63,7 @@
box-shadow: 0px 2px 0px black, 0px -2px 0px black, -2px 0px 0px black, box-shadow: 0px 2px 0px black, 0px -2px 0px black, -2px 0px 0px black,
2px 0px 0px black; 2px 0px 0px black;
@media (min-width: 768px) { @media (min-width: 1000px) {
flex: 1; flex: 1;
} }
} }
@ -139,7 +139,7 @@
margin-bottom: 15px; margin-bottom: 15px;
overflow: hidden; overflow: hidden;
@media (min-width: 768px) { @media (min-width: 1000px) {
height: calc(100% - 45px); height: calc(100% - 45px);
} }
} }
@ -424,7 +424,7 @@
z-index: 100; z-index: 100;
transform: skewY(-10deg); transform: skewY(-10deg);
@media (min-width: 768px) { @media (min-width: 1000px) {
display: none; display: none;
} }
} }