eSales Media Git repositories
Browse code

Prefix backend css for better distinction

Benjamin Roth authored on01/03/2025 11:03:34
Showing1 changed files
public/css/grid_position_widget.css
History View file @74987d8
1 1 
deleted file mode 100644
... ... 
@@ -1,62 +0,0 @@
1 
-:root {
2 
-  --gp-primary: #a80556;
3 
-  --gp-primary-rgb: 168, 5, 86;
4 
-  --contao: var(--gp-primary);
5 
-  --contao-rgb: var(--gp-primary-rgb);
6 
-  --header-bg: var(--gp-primary);
7 
-}
8 
-
9 
-.vr--grid-pos-container {
10 
-  margin: 3px 0;
11 
-  display: grid;
12 
-  grid-template-columns: repeat(6, 1fr);
13 
-  grid-gap: 5px;
14 
-}
15 
-.vr--grid-pos-container[data-cols="1"] {
16 
-  grid-template-columns: repeat(1, 1fr);
17 
-}
18 
-.vr--grid-pos-container[data-cols="2"] {
19 
-  grid-template-columns: repeat(2, 1fr);
20 
-}
21 
-.vr--grid-pos-container[data-cols="3"] {
22 
-  grid-template-columns: repeat(3, 1fr);
23 
-}
24 
-.vr--grid-pos-container[data-cols="4"] {
25 
-  grid-template-columns: repeat(4, 1fr);
26 
-}
27 
-.vr--grid-pos-container[data-cols="5"] {
28 
-  grid-template-columns: repeat(5, 1fr);
29 
-}
30 
-.vr--grid-pos-container[data-cols="6"] {
31 
-  grid-template-columns: repeat(6, 1fr);
32 
-}
33 
-.vr--grid-pos-container[data-cols="7"] {
34 
-  grid-template-columns: repeat(7, 1fr);
35 
-}
36 
-.vr--grid-pos-container[data-cols="8"] {
37 
-  grid-template-columns: repeat(8, 1fr);
38 
-}
39 
-.vr--grid-pos-container[data-cols="9"] {
40 
-  grid-template-columns: repeat(9, 1fr);
41 
-}
42 
-.vr--grid-pos-container[data-cols="10"] {
43 
-  grid-template-columns: repeat(10, 1fr);
44 
-}
45 
-.vr--grid-pos-container[data-cols="11"] {
46 
-  grid-template-columns: repeat(11, 1fr);
47 
-}
48 
-.vr--grid-pos-container[data-cols="12"] {
49 
-  grid-template-columns: repeat(12, 1fr);
50 
-}
51 
-
52 
-.grid-cell {
53 
-  height: 30px;
54 
-  border: 1px solid #ccc;
55 
-  cursor: pointer;
56 
-}
57 
-.grid-cell:hover {
58 
-  background-color: rgba(var(--contao-rgb), 0.3);
59 
-}
60 
-.grid-cell.selected {
61 
-  background-color: var(--contao);
62 
-}
Browse code

Allow for multiple GridPosition widgets to work

Benjamin Roth authored on28/02/2025 14:53:21
Showing1 changed files
public/css/grid_position_widget.css
History View file @5752388
... ... 
@@ -6,46 +6,46 @@
6 6 
   --header-bg: var(--gp-primary);
7 7 
 }
