eSales Media Git repositories
Browse code

Fix width issue with vertical alignment in GridPlacementWrapper

Benjamin Roth authored on25/04/2025 16:21:26
Showing1 changed files
public/css/grid-placement-wrapper.scss
History View file @76e6ab7
... ... 
@@ -103,6 +103,10 @@ $grid-rows: 7;
103 103 
   }
104 104 
 }
105 105
106 
+.grid-placement-fragments {
107 
+  width: 100%;
108 
+}
109 
+
106 110
107 111 
 // Anpassen des Containers
108 112 
 .content-grid-placement-wrapper {
Browse code

Add vertical alignment for GridPlacementWrapper

Benjamin Roth authored on25/04/2025 16:10:45
Showing1 changed files
public/css/grid-placement-wrapper.scss
History View file @ef9973a
... ... 
@@ -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 {
Browse code

Fix width issue of grid placement wrapper

Benjamin Roth authored on25/04/2025 14:54:28
Showing1 changed files
public/css/grid-placement-wrapper.scss
History View file @9e21876
... ... 
@@ -75,6 +75,7 @@ $grid-rows: 7;
75 75 
 .content-grid-placement-wrapper,
76 76 
 .gp--grid-container {
77 77 
   min-height: 100%;
78 
+  width: 100%;
78 79 
 }
79 80 
 .gp--grid-container {
80 81 
   display: grid;
Browse code

Increase row count from 6 to 7 for the GridPlacementWrapper

Benjamin Roth authored on03/03/2025 21:25:07
Showing1 changed files
public/css/grid-placement-wrapper.scss
History View file @d51cb39
... ... 
@@ -1,10 +1,10 @@
1 1 
 :root {
2 2 
   --grid-columns: 12;
3 
-  --grid-rows: 6;
3 
+  --grid-rows: 7;
4 4 
 }
5 5
6 6 
 $grid-columns: 12;
7 
-$grid-rows: 6;
7 
+$grid-rows: 7;
8 8
9 9 
 // Default (Desktop)
10 10 
 @for $i from 1 through $grid-columns {
Browse code

Allow grid to grow in height if content demands it

Benjamin Roth authored on03/03/2025 13:10:54
Showing1 changed files
public/css/grid-placement-wrapper.scss
History View file @5a5a5fb
... ... 
@@ -69,10 +69,15 @@ $grid-rows: 6;
69 69
70 70
71 71 
 // Anpassen des Containers
72 
+.content-grid-placement-wrapper {
73 
+  display: flex;
74 
+}
75 
+.content-grid-placement-wrapper,
76 
+.gp--grid-container {
77 
+  min-height: 100%;
78 
+}
72 79 
 .gp--grid-container {
73 80 
   display: grid;
74 81 
   grid-template-columns: repeat(var(--grid-columns), minmax(0px, 1fr));
75 82 
   grid-template-rows: repeat(var(--grid-rows), minmax(0px, auto));
76 
-  position: absolute;
77 
-  inset: 0;
78 83 
 }
Browse code

Add a grid placement wrapper content element

Benjamin Roth authored on01/03/2025 21:22:53
Showing1 changed files
public/css/grid-placement-wrapper.scss
History View file @1f7af1c
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,78 @@
1 
+:root {
2 
+  --grid-columns: 12;
3 
+  --grid-rows: 6;
4 
+}
5 
+
6 
+$grid-columns: 12;
7 
+$grid-rows: 6;
8 
+
9 
+// Default (Desktop)
10 
+@for $i from 1 through $grid-columns {
11 
+  .gp--col-start-#{$i} {
12 
+    grid-column-start: $i;
13 
+  }
14 
+  .gp--col-end-#{$i + 1} {
15 
+    grid-column-end: $i + 1;
16 
+  }
17 
+}
18 
+
19 
+@for $i from 1 through $grid-rows {
20 
+  .gp--row-start-#{$i} {
21 
+    grid-row-start: $i;
22 
+  }
23 
+  .gp--row-end-#{$i + 1} {
24 
+    grid-row-end: $i + 1;
25 
+  }
26 
+}
27 
+
28 
+// Tablet (max-width: 900px)
29 
+@media (max-width: 900px) {
30 
+  @for $i from 1 through $grid-columns {
31 
+    .gp--col-tablet-start-#{$i} {
32 
+      grid-column-start: $i;
33 
+    }
34 
+    .gp--col-tablet-end-#{$i + 1} {
35 
+      grid-column-end: $i + 1;
36 
+    }
37 
+  }
38 
+
39 
+  @for $i from 1 through $grid-rows {
40 
+    .gp--row-tablet-start-#{$i} {
41 
+      grid-row-start: $i;
42 
+    }
43 
+    .gp--row-tablet-end-#{$i + 1} {
44 
+      grid-row-end: $i + 1;
45 
+    }
46 
+  }
47 
+}
48 
+
49 
+// Mobil (max-width: 599px)
50 
+@media (max-width: 599px) {
51 
+  @for $i from 1 through $grid-columns {
52 
+    .gp--col-mobil-start-#{$i} {
53 
+      grid-column-start: $i;
54 
+    }
55 
+    .gp--col-mobil-end-#{$i + 1} {
56 
+      grid-column-end: $i + 1;
57 
+    }
58 
+  }
59 
+
60 
+  @for $i from 1 through $grid-rows {
61 
+    .gp--row-mobil-start-#{$i} {
62 
+      grid-row-start: $i;
63 
+    }
64 
+    .gp--row-mobil-end-#{$i + 1} {
65 
+      grid-row-end: $i + 1;
66 
+    }
67 
+  }
68 
+}
69 
+
70 
+
71 
+// Anpassen des Containers
72 
+.gp--grid-container {
73 
+  display: grid;
74 
+  grid-template-columns: repeat(var(--grid-columns), minmax(0px, 1fr));
75 
+  grid-template-rows: repeat(var(--grid-rows), minmax(0px, auto));
76 
+  position: absolute;
77 
+  inset: 0;
78 
+}