Improve global layout structure and fix various styling issues #16

src/assets/css/src/1.0.global.css

@@ -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%;
 }
 
 

src/assets/css/src/2.blocks.button.css

@@ -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;

src/assets/css/src/2.blocks.project.css

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

src/components/Projects.vue

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

src/components/Tabs.vue

@@ -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;

src/components/inspirations/Selector.vue

@@ -44,15 +44,12 @@ function changeInspiration(inspiration) {
 #inspirations-dropdown {
   --row-gap: 0;
   align-items: flex-start;
-  position: absolute;
+  position: relative;
-  top: 0;
-  right: 0;
   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: "";

src/components/project/Header.vue

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

src/views/Home.vue

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

src/views/Inspirations.vue

@@ -1,11 +1,13 @@
 <template>
-  <main>
+  <main class="flex flex-col">
-    <h2 id="tabslist" class="sr-only">Inspirations</h2>
+    <header class="flex">
-    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+      <h2 id="tabslist" class="sr-only">Inspirations</h2>
-    <Selector
+      <Tabs :tabs="tabs" @update:currentTab="changeTab" />
-      :all="page.inspirations"
+      <Selector
-      @update:currentInspiration="changeInspiration"
+        :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>

src/views/Notifications.vue

@@ -1,14 +1,16 @@
 <template>
-  <main class="wrapper">
+  <main class="flex flex-col">
-    <h2 id="tabslist" class="sr-only">Status</h2>
+    <header class="flex">
-    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+      <h2 id="tabslist" class="sr-only">Status</h2>
-    <button
+      <Tabs :tabs="tabs" @update:currentTab="changeTab" />
-      class="btn | absolute top-0 right-gutter"
+      <button
-      :disabled="!sortedNotifications.length"
+        class="btn"
-      @click="readAll()"
+        :disabled="!sortedNotifications.length"
-    >
+        @click="readAll()"
-      Marquer tout come lu
+      >
-    </button>
+        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 */
+/* Header */
-[role="tablist"] {
+main > header {
-  margin-left: 0;
+  flex-wrap: nowrap;
 }
 
 /* Notifications */

src/views/Reunions.vue

@@ -1,7 +1,9 @@
 <template>
-  <main class="wrapper">
+  <main class="flex flex-col">
-    <h2 id="tabslist" class="sr-only">Status</h2>
+    <header class="flex">
-    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+      <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"/>