diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index 0b96039..f871c9c 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -3231,6 +3231,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div max-height: 17rem; padding-bottom: 5rem; } +@media (max-width: 450px) { + .page-ressources .view-ressources #views-exposed-form-ressources-page-1 { + display: flex; + flex-direction: column; + margin-bottom: 6rem; + } +} .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before { content: "FILTRER :"; grid-column: 1; @@ -3238,10 +3245,20 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div display: block; line-height: 5; } +@media (max-width: 450px) { + .page-ressources .view-ressources #views-exposed-form-ressources-page-1::before { + line-height: 3; + } +} .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions { padding-bottom: 0.5rem; align-self: end; } +@media (max-width: 450px) { + .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item, .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-actions { + align-self: auto; + } +} .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-combine { grid-column: 1/span 8; grid-row: 2; @@ -3251,16 +3268,31 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div grid-row: 3; width: 45%; } +@media (max-width: 450px) { + .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .js-form-item-field-site-target-id { + width: 100%; + } +} .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id { grid-column: 3/span 4; grid-row: 3; width: 45%; } +@media (max-width: 450px) { + .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-themes-target-id { + width: 100%; + } +} .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id { width: 45%; grid-column: 5/span 6; grid-row: 3; } +@media (max-width: 450px) { + .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-item-field-type-de-ressource-target-id { + width: 100%; + } +} .page-ressources .view-ressources #views-exposed-form-ressources-page-1 .form-select { background: white; border: solid gray 1px; @@ -3291,6 +3323,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div transform: scale(1.05); transition: 0.3s transform ease, 0.3s box-shadow ease; } +@media (max-width: 450px) { + .page-ressources .view-ressources .views-row { + width: 100%; + margin-bottom: 3rem; + } +} .page-ressources .view-ressources .views-row .node-type-ressource { width: 100%; display: flex !important; diff --git a/web/themes/custom/reha/scss/pages/_ressources.scss b/web/themes/custom/reha/scss/pages/_ressources.scss index 02487b7..3f96a17 100644 --- a/web/themes/custom/reha/scss/pages/_ressources.scss +++ b/web/themes/custom/reha/scss/pages/_ressources.scss @@ -24,18 +24,29 @@ height: fit-content; max-height: 17rem; padding-bottom: 5rem; + @media (max-width:450px){ + display: flex; + flex-direction: column; + margin-bottom: 6rem; + } &::before{ content: 'FILTRER :'; grid-column: 1; grid-row: 1; display: block; line-height: 5; + @media (max-width:450px){ + line-height: 3; + } } .form-item, .form-actions{ // margin: 1rem; padding-bottom: 0.5rem; align-self: end; + @media (max-width:450px){ + align-self: auto; + } } .form-item-combine{ grid-column: 1 /span 8; @@ -47,17 +58,25 @@ grid-column: 1 /span 4; grid-row: 3; width: 45%; + @media (max-width:450px){ + width: 100%; + } } .form-item-field-themes-target-id{ grid-column: 3 /span 4; grid-row: 3; width: 45%; - + @media (max-width:450px){ + width: 100%; + } } .form-item-field-type-de-ressource-target-id{ width: 45%; grid-column: 5 /span 6; grid-row: 3; + @media (max-width:450px){ + width: 100%; + } } .form-select{ @@ -92,6 +111,10 @@ transform: scale(1.05); transition: 0.3s transform ease, 0.3s box-shadow ease; } + @media (max-width:450px){ + width: 100%; + margin-bottom: 3rem; + } .node-type-ressource{ width: 100%; // margin: auto;