From e29007bca98631655752ce0a1902223e7c0bfda0 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <hello@saschaeggenberger.com>
Date: Sun, 9 Jun 2024 23:34:53 +0200
Subject: [PATCH] Increase visibility of table sorting
---
dist/css/base/gin.css | 30 ++++++++++++++++++++++++++++--
dist/css/theme/accent.css | 1 +
dist/media/sprite.svg | Bin 33690 -> 33141 bytes
styles/base/_table.scss | 29 +++++++++++++++++++++++------
styles/helpers/_svg-sprite.scss | 5 -----
styles/theme/accent.scss | 1 +
6 files changed, 53 insertions(+), 13 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index 258ae1820..0b6294f14 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -1439,6 +1439,10 @@ table.position-sticky thead {
position: static;
}
+table.position-sticky.--is-processed thead {
+ pointer-events: none;
+}
+
table.position-sticky.--is-processed thead tr {
border-color: transparent;
}
@@ -1495,7 +1499,7 @@ table .draggable-table.tabledrag-disabled tr {
table tr:hover,
table .draggable-table.tabledrag-disabled tr:hover {
color: var(--gin-color-text);
- background: var(--gin-bg-item-hover);
+ background: var(--gin-bg-item);
}
table tr.selected:hover,
@@ -1508,7 +1512,7 @@ table .draggable-table.tabledrag-disabled tr.selected:hover {
}
table tr.selected td {
- background-color: var(--gin-color-primary-light);
+ background-color: var(--gin-bg-item-hover);
}
table td a {
@@ -1549,11 +1553,33 @@ table td .group-label {
}
}
+.sortable-heading.is-active > a::before,
+.sortable-heading > a:hover::before {
+ width: 100%;
+}
+
+[dir="ltr"] .sortable-heading.is-active > a::before,
+[dir="ltr"] .sortable-heading > a:hover::before {
+ left: 0;
+}
+
+[dir="rtl"] .sortable-heading.is-active > a::before,
+[dir="rtl"] .sortable-heading > a:hover::before {
+ right: 0;
+}
+
+.sortable-heading > a:hover::before {
+ border-bottom-width: 3px;
+}
+
.sortable-heading.is-active > a, .sortable-heading.is-active > a:hover, .sortable-heading.is-active > a:active {
color: var(--gin-color-primary-active);
}
.sortable-heading.is-active > a::before {
+ background-color: var(--gin-bg-item);
+ border-top-left-radius: var(--gin-border-s);
+ border-top-right-radius: var(--gin-border-s);
border-bottom: .1875rem solid var(--gin-color-primary-active);
}
diff --git a/dist/css/theme/accent.css b/dist/css/theme/accent.css
index 34a74bbea..9f7f9a9fd 100644
--- a/dist/css/theme/accent.css
+++ b/dist/css/theme/accent.css
@@ -2,6 +2,7 @@
--gin-color-primary: rgb(var(--gin-color-primary-rgb));
--gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
--gin-bg-app: rgb(var(--gin-bg-app-rgb));
+ --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05);
--gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
--gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
--gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
diff --git a/dist/media/sprite.svg b/dist/media/sprite.svg
index 45c2b6466c7adb6c20d90f0254362b1121c9cad2..dc6af66074727233c3c526fc9abf586fb5001239 100644
GIT binary patch
delta 321
zcmbQ$&h)j3X@h_A=8{ws#>t5eYLm~U$xIGSmE6pnevf(biZqSMoY@kSU!_THw$3(S
zocth5Yx2|_@yQC=5|fYQykIn(ypUIQ@}*pf$!l{YHZ$c-V`4O(e2`Cd^1cG8$**$7
zC%-RvI(bHc+T>q_GLvr<h;P;{a%P--xln!b^kRw0qD2yuj~8E>Tv)6&d4GxQ<PF6V
zo4=G;GBO&2jSVi7n0%*1d~;J7JL6<W1@*}r%H<|!mx)h)T7Hko%wqBbDb>lZDpV$)
zEmxgvTzPTwkqYC<=2ha8`76aYr&fh9O=hW5n|!}UYO-II_-27xZAL~@u(^qK(vyGI
zh;N=;x0aE~+#KxQ^ah#9)pZh^XE)d|PIhcioBX#?a&k+9_-5TEX~xOd8`UP~HA@Q`
RnJ9pflD?gdesNj49RRhWfW80#
delta 626
zcmey`#5Aj&X@h?<n{H-aQhvqci=_(nmU<=%Muy3H=6Yrdh9In91R{$K^(=KkQhH{(
zhQ5Xt3Kq!*x`ujYx_V~1#(IXjhI$sdCVEEBhNgOk5FN&PW(r0MhDHiT#UK@WW*~V5
zLp_UNGX*m}69qGn5egu^dKL<%dPcg2dgcmd^&lh76%4_ALy&S^Lp=~}sbHX>XQXGS
zXRK$WX98wffUHu`Gt4kF)-y^r)H6~r0BHb|mb!X|dWImvNLSBD&q!C#q*zzaL|4xO
zWS*{}o~5&)g`R~1NUMUOg@Pg277GPNi^+_!EquxOxw)xD$*ItQsYx+og#^*Y6y439
z$ySVvW|KE6sZL&*A~X3<hScW!DR-GCyJu-mewraZxg$$_vv8&{<K(t%^~t$eQj?El
zOHN*p^?Y)1p8Di<+2WHo=ZSB=lRcej@_i|_$usk$CV$KqpL{CsDWe70(5v|}le-JW
zH**v?GfplpQlDH@C^30kk>upXg%>Atl&DXhT_iKvtwenDxgsmZ$tk63ll4j@Ca)|N
z-yB=Q&d6vn`GJ(`<gQZr$*;;(CZ8?6$Y?%!Vu0G@qh%_SH7X<~A1LLW%vXMK@{}sI
z$*dJBldn{XZ+55%VVW#fqc(Y0mDJ?$8u87qtF##z%_kq^Q=M#6BRx63PJDA-&05CE
z8|&34JJrcd{!lNmxvb8Hak6rw+T<Jcl9M-viErj;kY;2uv6%c&N@cQVqqLxjg@TcZ
Qf{}@mzMYMJaap<@01*4cv;Y7A
diff --git a/styles/base/_table.scss b/styles/base/_table.scss
index b09603d77..da5bd7194 100644
--- a/styles/base/_table.scss
+++ b/styles/base/_table.scss
@@ -74,11 +74,15 @@ table.position-sticky {
position: static;
}
- &.--is-processed thead tr {
- border-color: transparent;
+ &.--is-processed thead {
+ pointer-events: none;
- .sortable-heading.is-active > a::before {
- display: none;
+ tr {
+ border-color: transparent;
+
+ .sortable-heading.is-active > a::before {
+ display: none;
+ }
}
}
}
@@ -130,7 +134,7 @@ table {
&:hover {
color: var(--gin-color-text);
- background: var(--gin-bg-item-hover);
+ background: var(--gin-bg-item);
}
&.selected:hover {
@@ -144,7 +148,7 @@ table {
}
td {
- background-color: var(--gin-color-primary-light);
+ background-color: var(--gin-bg-item-hover);
}
}
@@ -182,12 +186,25 @@ table {
}
}
+ &.is-active > a::before,
+ > a:hover::before {
+ width: 100%;
+ left: 0;
+ }
+
+ > a:hover::before {
+ border-bottom-width: 3px;
+ }
+
&.is-active > a {
&, &:hover, &:active {
color: var(--gin-color-primary-active);
}
&::before {
+ background-color: var(--gin-bg-item);
+ border-top-left-radius: var(--gin-border-s);
+ border-top-right-radius: var(--gin-border-s);
border-bottom: .1875rem solid var(--gin-color-primary-active);
}
}
diff --git a/styles/helpers/_svg-sprite.scss b/styles/helpers/_svg-sprite.scss
index 6f739eb81..349e0a6a7 100644
--- a/styles/helpers/_svg-sprite.scss
+++ b/styles/helpers/_svg-sprite.scss
@@ -59,7 +59,6 @@ $sprites: (
'user': "../../media/sprite.svg#user-view",
'appearance': "../../media/sprite.svg#appearance-view",
'bat': "../../media/sprite.svg#bat-view",
- 'commerce-inbox': "../../media/sprite.svg#commerce-inbox-view",
'commerce': "../../media/sprite.svg#commerce-view",
'config': "../../media/sprite.svg#config-view",
'content': "../../media/sprite.svg#content-view",
@@ -320,10 +319,6 @@ $sizes: (
'width': 24px,
'height': 24px
),
- 'commerce-inbox': (
- 'width': 24px,
- 'height': 24px
- ),
'commerce': (
'width': 24px,
'height': 24px
diff --git a/styles/theme/accent.scss b/styles/theme/accent.scss
index 8addb5a7a..2666422e2 100644
--- a/styles/theme/accent.scss
+++ b/styles/theme/accent.scss
@@ -2,6 +2,7 @@
--gin-color-primary: rgb(var(--gin-color-primary-rgb));
--gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
--gin-bg-app: rgb(var(--gin-bg-app-rgb));
+ --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05);
--gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
--gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
--gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
--
GitLab