gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finalisation home page

Browse Source
This commit is contained in:
Julie
2026-02-06 20:20:01 +01:00
parent 91c1b03a2f
commit d9ac2b4cc5
45 changed files with 1892 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/components/section/PageSection.vue
View File

@@ -8,12 +8,14 @@
<section
class="page-section"
:class="[
`page-section--overflow--${overflow}`,
`page-section--${tone}`,
{ 'page-section--padded': padded }
{ 'page-section--padded': padded },
`page-section--padded--${padded_size}`
]"
>
<!-- Si content == true -->
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb">
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb" :position="position" :overflow="overflow">
<slot />
</PageSectionInner>
@@ -28,11 +30,13 @@
<script setup>
defineProps({
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
padded: { type: Boolean, default: true }, // padding vertical
padded_size: { type: String, default: '' }, // none | sm | md | lg
contentSize: { type: String, default: 'default'}, // narrow/default/wide
content: { type: Boolean, default: true }, // contenu contraint ou full
padb : { type: String, default: '' }, // props pour PageSectionInner
padt : { type: String, default: '' } // props pour PageSectionInner
padt : { type: String, default: '' }, // props pour PageSectionInner
position : { type: String, default: '' },
overflow : { type: String, default: '' }
})
</script>
@@ -41,6 +45,9 @@
position: relative;
width: 100%;
//min-height: var(--sp-200);
&--overflow--hidden {
overflow: hidden;
}
/* tons = arrière-plan section */
&--default { background: transparent; }
@@ -50,8 +57,14 @@
// padding en haut et en bas
&--padded {
padding-top: 30px;
padding-bottom: 50px;
&--md {
padding-top: 30px;
padding-bottom: 50px;
}
&--lg {
padding-top: 30px;
padding-bottom: 120px;
}
}
}

11
app/components/section/PageSectionInner.vue
View File

@@ -2,7 +2,7 @@
Des templates peuvent avoir toutes la même marge de page et d'autres, par ex, être full page -->
<template>
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`]">
<div class="page-section--inner" :class="[`page-section--inner--${size}`,`page-section--inner--padb--${padb}`,`page-section--inner--padt--${padt}`,`page-section--inner--position--${position}`,`page-section--inner--overflow--${overflow}`]">
<slot />
</div>
</template>
@@ -11,7 +11,8 @@
defineProps({
size: { type: String, default: 'default' }, // default / wide / narrow
padb : { type: String, default: '' },
padt : { type: String, default: '' }
padt : { type: String, default: '' },
position : { type: String, dafault : ''}
})
</script>
@@ -25,7 +26,9 @@
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
&--position--relative {
position: relative;
}
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
&--narrow {
@@ -37,7 +40,7 @@
/* mobile / small screens */
@media (max-width: 700px) {
padding-inline: var(--page-padding-mobile);
//padding-inline: var(--page-padding-mobile);
}
@media (min-width: 0px) {

24
app/components/section/SectionContent.vue
View File

@@ -29,30 +29,44 @@
&--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
&--pad-xs {
padding-top: var(--sp-32);
//padding-top: var(--sp-32);
padding-bottom: var(--sp-16);
padding-left: var(--sp-45);
padding-right: var(--sp-8);
}
&--pad-sm {
padding-top: var(--sp-32);
//padding-top: var(--sp-32);
padding-bottom: var(--sp-16);
padding-left: var(--sp-45);
padding-right: var(--sp-8);
}
&--pad-md {
padding-top: var(--sp-80);
//padding-top: var(--sp-80);
padding-bottom: var(--sp-180);
padding-left: var(--sp-45);
padding-right: var(--sp-8);
}
&--pad-lg {
padding-top: var(--sp-80);
//padding-top: var(--sp-80);
padding-bottom: var(--sp-180);
padding-left: var(--sp-45);
padding-right: var(--sp-8);
}
}
@media (max-width: 400px) {
.section-content {
&--pad-xs {
//padding-bottom: calc(var(--sp-16) * 0.5);
padding-left: calc(var(--sp-45) * 0.5);
//padding-right: calc(var(--sp-8) * 0.5);
}
}
}
@media (max-width: 300px) {
.section-title {
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
padding-left: calc(var(--sp-45) - 20px);
}
}

9
app/components/section/SectionTitle.vue
View File

@@ -45,10 +45,17 @@
padding-left: var(--sp-45);
}
}
@media (max-width: 400px) {
.section-title {
&--pad-xs {
padding-left: calc(var(--sp-45) * 0.5);
}
}
}
@media (max-width: 300px) {
.section-title {
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
padding-left: calc(var(--sp-45) - 20px);
}
}