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.scss
History View file @1f5f182
... ... 
@@ -21,11 +21,51 @@
21 21 
   border: 1px solid #ccc;
22 22 
   cursor: pointer;
23 23
24 
+  position: relative; // Macht es möglich, Symbole absolut zu positionieren
25 
+  display: flex;
26 
+  justify-content: center;
27 
+  align-items: center;
28 
+
29 
+
24 30 
   &:hover {
25 31 
     background-color: rgba(var(--gp-primary-rgb),.3);
26 32 
   }
27 33
28 34 
   &.selected {
29 35 
     background-color: var(--gp-primary);
36 
+
37 
+    &:hover::after {
38 
+      content: '';
39 
+      background-color: var(--red);
40 
+      -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");
41 
+      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");
42 
+      -webkit-mask-size: contain;
43 
+      mask-size: contain;
44 
+      -webkit-mask-repeat: no-repeat;
45 
+      mask-repeat: no-repeat;
46 
+      width: 16px;
47 
+      height: 16px;
48 
+      position: absolute;
49 
+      z-index: 2;
50 
+    }
51 
+
30 52 
   }
53 
+
54 
+  &.selectable {
55 
+    &:not(.selected):hover::before {
56 
+      content: '+'; // Plus-Symbol
57 
+      -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");
58 
+      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");
59 
+      -webkit-mask-size: contain;
60 
+      mask-size: contain;
61 
+      -webkit-mask-repeat: no-repeat;
62 
+      mask-repeat: no-repeat;
63 
+      background-color: var(--green);
64 
+      width: 16px;
65 
+      height: 16px;
66 
+      position: absolute;
67 
+      z-index: 1;
68 
+    }
69 
+  }
70 
+
31 71 
 }
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.scss
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 {
... ... 
@@ -25,10 +22,10 @@
25 22 
   cursor: pointer;
26 23
27 24 
   &:hover {
28 
-    background-color: rgba(var(--contao-rgb),.3);
25 
+    background-color: rgba(var(--gp-primary-rgb),.3);
29 26 
   }
30 27
31 28 
   &.selected {
32 
-    background-color: var(--contao);
29 
+    background-color: var(--gp-primary);
33 30 
   }
34 31 
 }
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.scss
History View file @74987d8
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,34 @@
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 
+  @for $i from 1 through 12 {
16 
+    &[data-cols="#{$i}"] {
17 
+      grid-template-columns: repeat($i, 1fr);
18 
+    }
19 
+  }
20 
+}
21 
+
22 
+.grid-cell {
23 
+  height: 30px;
24 
+  border: 1px solid #ccc;
25 
+  cursor: pointer;
26 
+
27 
+  &:hover {
28 
+    background-color: rgba(var(--contao-rgb),.3);
29 
+  }
30 
+
31 
+  &.selected {
32 
+    background-color: var(--contao);
33 
+  }
34 
+}