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

Improve global layout structure and fix various styling issues #16

Browse source
This commit is contained in:
Timothée Goguely 2024-11-27 13:51:59 +01:00
parent 059e373a4a
commit b67896a4e9
11 changed files with 68 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/assets/css/src/1.0.global.css
View file

@ -40,6 +40,18 @@ body {
/* Main */
main {
position: relative;
min-height: calc(100vh - var(--gutter) * 2);
}
main > header {
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
/* Section */
section {
width: 100%;
}

1
src/assets/css/src/2.blocks.button.css
View file

@ -9,6 +9,7 @@
justify-content: center;
align-items: center;
gap: var(--space-8);
flex-shrink: 0;
padding: .6em var(--space-16) .75em;
max-height: 2.5rem;
text-align: center;

5
src/assets/css/src/2.blocks.project.css
View file

@ -3,6 +3,7 @@
.project-item {
background: var(--color-background);
row-gap: 2.5rem;
position: relative;
}
.project-item hgroup {
@ -35,9 +36,9 @@
flex: 1 1 0%;
display: flex;
gap: var(--gap);
margin-top: -2.75rem;
margin-top: -1.5rem;
position: relative;
min-width: max(55%, 45rem);
min-width: 55%;
width: 100%;
padding: 2rem 0;
}

6
src/components/Projects.vue
View file

@ -1,6 +1,8 @@
<template>
<h2 id="tabslist" class="sr-only">Projets</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<header class="flex">
<h2 id="tabslist" class="sr-only">Projets</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
</header>
<section
v-if="currentTab === 'currentProjects'"
id="projets-en-cours"

16
src/components/Tabs.vue
View file

@ -1,5 +1,5 @@
<template>
<header role="tablist" aria-labelledby="tablist">
<div role="tablist" aria-labelledby="tablist">
<!-- TODO: aria-selected et tabindex ne fonctionnent pas -->
<button
v-for="tab in tabs"
@ -16,7 +16,7 @@
<span class="label">{{ tab.label }}</span>
<span class="count">{{ tab.count }}</span>
</button>
</header>
</div>
</template>
<script setup>
@ -36,18 +36,21 @@ function changeTab(tabId) {
<style scoped>
[role="tablist"] {
width: fit-content;
--tabs: 2;
--tab-w: 15rem; /* 240px */
width: 100%;
max-width: calc(var(--tabs) * var(--tab-w));
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 auto var(--space-32);
margin: 0 auto;
border-radius: var(--rounded-md);
background-color: var(--color-grey-200);
flex-shrink: 1;
}
[role="tab"] {
--tab-h: 2.5rem;
--tab-min-w: 15rem; /* 240px */
--tab-py: var(--space-8);
--tab-px: var(--space-12);
--tab-border-w: 4px;
@ -64,9 +67,10 @@ function changeTab(tabId) {
margin: 0;
cursor: pointer;
gap: var(--space-16);
min-width: var(--tab-min-w);
width: 100%;
height: var(--tab-h);
border: var(--tab-border-w) solid var(--color-grey-200);
flex-shrink: 1;
}
[role="tab"]:focus-visible {
z-index: 20;

5
src/components/inspirations/Selector.vue
View file

@ -44,15 +44,12 @@ function changeInspiration(inspiration) {
#inspirations-dropdown {
--row-gap: 0;
align-items: flex-start;
position: absolute;
top: 0;
right: 0;
position: relative;
background: var(--color-background);
border-radius: var(--rounded-lg);
height: 3.75rem;
width: 20rem;
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
margin-bottom: var(--space-16);
}
#inspirations-dropdown::before {
content: "";

2
src/components/project/Header.vue
View file

@ -1,5 +1,5 @@
<template>
<header class="flex | bg-white | rounded-2xl | p-8 mb-16">
<header class="flex | bg-white | rounded-2xl | p-8">
<h1 class="font-serif | px-8">{{ title }}</h1>
<button class="btn | ml-auto" disabled>Demander un RDV</button>
</header>

2
src/views/Home.vue
View file

@ -1,5 +1,5 @@
<template>
<main>
<main class="flex flex-col" style="--row-gap: var(--space-32)">
<Projects />
</main>
</template>

39
src/views/Inspirations.vue
View file

@ -1,11 +1,13 @@
<template>
<main>
<h2 id="tabslist" class="sr-only">Inspirations</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<Selector
:all="page.inspirations"
@update:currentInspiration="changeInspiration"
/>
<main class="flex flex-col">
<header class="flex">
<h2 id="tabslist" class="sr-only">Inspirations</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<Selector
:all="page.inspirations"
@update:currentInspiration="changeInspiration"
/>
</header>
<section :id="currentTab" class="inspiration">
<Header
v-if="currentTab !== 'favorites'"
@ -88,25 +90,14 @@ function changeInspiration(newValue) {
</script>
<style scoped>
/* Header */
main > header {
align-items: flex-start;
justify-content: space-between;
gap: var(--space-16);
}
/* Tabs */
[role="tablist"] {
margin-left: 0;
}
/* Masonry */
@media (min-width: 40rem) {
.masonry {
column-count: 2;
}
}
@media (min-width: 65rem) {
.masonry {
column-count: 3;
}
}
@media (min-width: 90rem) {
.masonry {
column-count: 4;
}
}
</style>

28
src/views/Notifications.vue
View file

@ -1,14 +1,16 @@
<template>
<main class="wrapper">
<h2 id="tabslist" class="sr-only">Status</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<button
class="btn | absolute top-0 right-gutter"
:disabled="!sortedNotifications.length"
@click="readAll()"
>
Marquer tout come lu
</button>
<main class="flex flex-col">
<header class="flex">
<h2 id="tabslist" class="sr-only">Status</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<button
class="btn"
:disabled="!sortedNotifications.length"
@click="readAll()"
>
Marquer tout come lu
</button>
</header>
<div
v-if="sortedNotifications.length === 0"
class="flex flex-col justify-center | text-grey-700 | absolute inset-0 -z-1"
@ -173,9 +175,9 @@ function readAll() {
</script>
<style scoped>
/* Tabs */
[role="tablist"] {
margin-left: 0;
/* Header */
main > header {
flex-wrap: nowrap;
}
/* Notifications */

8
src/views/Reunions.vue
View file

@ -1,7 +1,9 @@
<template>
<main class="wrapper">
<h2 id="tabslist" class="sr-only">Status</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<main class="flex flex-col">
<header class="flex">
<h2 id="tabslist" class="sr-only">Status</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
</header>
<div class="flex flex-col justify-center | text-grey-700 | absolute inset-0 -z-1">
<svg aria-hidden="true" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.25 8.75C5.58696 8.75 4.95107 9.01339 4.48223 9.48223C4.01339 9.95107 3.75 10.587 3.75 11.25V33.75C3.75 34.413 4.01339 35.0489 4.48223 35.5178C4.95107 35.9866 5.58696 36.25 6.25 36.25H33.75C34.413 36.25 35.0489 35.9866 35.5178 35.5178C35.9866 35.0489 36.25 34.413 36.25 33.75V11.25C36.25 10.587 35.9866 9.95107 35.5178 9.48223C35.0489 9.01339 34.413 8.75 33.75 8.75H28.75M3.75 18.75H36.25M11.25 3.75V13.75M28.75 3.75V13.75M11.25 8.75H23.75" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>