arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-26 18:00:38 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Change flex to grid for projects and posts

Browse Source
This commit is contained in:
Arthur Danjou
2021-08-24 20:02:43 +02:00
parent 8aa0b3616f
commit 4ba3f249d9
6 changed files with 53 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Post.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<nuxt-link :to="`/blog/${slug}`"> <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-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="h-2/5 post rounded-t-lg" <div class="max-w-full">
:style="{ backgroundImage: `url(https://athena.arthurdanjou.fr/files/${cover})` }"> <img class="max-w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Post Cover" />
</div> </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>
<div class="flex space-x-2 mb-2"> <div class="flex space-x-2 mb-2">
<div v-for="tag in tags"> <div v-for="tag in tags">
@@ -81,11 +81,3 @@ export default defineComponent({
} }
}) })
</script> </script>
<style scoped lang="scss">
.post {
background-position: center;
background-size: cover;
@apply bg-opacity-50;
}
</style>

25
src/components/PostsHome.vue
View File

@@ -5,22 +5,21 @@
<h2 class="font-bold text-3xl"> <h2 class="font-bold text-3xl">
{{ $t('blog.latest') }} {{ $t('blog.latest') }}
</h2> </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') }} {{ $t('blog.description') }}
</p> </p>
</div> </div>
<div class="my-8 lg:flex w-full lg:space-x-6"> <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
<div v-for="post in posts"> <Post
<Post v-for="post in posts"
:title="post.title.code" :title="post.title.code"
:cover="post.cover.file_name" :cover="post.cover.file_name"
:description="post.description.code" :description="post.description.code"
:date="post.date" :date="post.date"
:slug="post.slug" :slug="post.slug"
:tags="post.tags" :tags="post.tags"
:reading_time="post.reading_time" :reading_time="post.reading_time"
/> />
</div>
</div> </div>
<div class="flex"> <div class="flex">
<Button content="blog.see_more" link="blog"/> <Button content="blog.see_more" link="blog"/>

16
src/components/Project.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<a :href="url" target="_blank"> <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-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="h-64 lg:h-1/2 w-full project rounded-t-lg" <div class="max-w-full">
:style="{ backgroundImage: `url(https://athena.arthurdanjou.fr/files/${cover})` }"> <img class="w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Project Cover" />
</div> </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>
<div class="flex space-x-2 mb-2"> <div class="flex space-x-2 mb-2">
<div v-for="tag in tags"> <div v-for="tag in tags">
@@ -48,11 +48,3 @@ export default defineComponent({
} }
}) })
</script> </script>
<style scoped lang="scss">
.project {
background-position: center;
background-size: cover;
@apply bg-opacity-50;
}
</style>

21
src/components/ProjectsHome.vue
View File

@@ -5,20 +5,19 @@
<h2 class="font-bold text-3xl"> <h2 class="font-bold text-3xl">
{{ $t('projects.latest') }} {{ $t('projects.latest') }}
</h2> </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') }} {{ $t('projects.description') }}
</p> </p>
</div> </div>
<div class="my-8 w-full lg:space-x-8 lg:flex justify-center"> <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
<div v-for="project in projects" class="mb-4"> <Project
<Project v-for="project in projects"
:title="project.name" :title="project.name"
:cover="project.cover.file_name" :cover="project.cover.file_name"
:description="project.description.code" :description="project.description.code"
:tags="project.tags" :tags="project.tags"
:url="project.url" :url="project.url"
/> />
</div>
</div> </div>
<div class="flex"> <div class="flex">
<Button content="projects.see_more" link="projects"/> <Button content="projects.see_more" link="projects"/>

27
src/pages/blog/index.vue
View File

@@ -1,23 +1,22 @@
<template> <template>
<main v-if="posts" class="blog flex flex-col items-center w-full px-4 xl:px-16"> <main v-if="posts" class="blog flex flex-col items-center w-full px-4 xl:px-16">
<PageTitle title="part.blog" /> <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') }} {{ $t('blog.description') }}
</p> </p>
<h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1> <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="w-full" v-else>
<div class="flex py-8 w-full flex-wrap"> <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3">
<div class="md:mx-8 my-4 w-full lg:w-auto" v-for="post in posts"> <Post
<Post v-for="post in posts"
:title="post.title.code" :title="post.title.code"
:cover="post.cover.file_name" :cover="post.cover.file_name"
:description="post.description.code" :description="post.description.code"
:date="post.date" :date="post.date"
:slug="post.slug" :slug="post.slug"
:tags="post.tags" :tags="post.tags"
:reading_time="post.reading_time" :reading_time="post.reading_time"
/> />
</div>
</div> </div>
<!--<div class="flex w-full justify-center mb-8"> <!--<div class="flex w-full justify-center mb-8">
<Button <Button
@@ -31,7 +30,6 @@
<script lang="ts"> <script lang="ts">
import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api"; import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
import {Post} from "~/types/types";
export default defineComponent({ export default defineComponent({
name: "blog", name: "blog",
@@ -50,7 +48,6 @@ export default defineComponent({
} }
}) })
if (response.status === 200) { if (response.status === 200) {
console.log(response.data.posts)
return response.data.posts return response.data.posts
} else { } else {
app.error({statusCode: 500}) app.error({statusCode: 500})

23
src/pages/projects.vue
View File

@@ -2,19 +2,18 @@
<main v-if="projects" class="flex flex-col items-center px-4 xl:px-32"> <main v-if="projects" class="flex flex-col items-center px-4 xl:px-32">
<PageTitle title="part.projects" /> <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> <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"> <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">{{ $t('projects.description') }}</h1> <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="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="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3">
<div class="m-4" v-for="project in projects"> <Project
<Project v-for="project in projects"
:title="project.name" :title="project.name"
:cover="project.cover.file_name" :cover="project.cover.file_name"
:description="project.description.code" :description="project.description.code"
:tags="project.tags" :tags="project.tags"
:url="project.url" :url="project.url"
/> />
</div>
</div> </div>
</div> </div>
</div> </div>