Browse code
Add vertical alignment for GridPlacementWrapper
Benjamin Roth authored on25/04/2025 16:10:45 Showing5 changed files
- contao/dca/tl_content.php
- contao/templates/content_element/grid_placement_wrapper.html.twig
- public/css/grid-placement-wrapper.css
- public/css/grid-placement-wrapper.min.css
- public/css/grid-placement-wrapper.scss
| ... | ... |
@@ -19,7 +19,7 @@ $GLOBALS['TL_DCA']['tl_content']['palettes']['background_wrapper'] = ' |
| 19 | 19 |
|
| 20 | 20 |
$GLOBALS['TL_DCA']['tl_content']['palettes']['grid_placement_wrapper'] = ' |
| 21 | 21 |
{type_legend},type,headline;
|
| 22 |
- {grid_placement_legend},vr_gpw_grid,vr_gpw_tablet_grid,vr_gpw_mobile_grid;
|
|
| 22 |
+ {grid_placement_legend},vr_gpw_grid,vr_gpw_tablet_grid,vr_gpw_mobile_grid,vr_gpw_desktop_vAlign,vr_gpw_tablet_vAlign,vr_gpw_mobile_vAlign;
|
|
| 23 | 23 |
{template_legend:hide},customTpl;
|
| 24 | 24 |
{protected_legend:hide},protected;
|
| 25 | 25 |
{expert_legend:hide},cssID;
|
| ... | ... |
@@ -256,3 +256,36 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['vr_gpw_mobile_grid'] = [ |
| 256 | 256 |
], |
| 257 | 257 |
'sql' => "text NULL", |
| 258 | 258 |
]; |
| 259 |
+ |
|
| 260 |
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_gpw_desktop_vAlign'] = [ |
|
| 261 |
+ 'inputType' => 'select', |
|
| 262 |
+ 'options' => [ |
|
| 263 |
+ '' => 'oben', |
|
| 264 |
+ '-va-desktop-center' => 'mitte', |
|
| 265 |
+ '-va-desktop-bottom' => 'unten', |
|
| 266 |
+ ], |
|
| 267 |
+ 'eval' => ['tl_class' => 'clr w33'], |
|
| 268 |
+ 'sql' => "varchar(20) NOT NULL default ''" |
|
| 269 |
+]; |
|
| 270 |
+ |
|
| 271 |
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_gpw_tablet_vAlign'] = [ |
|
| 272 |
+ 'inputType' => 'select', |
|
| 273 |
+ 'options' => [ |
|
| 274 |
+ '' => 'oben', |
|
| 275 |
+ '-va-tablet-center' => 'mitte', |
|
| 276 |
+ '-va-tablet-bottom' => 'unten', |
|
| 277 |
+ ], |
|
| 278 |
+ 'eval' => ['tl_class' => 'w33'], |
|
| 279 |
+ 'sql' => "varchar(20) NOT NULL default ''" |
|
| 280 |
+]; |
|
| 281 |
+ |
|
| 282 |
+$GLOBALS['TL_DCA']['tl_content']['fields']['vr_gpw_mobile_vAlign'] = [ |
|
| 283 |
+ 'inputType' => 'select', |
|
| 284 |
+ 'options' => [ |
|
| 285 |
+ '' => 'oben', |
|
| 286 |
+ '-va-mobile-center' => 'mitte', |
|
| 287 |
+ '-va-mobile-bottom' => 'unten', |
|
| 288 |
+ ], |
|
| 289 |
+ 'eval' => ['tl_class' => 'w33'], |
|
| 290 |
+ 'sql' => "varchar(20) NOT NULL default ''" |
|
| 291 |
+]; |
| ... | ... |
@@ -3,10 +3,12 @@ |
| 3 | 3 |
|
| 4 | 4 |
{% block content %}
|
| 5 | 5 |
<div class="grid-placement-wrapper gp--grid-container"> |
| 6 |
- <div class="grid-placement-content{{ grid_mobile_classes is not empty ? ' ' ~ grid_mobile_classes }}{{ grid_tablet_classes is not empty ? ' ' ~ grid_tablet_classes }}{{ grid_classes is not empty ? ' ' ~ grid_classes }}">
|
|
| 7 |
- {% for fragment in nested_fragments %}
|
|
| 8 |
- {{ content_element(fragment) }}
|
|
| 9 |
- {% endfor %}
|
|
| 6 |
+ <div class="grid-placement-content{{ data.vr_gpw_desktop_vAlign is not empty ? ' ' ~ data.vr_gpw_desktop_vAlign }}{{ data.vr_gpw_tablet_vAlign is not empty ? ' ' ~ data.vr_gpw_tablet_vAlign }}{{ data.vr_gpw_mobile_vAlign is not empty ? ' ' ~ data.vr_gpw_mobile_vAlign }}{{ grid_mobile_classes is not empty ? ' ' ~ grid_mobile_classes }}{{ grid_tablet_classes is not empty ? ' ' ~ grid_tablet_classes }}{{ grid_classes is not empty ? ' ' ~ grid_classes }}">
|
|
| 7 |
+ <div class="grid-placement-fragments"> |
|
| 8 |
+ {% for fragment in nested_fragments %}
|
|
| 9 |
+ {{ content_element(fragment) }}
|
|
| 10 |
+ {% endfor %}
|
|
| 11 |
+ </div> |
|
| 10 | 12 |
</div> |
| 11 | 13 |
</div> |
| 12 | 14 |
{% endblock %}
|
| ... | ... |
@@ -387,6 +387,37 @@ |
| 387 | 387 |
grid-row-end: 8; |
| 388 | 388 |
} |
| 389 | 389 |
} |
| 390 |
+@media (min-width: 900px) {
|
|
| 391 |
+ .grid-placement-content.-va-desktop-center {
|
|
| 392 |
+ display: flex; |
|
| 393 |
+ align-items: center; |
|
| 394 |
+ } |
|
| 395 |
+ .grid-placement-content.-va-desktop-bottom {
|
|
| 396 |
+ display: flex; |
|
| 397 |
+ align-items: flex-end; |
|
| 398 |
+ } |
|
| 399 |
+} |
|
| 400 |
+@media (max-width: 900px) {
|
|
| 401 |
+ .grid-placement-content.-va-tablet-center {
|
|
| 402 |
+ display: flex; |
|
| 403 |
+ align-items: center; |
|
| 404 |
+ } |
|
| 405 |
+ .grid-placement-content.-va-tablet-bottom {
|
|
| 406 |
+ display: flex; |
|
| 407 |
+ align-items: flex-end; |
|
| 408 |
+ } |
|
| 409 |
+} |
|
| 410 |
+@media (max-width: 599px) {
|
|
| 411 |
+ .grid-placement-content.-va-mobile-center {
|
|
| 412 |
+ display: flex; |
|
| 413 |
+ align-items: center; |
|
| 414 |
+ } |
|
| 415 |
+ .grid-placement-content.-va-mobile-bottom {
|
|
| 416 |
+ display: flex; |
|
| 417 |
+ align-items: flex-end; |
|
| 418 |
+ } |
|
| 419 |
+} |
|
| 420 |
+ |
|
| 390 | 421 |
.content-grid-placement-wrapper {
|
| 391 | 422 |
display: flex; |
| 392 | 423 |
} |
| ... | ... |
@@ -1 +1 @@ |
| 1 |
-:root{--grid-columns:12;--grid-rows:7}.gp--col-start-1{grid-column-start:1}.gp--col-end-2{grid-column-end:2}.gp--col-start-2{grid-column-start:2}.gp--col-end-3{grid-column-end:3}.gp--col-start-3{grid-column-start:3}.gp--col-end-4{grid-column-end:4}.gp--col-start-4{grid-column-start:4}.gp--col-end-5{grid-column-end:5}.gp--col-start-5{grid-column-start:5}.gp--col-end-6{grid-column-end:6}.gp--col-start-6{grid-column-start:6}.gp--col-end-7{grid-column-end:7}.gp--col-start-7{grid-column-start:7}.gp--col-end-8{grid-column-end:8}.gp--col-start-8{grid-column-start:8}.gp--col-end-9{grid-column-end:9}.gp--col-start-9{grid-column-start:9}.gp--col-end-10{grid-column-end:10}.gp--col-start-10{grid-column-start:10}.gp--col-end-11{grid-column-end:11}.gp--col-start-11{grid-column-start:11}.gp--col-end-12{grid-column-end:12}.gp--col-start-12{grid-column-start:12}.gp--col-end-13{grid-column-end:13}.gp--row-start-1{grid-row-start:1}.gp--row-end-2{grid-row-end:2}.gp--row-start-2{grid-row-start:2}.gp--row-end-3{grid-row-end:3}.gp--row-start-3{grid-row-start:3}.gp--row-end-4{grid-row-end:4}.gp--row-start-4{grid-row-start:4}.gp--row-end-5{grid-row-end:5}.gp--row-start-5{grid-row-start:5}.gp--row-end-6{grid-row-end:6}.gp--row-start-6{grid-row-start:6}.gp--row-end-7{grid-row-end:7}.gp--row-start-7{grid-row-start:7}.gp--row-end-8{grid-row-end:8}@media (max-width:900px){.gp--col-tablet-start-1{grid-column-start:1}.gp--col-tablet-end-2{grid-column-end:2}.gp--col-tablet-start-2{grid-column-start:2}.gp--col-tablet-end-3{grid-column-end:3}.gp--col-tablet-start-3{grid-column-start:3}.gp--col-tablet-end-4{grid-column-end:4}.gp--col-tablet-start-4{grid-column-start:4}.gp--col-tablet-end-5{grid-column-end:5}.gp--col-tablet-start-5{grid-column-start:5}.gp--col-tablet-end-6{grid-column-end:6}.gp--col-tablet-start-6{grid-column-start:6}.gp--col-tablet-end-7{grid-column-end:7}.gp--col-tablet-start-7{grid-column-start:7}.gp--col-tablet-end-8{grid-column-end:8}.gp--col-tablet-start-8{grid-column-start:8}.gp--col-tablet-end-9{grid-column-end:9}.gp--col-tablet-start-9{grid-column-start:9}.gp--col-tablet-end-10{grid-column-end:10}.gp--col-tablet-start-10{grid-column-start:10}.gp--col-tablet-end-11{grid-column-end:11}.gp--col-tablet-start-11{grid-column-start:11}.gp--col-tablet-end-12{grid-column-end:12}.gp--col-tablet-start-12{grid-column-start:12}.gp--col-tablet-end-13{grid-column-end:13}.gp--row-tablet-start-1{grid-row-start:1}.gp--row-tablet-end-2{grid-row-end:2}.gp--row-tablet-start-2{grid-row-start:2}.gp--row-tablet-end-3{grid-row-end:3}.gp--row-tablet-start-3{grid-row-start:3}.gp--row-tablet-end-4{grid-row-end:4}.gp--row-tablet-start-4{grid-row-start:4}.gp--row-tablet-end-5{grid-row-end:5}.gp--row-tablet-start-5{grid-row-start:5}.gp--row-tablet-end-6{grid-row-end:6}.gp--row-tablet-start-6{grid-row-start:6}.gp--row-tablet-end-7{grid-row-end:7}.gp--row-tablet-start-7{grid-row-start:7}.gp--row-tablet-end-8{grid-row-end:8}}@media (max-width:599px){.gp--col-mobil-start-1{grid-column-start:1}.gp--col-mobil-end-2{grid-column-end:2}.gp--col-mobil-start-2{grid-column-start:2}.gp--col-mobil-end-3{grid-column-end:3}.gp--col-mobil-start-3{grid-column-start:3}.gp--col-mobil-end-4{grid-column-end:4}.gp--col-mobil-start-4{grid-column-start:4}.gp--col-mobil-end-5{grid-column-end:5}.gp--col-mobil-start-5{grid-column-start:5}.gp--col-mobil-end-6{grid-column-end:6}.gp--col-mobil-start-6{grid-column-start:6}.gp--col-mobil-end-7{grid-column-end:7}.gp--col-mobil-start-7{grid-column-start:7}.gp--col-mobil-end-8{grid-column-end:8}.gp--col-mobil-start-8{grid-column-start:8}.gp--col-mobil-end-9{grid-column-end:9}.gp--col-mobil-start-9{grid-column-start:9}.gp--col-mobil-end-10{grid-column-end:10}.gp--col-mobil-start-10{grid-column-start:10}.gp--col-mobil-end-11{grid-column-end:11}.gp--col-mobil-start-11{grid-column-start:11}.gp--col-mobil-end-12{grid-column-end:12}.gp--col-mobil-start-12{grid-column-start:12}.gp--col-mobil-end-13{grid-column-end:13}.gp--row-mobil-start-1{grid-row-start:1}.gp--row-mobil-end-2{grid-row-end:2}.gp--row-mobil-start-2{grid-row-start:2}.gp--row-mobil-end-3{grid-row-end:3}.gp--row-mobil-start-3{grid-row-start:3}.gp--row-mobil-end-4{grid-row-end:4}.gp--row-mobil-start-4{grid-row-start:4}.gp--row-mobil-end-5{grid-row-end:5}.gp--row-mobil-start-5{grid-row-start:5}.gp--row-mobil-end-6{grid-row-end:6}.gp--row-mobil-start-6{grid-row-start:6}.gp--row-mobil-end-7{grid-row-end:7}.gp--row-mobil-start-7{grid-row-start:7}.gp--row-mobil-end-8{grid-row-end:8}}.content-grid-placement-wrapper{display:flex;min-height:100%;width:100%}.gp--grid-container{min-height:100%;width:100%;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows),minmax(0,auto))}
|
|
| 2 | 1 |
\ No newline at end of file |
| 2 |
+:root{--grid-columns:12;--grid-rows:7}.gp--col-start-1{grid-column-start:1}.gp--col-end-2{grid-column-end:2}.gp--col-start-2{grid-column-start:2}.gp--col-end-3{grid-column-end:3}.gp--col-start-3{grid-column-start:3}.gp--col-end-4{grid-column-end:4}.gp--col-start-4{grid-column-start:4}.gp--col-end-5{grid-column-end:5}.gp--col-start-5{grid-column-start:5}.gp--col-end-6{grid-column-end:6}.gp--col-start-6{grid-column-start:6}.gp--col-end-7{grid-column-end:7}.gp--col-start-7{grid-column-start:7}.gp--col-end-8{grid-column-end:8}.gp--col-start-8{grid-column-start:8}.gp--col-end-9{grid-column-end:9}.gp--col-start-9{grid-column-start:9}.gp--col-end-10{grid-column-end:10}.gp--col-start-10{grid-column-start:10}.gp--col-end-11{grid-column-end:11}.gp--col-start-11{grid-column-start:11}.gp--col-end-12{grid-column-end:12}.gp--col-start-12{grid-column-start:12}.gp--col-end-13{grid-column-end:13}.gp--row-start-1{grid-row-start:1}.gp--row-end-2{grid-row-end:2}.gp--row-start-2{grid-row-start:2}.gp--row-end-3{grid-row-end:3}.gp--row-start-3{grid-row-start:3}.gp--row-end-4{grid-row-end:4}.gp--row-start-4{grid-row-start:4}.gp--row-end-5{grid-row-end:5}.gp--row-start-5{grid-row-start:5}.gp--row-end-6{grid-row-end:6}.gp--row-start-6{grid-row-start:6}.gp--row-end-7{grid-row-end:7}.gp--row-start-7{grid-row-start:7}.gp--row-end-8{grid-row-end:8}@media (max-width:900px){.gp--col-tablet-start-1{grid-column-start:1}.gp--col-tablet-end-2{grid-column-end:2}.gp--col-tablet-start-2{grid-column-start:2}.gp--col-tablet-end-3{grid-column-end:3}.gp--col-tablet-start-3{grid-column-start:3}.gp--col-tablet-end-4{grid-column-end:4}.gp--col-tablet-start-4{grid-column-start:4}.gp--col-tablet-end-5{grid-column-end:5}.gp--col-tablet-start-5{grid-column-start:5}.gp--col-tablet-end-6{grid-column-end:6}.gp--col-tablet-start-6{grid-column-start:6}.gp--col-tablet-end-7{grid-column-end:7}.gp--col-tablet-start-7{grid-column-start:7}.gp--col-tablet-end-8{grid-column-end:8}.gp--col-tablet-start-8{grid-column-start:8}.gp--col-tablet-end-9{grid-column-end:9}.gp--col-tablet-start-9{grid-column-start:9}.gp--col-tablet-end-10{grid-column-end:10}.gp--col-tablet-start-10{grid-column-start:10}.gp--col-tablet-end-11{grid-column-end:11}.gp--col-tablet-start-11{grid-column-start:11}.gp--col-tablet-end-12{grid-column-end:12}.gp--col-tablet-start-12{grid-column-start:12}.gp--col-tablet-end-13{grid-column-end:13}.gp--row-tablet-start-1{grid-row-start:1}.gp--row-tablet-end-2{grid-row-end:2}.gp--row-tablet-start-2{grid-row-start:2}.gp--row-tablet-end-3{grid-row-end:3}.gp--row-tablet-start-3{grid-row-start:3}.gp--row-tablet-end-4{grid-row-end:4}.gp--row-tablet-start-4{grid-row-start:4}.gp--row-tablet-end-5{grid-row-end:5}.gp--row-tablet-start-5{grid-row-start:5}.gp--row-tablet-end-6{grid-row-end:6}.gp--row-tablet-start-6{grid-row-start:6}.gp--row-tablet-end-7{grid-row-end:7}.gp--row-tablet-start-7{grid-row-start:7}.gp--row-tablet-end-8{grid-row-end:8}}@media (max-width:599px){.gp--col-mobil-start-1{grid-column-start:1}.gp--col-mobil-end-2{grid-column-end:2}.gp--col-mobil-start-2{grid-column-start:2}.gp--col-mobil-end-3{grid-column-end:3}.gp--col-mobil-start-3{grid-column-start:3}.gp--col-mobil-end-4{grid-column-end:4}.gp--col-mobil-start-4{grid-column-start:4}.gp--col-mobil-end-5{grid-column-end:5}.gp--col-mobil-start-5{grid-column-start:5}.gp--col-mobil-end-6{grid-column-end:6}.gp--col-mobil-start-6{grid-column-start:6}.gp--col-mobil-end-7{grid-column-end:7}.gp--col-mobil-start-7{grid-column-start:7}.gp--col-mobil-end-8{grid-column-end:8}.gp--col-mobil-start-8{grid-column-start:8}.gp--col-mobil-end-9{grid-column-end:9}.gp--col-mobil-start-9{grid-column-start:9}.gp--col-mobil-end-10{grid-column-end:10}.gp--col-mobil-start-10{grid-column-start:10}.gp--col-mobil-end-11{grid-column-end:11}.gp--col-mobil-start-11{grid-column-start:11}.gp--col-mobil-end-12{grid-column-end:12}.gp--col-mobil-start-12{grid-column-start:12}.gp--col-mobil-end-13{grid-column-end:13}.gp--row-mobil-start-1{grid-row-start:1}.gp--row-mobil-end-2{grid-row-end:2}.gp--row-mobil-start-2{grid-row-start:2}.gp--row-mobil-end-3{grid-row-end:3}.gp--row-mobil-start-3{grid-row-start:3}.gp--row-mobil-end-4{grid-row-end:4}.gp--row-mobil-start-4{grid-row-start:4}.gp--row-mobil-end-5{grid-row-end:5}.gp--row-mobil-start-5{grid-row-start:5}.gp--row-mobil-end-6{grid-row-end:6}.gp--row-mobil-start-6{grid-row-start:6}.gp--row-mobil-end-7{grid-row-end:7}.gp--row-mobil-start-7{grid-row-start:7}.gp--row-mobil-end-8{grid-row-end:8}}@media (min-width:900px){.grid-placement-content.-va-desktop-center{display:flex;align-items:center}.grid-placement-content.-va-desktop-bottom{display:flex;align-items:flex-end}}@media (max-width:900px){.grid-placement-content.-va-tablet-center{display:flex;align-items:center}.grid-placement-content.-va-tablet-bottom{display:flex;align-items:flex-end}}@media (max-width:599px){.grid-placement-content.-va-mobile-center{display:flex;align-items:center}.grid-placement-content.-va-mobile-bottom{display:flex;align-items:flex-end}}.content-grid-placement-wrapper{display:flex;min-height:100%;width:100%}.gp--grid-container{min-height:100%;width:100%;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows),minmax(0,auto))}
|
|
| 3 | 3 |
\ No newline at end of file |
| ... | ... |
@@ -67,6 +67,42 @@ $grid-rows: 7; |
| 67 | 67 |
} |
| 68 | 68 |
} |
| 69 | 69 |
|
| 70 |
+// Vertikale Ausrichtung |
|
| 71 |
+.grid-placement-content {
|
|
| 72 |
+ @media (min-width: 900px) {
|
|
| 73 |
+ &.-va-desktop-center {
|
|
| 74 |
+ display: flex; |
|
| 75 |
+ align-items: center; |
|
| 76 |
+ } |
|
| 77 |
+ &.-va-desktop-bottom {
|
|
| 78 |
+ display: flex; |
|
| 79 |
+ align-items: flex-end; |
|
| 80 |
+ } |
|
| 81 |
+ } |
|
| 82 |
+ |
|
| 83 |
+ @media (max-width: 900px) {
|
|
| 84 |
+ &.-va-tablet-center {
|
|
| 85 |
+ display: flex; |
|
| 86 |
+ align-items: center; |
|
| 87 |
+ } |
|
| 88 |
+ &.-va-tablet-bottom {
|
|
| 89 |
+ display: flex; |
|
| 90 |
+ align-items: flex-end; |
|
| 91 |
+ } |
|
| 92 |
+ } |
|
| 93 |
+ |
|
| 94 |
+ @media (max-width: 599px) {
|
|
| 95 |
+ &.-va-mobile-center {
|
|
| 96 |
+ display: flex; |
|
| 97 |
+ align-items: center; |
|
| 98 |
+ } |
|
| 99 |
+ &.-va-mobile-bottom {
|
|
| 100 |
+ display: flex; |
|
| 101 |
+ align-items: flex-end; |
|
| 102 |
+ } |
|
| 103 |
+ } |
|
| 104 |
+} |
|
| 105 |
+ |
|
| 70 | 106 |
|
| 71 | 107 |
// Anpassen des Containers |
| 72 | 108 |
.content-grid-placement-wrapper {
|