arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-23 00:15:02 +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

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

@@ -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})

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">
<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>