studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

start dynamizing inspirations page

Browse source
This commit is contained in:
isUnknown 2024-09-10 10:50:51 +02:00
parent e27fab3553
commit 0afb0dfe54
18 changed files with 346 additions and 488 deletions
Download patch file Download diff file Expand all files Collapse all files

10
public/content/inspirations/1_shape-of-the-nature/0c41d3266e9ce2872f30608cceb28239.png.txt
View file

@ -1 +1,9 @@
Uuid: 8gktgKHbmGy6d0D0
Description:
----
Uuid: jcUwhcMYZhq0Z2FH
----
Template: inspiration

10
public/content/inspirations/1_shape-of-the-nature/20878a95a67b25e122365f351f1ec1a7.jpg.txt
View file

@ -1 +1,9 @@
Uuid: 6NMXDIJhPFqVBDxh
Description:
----
Uuid: T5h8TnsACjexZYzU
----
Template: inspiration

10
public/content/inspirations/1_shape-of-the-nature/22f8779f680ed826a2d0a1d2af6018c9.jpg.txt
View file

@ -1 +1,9 @@
Uuid: hRTU56zeei1izwcn
Description:
----
Uuid: VxCP0xeDpH2Zr9hp
----
Template: inspiration

10
public/content/inspirations/1_shape-of-the-nature/37a038883c87973036232aa0e43f6da2.png.txt
View file

@ -1 +1,9 @@
Uuid: uJNao2qaV2eOb3y6
Description:
----
Uuid: Yvz6XN50gGoDSPCD
----
Template: inspiration

10
public/content/inspirations/1_shape-of-the-nature/6b0228aa62a396728a25bb8991a49392.jpg.txt
View file

@ -1 +1,9 @@
Uuid: G3eSLBv8wAZFnAuA
Description:
----
Uuid: oCNBIYQ7JDKZwtVh
----
Template: inspiration

17
public/content/inspirations/1_shape-of-the-nature/d82f18573c439d6edd434ffca62471a7.png.txt
View file

@ -1 +1,16 @@
Uuid: qIw3y37lA4Ruc8ck
Favoriteforclients:
- page://G418qZ4ABsoWFx4i
- page://PweFYnBx27eMZ2mr
----
Description:
----
Uuid: 2I3StgO6GTqp6vxE
----
Template: inspiration

14
public/content/inspirations/1_shape-of-the-nature/inspiration.txt
View file

@ -6,7 +6,7 @@ Cover: - file://VFplsUHCVGZxocwC
----
Date: 2024-04-01
Date: 2024-04-24
----
@ -20,12 +20,12 @@ Description: Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
Media:
- file://8gktgKHbmGy6d0D0
- file://G3eSLBv8wAZFnAuA
- file://hRTU56zeei1izwcn
- file://uJNao2qaV2eOb3y6
- file://6NMXDIJhPFqVBDxh
- file://qIw3y37lA4Ruc8ck
- file://2I3StgO6GTqp6vxE
- file://T5h8TnsACjexZYzU
- file://Yvz6XN50gGoDSPCD
- file://VxCP0xeDpH2Zr9hp
- file://oCNBIYQ7JDKZwtVh
- file://jcUwhcMYZhq0Z2FH
----

12
public/site/blueprints/files/inspiration.yml Normal file
View file

