From 8f6dad1634703b9eb8f8519072bd7b1a5eb6d68f Mon Sep 17 00:00:00 2001 From: Max Stevenson Date: Mon, 8 Jun 2020 18:44:26 +0100 Subject: [PATCH] Fixed the CSS hellscape created this morning. --- index.html | 4 +-- public/stylesheets/styles.css | 43 +++++++++++++++++++++-------- public/stylesheets/styles.css.map | 2 +- sass/components/_borders.scss | 9 ++++++ sass/components/_control-panel.scss | 5 ++++ sass/components/_display-text.scss | 16 +++++++---- sass/components/_layout.scss | 17 ++++++------ 7 files changed, 67 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index bee5ec7..03b767c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ @@ -89,7 +89,7 @@
-
+

VEHICLE

diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index d9c29c7..4fd129e 100644 --- a/public/stylesheets/styles.css +++ b/public/stylesheets/styles.css @@ -22,6 +22,7 @@ body { border-bottom: solid 1px #c8c8c8; border-radius: 1px; background-color: #797979; + height: 100%; } .inner-edge__light, .inner-edge__light__no-padding { @@ -30,6 +31,7 @@ body { border-left: solid 2px #c8c8c8; border-top: solid 2px #c8c8c8; padding: 5px; + height: 100%; } .inner-edge__dark { @@ -37,6 +39,7 @@ body { border-right: solid 2px #3F3D43; border-left: solid 2px #A7A8AE; border-top: solid 2px #A7A8AE; + height: 100%; } .outer-edge__dark, .outer-edge__dark__no-right-edge { @@ -45,18 +48,22 @@ body { border-right: solid 1px #c1c2c6; border-bottom: solid 1px #c1c2c6; border-radius: 1px; + height: 100%; } .inner-edge__light__no-padding { padding: 0px; + height: 100%; } .outer-edge__dark__no-right-edge { border-right: none; + height: 100%; } .outer-edge__light__no-right-edge { border-right: none; + height: 100%; } .outer-edge__console { @@ -65,6 +72,7 @@ body { border-bottom: solid 1px #B1ABAB; border-left: solid 1px #6A6767; border-radius: 1px; + height: 100%; } .inner-edge__console { @@ -73,6 +81,7 @@ body { border-bottom: solid 1px #A59B9A; border-left: solid 1px #EAE9E9; background-color: white; + height: 100%; } .control-panel__button-display { @@ -112,6 +121,9 @@ body { .map-display__system-wrapper { background-color: #448149; + display: flex; + justify-content: center; + flex-direction: column; } .map-display__center-section { @@ -132,14 +144,15 @@ body { .map-display__system-status { background: #438149; color: #ededed; - margin: 0 auto; + margin: 0; } .map-display__system-status__container { display: flex; flex: 1; justify-content: space-between; - border: 10px solid #438149; + border-top: 10px solid #438149; + border-bottom: 10px solid #438149; } #sys-one { @@ -147,7 +160,8 @@ body { text-orientation: mixed; } -#sys-one, #sys-four { +#sys-one, +#sys-four { font-size: 38px; } @@ -159,7 +173,8 @@ body { padding: 8px 8px 4px 8px; } -#sys-three, #sys-two { +#sys-three, +#sys-two { font-size: 26px; } @@ -173,6 +188,7 @@ body { grid-template-rows: auto auto; grid-template-columns: auto auto; justify-items: stretch; + height: 100%; } #outer-container__outer { @@ -184,18 +200,12 @@ body { height: 100%; } -#system-icons { - grid-area: 4/2/5/3; -} - #console-display { grid-area: 4/1/5/2; } #control-panel { - display: flex; - flex-direction: column; - grid-area: 1/2/2/3; + grid-area: 1/2/4/3; } #map-display__outer { @@ -210,7 +220,13 @@ body { flex: 1; } +#control-panel__inner { + display: flex; + flex-direction: column; +} + .room-info__container { + grid-area: 3/1/4/4; background-color: #e2eb57; padding: 3px; display: flex; @@ -469,6 +485,7 @@ body { .button-control__bottom { display: flex; flex-direction: row; + height: 100%; } .button-control__top > div { @@ -480,6 +497,10 @@ body { flex: 1; } +.control-panel__output-display { + flex: 1; +} + .output-display__wrapper { display: flex; flex-direction: column; diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map index b34e5e0..cf4a158 100644 --- a/public/stylesheets/styles.css.map +++ b/public/stylesheets/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC5DF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACxDF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACvCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtBF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC9DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;ACvCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACjHF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/sass/components/_borders.scss b/sass/components/_borders.scss index 001ede0..5eb92aa 100644 --- a/sass/components/_borders.scss +++ b/sass/components/_borders.scss @@ -5,6 +5,7 @@ border-bottom: solid 1px #c8c8c8; border-radius: 1px; background-color: #797979; + height: 100%; } .inner-edge__light { @@ -13,6 +14,7 @@ border-left: solid 2px #c8c8c8; border-top: solid 2px #c8c8c8; padding: 5px; + height: 100%; } .inner-edge__dark { @@ -20,6 +22,7 @@ border-right: solid 2px #3F3D43; border-left: solid 2px #A7A8AE; border-top: solid 2px #A7A8AE; + height: 100%; } .outer-edge__dark { @@ -28,21 +31,25 @@ border-right: solid 1px #c1c2c6; border-bottom: solid 1px #c1c2c6; border-radius: 1px; + height: 100%; } .inner-edge__light__no-padding { @extend .inner-edge__light; padding: 0px; + height: 100%; } .outer-edge__dark__no-right-edge { @extend .outer-edge__dark; border-right: none; + height: 100%; } .outer-edge__light__no-right-edge { @extend .outer-edge__light; border-right: none; + height: 100%; } .outer-edge__console { @@ -51,6 +58,7 @@ border-bottom: solid 1px #B1ABAB; border-left: solid 1px #6A6767; border-radius: 1px; + height: 100%; } .inner-edge__console { @@ -59,4 +67,5 @@ border-bottom: solid 1px #A59B9A; border-left: solid 1px #EAE9E9; background-color: white; + height: 100%; } diff --git a/sass/components/_control-panel.scss b/sass/components/_control-panel.scss index fc37db0..fd051c2 100644 --- a/sass/components/_control-panel.scss +++ b/sass/components/_control-panel.scss @@ -12,6 +12,7 @@ .button-control__bottom { display: flex; flex-direction: row; + height: 100%; } .button-control__top > div { @@ -21,4 +22,8 @@ .button-control__bottom > div { flex: 1; +} + +.control-panel__output-display { + flex: 1; } \ No newline at end of file diff --git a/sass/components/_display-text.scss b/sass/components/_display-text.scss index a8f2ac3..a03a172 100644 --- a/sass/components/_display-text.scss +++ b/sass/components/_display-text.scss @@ -1,5 +1,8 @@ .map-display__system-wrapper { background-color: #448149; + display: flex; + justify-content: center; + flex-direction: column; } .map-display__center-section { @@ -21,14 +24,15 @@ .map-display__system-status { background: #438149; color: #ededed; - margin: 0 auto; + margin: 0; } .map-display__system-status__container { display: flex; flex: 1; justify-content: space-between; - border: 10px solid #438149; + border-top: 10px solid #438149; + border-bottom: 10px solid #438149; } #sys-one { @@ -36,7 +40,8 @@ text-orientation: mixed; } -#sys-one, #sys-four { +#sys-one, +#sys-four { font-size: 38px; } @@ -48,7 +53,8 @@ padding: 8px 8px 4px 8px; } -#sys-three, #sys-two { +#sys-three, +#sys-two { font-size: 26px; } @@ -56,5 +62,3 @@ writing-mode: tb-rl; transform: rotate(-180deg); } - - diff --git a/sass/components/_layout.scss b/sass/components/_layout.scss index e61777e..82983ad 100644 --- a/sass/components/_layout.scss +++ b/sass/components/_layout.scss @@ -8,29 +8,23 @@ #outer-container__outer { max-width: 85%; - height: 85%; + height: 100%; } #outer-container__inner { height: 100%; } -#system-icons { - grid-area: 4 / 2 / 5 / 3; -} - #console-display { grid-area: 4 / 1 / 5 / 2; } #control-panel { - display: flex; - flex-direction: column; - grid-area: 1 / 2 / 2 / 3; + grid-area: 1 / 2 / 4 / 3; } #map-display__outer { - grid-area: 1 / 1 / 3 / 2; + grid-area: 1 / 1 / 4 / 2; display: flex; flex-direction: column; } @@ -40,3 +34,8 @@ flex-direction: column; flex: 1; } + +#control-panel__inner { + display: flex; + flex-direction: column; +}