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

responsive node site

Browse Source
This commit is contained in:
ouidade
2025-10-14 15:10:07 +02:00
parent bcb6fbabbe
commit 4a81d84919
2 changed files with 151 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/dist/css/bundle.css
Vendored
+85
View File
@@ -2998,6 +2998,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
grid-template-columns: repeat(8 1fr);
grid-template-rows: repeat(3 auto);
}
@media (max-width: 810px) {
.page-node-site .region-content {
width: 100vw;
display: flex;
flex-direction: column;
}
}
.page-node-site .region-content #block-reha-prevnextblock {
display: flex;
flex-direction: row;
@@ -3009,11 +3016,26 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
justify-content: space-between;
margin: auto;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-prevnextblock {
width: 95%;
}
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-prevnextblock span {
font-size: 0.6rem !important;
}
}
.page-node-site .region-content #block-reha-prevnextblock .next-site {
border: none;
padding: 0.5rem 1rem;
margin-left: auto;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-prevnextblock .next-site {
padding-top: 0.1rem;
}
}
.page-node-site .region-content #block-reha-prevnextblock .next-site ::after {
content: url("../../dist/images/noun-arrow-1569918-black.svg");
padding-left: 0.5rem;
@@ -3023,6 +3045,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
border: none;
padding: 0.5rem 1rem;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-prevnextblock .prev-site {
padding-top: 0.1rem;
}
}
.page-node-site .region-content #block-reha-prevnextblock .prev-site ::before {
content: url("../../dist/images/noun-arrow-1569918-black.svg");
display: inline-block;
@@ -3051,11 +3078,23 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
flex-direction: row;
margin: auto;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site {
flex-direction: column;
height: auto;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site {
height: 520px;
width: 771px;
order: 1;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site {
height: auto;
width: 100vw;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image {
width: 100%;
margin: auto;
@@ -3064,6 +3103,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
z-index: 999;
bottom: -40px;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-dots {
width: 100vw;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list {
padding: 0 !important;
}
@@ -3077,12 +3121,24 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
width: auto;
object-fit: contain;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item img {
height: auto;
width: 100vw;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item blockquote {
font-style: italic;
margin: 0;
padding-top: 0.5rem;
font-size: 0.8rem;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item blockquote {
font-size: 0.6rem;
padding-left: 0.5rem;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .image-site .field--name-field-image .slick-list .field__item blockquote p {
margin: 0;
}
@@ -3101,6 +3157,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
@media (max-width: 891px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .infos-content-site {
width: auto;
margin-left: 0rem;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site .infos-content-site h1 {
@@ -3204,18 +3261,46 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
flex-direction: row-reverse;
justify-content: space-between;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site {
width: 100%;
display: flex;
flex-direction: column-reverse;
padding-top: 1rem;
font-size: 1.1rem;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content {
width: 75%;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content {
width: 90%;
padding: 1rem;
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content p {
margin: 0;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content {
width: 15%;
margin-top: 1.5rem;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content {
width: 100%;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field--type-file {
border: none;
margin-bottom: 1rem;
background-color: transparent;
}
@media (max-width: 810px) {
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field--type-file {
margin-bottom: 0;
}
}
.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field__item {
padding: 0.5rem;
border: solid black 1px;
web/themes/custom/reha/scss/pages/_node-site.scss
+66 -2
View File
@@ -11,6 +11,11 @@
display: grid;
grid-template-columns: repeat(8 1fr);
grid-template-rows: repeat(3 auto);
@media(max-width:810px){
width: 100vw;
display: flex;
flex-direction: column;
}
#block-reha-prevnextblock{
display: flex;
@@ -22,19 +27,35 @@
height: fit-content;
justify-content: space-between;
margin: auto;
@media(max-width:810px){
width: 95%;
}
span{
@media(max-width:810px){
font-size: 0.6rem !important;
}
}
.next-site{
border: none;
padding: 0.5rem 1rem;
margin-left: auto;
@media(max-width:810px){
padding-top: 0.1rem;
}
::after{
content: url('../../dist/images/noun-arrow-1569918-black.svg');
padding-left: 0.5rem;
padding-top: 0.1rem;
padding-top: 0.1rem;
}
}
.prev-site{
border: none;
padding: 0.5rem 1rem;
@media(max-width:810px){
padding-top: 0.1rem;
}
::before{
content: url('../../dist/images/noun-arrow-1569918-black.svg');
display: inline-block;
@@ -42,6 +63,7 @@
padding-left: 0.5rem;
}
}
}
#block-reha-titredepage{
@@ -63,16 +85,28 @@
display: flex;
flex-direction: row;
margin: auto;
@media (max-width:810px){
flex-direction: column;
height: auto;
// max-height: 300px;
}
.image-site{
height: 520px;
width: 771px;
order: 1;
@media (max-width:810px){
height: auto;
width: 100vw;
}
.field--name-field-image{
width: 100%;
margin: auto;
.slick-dots{
z-index: 999;
bottom: -40px;
@media (max-width:810px){
width: 100vw;
}
}
.slick-list{
padding: 0 !important;
@@ -84,12 +118,20 @@
height: 520px;
width: auto;
object-fit: contain;
@media (max-width:810px){
height: auto;
width: 100vw;
}
}
blockquote{
font-style: italic;
margin: 0;
padding-top: 0.5rem;
font-size: 0.8rem;
font-size: 0.8rem;
@media(max-width:810px){
font-size: 0.6rem;
padding-left: 0.5rem;
}
p{
margin: 0;
}
@@ -114,6 +156,7 @@
justify-content: center;
@media(max-width: 891px){
width: auto;
margin-left: 0rem;
}
h1{
order: 3;
@@ -225,16 +268,37 @@
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
@media(max-width:810px){
width: 100%;
display: flex;
flex-direction: column-reverse;
padding-top: 1rem;
font-size: 1.1rem;
}
.summary-content{
width: 75%;
@media(max-width:810px){
width: 90%;
padding: 1rem;
p{
margin: 0;
}
}
}
.links-content{
width: 15%;
margin-top: 1.5rem;
@media(max-width:810px){
width: 100%;
}
.field--type-file{
border: none;
margin-bottom: 1rem;
background-color: transparent;
@media(max-width:810px){
margin-bottom: 0;
}
}
.field__item{
padding: 0.5rem;