8 8
9 
-.grid-container {
9 
+.vr--grid-pos-container {
10 10 
   margin: 3px 0;
11 11 
   display: grid;
12 12 
   grid-template-columns: repeat(6, 1fr);
13 13 
   grid-gap: 5px;
14 14 
 }
15 
-.grid-container[data-cols="1"] {
15 
+.vr--grid-pos-container[data-cols="1"] {
16 16 
   grid-template-columns: repeat(1, 1fr);
17 17 
 }
18 
-.grid-container[data-cols="2"] {
18 
+.vr--grid-pos-container[data-cols="2"] {
19 19 
   grid-template-columns: repeat(2, 1fr);
20 20 
 }
21 
-.grid-container[data-cols="3"] {
21 
+.vr--grid-pos-container[data-cols="3"] {
22 22 
   grid-template-columns: repeat(3, 1fr);
23 23 
 }
24 
-.grid-container[data-cols="4"] {
24 
+.vr--grid-pos-container[data-cols="4"] {
25 25 
   grid-template-columns: repeat(4, 1fr);
26 26 
 }
27 
-.grid-container[data-cols="5"] {
27 
+.vr--grid-pos-container[data-cols="5"] {
28 28 
   grid-template-columns: repeat(5, 1fr);
29 29 
 }
30 
-.grid-container[data-cols="6"] {
30 
+.vr--grid-pos-container[data-cols="6"] {
31 31 
   grid-template-columns: repeat(6, 1fr);
32 32 
 }
33 
-.grid-container[data-cols="7"] {
33 
+.vr--grid-pos-container[data-cols="7"] {
34 34 
   grid-template-columns: repeat(7, 1fr);
35 35 
 }
36 
-.grid-container[data-cols="8"] {
36 
+.vr--grid-pos-container[data-cols="8"] {
37 37 
   grid-template-columns: repeat(8, 1fr);
38 38 
 }
39 
-.grid-container[data-cols="9"] {
39 
+.vr--grid-pos-container[data-cols="9"] {
40 40 
   grid-template-columns: repeat(9, 1fr);
41 41 
 }
42 
-.grid-container[data-cols="10"] {
42 
+.vr--grid-pos-container[data-cols="10"] {
43 43 
   grid-template-columns: repeat(10, 1fr);
44 44 
 }
45 
-.grid-container[data-cols="11"] {
45 
+.vr--grid-pos-container[data-cols="11"] {
46 46 
   grid-template-columns: repeat(11, 1fr);
47 47 
 }
48 
-.grid-container[data-cols="12"] {
48 
+.vr--grid-pos-container[data-cols="12"] {
49 49 
   grid-template-columns: repeat(12, 1fr);
50 50 
 }
51 51
Browse code

Add GridPosition widget label to template and add some margin

Benjamin Roth authored on28/02/2025 11:39:37
Showing1 changed files
public/css/grid_position_widget.css
History View file @273e1fc
... ... 
@@ -7,6 +7,7 @@
7 7 
 }
8 8
9 9 
 .grid-container {
10 
+  margin: 3px 0;
10 11 
   display: grid;
11 12 
   grid-template-columns: repeat(6, 1fr);
12 13 
   grid-gap: 5px;
Browse code

Add new GridPosition widget

Benjamin Roth authored on28/02/2025 10:55:44
Showing1 changed files
public/css/grid_position_widget.css
History View file @76c5c65
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,61 @@
1 
+:root {
2 
+  --gp-primary: #a80556;
3 
+  --gp-primary-rgb: 168, 5, 86;
4 
+  --contao: var(--gp-primary);
5 
+  --contao-rgb: var(--gp-primary-rgb);
6 
+  --header-bg: var(--gp-primary);
7 
+}
8 
+
9 
+.grid-container {
10 
+  display: grid;
11 
+  grid-template-columns: repeat(6, 1fr);
12 
+  grid-gap: 5px;
13 
+}
14 
+.grid-container[data-cols="1"] {
15 
+  grid-template-columns: repeat(1, 1fr);
16 
+}
17 
+.grid-container[data-cols="2"] {
18 
+  grid-template-columns: repeat(2, 1fr);
19 
+}
20 
+.grid-container[data-cols="3"] {
21 
+  grid-template-columns: repeat(3, 1fr);
22 
+}
23 
+.grid-container[data-cols="4"] {
24 
+  grid-template-columns: repeat(4, 1fr);
25 
+}
26 
+.grid-container[data-cols="5"] {
27 
+  grid-template-columns: repeat(5, 1fr);
28 
+}
29 
+.grid-container[data-cols="6"] {
30 
+  grid-template-columns: repeat(6, 1fr);
31 
+}
32 
+.grid-container[data-cols="7"] {
33 
+  grid-template-columns: repeat(7, 1fr);
34 
+}
35 
+.grid-container[data-cols="8"] {
36 
+  grid-template-columns: repeat(8, 1fr);
37 
+}
38 
+.grid-container[data-cols="9"] {
39 
+  grid-template-columns: repeat(9, 1fr);
40 
+}
41 
+.grid-container[data-cols="10"] {
42 
+  grid-template-columns: repeat(10, 1fr);
43 
+}
44 
+.grid-container[data-cols="11"] {
45 
+  grid-template-columns: repeat(11, 1fr);
46 
+}
47 
+.grid-container[data-cols="12"] {
48 
+  grid-template-columns: repeat(12, 1fr);
49 
+}
50 
+
51 
+.grid-cell {
52 
+  height: 30px;
53 
+  border: 1px solid #ccc;
54 
+  cursor: pointer;
55 
+}
56 
+.grid-cell:hover {
57 
+  background-color: rgba(var(--contao-rgb), 0.3);
58 
+}
59 
+.grid-cell.selected {
60 
+  background-color: var(--contao);
61 
+}