Merge pull request #144 from w3bdesign/development

Fix CSS bug with page title

Author: w3bdesign

README.md

@@ -24,8 +24,7 @@ Start the server with ```npm run dev ```
 - Connect to Woocommerce GraphQL API and list name, price and display image for products
 - Cart handling with createContext
 - Algolia search (work in progress)
-- Vercel useSWR for caching and graphql-request for data fetching (gradually being replaced with Apollo Client)
-- Apollo for GraphQL
+- Apollo Client with GraphQL
 - Animations with React-Spring
 - Shows loading spinner created with Styled Components while loading data and error message if data can not be loaded
 - Default frontpage products loaded through a predefined JSON file with getStaticProps for preloading

components/Category/Categories.component.jsx

@@ -1,9 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
 
-import PageTitle from 'components/Header/PageTitle.component';
-
-
-
 /**
  * Map over the categories and display them individually.
  * Uses uuidv4 for unique key IDs
@@ -12,25 +8,17 @@ import PageTitle from 'components/Header/PageTitle.component';
 const Categories = ({ categories }) => {
   return (
     <>
-
-<br/>
 
-  
-   
-    
-    
-      <PageTitle title="Kategorier" />
-
+      <section className="container mx-auto bg-white">
 
-
-      <section className="bg-white">
-        <div className="container flex flex-wrap items-center mx-auto">
+        <div className="flex ">
+        
           {categories.map(({ name }) => (
             <div
               key={uuidv4()}
-              className="flex flex-col p-6 md:w-1/3 xl:w-1/4"
+              className="flex flex-col justify-around p-6 xs:w-1/2 md:w-1/3 xl:w-1/4"
             >
-              <div className="flex items-center justify-center p-6 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
+              <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
                 <p className="text-lg">{name}</p>
               </div>
             </div>

components/Footer/Footer.component.jsx

@@ -4,7 +4,7 @@
 const Footer = () => {
   return (
     <>
-      <footer className="container top-0 p-6 py-1 mx-auto mt-0 text-center bg-white border border-gray-300 rounded-lg shadow">
+      <footer className="container px-6 mx-auto text-center bg-white border border-gray-300 rounded-lg shadow">
         <div className="p-6">Copyright &copy; {new Date().getFullYear()} Daniel</div>
       </footer>
     </>

components/Header/PageTitle.component.jsx

@@ -1,14 +1,20 @@
-const PageTitle = ({ title }) => {
+const PageTitle = ({ title, marginleft }) => {
   return (
-    <section className="py-4 bg-white">
-      <div className="container flex flex-wrap items-center mx-auto">
-        <div className="container py-2 mx-auto mt-16 text-center">
-          <span className="text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
+    <>
+      {marginleft ? (
+        <section className="container pl-6 mx-auto mt-24 bg-white">
+          <span className="py-2 text-xl font-bold tracking-wide text-left text-gray-800 no-underline uppercase hover:no-underline">
             {title}
           </span>
-        </div>
-      </div>
-    </section>
+        </section>
+      ) : (
+        <section className="container pl-4 mx-auto mt-24 bg-white">
+          <span className="py-2 text-xl font-bold tracking-wide text-left text-gray-800 no-underline uppercase hover:no-underline">
+            {title}
+          </span>
+        </section>
+      )}
+    </>
   );
 };
 

components/Product/IndexProducts.component.jsx

@@ -1,8 +1,6 @@
 import Link from 'next/link';
 import { v4 as uuidv4 } from 'uuid';
 
-import PageTitle from 'components/Header/PageTitle.component';
-
 /**
  * Displays all of the products as long as length is defined.
  * Does a map() over the props array and utilizes uuidv4 for unique key values.
@@ -11,18 +9,15 @@ import PageTitle from 'components/Header/PageTitle.component';
 const IndexProducts = ({ products }) => {
   return (
     <>
-    <br/>    
-    
-   
-      <PageTitle title="Produkter" />
-   
-          
-
-      <section className="bg-white">
+  
+      <section className="container mx-auto bg-white">
+     
         <div
           id="product-container"
-          className="container flex flex-wrap items-center mx-auto overflow-hidden"
+          className="flex flex-wrap items-center"
         >
+          
+           
           {products ? (
             products.map(
               ({
@@ -46,8 +41,8 @@ const IndexProducts = ({ products }) => {
                     <a>
                       <img
                         id="product-image"
-                        // className="object-cover w-full h-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
-                        className="w-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
+                         className="transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
+                        //className="w-64 transition duration-500 ease-in-out transform hover:grow hover:shadow-lg hover:scale-105"
                         src={image.sourceUrl}
                       />
                     </a>

pages/index.js

@@ -1,5 +1,7 @@
 import Hero from 'components/Index/Hero.component';
 import IndexProducts from 'components/Product/IndexProducts.component';
+import PageTitle from 'components/Header/PageTitle.component';
+
 import client from 'utils/apollo/ApolloClient.js';
 
 import { FETCH_ALL_PRODUCTS_QUERY } from 'utils/const/GQL_QUERIES';
@@ -14,6 +16,7 @@ const HomePage = ({ products }) => {
     <>
 
       <Hero/>
+      <PageTitle title="Produkter" />
       {products && <IndexProducts products={products} />}
     </>
   );

pages/kategorier.js

@@ -1,5 +1,7 @@
 import Categories from 'components/Category/Categories.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
+import PageTitle from 'components/Header/PageTitle.component';
+
 import client from 'utils/apollo/ApolloClient.js';
 
 import { FETCH_ALL_CATEGORIES_QUERY } from 'utils/const/GQL_QUERIES';
@@ -12,6 +14,8 @@ const CategoryPage = ({ categories }) => {
 
   return (
     <>
+      <PageTitle title="Kategorier" />
+
       {categories && <Categories categories={categories} />}
 
       {!categories && !error && (

pages/produkter.js

@@ -1,7 +1,9 @@
 import IndexProducts from 'components/Product/IndexProducts.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
+import PageTitle from 'components/Header/PageTitle.component';
 
 import { FETCH_ALL_PRODUCTS_QUERY } from 'utils/const/GQL_QUERIES';
+
 import client from 'utils/apollo/ApolloClient.js';
 
 /**
@@ -15,7 +17,11 @@ const Produkter = ({ products }) => {
 
   return (
     <>
-      {products && <IndexProducts products={products} />}
+      <PageTitle title="Produkter" marginleft="true"/>
+      
+      {
+      products && <IndexProducts products={products} />
+      }
 
       {!products && !error && (
         <div className="h-64 mt-8 text-2xl text-center">

styles/index.css

@@ -24,13 +24,13 @@
 }
 
 #product-container {
-  max-width: 1100px;
+/*  max-width: 1000px;*/
 }
 
 /* Fix for annoying CSS bug with NavBar moving slightly on front page only */
 @media only screen and (min-width: 769px) {
   #navbar-div {
-    margin-left: 350px;  
+    margin-left: 330px;
   }
 }