From 0155ecaf8159673dbccd984f6e144088091e780a Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 10 Nov 2023 13:58:00 -0600 Subject: [PATCH 1/2] fix: TUP-598 reduce ratio for a screen range --- apps/tup-ui/src/pages/Dashboard/Dashboard.module.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css index 1dae32293..6e460da64 100644 --- a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css +++ b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css @@ -6,7 +6,6 @@ /* To reproduce complex layout of design doc */ @media (--wide-and-above) { gap: 25px; - grid-template-columns: 0.65fr 0.35fr; /*set first row as auto to prevent cutting off the sysmon*/ grid-template-rows: auto 1fr 1fr 1fr; overflow:auto; @@ -16,6 +15,13 @@ "projects_tickets updates" "projects_tickets updates"; } + /* To avoid System Status columns being cut off if at 0.65fr 0.35fr */ + @media (--wide-to-x-wide) { + grid-template-columns: 0.5fr 0.5fr; + } + @media (--x-wide-and-above) { + grid-template-columns: 0.65fr 0.35fr; + } /* To reproduce simple layout of narrow screens like CEPv2 */ @media (--wide-and-below) { row-gap: 25px; @@ -45,7 +51,7 @@ gap: 25px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; - grid-template-areas: + grid-template-areas: "projects" "tickets"; From 9ee916c950470c79078c35cc21d355a56931aaaa Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 10 Nov 2023 13:58:28 -0600 Subject: [PATCH 2/2] chore: TUP-598 move narrowest screen to top --- .../src/pages/Dashboard/Dashboard.module.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css index 6e460da64..a5b68f0a4 100644 --- a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css +++ b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css @@ -3,6 +3,15 @@ .panels { display: grid; + /* To reproduce simple layout of narrow screens like CEPv2 */ + @media (--wide-and-below) { + row-gap: 25px; + grid-template-rows: auto auto auto; + grid-template-areas: + "systems" + "projects_tickets" + "updates"; + } /* To reproduce complex layout of design doc */ @media (--wide-and-above) { gap: 25px; @@ -22,15 +31,6 @@ @media (--x-wide-and-above) { grid-template-columns: 0.65fr 0.35fr; } - /* To reproduce simple layout of narrow screens like CEPv2 */ - @media (--wide-and-below) { - row-gap: 25px; - grid-template-rows: auto auto auto; - grid-template-areas: - "systems" - "projects_tickets" - "updates"; - } } .panels > * { overflow: auto; /* to force items to stay within their grid cells */