From 4ba3f249d9844ccbee2f6f779aae27e6491931c2 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Tue, 24 Aug 2021 20:02:43 +0200
Subject: [PATCH] Change flex to grid for projects and posts

---
 src/components/Post.vue         | 16 ++++------------
 src/components/PostsHome.vue    | 25 ++++++++++++-------------
 src/components/Project.vue      | 16 ++++------------
 src/components/ProjectsHome.vue | 21 ++++++++++-----------
 src/pages/blog/index.vue        | 27 ++++++++++++---------------
 src/pages/projects.vue          | 23 +++++++++++------------
 6 files changed, 53 insertions(+), 75 deletions(-)

diff --git a/src/components/Post.vue b/src/components/Post.vue
index 80a4646..79ed0e6 100755
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,10 +1,10 @@
 <template>
   <nuxt-link :to="`/blog/${slug}`">
-    <div class="rounded-lg dark:shadow-white shadow-xl h-116 w-full lg:w-100 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
-      <div class="h-2/5 post rounded-t-lg"
-           :style="{ backgroundImage: `url(https://athena.arthurdanjou.fr/files/${cover})` }">
+    <div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:-translate-y-2 duration-300">
+      <div class="max-w-full">
+        <img class="max-w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Post Cover" />
       </div>
-      <div class="h-3/5 p-4 flex flex-col justify-between">
+      <div class="px-8 py-4 flex flex-col justify-between">
         <div>
           <div class="flex space-x-2 mb-2">
             <div v-for="tag in tags">
@@ -81,11 +81,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped lang="scss">
-.post {
-  background-position: center;
-  background-size: cover;
-  @apply bg-opacity-50;
-}
-</style>
diff --git a/src/components/PostsHome.vue b/src/components/PostsHome.vue
index 4fed472..bed4297 100755
--- a/src/components/PostsHome.vue
+++ b/src/components/PostsHome.vue
@@ -5,22 +5,21 @@
         <h2 class="font-bold text-3xl">
           {{ $t('blog.latest') }}
         </h2>
-        <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4">
+        <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4 mb-8">
           {{ $t('blog.description') }}
         </p>
       </div>
-      <div class="my-8 lg:flex w-full lg:space-x-6">
-        <div v-for="post in posts">
-          <Post
-            :title="post.title.code"
-            :cover="post.cover.file_name"
-            :description="post.description.code"
-            :date="post.date"
-            :slug="post.slug"
-            :tags="post.tags"
-            :reading_time="post.reading_time"
-          />
-        </div>
+      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
+        <Post
+          v-for="post in posts"
+          :title="post.title.code"
+          :cover="post.cover.file_name"
+          :description="post.description.code"
+          :date="post.date"
+          :slug="post.slug"
+          :tags="post.tags"
+          :reading_time="post.reading_time"
+        />
       </div>
       <div class="flex">
         <Button content="blog.see_more" link="blog"/>
diff --git a/src/components/Project.vue b/src/components/Project.vue
index bf05da1..70c3d21 100755
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,10 +1,10 @@
 <template>
   <a :href="url" target="_blank">
-    <div class="rounded-lg dark:shadow-white shadow-xl lg:h-92 w-full lg:w-84 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
-      <div class="h-64 lg:h-1/2 w-full project rounded-t-lg"
-           :style="{ backgroundImage: `url(https://athena.arthurdanjou.fr/files/${cover})` }">
+    <div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
+      <div class="max-w-full">
+        <img class="w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Project Cover" />
       </div>
-      <div class="lg:h-1/2 py-8 px-4 lg:p-4 flex flex-col justify-between">
+      <div class="py-8 px-4 lg:p-4 flex flex-col justify-between">
         <div>
           <div class="flex space-x-2 mb-2">
             <div v-for="tag in tags">
@@ -48,11 +48,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped lang="scss">
-.project {
-  background-position: center;
-  background-size: cover;
-  @apply bg-opacity-50;
-}
-</style>
diff --git a/src/components/ProjectsHome.vue b/src/components/ProjectsHome.vue
index 15d1a03..c9cc5c5 100755
--- a/src/components/ProjectsHome.vue
+++ b/src/components/ProjectsHome.vue
@@ -5,20 +5,19 @@
         <h2 class="font-bold text-3xl">
           {{ $t('projects.latest') }}
         </h2>
