From 239d2d2bb0553723374e6078d2d4b144fc843990 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Thu, 21 Mar 2024 13:22:42 +0100
Subject: [PATCH] Minor fixes to submission all table and status bar on small
screens (#3825)
---
.../sass/components/_status-block.scss | 25 ++++---------------
hypha/static_src/sass/components/_table.scss | 8 ++++++
2 files changed, 13 insertions(+), 20 deletions(-)
diff --git a/hypha/static_src/sass/components/_status-block.scss b/hypha/static_src/sass/components/_status-block.scss
index 02f661dda..8cc505b0f 100644
--- a/hypha/static_src/sass/components/_status-block.scss
+++ b/hypha/static_src/sass/components/_status-block.scss
@@ -3,17 +3,18 @@
background-color: $color--white;
border: 1px solid $color--light-mid-grey;
- @include media-query(tablet-landscape) {
+ @include media-query($table-breakpoint) {
display: flex;
}
&__item {
- padding: 20px;
+ display: block;
+ padding: 10px 20px;
border-block-end: 1px solid $color--light-mid-grey;
background-color: $color--white;
transition: background-color $quick-transition;
- @include media-query(tablet-landscape) {
+ @include media-query($table-breakpoint) {
border-block-end: 0;
border-inline-end: 1px solid $color--light-mid-grey;
width: 100%;
@@ -50,7 +51,7 @@
}
&__info {
- @include media-query(tablet-landscape) {
+ @include media-query($table-breakpoint) {
margin-block-start: auto;
}
}
@@ -59,20 +60,4 @@
width: 100%;
hyphens: auto;
}
-
- &__link {
- text-transform: uppercase;
- font-weight: $weight--semibold;
- transition: opacity $quick-transition;
-
- @include media-query(tablet-landscape) {
- opacity: 0;
- pointer-events: none;
-
- #{$root}__item:hover & {
- opacity: 1;
- pointer-events: all;
- }
- }
- }
}
diff --git a/hypha/static_src/sass/components/_table.scss b/hypha/static_src/sass/components/_table.scss
index 238229445..a1ef76228 100644
--- a/hypha/static_src/sass/components/_table.scss
+++ b/hypha/static_src/sass/components/_table.scss
@@ -72,6 +72,14 @@
width: initial;
}
+ &.selected {
+ display: none;
+
+ @include media-query($table-breakpoint) {
+ display: table-cell;
+ }
+ }
+
&.lead {
span {
@include media-query($table-breakpoint) {
--
GitLab