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

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/scss/base/_colors.scss
View File

@@ -10,4 +10,8 @@ $rouge_transparent: #e3061391;
$vert: green;
$bleu_fonce: #0056b3;
$bleu_clair: #007bff;
$bleu_clair: #007bff;

73
app/assets/scss/base/_fonts.scss
View File

@@ -1,81 +1,76 @@
@font-face {
font-family: 'brandontext_black_italic';
src: url('~/assets/fonts/brandontext_black_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_black';
src: url('~/assets/fonts/brandontext_black.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_bold_italic';
src: url('~/assets/fonts/brandontext_bold_italic.woff2') format('woff2');
src: url('@/assets/fonts/brandontext_boldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_bold';
src: url('~/assets/fonts/brandontext_bold.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_light_italic';
src: url('~/assets/fonts/brandontext_light_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_light';
src: url('~/assets/fonts/brandontext_light.woff2') format('woff2');
src: url('@/assets/fonts/brandontext_bold.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_medium_italic';
src: url('~/assets/fonts/brandontext_medium_italic.woff2') format('woff2');
src: url('@/assets/fonts/brandontext_mediumItalic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_medium';
src: url('~/assets/fonts/brandontext_medium.woff2') format('woff2');
src: url('@/assets/fonts/brandontext_medium.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_regular_italic';
src: url('~/assets/fonts/brandontext_regular_italic.woff2') format('woff2');
src: url('@/assets/fonts/brandontext_regularItalic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_regular';
src: url('~/assets/fonts/brandontext_regular.woff2') format('woff2');
src: url('@/assets/fonts/brandontext_regular.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_thin_italic';
src: url('~/assets/fonts/brandontext_thin_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_thin';
src: url('~/assets/fonts/brandontext_thin.woff2') format('woff2');
}
@font-face {
font-family: 'barlow_medium';
src: url('~/assets/fonts/barlow_medium.ttf') format('truetype');
src: url('@/assets/fonts/barlow_medium.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_semibold';
src: url('~/assets/fonts/barlow_semibold.ttf') format('truetype');
src: url('@/assets/fonts/barlow_semibold.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_regular';
src: url('~/assets/fonts/barlow_regular.ttf') format('truetype');
src: url('@/assets/fonts/barlow_regular.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_light';
src: url('~/assets/fonts/barlow_light.ttf') format('truetype');
src: url('@/assets/fonts/barlow_light.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_extrabold';
src: url('~/assets/fonts/barlow_extrabold.ttf') format('truetype');
src: url('@/assets/fonts/barlow_extrabold.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_bold';
src: url('~/assets/fonts/barlow_bold.ttf') format('truetype');
src: url('@/assets/fonts/barlow_bold.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_black';
src: url('~/assets/fonts/barlow_black.ttf') format('truetype');
src: url('@/assets/fonts/barlow_black.ttf') format('truetype');
}
@font-face {
font-family: "Roboto Flex";
src: url("@/assets/fonts/robotoflex.ttf") format("truetype");
font-weight: 100 1000;
font-stretch: 25% 151%;
font-style: oblique 0deg 10deg;
font-display: swap;
}
.brandontext_bold {
font-family: brandontext_bold !important;
}
}
.roboto_regular {
font-family: Roboto Flex;
font-weight: 400
}
.roboto_semibold {
font-family: Roboto Flex;
font-weight: 600
}

3
app/assets/scss/base/_reset.scss
View File

@@ -2,6 +2,9 @@
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;

7
app/assets/scss/base/_spaces.scss
View File

@@ -19,3 +19,10 @@
.height_33 {
height: 33px;
}
.margin_left_-20 {
margin-left: -20px;
}
.padding_top_1 {
padding-top: 1px;
}

9
app/assets/scss/base/_text.scss
View File

@@ -1,9 +0,0 @@
@use 'colors' as *;
h1 {
color: red;
}
p {
color: $vert;
}

214
app/assets/scss/component/_header_full.scss
View File

@@ -1,214 +0,0 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
.header_full {
display: grid;
grid-template-rows: 130px auto auto;
@include media_queries.media_min(tablet_600) {
grid-template-columns: 1fr 500px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 1fr 890px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: $blanc;
a {
color: $blanc;
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
//background-color: #0000007a;
background-color: rgba(0,0,0,.4);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
width: 650px;
margin-left: 80px;
margin-bottom: 150px;
.header-img_titre {
margin-bottom: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
font-size: 50px;
}
.header-img_description {
margin-bottom: 20px;
font-family: 'barlow_regular';
font-size: 20px;
}
.decouvrir {
display: flex;
.decouvrir_icone {
margin-top: 2px;
margin-right: 5px;
}
.decouvrir_texte {
font-family: 'barlow_regular';
font-size: 18px;
}
}
}
}
.header_full_2 {
display: grid;
@include media_queries.media_min(tablet_600) {
grid-template-rows: 117px auto auto;
}
@include media_queries.media_min(tablet_900) {
grid-template-rows: 117px auto auto;
}
@include media_queries.media_min(desktop_1800) {
grid-template-rows: 130px auto auto;
}
@include media_queries.media_min(tablet_600) {
grid-template-columns: 1fr 500px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 1fr 890px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: $noir;
a {
color: $noir;
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
background-color: rgb(255 255 255 / 98%);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
width: 650px;
margin-left: 80px;
margin-bottom: 150px;
.header-img_titre {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
font-size: 50px;
}
.header-img_description {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 20px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
font-family: 'barlow_regular';
font-size: 20px;
}
.decouvrir {
display: flex;
.decouvrir_icone {
display: inline-block;
background-color: $rouge_transparent;
padding-top: 2px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
}
.decouvrir_texte {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 5px;
font-family: 'barlow_regular';
font-size: 18px;
padding-right: 10px;
}
}
}
}

129
app/assets/scss/component/_header_layout.scss Normal file
View File

@@ -0,0 +1,129 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
/* thème clair */
.header_layout.header--light {
--header-text-color: #{$noir};
}
/* thème sombre */
.header_layout.header--dark {
--header-text-color: #{$blanc};
}
.header_layout {
display: grid;
grid-template-rows: 130px auto auto;
@include media_queries.media_max(tablet_700) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_700) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_800) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 15px minmax(0, 1fr) 15px;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: var(--header-text-color);
a {
color: var(--header-text-color);
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
//background-color: #0000007a;
background-color: rgba(0,0,0,.4);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
margin-left: 80px;
margin-bottom: 150px;
@include media_queries.media_max(tablet_800) {
width: 500px;
}
@include media_queries.media_min(tablet_800) {
width: 650px;
}
.header-img_titre {
margin-bottom: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
@include media_queries.media_max(tablet_800) {
font-size: 40px;
}
@include media_queries.media_min(tablet_800) {
font-size: 50px;
}
}
.header-img_description {
margin-bottom: 20px;
font-family: 'barlow_regular';
@include media_queries.media_max(tablet_800) {
font-size: 18px;
}
@include media_queries.media_min(tablet_800) {
font-size: 20px;
}
}
.decouvrir {
display: flex;
.decouvrir_icone {
margin-top: 2px;
margin-right: 5px;
}
.decouvrir_texte {
font-family: 'barlow_regular';
font-size: 18px;
}
}
}
}

367
app/assets/scss/component/_header_nav.scss
View File

@@ -8,11 +8,53 @@
font-family: 'brandontext_regular';
font-size: 16px;
.header_nav_item {
.header_nav_topbar_item {
list-style: none;
cursor: pointer;
margin-right: 30px;
&:last-child {
margin-right: 0px;
}
position: relative;
cursor: pointer;
&:hover {
.header_nav_topbar_submenu {
visibility: visible;
/* Pour l'effet de transition */
opacity: 1;
}
}
}
.header_nav_topbar_submenu {
position: absolute;
left: 0;
z-index: 2;
width: 187px;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 3px;
.header_nav_topbar_submenu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 15px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
.header_nav_lang {
display: flex;
@@ -29,12 +71,16 @@
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
@include media_queries.media_min(tablet_600) {
@include media_queries.media_min(tablet_701) {
grid-template-columns: 140px 1fr;
}
}
@include media_queries.media_min(tablet_800) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 140px 1fr;
grid-template-columns: 171px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: 200px 1fr;
@@ -51,16 +97,65 @@
}
.header_nav_logo {
margin-top: -17px;
@include media_queries.media_min(tablet_700) {
margin-top: -7px;
}
@include media_queries.media_min(tablet_800) {
margin-top: -7px;
}
@include media_queries.media_min(tablet_900) {
margin-top: -17px;
}
@include media_queries.media_max(tablet_700) {
width: 166px;
margin-left: 43px;
}
@include media_queries.media_max(phone_500) {
margin-left: 0px;
}
@include media_queries.media_max(phone_300) {
margin-left: 0px;
}
}
.header_nav_cont {
margin-left: 30px;
margin-right: 30px;
@include media_queries.media_max(tablet_800) {
margin-left: 40px;
margin-right: 20px;
}
@include media_queries.media_min(tablet_800) {
margin-left: 25px;
margin-right: 25px;
}
@include media_queries.media_min(tablet_900) {
margin-left: 30px;
margin-right: 30px;
}
@include media_queries.media_max(tablet_700) {
margin-top: -9px;
}
.header_nav {
display: flex;
row-gap: 13px;
justify-content: center;
@include media_queries.media_min(tablet_700) {
justify-content: flex-start;
}
@include media_queries.media_min(tablet_800) {
justify-content: center;
}
flex-wrap: wrap;
text-wrap-mode: nowrap;
font-family: 'brandontext_regular';
@@ -81,8 +176,23 @@
}
.header_nav_item {
margin-right: 34px;
@include media_queries.media_min(tablet_600) {
position: relative;
cursor: pointer;
&:hover {
.header_nav_sub_menu {
visibility: visible;
/* Pour l'effet de transition */
opacity: 1;
}
}
list-style: none;
&:nth-child(5) {
margin-right: 10px;
}
@include media_queries.media_min(tablet_701) {
margin-right: 20px;
}
@include media_queries.media_min(tablet_900) {
@@ -100,24 +210,51 @@
&:last-child {
margin-right: 0px;
}
}
.header_nav_sub_menu {
position: absolute;
left: 0;
z-index: 2;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
.header_nav_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 18px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
.header_nav_icones {
display: flex;
}
.nav_icone {
display: flex;
.nav_icone_img {
margin-right: 6px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 1px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
img {
@include media_queries.media_max(tablet_600) {
width: 83%;
}
@include media_queries.media_min(tablet_600) {
width: 83%;
}
@@ -128,9 +265,195 @@
width: 100%;
}
}
}
.nav_icone_img--agenda {
margin-right: 13px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 2px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
}
.nav_icone_img--ticket {
width: 46px;
margin-top: -4px;
}
}
}
}
/* accessibilité pour que les écran est le message "ouvrir le menu" mais non visible sur l'écran en mode normal*/
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Par défaut : desktop visible, mobile caché */
.header_nav--desktop { display: flex; }
.header_nav--mobile { display: none; }
.header_nav--mobile-icons { display: none; }
.header_drawer { display: none; }
/* ✅ Mobile < 700px : on inverse */
@media (max-width: 700px) {
.header_nav--desktop { display: none; }
.header_nav--mobile {
display: flex;
justify-content: flex-end;
margin-top: -21px;
}
.header_nav--mobile-icons {
display: none;
@include media_queries.media_min(phone_400) {
display: flex;
}
justify-content: flex-end;
margin-top: -23px;
margin-right: 60px;
}
.hamburger_black {
background-color: $noir;
}
.hamburger_white {
background-color: $blanc;
}
.header_burger {
position: relative;
background: transparent;
border: 0;
cursor: pointer;
width: 27px;
padding: 8px;
font-size: 26px;
line-height: 1;
img {
width: 31px;
}
.burger_line {
position: absolute;
left: 0;
width: 100%;
height: 3px;
transition:
transform 0.25s ease,
opacity 0.2s ease,
top 0.25s ease;
}
.burger_line:nth-child(1) { top: 0; }
.burger_line:nth-child(2) { top: 8px; }
.burger_line:nth-child(3) { top: 16px; }
&.is-open {
.burger_line:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}
.burger_line:nth-child(2) {
opacity: 0;
}
.burger_line:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
}
}
.header_drawer {
display: block;
width: 100%;
position: absolute;
left: 0;
border-top: 1px solid rgba(0,0,0,.1);
background-color: rgba(0, 0, 0, 0.9);
margin-top: 47px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 40px;
}
.header_drawer[data-open="false"] {
display: none;
}
.header_drawer_inner {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 0;
}
.header_drawer_link {
text-decoration: none;
color: $blanc;
padding: 6px 0;
font-size: 26px;
position: relative;
cursor: pointer;
&.is-open {
.header_drawer_sub_menu {
display: block;
visibility: visible;
opacity: 1;
}
}
list-style: none;
}
.header_drawer_sub_menu {
display: none;
max-width: 300px;
//position: absolute;
left: 0;
z-index: 2;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
}
.header_drawer_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 18px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
}

33
app/assets/scss/component/_orbites.scss Normal file
View File

@@ -0,0 +1,33 @@
.bg-orbs {
position: absolute;
inset: 0;
z-index: 0;
transform: translateZ(0);
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 999px;
filter: blur(3px);
opacity: 0.30;
will-change: transform;
transform: translate3d(0,0,0);
//background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
background: red;
}
.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
.orb--2 { width: 320px; height: 320px; top: 6%; left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
@media (prefers-reduced-motion: reduce) {
.orb { animation: none !important; }
}

11
app/assets/scss/layout/_layout.scss
View File

@@ -1,4 +1,13 @@
.page-enter-active,
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
// Pour que main occupe toute la place de la page et que le footer soit en bas (au cas où le main n'occupe pas toute la hauteur de la page
#main-content {
flex: 1;
}
.page-enter-active,
.page-leave-active {
transition: all 0.4s ease;
}

1
app/assets/scss/layout/_media_queries.scss
View File

@@ -8,6 +8,7 @@ $breakpoints: (
"tablet_600": 600px,
"tablet_640": 640px,
"tablet_700": 700px,
"tablet_701": 701px,
"tablet_800": 800px,
"tablet_900": 900px,
"desktop_1000": 1000px,

12
app/assets/scss/main.scss
View File

@@ -1,13 +1,19 @@
@use 'base/reset';
/* à remplacer par Design system */
@use 'base/colors';
@use 'base/text';
@use 'base/button';
@use 'base/img';
@use 'base/fonts';
@use 'base/spaces';
/* Design system */
@use "@root/design-system/tokens/index" as *;
@use 'layout/layout';
@use 'layout/media_queries';
@use 'component/header_full';
@use 'component/header_nav';
@use 'component/_header_layout';
@use 'component/header_nav';
@use 'component/orbites';