Improve semantic HTML and responsiveness

README.md

@@ -6,10 +6,10 @@ You can add your own pets in [`/db.json`](https://github.com/vspedr/developets/b
 
 You can use the following format to add your pet
 
-```
+```json
 {
   "pets": [
-    ...
+    //...
     {
       "id": "", // generate a guid however you like
       "name": "",
@@ -18,7 +18,6 @@ You can use the following format to add your pet
       "description": "",
       "img": ""
     }
-    ...
   ]
 }
 ```

db.json

@@ -167,6 +167,14 @@
       "type": "dog",
       "description": "Cute little dog.",
       "img": "https://i.imgur.com/XoOZNFV.jpeg"
+    },
+    {
+      "id": "90dbeace-b820-4fa9-8903-3ff9e2b4f0f9",
+      "name": "Lírio & Narciso",
+      "owner": "raphaelalmeidamartins",
+      "type": "cat",
+      "description": "My little fellas. They love to turn off my computer when I'm working",
+      "img": "https://ibb.co/FHJhSCD"
     }
   ]
 }

src/App.css

@@ -55,8 +55,12 @@ body {
   font-size: large;
 }
 
+.App main {
+  padding: 20px 0 30px;
+}
+
 .App-content {
-  padding: 20px;
+  padding: 20px 0;
 }
 
 .App-pagination {
@@ -67,3 +71,9 @@ body {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+@media only screen and (max-width: 340px) {
+  .App-title {
+    font-size: 2em;
+  }
+}

src/App.js

@@ -1,15 +1,15 @@
+import parse from 'parse-link-header';
 import React, { useEffect, useState } from 'react';
-import { usePage } from './hooks/use-page';
-import { Card, Container, Pagination } from 'semantic-ui-react';
+import { HashLoader } from 'react-spinners';
 import 'semantic-ui-css/semantic.min.css';
-import parse from 'parse-link-header';
+import { Card, Container, Pagination } from 'semantic-ui-react';
 import './App.css';
 import { PetCard } from './components/PetCard';
 import { PetHeader } from './components/PetHeader';
+import { PETS } from './constants';
+import { usePage } from './hooks/use-page';
 import fetchPets from './services/pets';
 import { cacheRequest } from './_sessionStorage';
-import { PETS } from './constants';
-import { HashLoader } from "react-spinners";
 
 function App() {
   const LIMIT = 9;
@@ -22,9 +22,13 @@ function App() {
   useEffect(() => {
     async function fetchData() {
       const config = {
-        params: { _page: page, _limit: LIMIT }
+        params: { _page: page, _limit: LIMIT },
       };
-      const result = await cacheRequest(PETS, config.params._page, fetchPets(config));
+      const result = await cacheRequest(
+        PETS,
+        config.params._page,
+        fetchPets(config)
+      );
       const parsedLink = parse(result.headers.link);
       setTotalPages(parsedLink.last._page);
       setPets(result.data);
@@ -39,32 +43,33 @@ function App() {
 
   return (
     <div className="App">
-      <PetHeader/>
-      {
-        loading ? <HashLoader
+      <PetHeader />
+      {loading ? (
+        <HashLoader
           color="#36d7b7"
           cssOverride={{
             marginTop: 100,
-            marginLeft: 'auto',
-            marginRight: 'auto'
+            marginLeft: "auto",
+            marginRight: "auto",
           }}
           size={500}
-        /> :
-          <div>
-            <div className="App-content">
-              <Container>
-                <Card.Group className="centered" stackable>{pets.map(pet => PetCard(pet))}</Card.Group>
-              </Container>
-            </div>
-            <div className="App-pagination">
-              <Pagination
-                activePage={page}
-                onPageChange={onPageChange}
-                totalPages={totalPages}
-              ></Pagination>
-            </div>
-          </div>
-      }
+        />
+      ) : (
+        <main>
+          <Container as="section" className="App-content">
+            <Card.Group className="centered" stackable>
+              {pets.map((pet) => PetCard(pet))}
+            </Card.Group>
+          </Container>
+          <Pagination
+            as="section"
+            className="App-pagination"
+            activePage={page}
+            onPageChange={onPageChange}
+            totalPages={totalPages}
+          />
+        </main>
+      )}
     </div>
   );
 }

src/components/PetCard.css

@@ -1,24 +1,10 @@
 .card-image {
   object-fit: cover;
-  width: 320px;
+  width: 100%;
   height: 320px;
 }
 
 .ui.card,
 .ui.cards > .card {
   width: 320px;
 }
-
-@media only screen and (max-width: 767px) {
-  .card-image {
-    object-fit: cover;
-    width: 240px;
-    height: 240px;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  .ui.stackable.cards > .card {
-    width: 240px !important;
-  }
-}

src/components/PetCard.js

@@ -3,7 +3,7 @@ import { Card, Icon, Image } from 'semantic-ui-react';
 import placeholder from '../assets/img/paw.png';
 import './PetCard.css';
 
-export const PetCard = pet => {
+export const PetCard = (pet) => {
   const extra = (
     <Card.Content extra>
       <a href={`http://github.com/${pet.owner}`}>
@@ -14,11 +14,17 @@ export const PetCard = pet => {
   );
 
   const image = (
-    pet.img ? <Image className="card-image" alt={pet.name} src={pet.img} /> : <Image className="card-image" alt={pet.name} src={placeholder} />
+    <Image
+      className="card-image"
+      alt={pet.name}
+      src={pet.img ? pet.img : placeholder}
+      centered
+    />
   );
 
   return (
     <Card
+      as="section"
       key={pet.id}
       image={image}
       header={pet.name}
@@ -29,9 +35,10 @@ export const PetCard = pet => {
   );
 };
 
-document.addEventListener('DOMContentLoaded', function(event) {
-  document.querySelectorAll('img').forEach(function(img) {
-    img.onerror = function() {
+document.addEventListener('DOMContentLoaded', () => {
+  const images = document.querySelectorAll('img');
+  images.forEach((currImg) => {
+    currImg.onerror = () => {
       this.src = placeholder;
     };
   });

src/components/PetHeader.js

@@ -2,14 +2,13 @@ import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
 export const PetHeader = () => {
-
   return (
     <header className="App-header">
       <div className="App-header__group">
-        <span className="App-title">DeveloPets</span>
-        <span className="App-header__group-intro">
+        <h1 className="App-title">DeveloPets</h1>
+        <p className="App-header__group-intro">
           Introduce your animal buddies to your fellow developers
-        </span>
+        </p>
       </div>
       <div className="App__icons">
         <Icon name="paw" size="huge" />