Add Mobile Responsiveness

src/App.js

@@ -1,9 +1,9 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Nav from './components/Nav';
-import './App.css';
 import MyProfile from './components/MyProfile';
 import Mission from './components/Mission';
 import Rockets from './components/Rockets';
+import MissionDetails from './components/MissionDetails';
 
 function App() {
   return (
@@ -13,7 +13,9 @@ function App() {
         <Routes>
           <Route path="/" element={<Rockets />} />
           <Route path="/MyProfile" element={<MyProfile />} />
-          <Route path="/Mission" element={<Mission />} />
+          <Route path="/Mission" element={<Mission />}>
+            <Route path="Mission-details" element={<MissionDetails />} />
+          </Route>
           <Route path="*" element={<h3>No Match</h3>} />
         </Routes>
       </BrowserRouter>

src/components/Mission.jsx

@@ -1,8 +1,21 @@
-import { useEffect } from 'react';
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { fetchMissions, joinMission, leaveMission } from '../redux/mission/missionsSlice';
+import '../styles/mission.css';
 
 const Mission = () => {
+  const [isMobile, setMobile] = useState(window.innerWidth < 620);
+
+  const updateMedia = () => {
+    setMobile(window.innerWidth < 620);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateMedia);
+    return () => window.removeEventListener('resize', updateMedia);
+  });
   const dispatch = useDispatch();
   const missions = useSelector((store) => store.missions.missions);
 
@@ -45,25 +58,39 @@ const Mission = () => {
   const mission = missions.map((item) => (
     <tr key={item.id}>
       <td className="fw-bold">{ item.name }</td>
-      <td>{ item.desc }</td>
-      <td className="align-middle text-center">
+      <td className="mission-desc">
+        {
+          isMobile ? (
+            <Link to="Mission-details">
+              <p>
+                { item.desc }
+              </p>
+            </Link>
+          ) : (
+            <p>
+              { item.desc }
+            </p>
+          )
+        }
+      </td>
+      <td className="mission-status align-middle text-center">
         {handleStatus(item.reserved)}
       </td>
-      <td className="align-middle text-center">
+      <td className="mission-btns align-middle text-center">
         {handleButtons(item.id, item.reserved)}
       </td>
     </tr>
   ));
 
   return (
-    <section className="m-3 mt-0 p-3 pt-0 table-responsive">
+    <section className="table-responsive-md">
       <table className="table table-striped table-bordered">
         <thead>
           <tr>
             <th width="150">Mission</th>
             <th>Description</th>
-            <th width="150">Status</th>
-            <th width="150"> </th>
+            <th width="150" className="table-status">Status</th>
+            <th width="150" className="table-btns"> </th>
           </tr>
         </thead>
         <tbody>

src/components/MissionDetails.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MissionDetails = () => (
+  <div>MissionDetails</div>
+);
+
+export default MissionDetails;

src/components/MyProfile.jsx

@@ -3,7 +3,7 @@ import {
   Container, ListGroup, Row, Col,
 } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.css';
-import '../styles/rockets.css';
+import '../styles/my_profile.css';
 
 const Rocket = () => {
   const rockets = useSelector((state) => state.rockets);
@@ -14,14 +14,14 @@ const Rocket = () => {
   if (myRockets.length === 0) {
     return (
       <Col>
-        <h3>My Rockets</h3>
+        <h3 className="profile-heading">My Rockets</h3>
         You have not reserved any rockets.
       </Col>
     );
   }
   return (
     <Col>
-      <h3>My Rockets</h3>
+      <h3 className="profile-heading">My Rockets</h3>
       <ListGroup as="ol">
         {myRockets.map((rocket) => (
           <ListGroup.Item as="li" key={rocket.id}>
@@ -40,14 +40,14 @@ const Mission = () => {
   if (myMissions.length === 0) {
     return (
       <Col>
-        <h3>My Missions</h3>
+        <h3 className="profile-heading">My Missions</h3>
         <p>You have not reserved any missions.</p>
       </Col>
     );
   }
   return (
     <Col>
-      <h3>My Missions</h3>
+      <h3 className="profile-heading">My Missions</h3>
       <ListGroup as="ol">
         {myMissions.map((item) => (
           <ListGroup.Item as="li" key={item.id}>

src/components/Nav.jsx

@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router-dom';
-import { Container } from 'react-bootstrap';
+import '../styles/nav.css';
 import 'bootstrap/dist/css/bootstrap.css';
 
 const links = [
@@ -9,31 +9,35 @@ const links = [
 ];
 const Nav = () => (
   <>
-    <Container className="d-flex flex-wrap align-items-center p-3">
-      <img
-        className="Logo"
-        src="https://spacetravellerhubcapstone.netlify.app/static/media/planet.3f6fb2742f28651730c0.png"
-        alt="Logo"
-        style={{ width: '50px' }}
-      />
-      <h3>Space Travelers&apos; Hub</h3>
-      <ul
-        className="list-unstyled m-2 p-2 d-flex flex-wrap"
-        style={{ justifyContent: 'flex-end', flex: '2' }}
-      >
-        {links.map((link) => (
-          <li key={link.text} className="m-2">
-            <NavLink
-              className={({ isActive }) => (isActive ? 'active-link' : 'link')}
-              to={link.path}
-            >
-              {link.text}
-            </NavLink>
-          </li>
-        ))}
-      </ul>
-    </Container>
-    <hr className="m-5 my-1" />
+    <section className="nav-container">
+      <div>
+        <img
+          className="Logo"
+          src="https://spacetravellerhubcapstone.netlify.app/static/media/planet.3f6fb2742f28651730c0.png"
+          alt="Logo"
+          style={{ width: '50px' }}
+        />
+        <h3>Space Travelers&apos; Hub</h3>
+      </div>
+      <div>
+        <ul
+          className="list-unstyled m-2 p-2 d-flex flex-wrap"
+        >
+          {links.map((link) => (
+            <li key={link.text} className="m-2">
+              <NavLink
+                className={({ isActive }) => (isActive ? 'active-link' : 'link')}
+                to={link.path}
+              >
+                {link.text}
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+
+      </div>
+    </section>
+    <hr className="m-3 my-1 py-2" />
   </>
 );
 

src/components/Rockets.jsx

@@ -45,7 +45,9 @@ const Rocket = ({ item, reservationAction }) => {
 
   return (
     <div className="rocketC" key={id} data-testid="Rocket">
-      <img className="rocketImg" src={images} alt={name} />
+      <div className="rocketImg">
+        <img src={images} alt={name} />
+      </div>
       <div className="contentC">
         <h4 className="rocektName">{name}</h4>
         <div className="rocketDesc">
@@ -59,6 +61,7 @@ const Rocket = ({ item, reservationAction }) => {
           )}
         </div>
         <div
+          className="reserveBtns"
           role="button"
           tabIndex="0"
           onClick={reservationAction}

src/styles/app.css

@@ -0,0 +1 @@
+/* General styles */

src/styles/mission.css

@@ -0,0 +1,39 @@
+.mission-desc {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+  height: 100px;
+}
+
+.table {
+  font-size: 12px;
+}
+
+.mission-status,
+.table-status,
+.table-btns,
+.mission-btns {
+  display: none;
+}
+
+@media (min-width: 620px) {
+  .table {
+    font-size: 16px;
+    width: auto;
+  }
+
+  .mission-desc {
+    display: block;
+    overflow: visible;
+    white-space: initial;
+    height: auto;
+  }
+
+  .mission-status,
+  .table-status,
+  .table-btns,
+  .mission-btns {
+    display: table-cell;
+  }
+}

src/styles/my_profile.css

@@ -0,0 +1,5 @@
+@media (max-width: 376px) {
+  .profile-heading {
+    font-size: 16px;
+  }
+}

src/styles/nav.css

@@ -0,0 +1,39 @@
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem 1rem 0 1rem;
+}
+
+.nav-container div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.active {
+  color: red;
+}
+
+.m-2 {
+  text-decoration: none;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.active-link {
+  text-decoration: underline;
+}
+
+.Logo {
+  width: 50px;
+}
+
+@media (min-width: 580px) {
+  .nav-container {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}