generated from gitea_admin/default
update a lot of change since a while
This commit is contained in:
59
app/components/section/PageSection.vue
Normal file
59
app/components/section/PageSection.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<!--
|
||||
La section par défaut fait la largeur de la page.
|
||||
On peut mettre de la couleur ou pas.
|
||||
C'est le contenu de la section (PageSectionInner) qui aura une marge.
|
||||
Et avec "content" à "false" on peut dire aussi qu'on n'utilise pas le PageSectionInner, au cas où...
|
||||
-->
|
||||
<template>
|
||||
<section
|
||||
class="page-section"
|
||||
:class="[
|
||||
`page-section--${tone}`,
|
||||
{ 'page-section--padded': padded }
|
||||
]"
|
||||
>
|
||||
<!-- Si content == true -->
|
||||
<PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb">
|
||||
<slot />
|
||||
</PageSectionInner>
|
||||
|
||||
<!-- Si content == false -->
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
|
||||
padded: { type: Boolean, default: true }, // padding vertical
|
||||
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
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//min-height: var(--sp-200);
|
||||
|
||||
/* tons = arrière-plan section */
|
||||
&--default { background: transparent; }
|
||||
&--brand { background: var(--c-brand_rouge);}
|
||||
&--dark { background: var(--c-backgroud-black); }
|
||||
&--brandreverse { background: var(--c-backgroud-brandreverse); }
|
||||
|
||||
// padding en haut et en bas
|
||||
&--padded {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
99
app/components/section/PageSectionInner.vue
Normal file
99
app/components/section/PageSectionInner.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<!-- Pour gérer tous les types de main dans les différents templates de page
|
||||
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}`]">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
size: { type: String, default: 'default' }, // default / wide / narrow
|
||||
padb : { type: String, default: '' },
|
||||
padt : { type: String, default: '' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-section--inner {
|
||||
// ne dépasse jamais l’écran
|
||||
width: 100%;
|
||||
|
||||
// centre le bloc horizontalement, crée des marges externes fluides, fonctionne dans toutes les largeurs d’écran
|
||||
margin-inline: auto;
|
||||
|
||||
// respiration sur les côtés avec marges minimale ( surtout utile pour mobiles)
|
||||
|
||||
|
||||
|
||||
// limite de largeur quand on veut une largeur plus petit (pour les articles par exemple)
|
||||
&--narrow {
|
||||
max-width: var(--container-narrow);
|
||||
}
|
||||
|
||||
// limite de largeur (par défaut)
|
||||
&--default {
|
||||
/* mobile / small screens */
|
||||
|
||||
@media (max-width: 700px) {
|
||||
padding-inline: var(--page-padding-mobile);
|
||||
}
|
||||
|
||||
@media (min-width: 0px) {
|
||||
max-width: 100%;
|
||||
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
max-width: 580px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
max-width: 660px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
max-width: 780px;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
max-width: 860px;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
max-width: 950px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
max-width: 1020px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
max-width: 1100px;
|
||||
}
|
||||
@media (min-width: 1300px) {
|
||||
max-width: 1200px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
max-width: 1300px;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
// limite de largeur un peu plus grande que par défaut
|
||||
&--wide {
|
||||
max-width: var(--container-wide);
|
||||
}
|
||||
|
||||
// Padding
|
||||
&--padt--xs {
|
||||
padding-top: 30px;
|
||||
}
|
||||
&--padt--sm {
|
||||
padding-top: 45px;
|
||||
}
|
||||
&--padb--xs {
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
&--padb--sm {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
60
app/components/section/SectionContent.vue
Normal file
60
app/components/section/SectionContent.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
`section-content`,
|
||||
`section-content--tone-${tone}`,
|
||||
`section-content--pad-${pad}`
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
as: { type: String, default: 'h2' },
|
||||
tone: { type: String, default: 'default' },
|
||||
pad: { type: String, default: '' }, // xs, sm, md, lg
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.section-content {
|
||||
|
||||
&--tone-default { background: transparent; }
|
||||
&--tone-brand { background: var(--c-brand_rouge); }
|
||||
&--tone-brand_rouge45 { background: var(--c-brand_rouge45); }
|
||||
&--tone-muted { background: var(--c-brand_rouge-weak); }
|
||||
&--tone-dark { background: var(--c-backgroud-black); }
|
||||
&--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
|
||||
|
||||
&--pad-xs {
|
||||
padding-top: var(--sp-32);
|
||||
padding-bottom: var(--sp-16);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
&--pad-sm {
|
||||
padding-top: var(--sp-32);
|
||||
padding-bottom: var(--sp-16);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
&--pad-md {
|
||||
padding-top: var(--sp-80);
|
||||
padding-bottom: var(--sp-180);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
&--pad-lg {
|
||||
padding-top: var(--sp-80);
|
||||
padding-bottom: var(--sp-180);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
.section-title {
|
||||
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
56
app/components/section/SectionTitle.vue
Normal file
56
app/components/section/SectionTitle.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<DsHeading
|
||||
as="h1"
|
||||
:tone="tone"
|
||||
:class="[
|
||||
`section-title`,
|
||||
`section-title--pad-${pad}`
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</DsHeading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
defineProps({
|
||||
as: { type: String, default: 'h2' },
|
||||
tone: { type: String, default: 'default' },
|
||||
pad: { type: String, default: 'sm' }, // xs, sm, md, lg
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.section-title {
|
||||
|
||||
|
||||
&--pad-xs {
|
||||
padding-top: var(--sp-32);
|
||||
padding-bottom: var(--sp-16);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
&--pad-sm {
|
||||
padding-top: var(--sp-48);
|
||||
padding-bottom: var(--sp-48);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
&--pad-md {
|
||||
padding-top: var(--sp-80);
|
||||
padding-bottom: var(--sp-180);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
&--pad-lg {
|
||||
padding-top: var(--sp-80);
|
||||
padding-bottom: var(--sp-180);
|
||||
padding-left: var(--sp-45);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
.section-title {
|
||||
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user