@ -0,0 +1,12 @@
title: Inspiration
accept:
mime: image/*
type: image
fields:
favoriteForClients:
label: |
Dans les favoris des clients :
type: pages
query: page('clients').children

1
public/site/blueprints/pages/inspiration.yml
View file

@ -42,4 +42,5 @@ tabs:
layout: cards
size: large
required: true
uploads: inspiration
files: tabs/files

8
public/site/blueprints/users/client.yml
View file

@ -1,4 +1,10 @@
title: Client
title: Clients
permissions:
access:
panel: false
fields:
client:
type: pages
max: 1
query: page('clients').children

12
public/site/templates/inspirations.json.php
View file

@ -1,16 +1,22 @@
<?php
$children = $page->children()->map(function ($child) {
$collections = $page->children()->map(function ($child) {
return [
'title' => $child->title()->value(),
'url' => $child->url(),
'modified' => $child->modified('Y-m-d'),
'media' => $child->media()->toFiles()
'status' => $child->status(),
'cover' => $child->cover()->toFile()->url(),
'media' => $child->media()->toFiles()->map(function ($file) {
return [
'url' => $file->url()
];
})->values()
];
})->values();
$specificData = [
"children" => $children,
"collections" => $collections
];
$data = array_merge($genericData, $specificData);

395
src/components/Inspirations.vue
View file

@ -1,395 +0,0 @@
<template>
<h2 id="tabslist" class="sr-only">Inspirations</h2>
<!-- 2 Tabs:
label: "Les Inspirations", id: "inspirations", count: false
label: "Mes Favoris", id: "favorites", count: true
<template v-if="data">
<Tabs :projects="data.children" @update:currentTab="changeTab" />
<TabPanel :projects="data.children" :currentTab="currentTab" />
</template>
-->
<div
id="inspiration-select"
class="flex"
style="
--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"
>
<label for="inspirations">Choisir une inspiration</label>
<select id="inspirations">
<option value="shape-of-nature" selected>Shape of Nature</option>
<option value="inspiration-slug">Inspiration Title</option>
</select>
</div>
<!-- TabPanel -->
<section class="inspiration">
<header
class="flex | text-center"
style="
--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"
>
<!-- $inspiration->cover()->url() -->
<h2 class="inspiration__title | font-serif | text-lg | new">
Shape of Nature
</h2>
<!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
<time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
>Avril 2024</time
>
<!-- $inspiration->date() -->
<p class="inspiration__description">
Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
consequat porta mauris hendrerit malesuada viverra turpis.
</p>
<!-- $inspiration->description() -->
</header>
<div class="grid masonry">
<figure class="flex" style="--rows: 2">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="false"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 3">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="true"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 2">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="false"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 3">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="true"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 2">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="false"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 3">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="true"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 2">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="false"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
<figure class="flex" style="--rows: 3">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="true"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img
src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
alt=""
/>
</figure>
</div>
</section>
</template>
<script setup>
import Tabs from "./Tabs.vue";
import TabPanel from "./TabPanel.vue";
import { useApiStore } from "../stores/api";
import { ref } from "vue";
const data = ref(null);
const currentTab = ref("current");
const api = useApiStore();
api.fetchPageData("inspirations").then((res) => (data.value = res));
</script>
<style scoped>
/* Select */
#inspiration-select {
--direction: column;
--items: flex-start;
--wrap: no-wrap;
--row-gap: 0;
position: relative;
float: right;
background: var(--color-background);
border-radius: var(--rounded-full);
height: 3.75rem;
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
margin-bottom: var(--space-16);
}
#inspiration-select::before {
content: "";
position: absolute;
left: var(--space-8);
width: 2.75rem;
height: 2.75rem;
border-radius: var(--rounded-full);
background-image: var(--image);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* Inspiration */
.inspiration > header {
--direction: column;
--justify: center;
--row-gap: var(--space-8);
clear: both;
height: 15rem; /* 240px */
background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
var(--image);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-bottom: var(--space-16);
border-radius: var(--rounded-lg);
}
.inspiration__title.new::after {
content: "Nouveauté";
display: inline-block;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
border-radius: var(--rounded-sm);
background-color: var(--color-primary-10);
color: var(--color-primary-100);
margin-left: var(--space-16);
padding: var(--space-4) var(--space-12);
transform: translateY(-0.1em);
}
.inspiration__date,
.inspiration__description {
color: var(--color-grey-700);
}
/* Masonry */
.masonry {
--gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(var(--min, 20rem), 1fr));
grid-auto-rows: 12rem;
grid-auto-flow: dense;
}
.masonry > * {
position: relative;
grid-row: span var(--rows);
width: 100%;
height: 100%;
margin: 0;
border-radius: var(--rounded-lg);
overflow: hidden;
}
.masonry img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Favorite button */
.favorite {
position: absolute;
top: 0;
right: 0;
margin: var(--space-8);
padding: var(--space-8);
color: var(--color-grey-400);
}
.favorite[aria-pressed="true"] {
color: var(--color-brand);
}
</style>

