From 1c94bfa50818254f2fb80a58256253c27e7a4049 Mon Sep 17 00:00:00 2001 From: Kadee80 Date: Mon, 18 Jun 2018 14:42:52 -0400 Subject: [PATCH 1/6] fix(app): Fix alignment issues in modals, fix titlebar on page --- app/src/components/LabwareCalibration/styles.css | 2 +- app/src/components/Page/index.js | 2 +- app/src/components/Page/styles.css | 8 ++++++++ components/src/modals/modals.css | 12 +++++------- components/src/styles/positioning.css | 1 + 5 files changed, 16 insertions(+), 9 deletions(-) diff --git a/app/src/components/LabwareCalibration/styles.css b/app/src/components/LabwareCalibration/styles.css index ac7d0ae1665..c682d3120e6 100644 --- a/app/src/components/LabwareCalibration/styles.css +++ b/app/src/components/LabwareCalibration/styles.css @@ -60,6 +60,6 @@ .spinner { width: 6rem; display: block; - margin: auto; + margin: 45% auto auto; color: var(--c-font-light); } diff --git a/app/src/components/Page/index.js b/app/src/components/Page/index.js index 399370801d1..c035f89e06c 100644 --- a/app/src/components/Page/index.js +++ b/app/src/components/Page/index.js @@ -15,7 +15,7 @@ export default function Page (props: Props) { return (
{titleBarProps && ( - + )} {children}
diff --git a/app/src/components/Page/styles.css b/app/src/components/Page/styles.css index e463536cdba..3b774f8ee3a 100644 --- a/app/src/components/Page/styles.css +++ b/app/src/components/Page/styles.css @@ -14,4 +14,12 @@ @apply --relative-fill; overflow-y: auto; + padding-top: 3.5rem; +} + +.fixed_title_bar { + position: fixed; + top: 0; + width: 100%; + z-index: 1; } diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index f7648796453..ce95cd20a94 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -9,24 +9,21 @@ margin: 0 auto; padding: 1rem; border-radius: 0.5rem; + position: relative; } } .modal { - @apply --absolute-fill; - @apply --center-children; + @apply --modal; padding: 4rem; } .modal_page { @apply --absolute-fill; + @apply --flex-start; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - padding: 5rem 2rem 1rem; + padding-top: 5rem; } .overlay { @@ -40,6 +37,7 @@ top: 0; left: 0; right: 0; + width: 100%; z-index: 3; } diff --git a/components/src/styles/positioning.css b/components/src/styles/positioning.css index 39da9eb617e..0bc3362fbd9 100644 --- a/components/src/styles/positioning.css +++ b/components/src/styles/positioning.css @@ -15,6 +15,7 @@ --flex-start: { display: flex; + flex-direction: column; justify-content: flex-start; align-items: center; } From 9e4519f08478667bb0ce36c9b9a651ea3e291e11 Mon Sep 17 00:00:00 2001 From: Kadee80 Date: Mon, 18 Jun 2018 14:56:15 -0400 Subject: [PATCH 2/6] add modal page padding back in --- components/src/modals/modals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index ce95cd20a94..d4e1bedeadd 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -23,7 +23,7 @@ @apply --absolute-fill; @apply --flex-start; - padding-top: 5rem; + padding: 5rem 3rem 2rem; } .overlay { From cc4af64b7bdd2b80f85dc0dc0cec732a3ae0839e Mon Sep 17 00:00:00 2001 From: Kadee80 Date: Mon, 18 Jun 2018 15:26:32 -0400 Subject: [PATCH 3/6] squashme: update padding to avoid overflow on standard screen height --- components/src/modals/modals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index d4e1bedeadd..6543a5efd5d 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -23,7 +23,7 @@ @apply --absolute-fill; @apply --flex-start; - padding: 5rem 3rem 2rem; + padding-top: 4.5rem 3rem 1rem; } .overlay { From 1fdc8082a8aab2ae88b2c05c348e35366b28adff Mon Sep 17 00:00:00 2001 From: Kadee80 Date: Mon, 18 Jun 2018 16:17:45 -0400 Subject: [PATCH 4/6] fix found display issues --- app/src/components/LabwareCalibration/styles.css | 6 +++++- components/src/modals/modals.css | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/app/src/components/LabwareCalibration/styles.css b/app/src/components/LabwareCalibration/styles.css index c682d3120e6..9628b94c61b 100644 --- a/app/src/components/LabwareCalibration/styles.css +++ b/app/src/components/LabwareCalibration/styles.css @@ -7,6 +7,10 @@ right: 0; } +.modal_contents { + background-color: white; +} + .in_progress_contents { background-color: transparent; @@ -60,6 +64,6 @@ .spinner { width: 6rem; display: block; - margin: 45% auto auto; + margin: 35vh auto auto; color: var(--c-font-light); } diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index 6543a5efd5d..dedca22438b 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -23,7 +23,7 @@ @apply --absolute-fill; @apply --flex-start; - padding-top: 4.5rem 3rem 1rem; + padding: 4.5rem 3rem 1rem 3rem; } .overlay { @@ -53,6 +53,7 @@ background-color: white; max-height: 100%; overflow-y: auto; + padding-top: 1rem; } .modal_page_heading { From f2f0ef157bdb239e4b17a7393e72b5b5723e3db1 Mon Sep 17 00:00:00 2001 From: Kadee80 Date: Mon, 18 Jun 2018 16:29:23 -0400 Subject: [PATCH 5/6] scope flex-start to modals.css --- components/src/modals/modals.css | 7 +++++++ components/src/styles/positioning.css | 7 ------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index dedca22438b..dc147c8e83c 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -11,6 +11,13 @@ border-radius: 0.5rem; position: relative; } + + --flex-start: { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + } } .modal { diff --git a/components/src/styles/positioning.css b/components/src/styles/positioning.css index 0bc3362fbd9..0d18be3efc2 100644 --- a/components/src/styles/positioning.css +++ b/components/src/styles/positioning.css @@ -13,13 +13,6 @@ align-items: center; }; - --flex-start: { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - } - --modal: { @apply --absolute-fill; @apply --center-children; From fd50fcaf9b932d4ba56d1365d9e0c30369ee197e Mon Sep 17 00:00:00 2001 From: Kadee80 Date: Mon, 18 Jun 2018 16:34:25 -0400 Subject: [PATCH 6/6] remove flex-direction from flex start --- components/src/modals/modals.css | 8 +------- components/src/styles/positioning.css | 6 ++++++ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/src/modals/modals.css b/components/src/modals/modals.css index dc147c8e83c..d42a850a37f 100644 --- a/components/src/modals/modals.css +++ b/components/src/modals/modals.css @@ -11,13 +11,6 @@ border-radius: 0.5rem; position: relative; } - - --flex-start: { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - } } .modal { @@ -30,6 +23,7 @@ @apply --absolute-fill; @apply --flex-start; + flex-direction: column; padding: 4.5rem 3rem 1rem 3rem; } diff --git a/components/src/styles/positioning.css b/components/src/styles/positioning.css index 0d18be3efc2..922260cf5c8 100644 --- a/components/src/styles/positioning.css +++ b/components/src/styles/positioning.css @@ -13,6 +13,12 @@ align-items: center; }; + --flex-start: { + display: flex; + justify-content: flex-start; + align-items: center; + }; + --modal: { @apply --absolute-fill; @apply --center-children;