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

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