Browse code

Improve grid selection UX

Benjamin Roth authored on03/03/2025 19:52:31
Showing1 changed files
... ...
@@ -1 +1 @@
1
-:root{--gp-primary:#c1c1c1;--gp-primary-rgb:193, 193, 193}.vr--grid-pos-container{margin:3px 0;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:5px}.vr--grid-pos-container[data-cols="1"]{grid-template-columns:repeat(1,1fr)}.vr--grid-pos-container[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.vr--grid-pos-container[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.vr--grid-pos-container[data-cols="4"]{grid-template-columns:repeat(4,1fr)}.vr--grid-pos-container[data-cols="5"]{grid-template-columns:repeat(5,1fr)}.vr--grid-pos-container[data-cols="6"]{grid-template-columns:repeat(6,1fr)}.vr--grid-pos-container[data-cols="7"]{grid-template-columns:repeat(7,1fr)}.vr--grid-pos-container[data-cols="8"]{grid-template-columns:repeat(8,1fr)}.vr--grid-pos-container[data-cols="9"]{grid-template-columns:repeat(9,1fr)}.vr--grid-pos-container[data-cols="10"]{grid-template-columns:repeat(10,1fr)}.vr--grid-pos-container[data-cols="11"]{grid-template-columns:repeat(11,1fr)}.vr--grid-pos-container[data-cols="12"]{grid-template-columns:repeat(12,1fr)}.grid-cell{height:30px;border:1px solid #ccc;cursor:pointer}.grid-cell:hover{background-color:rgba(var(--gp-primary-rgb),.3)}.grid-cell.selected{background-color:var(--gp-primary)}
2 1
\ No newline at end of file
2
+:root{--gp-primary:#c1c1c1;--gp-primary-rgb:193, 193, 193}.vr--grid-pos-container{margin:3px 0;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:5px}.vr--grid-pos-container[data-cols="1"]{grid-template-columns:repeat(1,1fr)}.vr--grid-pos-container[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.vr--grid-pos-container[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.vr--grid-pos-container[data-cols="4"]{grid-template-columns:repeat(4,1fr)}.vr--grid-pos-container[data-cols="5"]{grid-template-columns:repeat(5,1fr)}.vr--grid-pos-container[data-cols="6"]{grid-template-columns:repeat(6,1fr)}.vr--grid-pos-container[data-cols="7"]{grid-template-columns:repeat(7,1fr)}.vr--grid-pos-container[data-cols="8"]{grid-template-columns:repeat(8,1fr)}.vr--grid-pos-container[data-cols="9"]{grid-template-columns:repeat(9,1fr)}.vr--grid-pos-container[data-cols="10"]{grid-template-columns:repeat(10,1fr)}.vr--grid-pos-container[data-cols="11"]{grid-template-columns:repeat(11,1fr)}.vr--grid-pos-container[data-cols="12"]{grid-template-columns:repeat(12,1fr)}.grid-cell{height:30px;border:1px solid #ccc;cursor:pointer;position:relative;display:flex;justify-content:center;align-items:center}.grid-cell:hover{background-color:rgba(var(--gp-primary-rgb),.3)}.grid-cell.selected{background-color:var(--gp-primary)}.grid-cell.selected:hover::after{content:"";background-color:var(--red);-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");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");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px;height:16px;position:absolute;z-index:2}.grid-cell.selectable:not(.selected):hover::before{content:"+";-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");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");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--green);width:16px;height:16px;position:absolute;z-index:1}
3 3
\ No newline at end of file
Browse code

Remove unrelated stuff from be_grid_position_widget css

Benjamin Roth authored on01/03/2025 21:24:50
Showing1 changed files
... ...
@@ -1 +1 @@
1
-:root{--gp-primary:#a80556;--gp-primary-rgb:168, 5, 86;--contao:var(--gp-primary);--contao-rgb:var(--gp-primary-rgb);--header-bg:var(--gp-primary)}.vr--grid-pos-container{margin:3px 0;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:5px}.vr--grid-pos-container[data-cols="1"]{grid-template-columns:repeat(1,1fr)}.vr--grid-pos-container[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.vr--grid-pos-container[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.vr--grid-pos-container[data-cols="4"]{grid-template-columns:repeat(4,1fr)}.vr--grid-pos-container[data-cols="5"]{grid-template-columns:repeat(5,1fr)}.vr--grid-pos-container[data-cols="6"]{grid-template-columns:repeat(6,1fr)}.vr--grid-pos-container[data-cols="7"]{grid-template-columns:repeat(7,1fr)}.vr--grid-pos-container[data-cols="8"]{grid-template-columns:repeat(8,1fr)}.vr--grid-pos-container[data-cols="9"]{grid-template-columns:repeat(9,1fr)}.vr--grid-pos-container[data-cols="10"]{grid-template-columns:repeat(10,1fr)}.vr--grid-pos-container[data-cols="11"]{grid-template-columns:repeat(11,1fr)}.vr--grid-pos-container[data-cols="12"]{grid-template-columns:repeat(12,1fr)}.grid-cell{height:30px;border:1px solid #ccc;cursor:pointer}.grid-cell:hover{background-color:rgba(var(--contao-rgb),.3)}.grid-cell.selected{background-color:var(--contao)}
2 1
\ No newline at end of file
2
+:root{--gp-primary:#c1c1c1;--gp-primary-rgb:193, 193, 193}.vr--grid-pos-container{margin:3px 0;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:5px}.vr--grid-pos-container[data-cols="1"]{grid-template-columns:repeat(1,1fr)}.vr--grid-pos-container[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.vr--grid-pos-container[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.vr--grid-pos-container[data-cols="4"]{grid-template-columns:repeat(4,1fr)}.vr--grid-pos-container[data-cols="5"]{grid-template-columns:repeat(5,1fr)}.vr--grid-pos-container[data-cols="6"]{grid-template-columns:repeat(6,1fr)}.vr--grid-pos-container[data-cols="7"]{grid-template-columns:repeat(7,1fr)}.vr--grid-pos-container[data-cols="8"]{grid-template-columns:repeat(8,1fr)}.vr--grid-pos-container[data-cols="9"]{grid-template-columns:repeat(9,1fr)}.vr--grid-pos-container[data-cols="10"]{grid-template-columns:repeat(10,1fr)}.vr--grid-pos-container[data-cols="11"]{grid-template-columns:repeat(11,1fr)}.vr--grid-pos-container[data-cols="12"]{grid-template-columns:repeat(12,1fr)}.grid-cell{height:30px;border:1px solid #ccc;cursor:pointer}.grid-cell:hover{background-color:rgba(var(--gp-primary-rgb),.3)}.grid-cell.selected{background-color:var(--gp-primary)}
3 3
\ No newline at end of file
Browse code

Prefix backend css for better distinction

Benjamin Roth authored on01/03/2025 11:03:34
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1 @@
1
+:root{--gp-primary:#a80556;--gp-primary-rgb:168, 5, 86;--contao:var(--gp-primary);--contao-rgb:var(--gp-primary-rgb);--header-bg:var(--gp-primary)}.vr--grid-pos-container{margin:3px 0;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:5px}.vr--grid-pos-container[data-cols="1"]{grid-template-columns:repeat(1,1fr)}.vr--grid-pos-container[data-cols="2"]{grid-template-columns:repeat(2,1fr)}.vr--grid-pos-container[data-cols="3"]{grid-template-columns:repeat(3,1fr)}.vr--grid-pos-container[data-cols="4"]{grid-template-columns:repeat(4,1fr)}.vr--grid-pos-container[data-cols="5"]{grid-template-columns:repeat(5,1fr)}.vr--grid-pos-container[data-cols="6"]{grid-template-columns:repeat(6,1fr)}.vr--grid-pos-container[data-cols="7"]{grid-template-columns:repeat(7,1fr)}.vr--grid-pos-container[data-cols="8"]{grid-template-columns:repeat(8,1fr)}.vr--grid-pos-container[data-cols="9"]{grid-template-columns:repeat(9,1fr)}.vr--grid-pos-container[data-cols="10"]{grid-template-columns:repeat(10,1fr)}.vr--grid-pos-container[data-cols="11"]{grid-template-columns:repeat(11,1fr)}.vr--grid-pos-container[data-cols="12"]{grid-template-columns:repeat(12,1fr)}.grid-cell{height:30px;border:1px solid #ccc;cursor:pointer}.grid-cell:hover{background-color:rgba(var(--contao-rgb),.3)}.grid-cell.selected{background-color:var(--contao)}
0 2
\ No newline at end of file