Mobile css

README.md

@@ -2,7 +2,13 @@
 
 [![Build React App](https://github.com/uqbar-project/eg-mundial-fifa-react-context/actions/workflows/build.yml/badge.svg?branch=master)](https://github.com/uqbar-project/eg-mundial-fifa-react-context/actions/workflows/build.yml) [![codecov](https://codecov.io/gh/uqbar-project/eg-mundial-fifa-react-context/graph/badge.svg?token=QJ2MJX1Y5B)](https://codecov.io/gh/uqbar-project/eg-mundial-fifa-react-context)
 
-<img src="video/demo.gif"/>
+<img src="video/demo1.gif"/>
+
+<hr/>
+
+<img src="video/demo2.gif">
+
+<hr/>
 
 La aplicación permite la reutilización de varios componentes:
 

src/App.css

@@ -1,7 +1,7 @@
 .App {
   top: 0;
   text-align: center;
-  width: calc(100vw - 1rem);
+  min-width: 100vw;
 }
 
 .App-logo {

src/components/countryList.css

@@ -6,4 +6,10 @@
 
 .countryRowContainer {
   margin: 1rem 0;
+}
+
+@media (max-width: 424px) {
+  .countryList {
+    grid-template-columns: 1fr 1fr;
+  }
 }

src/components/countrySearch.css

@@ -3,11 +3,11 @@
 }
 
 .search {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  width: 50%;
+  display: flex;
+  flex-direction: row;
   gap: 1rem;
-  margin: 1rem auto;
+  margin: 1rem 0;
+  justify-content: center;
 }
 
 .formControl {
@@ -29,4 +29,15 @@ input {
 select {
   height: 1.9rem;
   box-sizing: content-box;
-}
+}
+
+@media (max-width: 424px) {
+  .search {
+    display: flex;
+    flex-direction: column;
+  }
+
+  input, select {
+    width: calc(100vw - 2rem);
+  }
+}

src/components/fixture.css

@@ -1,3 +1,7 @@
+.App {
+  min-width: calc(100vw - 2rem);
+}
+
 .fixture {
   display: flex;
   flex-direction: column;
@@ -8,3 +12,10 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
+
+@media (max-width: 424px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/components/matchRow.css

@@ -3,4 +3,20 @@
   grid-template-columns: 3fr 1fr 3fr 1fr;
   gap: 10px;
   margin: 0.75rem 0 0.25rem 0;
+}
+
+@media (max-width: 424px) {
+  .matchRow {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  .countryRow {
+    font-size: 0.8rem;
+  }
+
+  .matchRow .countryRow img {
+    height: 0.9rem;
+    width: 1.5rem;
+    margin: 0.3rem 0.3rem 0 0;
+  }
 }

src/components/mundialAppBar.css

@@ -9,9 +9,38 @@
 .iconMenu {
   height: 2rem;
   width: 2rem;
-  margin: -0.5rem 0.5rem;
 }
 
 .labelMenu {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
+}
+
+.mobile {
+  display: none;
+  visibility: hidden;
+}
+
+.desktop {
+  visibility: visible;
+  display: block;
+}
+
+@media (max-width: 424px) {
+  .App {
+    margin-left: 0.5rem;
+  }
+
+  .labelMenu {
+    font-size: 1rem;
+  }
+
+  .mobile {
+    visibility: visible;
+    display: block;
+  }
+
+  .desktop {
+    display: none;
+    visibility: hidden;
+  }
 }

src/components/mundialAppBar.tsx

@@ -6,14 +6,16 @@ export const MundialAppBar = () => {
   const navigate = useNavigate()
 
   return (
-    <div className='appbar' color='default'>
+    <div className='appbar'>
       <button onClick={() => navigate('/')}>
         <img className="iconMenu" src="/src/assets/search.png" />
-        <label className="labelMenu">Buscá los países</label>
+        <label className="labelMenu desktop">Buscá los países</label>
+        <label className="labelMenu mobile">Países</label>
       </button>
       <button onClick={() => navigate('/fixture')}>
         <img className="iconMenu" src="/src/assets/ranking.png" />
-        <label className="labelMenu">¡Cargá los resultados y mirá las posiciones!</label>
+        <label className="labelMenu desktop">¡Cargá los resultados y mirá las posiciones!</label>
+        <label className="labelMenu mobile">Resultados</label>
       </button>
     </div>
   )

src/index.css

@@ -28,8 +28,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
 }