-Responsive search form

-Add page title and site description
Thomasevano · Aug 3, 2020 · e6fdf73 · e6fdf73
1 parent 954948b
commit e6fdf73
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -1,6 +1,9 @@
 <template>
   <header>
     <div class="header__container">
+      <nuxt-link to="/" class="logo-container">
+        <img class="logo" src="~/assets/img/logo.svg" alt />
+      </nuxt-link>
       <input id="burger" class="burger__checkbox" type="checkbox" />
       <label for="burger" class="burger__menu">
         <span></span>
@@ -10,9 +13,6 @@
       <nav class="nav burger__nav">
         <nuxt-link to="/">Accueil</nuxt-link>
       </nav>
-      <nuxt-link to="/" class="logo-container">
-        <img class="logo" src="~/assets/img/logo.svg" alt />
-      </nuxt-link>
     </div>
     <nav class="nav desktop__nav">
       <nuxt-link to="/">Accueil</nuxt-link>
@@ -72,6 +72,7 @@ input[type="checkbox"] {
   height: 25px;
   width: 30px;
   position: relative;
+  top: 22px;
 }
 
 .burger__menu span {

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -14,14 +14,16 @@ export default {
    ** See https://nuxtjs.org/api/configuration-head
    */
   head: {
-    title: process.env.npm_package_name || "",
+    title: "Sneakers Collection" || "",
     meta: [
       { charset: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
       {
         hid: "description",
         name: "description",
-        content: process.env.npm_package_description || ""
+        content:
+          "A simple web app where you can search for a sneaker, make lists and exchange with passionate" ||
+          ""
       }
     ],
     link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]

diff --git a/pages/index.vue b/pages/index.vue
@@ -2,7 +2,7 @@
   <main class="home">
     <h2 class="section-title">Recherchez des sneakers</h2>
     <section>
-      <form class="flex items-center">
+      <form class="md:flex items-center">
         <Input
           inputType="text"
           inputName="Nom de la Sneaker"

diff --git a/pages/sneaker/_index.vue b/pages/sneaker/_index.vue
@@ -26,12 +26,20 @@ export default {
       response.json().then((data) => {
         this.sneaker = data.results[0];
         console.log(data.results);
+        console.log(this.$route);
       });
     });
   },
   data() {
     return { sneaker: {} };
   },
+  head() {
+    let sneaker = this.sneaker;
+
+    return {
+      title: `${sneaker.title} - Sneakers Collection`,
+    };
+  },
 };
 </script>