first commit
This commit is contained in:
Nico
commit
e1362c0d36
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
75
README.md
Normal file
75
README.md
Normal file
@ -0,0 +1,75 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
130
app.vue
Normal file
130
app.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
// ITEM FETCHING //
|
||||
// set initial sort order
|
||||
const sortVariable = ref(["reserved", "date_created"]);
|
||||
const reservedVariable = ref(true);
|
||||
// fetch data
|
||||
const { homepage } = await GqlGetHomepage();
|
||||
const { data, refresh } = await useAsyncData("gifts", () =>
|
||||
GqlGifts({ sort: sortVariable.value })
|
||||
);
|
||||
// update sort param
|
||||
function sortList(param) {
|
||||
sortVariable.value = param;
|
||||
// refetch query (expose token or access pubic data)
|
||||
refresh();
|
||||
}
|
||||
// filter out already reserved items
|
||||
const filteredList = computed(() => {
|
||||
const list = data;
|
||||
return list;
|
||||
});
|
||||
|
||||
// CHANGE DISPLAY //
|
||||
const listDisplay = ref(false);
|
||||
function toggleDisplay() {
|
||||
listDisplay.value = !listDisplay.value;
|
||||
}
|
||||
|
||||
// ITEM RESERVATION //
|
||||
// no error to start
|
||||
const errorStatus = ref(false);
|
||||
const statusMessage = ref("");
|
||||
// update the chosen item's reservation status
|
||||
async function runMutation(payload) {
|
||||
try {
|
||||
const result = await GqlUpdateItem({
|
||||
id: payload.id,
|
||||
reserved: payload.reserve,
|
||||
name: payload.name,
|
||||
});
|
||||
} catch (error) {
|
||||
// if error, set the status to true
|
||||
console.log("---ERREUR---", error);
|
||||
errorStatus.value = true;
|
||||
} finally {
|
||||
if (errorStatus.value) {
|
||||
// if error is true, show an error notice
|
||||
statusMessage.value = "Une erreur est survenue… ¯\\_(ツ)_/¯";
|
||||
// cleanup the error status
|
||||
errorStatus.value = false;
|
||||
} else {
|
||||
// if all is well, show a success notice
|
||||
statusMessage.value = `C'est noté merci beaucoup ${payload.name} 🥰`;
|
||||
setTimeout(() => {
|
||||
refresh();
|
||||
}, 3500);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="flow">
|
||||
<h1>Liste de naissance</h1>
|
||||
<section class="intro sidebar--reverse" data-direction="rtl">
|
||||
<article v-html="homepage.content" class="editorial" />
|
||||
<img
|
||||
src="~/assets/images/jungle.jpg"
|
||||
class="intro__image"
|
||||
width="400"
|
||||
height="600"
|
||||
alt=""
|
||||
/>
|
||||
</section>
|
||||
<hr />
|
||||
<SortFilter :onSort="sortList" :onDisplay="toggleDisplay" />
|
||||
<hr />
|
||||
<ul
|
||||
class="gifts gifts--grid"
|
||||
:class="{ 'gifts--list': listDisplay }"
|
||||
role="list"
|
||||
>
|
||||
<li v-for="gift of data?.gifts" :key="gift.id" class="gift-item">
|
||||
<GiftCard
|
||||
:item="gift"
|
||||
:onReserved="runMutation"
|
||||
v-model:status-message="statusMessage"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
.intro {
|
||||
--sidebar-target-width: 400px;
|
||||
--sidebar-target-grow: 0;
|
||||
margin: var(--space-m-l) auto;
|
||||
max-inline-size: 90ch;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.intro__image {
|
||||
mix-blend-mode: multiply;
|
||||
filter: brightness(110%);
|
||||
height: 600px;
|
||||
width: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
hr {
|
||||
margin-block: var(--space-xs-s);
|
||||
border-bottom: 3px dotted var(--color-yellow-dark);
|
||||
}
|
||||
.gifts {
|
||||
display: grid;
|
||||
gap: var(--space-s-m);
|
||||
}
|
||||
.gifts--grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
|
||||
}
|
||||
.gifts--grid .gift-item > :deep(:first-child) {
|
||||
height: 100%;
|
||||
}
|
||||
.gifts--list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
</style>
|
||||
55
assets/css/compositions/sidebar.css
Normal file
55
assets/css/compositions/sidebar.css
Normal file
@ -0,0 +1,55 @@
|
||||
/*
|
||||
CUSTOM PROPERTIES AND CONFIGURATION
|
||||
--gutter (var(--space-size-1)): This defines the space
|
||||
between the sidebar and main content.
|
||||
|
||||
--sidebar-target-width (20rem): How large the sidebar should be
|
||||
|
||||
--sidebar-content-min-width(50%): The minimum size of the main content area
|
||||
|
||||
EXCEPTIONS
|
||||
.sidebar[data-direction='rtl']: flips the sidebar to be on the right
|
||||
*/
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gutter, var(--space-xs-s));
|
||||
}
|
||||
|
||||
.sidebar > :first-child {
|
||||
flex-basis: var(--sidebar-target-width, 20rem);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sidebar > :last-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-width: var(--sidebar-content-min-width, 50%);
|
||||
}
|
||||
|
||||
/*
|
||||
A flipped version where the sidebar is on the right
|
||||
*/
|
||||
.sidebar[data-direction="rtl"],
|
||||
.sidebar--reverse[data-direction="rtl"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* REVERSE sidebar on right*/
|
||||
|
||||
.sidebar--reverse {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gutter, var(--space-xs-s));
|
||||
}
|
||||
|
||||
.sidebar--reverse > :last-child {
|
||||
flex-basis: var(--sidebar-target-width, 20rem);
|
||||
flex-grow: var(--sidebar-target-grow, 1);
|
||||
}
|
||||
|
||||
.sidebar--reverse > :first-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-width: var(--sidebar-content-min-width, 50%);
|
||||
}
|
||||
122
assets/css/global/01-reset.css
Normal file
122
assets/css/global/01-reset.css
Normal file
@ -0,0 +1,122 @@
|
||||
/* RESET */
|
||||
* {
|
||||
/* Remove default margin on everything */
|
||||
margin: 0;
|
||||
/* Remove default padding on everything */
|
||||
padding: 0;
|
||||
/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
|
||||
line-height: calc(0.25rem + 1em + 0.25rem);
|
||||
}
|
||||
/* Use a more-intuitive box-sizing model on everything */
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
|
||||
*:where(:not(fieldset, progress, meter)) {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
background-origin: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
html {
|
||||
/* Allow percentage-based heights in the application */
|
||||
block-size: 100%;
|
||||
/* Making sure text size is only controlled by font-size */
|
||||
-webkit-text-size-adjust: none;
|
||||
/* Improve text rendering */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/* Smooth scrolling for users that don't prefer reduced motion */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
/* Allow percentage-based heights in the application */
|
||||
min-block-size: 100%;
|
||||
/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
|
||||
-webkit-marquee-increment: 0vw;
|
||||
}
|
||||
/* Improve media defaults */
|
||||
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
||||
display: block;
|
||||
}
|
||||
:where(img, svg, video) {
|
||||
block-size: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
/* Smaller line height for titles */
|
||||
:where(h1, h2, h3, h1 a, h2 a, h3 a) {
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* Avoid text overflows */
|
||||
:where(p, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
:where(ul, ol)[role="list"] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
/* Make it clear that interactive elements are interactive */
|
||||
:where(
|
||||
a[href],
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label[for],
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex]:not([tabindex*="-"])
|
||||
) {
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
:where(input[type="file"]) {
|
||||
cursor: auto;
|
||||
}
|
||||
:where(input[type="file"])::-webkit-file-upload-button,
|
||||
:where(input[type="file"])::file-selector-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Make sure users can't select button text */
|
||||
:where(
|
||||
button,
|
||||
button[type],
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"]
|
||||
),
|
||||
:where(input[type="file"])::-webkit-file-upload-button,
|
||||
:where(input[type="file"])::file-selector-button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
/* Disabled cursor for disabled buttons */
|
||||
:where(
|
||||
button,
|
||||
button[type],
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"]
|
||||
)[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* END RESET */
|
||||
35
assets/css/global/02-fonts.css
Normal file
35
assets/css/global/02-fonts.css
Normal file
@ -0,0 +1,35 @@
|
||||
@font-face {
|
||||
font-family: "wotfard";
|
||||
src: url("~/assets/fonts/wotfard/wotfard-medium-fr.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "wotfard";
|
||||
src: url("~/assets/fonts/wotfard/wotfard-semibold-fr.woff2") format("woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "wotfard";
|
||||
src: url("~/assets/fonts/wotfard/wotfard-regular-fr.woff2") format("woff2");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/*
|
||||
* reduces Cumulative Layout Shift
|
||||
* https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros/
|
||||
*/
|
||||
@font-face {
|
||||
font-family: "ArialReplace";
|
||||
src: local("Arial");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
size-adjust: 94%;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
48
assets/css/global/03-variables.css
Normal file
48
assets/css/global/03-variables.css
Normal file
@ -0,0 +1,48 @@
|
||||
:root {
|
||||
/* font sizes */
|
||||
--size--2: clamp(0.79rem, calc(0.76rem + 0.16vw), 0.89rem);
|
||||
--size--1: clamp(0.89rem, calc(0.85rem + 0.19vw), 1rem);
|
||||
--size-0: clamp(1rem, calc(0.96rem + 0.21vw), 1.13rem);
|
||||
--size-1: clamp(1.13rem, calc(1.08rem + 0.23vw), 1.27rem);
|
||||
--size-2: clamp(1.27rem, calc(1.21rem + 0.26vw), 1.42rem);
|
||||
--size-3: clamp(1.42rem, calc(1.36rem + 0.3vw), 1.6rem);
|
||||
--size-4: clamp(1.6rem, calc(1.54rem + 0.33vw), 1.8rem);
|
||||
--size-5: clamp(1.8rem, calc(1.73rem + 0.38vw), 2.03rem);
|
||||
|
||||
/* spaces */
|
||||
--space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
|
||||
--space-2xs: clamp(0.56rem, calc(0.53rem + 0.14vw), 0.63rem);
|
||||
--space-xs: clamp(0.88rem, calc(0.85rem + 0.14vw), 0.94rem);
|
||||
--space-s: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
|
||||
--space-m: clamp(1.69rem, calc(1.6rem + 0.42vw), 1.88rem);
|
||||
--space-l: clamp(2.25rem, calc(2.14rem + 0.56vw), 2.5rem);
|
||||
--space-xl: clamp(3.38rem, calc(3.21rem + 0.83vw), 3.75rem);
|
||||
--space-2xl: clamp(4.5rem, calc(4.28rem + 1.11vw), 5rem);
|
||||
--space-3xl: clamp(6.75rem, calc(6.42rem + 1.67vw), 7.5rem);
|
||||
|
||||
/* One-up pairs */
|
||||
--space-3xs-2xs: clamp(0.31rem, calc(0.17rem + 0.69vw), 0.63rem);
|
||||
--space-2xs-xs: clamp(0.56rem, calc(0.4rem + 0.83vw), 0.94rem);
|
||||
--space-xs-s: clamp(0.88rem, calc(0.71rem + 0.83vw), 1.25rem);
|
||||
--space-s-m: clamp(1.13rem, calc(0.79rem + 1.67vw), 1.88rem);
|
||||
--space-m-l: clamp(1.69rem, calc(1.33rem + 1.81vw), 2.5rem);
|
||||
--space-l-xl: clamp(2.25rem, calc(1.58rem + 3.33vw), 3.75rem);
|
||||
--space-xl-2xl: clamp(3.38rem, calc(2.65rem + 3.61vw), 5rem);
|
||||
--space-2xl-3xl: clamp(4.5rem, calc(3.17rem + 6.67vw), 7.5rem);
|
||||
|
||||
/* multi steps */
|
||||
--space-3xs-s: clamp(0.31rem, calc(-0.1rem + 2.08vw), 1.25rem);
|
||||
--space-2xs-s: clamp(0.56rem, calc(0.26rem + 1.53vw), 1.25rem);
|
||||
--space-2xs-m: clamp(0.56rem, calc(-0.02rem + 2.92vw), 1.88rem);
|
||||
--space-xs-m: clamp(0.88rem, calc(0.43rem + 2.22vw), 1.88rem);
|
||||
--space-xs-l: clamp(0.88rem, calc(0.15rem + 3.61vw), 2.5rem);
|
||||
--space-s-l: clamp(1.13rem, calc(0.51rem + 3.06vw), 2.5rem);
|
||||
--space-s-xl: clamp(1.13rem, calc(-0.04rem + 5.83vw), 3.75rem);
|
||||
--space-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem);
|
||||
|
||||
/* COLORS */
|
||||
--color-yellow-light: hsl(20, 56%, 95%);
|
||||
--color-yellow-dark: hsl(353, 13%, 27%);
|
||||
--color-green-light: hsl(36, 95%, 66%);
|
||||
--color-green-dark: hsl(145, 59%, 11%);
|
||||
}
|
||||
45
assets/css/global/04-base.css
Normal file
45
assets/css/global/04-base.css
Normal file
@ -0,0 +1,45 @@
|
||||
body {
|
||||
margin: 0 auto;
|
||||
padding: var(--space-s-l) var(--space-xs-s);
|
||||
max-inline-size: 80rem;
|
||||
font-family: "wotfard", "ArialReplace", Arial, sans-serif;
|
||||
font-size: var(--size-0);
|
||||
font-weight: normal;
|
||||
color: var(--color-green-dark);
|
||||
background-color: var(--color-yellow-light);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: var(--size-4);
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: var(--size-2);
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: var(--size-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flow > * + * {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
.editorial > * + * {
|
||||
margin-block-start: var(--space-2xs);
|
||||
}
|
||||
.editorial h2 + * {
|
||||
margin-block-start: var(--space-xs);
|
||||
}
|
||||
7
assets/css/style.css
Normal file
7
assets/css/style.css
Normal file
@ -0,0 +1,7 @@
|
||||
@import-glob './global/*.css';
|
||||
|
||||
/* @import-glob './blocks/*.css'; */
|
||||
|
||||
@import-glob './compositions/*.css';
|
||||
|
||||
/* @import-glob './utilities/*.css'; */
|
||||
BIN
assets/fonts/wotfard/wotfard-medium-fr.woff2
Normal file
BIN
assets/fonts/wotfard/wotfard-medium-fr.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/wotfard/wotfard-regular-fr.woff2
Normal file
BIN
assets/fonts/wotfard/wotfard-regular-fr.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/wotfard/wotfard-semibold-fr.woff2
Normal file
BIN
assets/fonts/wotfard/wotfard-semibold-fr.woff2
Normal file
Binary file not shown.
BIN
assets/images/jungle.jpg
Normal file
BIN
assets/images/jungle.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
288
components/GiftCard.vue
Normal file
288
components/GiftCard.vue
Normal file
@ -0,0 +1,288 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
item: { type: Object, default: () => {} },
|
||||
statusMessage: { type: String, default: "" },
|
||||
});
|
||||
|
||||
let showDetails = ref(true);
|
||||
|
||||
const formError = ref("");
|
||||
const isFormVisible = ref(false);
|
||||
function showReservation() {
|
||||
isFormVisible.value = !isFormVisible.value;
|
||||
}
|
||||
|
||||
const reserved = ref(false);
|
||||
const fromName = ref("");
|
||||
const emit = defineEmits(["reserved"]);
|
||||
|
||||
const sendReservation = (id, reserve, name) => {
|
||||
console.log(fromName);
|
||||
if (reserved.value && fromName.value.length > 1) {
|
||||
emit("reserved", { id, reserve, name });
|
||||
formError.value = "";
|
||||
} else {
|
||||
formError.value = "Veuillez remplir le formulaire";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="gift flow">
|
||||
<div class="gift__info">
|
||||
<h2 class="h3">
|
||||
<NuxtLink :to="item.url">{{ item.name }}</NuxtLink>
|
||||
</h2>
|
||||
<div class="gift__status">
|
||||
<p v-if="!item.reserved">🎉 Ce cadeau est disponible !</p>
|
||||
<p v-else>
|
||||
Ce cadeau est déjà réservé par
|
||||
<span class="from-name">{{ item.from || "¯\_(ツ)_/¯" }}</span> 🤗
|
||||
</p>
|
||||
</div>
|
||||
<p v-if="!item.reserved && item.prix" class="h2 gift__price">
|
||||
{{ item.prix }} €
|
||||
</p>
|
||||
<button v-if="!item.reserved" @click="showReservation" class="btn">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!item.reserved" class="gift__actions">
|
||||
<div v-if="isFormVisible" class="flow">
|
||||
<form>
|
||||
<div class="field form__confirmation">
|
||||
<label :for="`name-${item.id}`">Votre nom (requis)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
:id="`name-${item.id}`"
|
||||
placeholder="Jeanne"
|
||||
v-model="fromName"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="field form__reservation">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="check"
|
||||
:id="`check-${item.id}`"
|
||||
v-model="reserved"
|
||||
required
|
||||
/>
|
||||
<label :for="`check-${item.id}`">Confirmer la réservation</label>
|
||||
</div>
|
||||
<button
|
||||
@click.prevent="sendReservation(item.id, reserved, fromName)"
|
||||
:disabled="reserved && fromName.length > 1 ? false : true"
|
||||
>
|
||||
Valider le cadeau
|
||||
</button>
|
||||
</form>
|
||||
<div
|
||||
v-if="statusMessage || formError"
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
class="form__errors"
|
||||
>
|
||||
<p v-if="statusMessage">
|
||||
{{ statusMessage }}
|
||||
</p>
|
||||
<p v-if="formError">
|
||||
{{ formError }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<details
|
||||
v-if="!item.reserved"
|
||||
class="flow"
|
||||
:open="showDetails"
|
||||
@click.prevent="showDetails = !showDetails"
|
||||
>
|
||||
<summary>
|
||||
<span v-if="showDetails">Masquer les détails</span>
|
||||
<span v-else>Voir les détails</span>
|
||||
</summary>
|
||||
<div class="gift__details">
|
||||
<NuxtPicture
|
||||
v-if="item.photo"
|
||||
format="avif,webp"
|
||||
class="gift__photo"
|
||||
:src="`http://localhost:8055/assets/${item.photo.id}?width=200&height=200&fit=inside`"
|
||||
loading="lazy"
|
||||
width="200"
|
||||
height="200"
|
||||
fit="inside"
|
||||
alt=""
|
||||
/>
|
||||
<div class="gift__buying">
|
||||
<span v-if="item.used" class="gift__used">Occasion ok !</span>
|
||||
<p
|
||||
v-if="!item.reserved && item.description"
|
||||
class="gift__description"
|
||||
>
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gift {
|
||||
container-type: inline-size;
|
||||
container-name: card;
|
||||
border-radius: 8px;
|
||||
padding: var(--space-xs-s);
|
||||
box-shadow: 0 0 8px 0 hsla(24, 91%, 35%, 0.2);
|
||||
background-color: white;
|
||||
}
|
||||
.gift__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-s-m);
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.gift__status {
|
||||
color: var(--color-yellow-dark);
|
||||
}
|
||||
details {
|
||||
margin-block-start: var(--space-xs);
|
||||
text-align: center;
|
||||
}
|
||||
details summary {
|
||||
font-size: var(--size--1);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-yellow-dark);
|
||||
}
|
||||
.gift__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gift__photo {
|
||||
align-self: center;
|
||||
}
|
||||
.gift__buying {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
}
|
||||
.gift__price {
|
||||
margin-block: var(--space-3xs);
|
||||
padding: var(--space-2xs);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
align-self: center;
|
||||
border-block: 2px solid var(--color-green-dark);
|
||||
}
|
||||
.gift__used {
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
font-size: var(--size--1);
|
||||
background-color: var(--color-green-light);
|
||||
border-radius: 40px;
|
||||
}
|
||||
.gift__description {
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
font-size: var(--size-0);
|
||||
border-radius: 8px;
|
||||
color: var(--color-green-light);
|
||||
background-color: var(--color-green-dark);
|
||||
}
|
||||
|
||||
.from-name {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-block-start: auto;
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
position: relative;
|
||||
align-self: center;
|
||||
font-size: var(--size-0);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-green-light);
|
||||
background-color: white;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.btn:focus-within,
|
||||
.btn:hover {
|
||||
background-color: var(--color-yellow-light);
|
||||
}
|
||||
|
||||
form,
|
||||
.form__confirmation {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
.form__reservation label {
|
||||
margin-inline-start: var(--space-3xs);
|
||||
}
|
||||
.form__confirmation input {
|
||||
padding: var(--space-3xs) var(--space-2xs);
|
||||
font-size: var(--size--1);
|
||||
font-weight: bold;
|
||||
border: 1px solid var(--color-green-dark);
|
||||
}
|
||||
form button {
|
||||
padding: var(--space-2xs) var(--space-2xs);
|
||||
font-size: var(--size--1);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
form button:not([disabled]) {
|
||||
color: var(--color-yellow-light);
|
||||
border-color: var(--color-green-dark);
|
||||
background-color: var(--color-green-dark);
|
||||
}
|
||||
form button:not([disabled]):is(:hover, :focus) {
|
||||
color: var(--color-green-dark);
|
||||
background-color: var(--color-yellow-light);
|
||||
}
|
||||
.form__errors {
|
||||
font-size: var(--size--1);
|
||||
}
|
||||
|
||||
@container card (min-inline-size: 60rem) {
|
||||
.gift__info {
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
row-gap: var(--space-2xs);
|
||||
}
|
||||
.gift__price {
|
||||
margin: 0;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
.gift__actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: var(--space-s-m);
|
||||
align-content: end;
|
||||
}
|
||||
details {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
.gift__details {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.gift__description {
|
||||
text-align: left;
|
||||
}
|
||||
.gift__buying {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
components/SortFilter.vue
Normal file
47
components/SortFilter.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
const selectedSort = ref("");
|
||||
|
||||
const emit = defineEmits(["sort", "display"]);
|
||||
const sortData = (sortParam) => {
|
||||
emit("sort", sortParam);
|
||||
};
|
||||
const changeDisplay = () => {
|
||||
emit("display");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form>
|
||||
<div>
|
||||
<label for="sort">Trier par : </label>
|
||||
<select
|
||||
name="sort"
|
||||
id="sort"
|
||||
v-model="selectedSort"
|
||||
@change="sortData(selectedSort)"
|
||||
>
|
||||
<option disabled value="">Sélectionnez une option</option>
|
||||
<option value="prix">Prix croissant</option>
|
||||
<option value="-prix">Prix décroissant</option>
|
||||
<option :value="['reserved', 'prix']">Non réservés</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<input type="checkbox" name="list" id="list" @change="changeDisplay" />
|
||||
<label for="list"> Affichage en liste</label>
|
||||
</div> -->
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
}
|
||||
select {
|
||||
padding: var(--space-2xs);
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
37
nuxt.config.ts
Normal file
37
nuxt.config.ts
Normal file
@ -0,0 +1,37 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
head: {
|
||||
meta: [
|
||||
{ charset: "utf-8" },
|
||||
{ name: "viewport", content: "width=device-width, initial-scale=1" },
|
||||
{
|
||||
name: "robots",
|
||||
content: "noindex,nofollow",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
css: ["@/assets/css/style.css"],
|
||||
modules: ["nuxt-graphql-client", "@nuxt/image"],
|
||||
|
||||
runtimeConfig: { public: { GQL_HOST: "http://0.0.0.0:8055/graphql" } },
|
||||
|
||||
image: {
|
||||
dir: "assets/images",
|
||||
domains: ["http://0.0.0.0:8055"],
|
||||
alias: { directus: "http://0.0.0.0:8055/assets/" },
|
||||
presets: {
|
||||
gift: { modifiers: { width: 200, height: 200, fit: "contain" } },
|
||||
},
|
||||
},
|
||||
postcss: {
|
||||
plugins: {
|
||||
"postcss-import-ext-glob": {},
|
||||
},
|
||||
},
|
||||
telemetry: false,
|
||||
typescript: {
|
||||
shim: false,
|
||||
},
|
||||
});
|
||||
12129
package-lock.json
generated
Normal file
12129
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/devtools": "latest",
|
||||
"@nuxt/image": "npm:@nuxt/image-edge@latest",
|
||||
"nuxt": "^3.8.0",
|
||||
"postcss-import-ext-glob": "^2.1.1",
|
||||
"vue": "^3.3.7",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"nuxt-graphql-client": "^0.2.31"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/jungle.jpg
Normal file
BIN
public/jungle.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
22
queries/gifts.gql
Normal file
22
queries/gifts.gql
Normal file
@ -0,0 +1,22 @@
|
||||
query gifts($sort: [String!]) {
|
||||
gifts(filter: { status: { _eq: "published" } }, sort: $sort) {
|
||||
status
|
||||
id
|
||||
name
|
||||
url
|
||||
prix
|
||||
used
|
||||
description
|
||||
from
|
||||
reserved
|
||||
photo {
|
||||
id
|
||||
filename_disk
|
||||
}
|
||||
}
|
||||
}
|
||||
mutation UpdateItem($id: ID!, $reserved: Boolean!, $name: String!) {
|
||||
update_gifts_item(id: $id, data: { reserved: $reserved, from: $name }) {
|
||||
id
|
||||
}
|
||||
}
|
||||
6
queries/singles/homepage.gql
Normal file
6
queries/singles/homepage.gql
Normal file
@ -0,0 +1,6 @@
|
||||
query getHomepage {
|
||||
homepage {
|
||||
date_updated
|
||||
content
|
||||
}
|
||||
}
|
||||
3
server/tsconfig.json
Normal file
3
server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user