eSales Media Git repositories
Browse code

Improve grid selection UX

Benjamin Roth authored on03/03/2025 19:52:31
Showing1 changed files
public/css/be_grid_position_widget.css
History View file @1f5f182
... ... 
@@ -50,6 +50,10 @@
50 50 
   height: 30px;
51 51 
   border: 1px solid #ccc;
52 52 
   cursor: pointer;
53 
+  position: relative;
54 
+  display: flex;
55 
+  justify-content: center;
56 
+  align-items: center;
53 57 
 }
54 58 
 .grid-cell:hover {
55 59 
   background-color: rgba(var(--gp-primary-rgb), 0.3);
... ... 
@@ -57,3 +61,31 @@
57 61 
 .grid-cell.selected {
58 62 
   background-color: var(--gp-primary);
59 63 
 }
64 
+.grid-cell.selected:hover::after {
65 
+  content: "";
66 
+  background-color: var(--red);
67 
+  -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
68 
+  mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
69 
+  -webkit-mask-size: contain;
70 
+  mask-size: contain;
71 
+  -webkit-mask-repeat: no-repeat;
72 
+  mask-repeat: no-repeat;
73 
+  width: 16px;
74 
+  height: 16px;
75 
+  position: absolute;
76 
+  z-index: 2;
77 
+}
78 
+.grid-cell.selectable:not(.selected):hover::before {
79 
+  content: "+";
80 
+  -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
81 
+  mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
82 
+  -webkit-mask-size: contain;
83 
+  mask-size: contain;
84 
+  -webkit-mask-repeat: no-repeat;
85 
+  mask-repeat: no-repeat;
86 
+  background-color: var(--green);
87 
+  width: 16px;
88 
+  height: 16px;
89 
+  position: absolute;
90 
+  z-index: 1;
91 
+}
Browse code

Remove unrelated stuff from be_grid_position_widget css

Benjamin Roth authored on01/03/2025 21:24:50
Showing1 changed files
public/css/be_grid_position_widget.css
History View file @4223cdf
... ... 
@@ -1,9 +1,6 @@
1 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);
2 
+  --gp-primary: #c1c1c1;
3 
+  --gp-primary-rgb: 193, 193, 193;
7 4 
 }
8 5
9 6 
 .vr--grid-pos-container {
... ... 
@@ -55,8 +52,8 @@
55 52 
   cursor: pointer;
56 53 
 }
57 54 
 .grid-cell:hover {
58 
-  background-color: rgba(var(--contao-rgb), 0.3);
55 
+  background-color: rgba(var(--gp-primary-rgb), 0.3);
59 56 
 }
60 57 
 .grid-cell.selected {
61 
-  background-color: var(--contao);
58 
+  background-color: var(--gp-primary);
62 59 
 }
Browse code

Prefix backend css for better distinction

Benjamin Roth authored on01/03/2025 11:03:34
Showing1 changed files
public/css/be_grid_position_widget.css
History View file @74987d8
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,62 @@
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 
+}