58
src/components/Projects.vue
View file

@ -1,23 +1,41 @@
<template>
<h2 id="tabslist" class="sr-only">Projets</h2>
<template v-if="projects.length > 0">
<Tabs
:currentProjects="currentProjects"
:archivedProjects="archivedProjects"
@update:currentTab="changeTab"
/>
<TabPanel
:currentProjects="currentProjects"
:archivedProjects="archivedProjects"
:currentTab="currentTab"
/>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<section
v-if="currentTab === 'currentProjects'"
id="projets-en-cours"
role="tabpanel"
tabindex="0"
aria-labelledby="projets-en-cours-label"
class="flow"
>
<Project
v-for="project in currentProjects"
:key="project.id"
:project="project"
/>
</section>
<section
v-else
id="projets-archives"
role="tabpanel"
tabindex="0"
aria-labelledby="projet-archives-label"
>
<Project
v-for="project in archivedProjects"
:key="project.id"
:project="project"
/>
</section>
</template>
</template>
<script setup>
import Tabs from "./Tabs.vue";
import TabPanel from "./TabPanel.vue";
import Project from "./Project.vue";
import { useProjectsStore } from "../stores/projects";
import { ref } from "vue";
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
const { projects, currentProjects, archivedProjects } = storeToRefs(
@ -25,6 +43,22 @@ const { projects, currentProjects, archivedProjects } = storeToRefs(
);
const currentTab = ref("currentProjects");
const tabs = computed(() => {
return [
{
label: "Projets en cours",
id: "currentProjects",
count: currentProjects.value.length,
isActive: true,
},
{
label: "Projets archivés",
id: "archivedProjects",
count: archivedProjects.value.length,
isActive: false,
},
];
});
function changeTab(newValue) {
currentTab.value = newValue;

40
src/components/TabPanel.vue
View file

@ -1,40 +0,0 @@
<template>
<!-- TODO: rendre dynamique id + aria-labelledby -->
<section
v-if="currentTab === 'currentProjects'"
id="projets-en-cours"
role="tabpanel"
tabindex="0"
aria-labelledby="projets-en-cours-label"
class="flow"
>
<Project
v-for="project in currentProjects"
:key="project.id"
:project="project"
/>
</section>
<section
v-else
id="projets-archives"
role="tabpanel"
tabindex="0"
aria-labelledby="projet-archives-label"
>
<Project
v-for="project in archivedProjects"
:key="project.id"
:project="project"
/>
</section>
</template>
<script setup>
import Project from "./Project.vue";
const { currentTab, currentProjects, archivedProjects } = defineProps({
currentProjects: Array,
archivedProjects: Array,
currentTab: String,
});
</script>

22
src/components/Tabs.vue
View file

@ -22,26 +22,8 @@
import { computed } from "vue";
import slugify from "slugify";
const { currentProjects, archivedProjects } = defineProps({
currentProjects: Array,
archivedProjects: Array,
});
const tabs = computed(() => {
return [
{
label: "Projets en cours",
id: "currentProjects",
count: currentProjects.length,
isActive: true,
},
{
label: "Projets archivés",
id: "archivedProjects",
count: archivedProjects.length,
isActive: false,
},
];
const { tabs } = defineProps({
tabs: Array,
});
const emit = defineEmits(["update:currentTab"]);

57
src/components/inspirations/Header.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<header
class="flex | text-center"
style="
--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"
>
<!-- $inspiration->cover()->url() -->
<h2 class="inspiration__title | font-serif | text-lg | new">
Shape of Nature
</h2>
<!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
<time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
>Avril 2024</time
>
<!-- $inspiration->date() -->
<p class="inspiration__description">
Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
consequat porta mauris hendrerit malesuada viverra turpis.
</p>
<!-- $inspiration->description() -->
</header>
</template>
<style scoped>
.inspiration > header {
--direction: column;
--justify: center;
--row-gap: var(--space-8);
clear: both;
height: 15rem; /* 240px */
background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
var(--image);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-bottom: var(--space-16);
border-radius: var(--rounded-lg);
}
.inspiration__title.new::after {
content: "Nouveauté";
display: inline-block;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
border-radius: var(--rounded-sm);
background-color: var(--color-primary-10);
color: var(--color-primary-100);
margin-left: var(--space-16);
padding: var(--space-4) var(--space-12);
transform: translateY(-0.1em);
}
.inspiration__date,
.inspiration__description {
color: var(--color-grey-700);
}
</style>

43
src/components/inspirations/Selector.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div
id="inspiration-select"
class="flex"
style="
--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
"
>
<label for="inspirations">Choisir une inspiration</label>
<select id="inspirations">
<option value="shape-of-nature" selected>Shape of Nature</option>
<option value="inspiration-slug">Inspiration Title</option>
</select>
</div>
</template>
<style scoped>
#inspiration-select {
--direction: column;
--items: flex-start;
--wrap: no-wrap;
--row-gap: 0;
position: relative;
float: right;
background: var(--color-background);
border-radius: var(--rounded-full);
height: 3.75rem;
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
margin-bottom: var(--space-16);
}
#inspiration-select::before {
content: "";
position: absolute;
left: var(--space-8);
width: 2.75rem;
height: 2.75rem;
border-radius: var(--rounded-full);
background-image: var(--image);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>

105
src/views/Inspirations.vue
View file

@ -3,20 +3,117 @@
<div class="with-sidebar">
<Menu />
<main>
<Inspirations />
<h2 id="tabslist" class="sr-only">Inspirations</h2>
<!-- 2 Tabs:
label: "Les Inspirations", id: "inspirations", count: false
label: "Mes Favoris", id: "favorites", count: true
<template v-if="data">
<Tabs :projects="data.children" @update:currentTab="changeTab" />
<TabPanel :projects="data.children" :currentTab="currentTab" />
</template>
-->
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<Selector />
<!-- TabPanel -->
<section class="inspiration">
<Header />
<div class="grid masonry">
<template v-for="(item, index) in currentCollection.media">
<figure class="flex" :style="'--rows: ' + (index % 2 ? 2 : 3)">
<button
class="favorite"
aria-label="Ajouter aux favoris"
aria-pressed="false"
onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
>
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
fill="currentColor"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<img :src="item.url" alt="" />
</figure>
</template>
</div>
</section>
</main>
</div>
</template>
<script setup>
import Menu from "../components/Menu.vue";
import Inspirations from "../components/Inspirations.vue";
import Selector from "../components/inspirations/Selector.vue";
import Header from "../components/inspirations/Header.vue";
import Tabs from "../components/Tabs.vue";
import { ref, computed } from "vue";
const { data } = defineProps({
data: Object,
});
// ....
const currentTab = ref("all");
const tabs = computed(() => {
return [
{
label: "Les inspirations",
id: "all",
count: currentCollection.media.length,
isActive: true,
},
];
});
const currentCollection = data.collections[0];
</script>
<style scoped></style>
<style scoped>
/* Masonry */
.masonry {
--gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(var(--min, 20rem), 1fr));
grid-auto-rows: 12rem;
grid-auto-flow: dense;
}
.masonry > * {
position: relative;
grid-row: span var(--rows);
width: 100%;
height: 100%;
margin: 0;
border-radius: var(--rounded-lg);
overflow: hidden;
}
.masonry img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Favorite button */
.favorite {
position: absolute;
top: 0;
right: 0;
margin: var(--space-8);
padding: var(--space-8);
color: var(--color-grey-400);
}
.favorite[aria-pressed="true"] {
color: var(--color-brand);
}
</style>