bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css filtres

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-04-07 22:40:21 +02:00
parent 7779e1306e
commit 33edc88d09
4 changed files with 231 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -865,10 +865,15 @@ footer {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after {
content: " :"; content: " :";
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form {
display: grid;
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form .js-form-item { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 form .js-form-item {
display: flex; display: flex;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding-bottom: 0.3rem;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 form .js-form-item,
@ -910,14 +915,14 @@ footer {
padding-top: 0.5rem; padding-top: 0.5rem;
font-size: 0.7rem; font-size: 0.7rem;
font-family: "gilroy-light"; font-family: "gilroy-light";
align-items: center;
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select label, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select label,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select label { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select label {
width: 50%; width: 60%;
text-transform: lowercase; text-transform: lowercase;
font-size: 0.7rem; font-size: 0.7rem;
font-family: "gilroy-light"; font-family: "gilroy-light";
padding-bottom: 0.2rem;
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select select, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select select,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select select { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select select {
@ -934,13 +939,37 @@ footer {
width: 100%; width: 100%;
} }
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield {
flex-direction: column;
padding-top: 0.8rem;
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label {
display: flex;
flex-direction: row;
text-transform: lowercase; text-transform: lowercase;
font-size: 0.7rem; font-size: 0.7rem;
font-family: "gilroy-light"; font-family: "gilroy-light";
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
} }
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label::after,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label::after {
content: "";
display: block;
background: url("../img/loupe.svg");
background-repeat: no-repeat;
width: 38px;
height: 30px;
margin-left: 0.5rem;
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield input#edit-combine--3,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield input#edit-combine--2,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield input#edit-combine--3,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield input#edit-combine--2 {
width: 100%;
max-width: 100%;
}
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-actions, .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-actions,
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .form-actions { .layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .form-actions {
padding-top: 1rem; padding-top: 1rem;
@ -975,6 +1004,34 @@ footer {
display: none !important; display: none !important;
} }
.ss-main {
border: none;
}
.ss-placeholder {
display: none !important;
}
.js-form-item-field-mots-clefs-target-id {
order: 1;
}
.js-form-item-field-type-de-ressource-target-id {
order: 2;
}
.js-form-item-field-site-target-id-verf {
order: 3;
}
.js-form-item-combine {
order: 4;
}
.form-actions {
order: 5;
}
#logo-animated-container { #logo-animated-container {
width: 60%; width: 60%;
margin-left: 20%; margin-left: 20%;

61
web/themes/custom/quartiers_de_demain/dist/assets/img/loupe.svg vendored Normal file
View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7.250946mm"
height="6.7037978mm"
viewBox="0 0 7.250946 6.7037978"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2444">
<path
d="M 0,0 H 22.0445 V -17 H 0 Z"
transform="matrix(1.3191067,0.19425333,0.19425333,-1.3191067,225.01215,461.47051)"
clip-rule="evenodd"
id="path2444" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2440">
<path
d="M 0,-18 H 1260 V 18 H 0 Z"
transform="translate(-0.24999723,-16.750003)"
id="path2440" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2441">
<path
d="M 0,-18 H 1260 V 18 H 0 Z"
transform="translate(-14.679745,-4.6071402)"
id="path2441" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-120.12082,-122.50209)">
<g
id="g2443"
clip-path="url(#clipPath2444)"
transform="matrix(0.26458333,0,0,0.26458333,61.004151,0.05323333)">
<path
d="m 15.5,-7.75 c 0,-4.2804 -3.4696,-7.75 -7.75,-7.75 C 3.46979,-15.5 0,-12.0304 0,-7.75 0,-3.46979 3.46979,0 7.75,0 12.0304,0 15.5,-3.46979 15.5,-7.75 Z"
style="fill:none;stroke:#181715;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.2151874,0.17895006,0.18346062,-1.2458171,225.27006,461.8268)"
clip-path="url(#clipPath2440)"
id="path2442" />
<path
d="M 0,0 9,-5.35714"
style="fill:none;stroke:#181715;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.2151874,0.17895006,0.18346062,-1.2458171,240.57717,479.53679)"
clip-path="url(#clipPath2441)"
id="path2443" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

61
web/themes/custom/quartiers_de_demain/src/assets/img/loupe.svg Normal file
View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7.250946mm"
height="6.7037978mm"
viewBox="0 0 7.250946 6.7037978"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2444">
<path
d="M 0,0 H 22.0445 V -17 H 0 Z"
transform="matrix(1.3191067,0.19425333,0.19425333,-1.3191067,225.01215,461.47051)"
clip-rule="evenodd"
id="path2444" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2440">
<path
d="M 0,-18 H 1260 V 18 H 0 Z"
transform="translate(-0.24999723,-16.750003)"
id="path2440" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2441">
<path
d="M 0,-18 H 1260 V 18 H 0 Z"
transform="translate(-14.679745,-4.6071402)"
id="path2441" />
</clipPath>
</defs>
<g
id="layer1"
transform="translate(-120.12082,-122.50209)">
<g
id="g2443"
clip-path="url(#clipPath2444)"
transform="matrix(0.26458333,0,0,0.26458333,61.004151,0.05323333)">
<path
d="m 15.5,-7.75 c 0,-4.2804 -3.4696,-7.75 -7.75,-7.75 C 3.46979,-15.5 0,-12.0304 0,-7.75 0,-3.46979 3.46979,0 7.75,0 12.0304,0 15.5,-3.46979 15.5,-7.75 Z"
style="fill:none;stroke:#181715;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.2151874,0.17895006,0.18346062,-1.2458171,225.27006,461.8268)"
clip-path="url(#clipPath2440)"
id="path2442" />
<path
d="M 0,0 9,-5.35714"
style="fill:none;stroke:#181715;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.2151874,0.17895006,0.18346062,-1.2458171,240.57717,479.53679)"
clip-path="url(#clipPath2441)"
id="path2443" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

53
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/aside.scss
View File

@ -45,10 +45,12 @@
} }
} }
form{ form{
display: grid;
.js-form-item{ .js-form-item{
display: flex; display: flex;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding-bottom: 0.3rem;
@media(max-width: 810px){ @media(max-width: 810px){
display: flex; display: flex;
@ -82,12 +84,14 @@
padding-top: 0.5rem; padding-top: 0.5rem;
font-size: 0.7rem; font-size: 0.7rem;
font-family: 'gilroy-light'; font-family: 'gilroy-light';
align-items: center;
label{ label{
width: 50%; width: 60%;
text-transform: lowercase; text-transform: lowercase;
font-size: 0.7rem; font-size: 0.7rem;
font-family: 'gilroy-light'; font-family: 'gilroy-light';
padding-bottom: 0.2rem; // padding-bottom: 0.2rem;
} }
select{ select{
background-color: white; background-color: white;
@ -103,12 +107,29 @@
} }
.js-form-type-textfield{ .js-form-type-textfield{
flex-direction: column;
padding-top: 0.8rem;
label{ label{
display: flex;
flex-direction: row;
text-transform: lowercase; text-transform: lowercase;
font-size: 0.7rem; font-size: 0.7rem;
font-family: 'gilroy-light'; font-family: 'gilroy-light';
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
&::after{
content: "";
display: block;
background: url("../img/loupe.svg");
background-repeat: no-repeat;
width: 38px;
height: 30px;
margin-left: 0.5rem;
}
}
input#edit-combine--3,
input#edit-combine--2{
width: 100%;
max-width: 100%;
} }
} }
.form-actions{ .form-actions{
@ -146,3 +167,29 @@
display: none !important; display: none !important;
} }
.ss-main{
border: none;
}
.ss-placeholder{
display: none !important;
}
.js-form-item-field-mots-clefs-target-id{
order: 1;
}
.js-form-item-field-type-de-ressource-target-id{
order: 2;
}
.js-form-item-field-site-target-id-verf{
order: 3;
}
.js-form-item-combine{
order: 4;
}
.form-actions{
order: 5;
}