-        <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4">
+        <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4 mb-8">
           {{ $t('projects.description') }}
         </p>
       </div>
-      <div class="my-8 w-full lg:space-x-8 lg:flex justify-center">
-        <div v-for="project in projects" class="mb-4">
-          <Project
-            :title="project.name"
-            :cover="project.cover.file_name"
-            :description="project.description.code"
-            :tags="project.tags"
-            :url="project.url"
-          />
-        </div>
+      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
+        <Project
+          v-for="project in projects"
+          :title="project.name"
+          :cover="project.cover.file_name"
+          :description="project.description.code"
+          :tags="project.tags"
+          :url="project.url"
+        />
       </div>
       <div class="flex">
         <Button content="projects.see_more" link="projects"/>
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
index 9c8af2f..b1e736a 100755
--- a/src/pages/blog/index.vue
+++ b/src/pages/blog/index.vue
@@ -1,23 +1,22 @@
 <template>
   <main v-if="posts" class="blog flex flex-col items-center w-full px-4 xl:px-16">
     <PageTitle title="part.blog" />
-    <p class="text-gray-700 dark:text-gray-400 text-xl mt-4">
+    <p class="text-gray-700 dark:text-gray-400 text-xl mt-4 mb-8">
       {{ $t('blog.description') }}
     </p>
     <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1>
     <div class="w-full" v-else>
-      <div class="flex py-8 w-full flex-wrap">
-        <div class="md:mx-8 my-4 w-full lg:w-auto" v-for="post in posts">
-          <Post
-            :title="post.title.code"
-            :cover="post.cover.file_name"
-            :description="post.description.code"
-            :date="post.date"
-            :slug="post.slug"
-            :tags="post.tags"
-            :reading_time="post.reading_time"
-          />
-        </div>
+      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3">
+        <Post
+          v-for="post in posts"
+          :title="post.title.code"
+          :cover="post.cover.file_name"
+          :description="post.description.code"
+          :date="post.date"
+          :slug="post.slug"
+          :tags="post.tags"
+          :reading_time="post.reading_time"
+        />
       </div>
       <!--<div class="flex w-full justify-center mb-8">
         <Button
@@ -31,7 +30,6 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Post} from "~/types/types";
 
 export default defineComponent({
   name: "blog",
@@ -50,7 +48,6 @@ export default defineComponent({
         }
       })
       if (response.status === 200) {
-        console.log(response.data.posts)
         return response.data.posts
       } else {
         app.error({statusCode: 500})
diff --git a/src/pages/projects.vue b/src/pages/projects.vue
index 473a2b5..5513b8a 100755
--- a/src/pages/projects.vue
+++ b/src/pages/projects.vue
@@ -2,19 +2,18 @@
   <main v-if="projects" class="flex flex-col items-center px-4 xl:px-32">
     <PageTitle title="part.projects" />
     <h1 v-if="projects.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('projects.no_project') }}</h1>
-    <div v-else class="flex flex-col justify-around items-center py-10 w-full">
-      <h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4">{{ $t('projects.description') }}</h1>
+    <div v-else class="flex flex-col justify-around items-center w-full">
+      <h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4 mb-8">{{ $t('projects.description') }}</h1>
       <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
-        <div class="lg:flex py-4 w-full flex-wrap justify-center">
-          <div class="m-4" v-for="project in projects">
-            <Project
-              :title="project.name"
-              :cover="project.cover.file_name"
-              :description="project.description.code"
-              :tags="project.tags"
-              :url="project.url"
-            />
-          </div>
+        <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3">
+          <Project
+            v-for="project in projects"
+            :title="project.name"
+            :cover="project.cover.file_name"
+            :description="project.description.code"
+            :tags="project.tags"
+            :url="project.url"
+          />
         </div>
       </div>
     </div>