From 164d959f60c2bcaa0f453a8af1ec02be915c004d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 23 Feb 2016 18:30:21 -0800 Subject: [PATCH] [Frontend] Significant markup/CSS mods for splash screen #164 Markup in index.html and about-dialog.html changed to simplify and use :before/:after psuedos; CSS in _logo-and-bg.scss modded for same; Added _startup.scss to hold general CSS for the startup screen; Renamed startup.scss to startup-open.scss; Modified SplashScreenManager.js to target renamed outer container .l-splash-holder; Added media query for startup screen on phone; Cleanup: moved classes out of _effects into _global; Still to-do: apply to WARP and VISTA, including needed mods to their About dialog screens; --- index.html | 7 +- .../about/res/templates/about-dialog.html | 5 +- .../commonUI/general/res/sass/_about.scss | 2 +- .../commonUI/general/res/sass/_effects.scss | 20 ------ .../commonUI/general/res/sass/_global.scss | 17 ++++- .../general/res/sass/_logo-and-bg.scss | 64 ++++++++++++------- .../commonUI/general/res/sass/_startup.scss | 47 ++++++++++++++ .../general/res/sass/startup-open.scss | 36 +++++++++++ .../commonUI/general/res/sass/startup.scss | 26 -------- .../general/src/SplashScreenManager.js | 3 +- 10 files changed, 146 insertions(+), 81 deletions(-) create mode 100644 platform/commonUI/general/res/sass/_startup.scss create mode 100644 platform/commonUI/general/res/sass/startup-open.scss delete mode 100644 platform/commonUI/general/res/sass/startup.scss diff --git a/index.html b/index.html index ffd86b972f..2535414aa7 100644 --- a/index.html +++ b/index.html @@ -33,16 +33,15 @@ mct.run(); }); - + -
- - +
+
diff --git a/platform/commonUI/about/res/templates/about-dialog.html b/platform/commonUI/about/res/templates/about-dialog.html index 5113954105..fe19442f16 100644 --- a/platform/commonUI/about/res/templates/about-dialog.html +++ b/platform/commonUI/about/res/templates/about-dialog.html @@ -20,10 +20,7 @@ at runtime from the About dialog for additional information. -->
-
- - -
+

OpenMCT Web

diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss index 38c4c59b61..1e9abe70cf 100644 --- a/platform/commonUI/general/res/sass/_about.scss +++ b/platform/commonUI/general/res/sass/_about.scss @@ -28,7 +28,7 @@ overflow: auto; } $contentH: 200px; - .l-logo-holder { + .l-splash { position: relative; height: 45%; } diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index c1701f7387..a048eb75d0 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -19,26 +19,6 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -.disabled, -a.disabled { - opacity: $controlDisabledOpacity; - pointer-events: none !important; - cursor: default !important; -} - -.incised { - @include boxIncised(0.8); - border-bottom: 1px solid rgba(#fff, 0.3); -} - -.test-stripes { - @include bgDiagonalStripes(); -} - -.test { - @include test(); -} - @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) { @include keyframes($animName) { 0% { opacity: $opacity0; } diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index cb0894c9fe..cc318eddce 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -112,6 +112,13 @@ mct-container { padding: 1em; } +.disabled, +a.disabled { + opacity: $controlDisabledOpacity; + pointer-events: none !important; + cursor: default !important; +} + .align-right { text-align: right; } @@ -158,4 +165,12 @@ mct-container { .sep { color: rgba(#fff, 0.2); -} \ No newline at end of file +} + +.test-stripes { + @include bgDiagonalStripes(); +} + +.test { + @include test(); +} diff --git a/platform/commonUI/general/res/sass/_logo-and-bg.scss b/platform/commonUI/general/res/sass/_logo-and-bg.scss index cb1e033919..136060cc9c 100644 --- a/platform/commonUI/general/res/sass/_logo-and-bg.scss +++ b/platform/commonUI/general/res/sass/_logo-and-bg.scss @@ -1,30 +1,46 @@ -.l-logo-holder { +.l-splash { + background-size: cover; position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - .l-logo { - $w: 5%; + top: 0; + right: 0; + bottom: 0; + left: 0; + &:before, + &:after { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; position: absolute; - &.l-logo-app { - top: 0; right: 15%; bottom: 0; left: 15%; - } - &.s-logo-nasa { - $m: 10px; - background-image: url($dirImgs + 'logo-nasa.svg'); - top: $m; right: auto; bottom: auto; left: $m; - width: $w * 2; height: auto; padding-bottom: $w; padding-top: $w; - } + } + + &:before { + // NASA logo + $w: 5%; + $m: 10px; + background-image: url($dirImgs + 'logo-nasa.svg'); + top: $m; + right: auto; + bottom: auto; + left: $m; + height: auto; + width: $w * 2; + padding-bottom: $w; + padding-top: $w; + } + + &:after { + // App logo + top: 0; + right: 15%; + bottom: 0; + left: 15%; } } -.s-logo-holder { - background: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. - background-size: cover; -} -.s-logo { - background-position: center; - background-repeat: no-repeat; - background-size: contain; -} -.s-logo-openmctweb { - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); +.s-splash { + background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web. + &:after { + background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_startup.scss b/platform/commonUI/general/res/sass/_startup.scss new file mode 100644 index 0000000000..3124cd1c45 --- /dev/null +++ b/platform/commonUI/general/res/sass/_startup.scss @@ -0,0 +1,47 @@ +@import "bourbon"; +$dirImgs: '../../../general/res/images/'; +@import "logo-and-bg"; + +@mixin splashElem($m: 20%) { + top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25; + +} + +.l-splash-holder { + // Main outer holder. + @include transition-property(opacity); + @include transition-duration(500ms); + @include transition-timing-function(ease-in-out); + @include transition-delay(1s); + z-index: 10000; + opacity: 1; + &.fadeout { + opacity: 0; + pointer-events: none; + } + .l-splash { + // The splash element. + @include splashElem(); + border-radius: 10px; + box-shadow: 0 5px 50px 25px rgba(#fff, 0.1); + } +} + +@media only screen and (max-device-width: 767px) { + .l-splash-holder .l-splash { + @include splashElem(0); + border-radius: 0; + box-shadow: none; + } +} + +@media only screen and (max-device-width: 767px) and (orientation: portrait) { + .l-splash-holder .l-splash { + &:before { + $w: 12%; + width: $w * 2; + padding-bottom: $w; + padding-top: $w; + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/startup-open.scss b/platform/commonUI/general/res/sass/startup-open.scss new file mode 100644 index 0000000000..0f13bf853d --- /dev/null +++ b/platform/commonUI/general/res/sass/startup-open.scss @@ -0,0 +1,36 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +@import "startup"; + +.l-splash-holder { + background: #333; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + .s-splash { + background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web. + // &:before { // Use this to override the NASA logo. Could add a AMMOS logo along with NASA if desired. } + &:after { + // App logo + background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); + } + } +} diff --git a/platform/commonUI/general/res/sass/startup.scss b/platform/commonUI/general/res/sass/startup.scss deleted file mode 100644 index 4784926b20..0000000000 --- a/platform/commonUI/general/res/sass/startup.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "compass"; -@import "compass/css3"; -@import "constants"; -$dirImgs: '../../../general/res/images/'; -@import "logo-and-bg"; - -body { - background: black; -} - -.s-logo-holder { - @include transition-property(opacity); - @include transition-duration(500ms); - @include transition-timing-function(ease-in-out); - background-image: url($dirImgs + "bg-about-openmctweb.jpg") no-repeat center; // For OpenMCT Web. - z-index: 1000; - opacity: 1; - &.fadeout { - opacity: 0; - pointer-events: none; - } -} - -.s-logo-openmctweb { - background-image: url($dirImgs + 'logo-openmctweb-shdw.svg'); -} diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js index e9666f4f6d..8c38339531 100644 --- a/platform/commonUI/general/src/SplashScreenManager.js +++ b/platform/commonUI/general/src/SplashScreenManager.js @@ -32,7 +32,8 @@ define([ function SplashScreenManager($document) { var splash; $document = $document[0]; - splash = $document.querySelectorAll('.s-logo-holder')[0]; + splash = $document.querySelectorAll('.l-splash-holder')[0]; + console.log(splash); if (!splash) { return; }