mirror of
https://github.com/nasa/openmct.git
synced 2025-01-30 08:04:03 +00:00
[Frontend] Significant markup/CSS mods for splash screen
#164 https://github.jpl.nasa.gov/MissionControl/vista/issues/299 App logo and bg files renamed; Added openmct.scss to hold openmct-specific styles; Renamed _startup.scss to startup-base.scss which now renders its own .css file; Still to-do: apply to WARP including needed mods to its About dialog screen;
This commit is contained in:
Charles Hacskaylo
parent
164d959f60
commit
129b554f9d
@ -33,7 +33,8 @@
|
||||
mct.run();
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="platform/commonUI/general/res/css/startup-open.css">
|
||||
<link rel="stylesheet" href="/platform/commonUI/general/res/css/startup-base.css">
|
||||
<link rel="stylesheet" href="/platform/commonUI/general/res/css/openmct.css">
|
||||
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16">
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
-->
|
||||
<div class="abs t-about l-about t-about-openmctweb s-about" ng-controller = "AboutController as about">
|
||||
<div class="l-splash s-splash"></div>
|
||||
|
||||
<div class="s-text l-content">
|
||||
<h1 class="l-title s-title">OpenMCT Web</h1>
|
||||
<div class="l-description s-description">
|
||||
|
||||
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.5 KiB |
@ -1,24 +1,49 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
.l-splash,
|
||||
.l-splash:before,
|
||||
.l-splash:after {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.l-splash {
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
&:before,
|
||||
&:after {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// NASA logo
|
||||
$w: 5%;
|
||||
$m: 10px;
|
||||
background-image: url($dirImgs + 'logo-nasa.svg');
|
||||
background-image: url('/platform/commonUI/general/res/images/logo-nasa.svg');
|
||||
top: $m;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
@ -38,9 +63,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.s-splash {
|
||||
background-image: url($dirImgs + "bg-about-openmctweb.jpg"); // For OpenMCT Web.
|
||||
background-image: url('/branding/res/images/bg-splash.jpg');
|
||||
&:after {
|
||||
background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
|
||||
}
|
||||
background-image: url('/branding/res/images/logo-app-shdw.svg');
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,18 +19,21 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
@import "startup";
|
||||
.app-logo {
|
||||
background: url('/platform/commonUI/general/res/images/logo-app.svg') no-repeat center center;
|
||||
}
|
||||
|
||||
.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. }
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.s-splash {
|
||||
background-image: url('/platform/commonUI/general/res/images/bg-splash.jpg');
|
||||
&:after {
|
||||
// App logo
|
||||
background-image: url($dirImgs + 'logo-openmctweb-shdw.svg');
|
||||
}
|
||||
background-image: url('/platform/commonUI/general/res/images/logo-app-shdw.svg');
|
||||
}
|
||||
}
|
||||
70
platform/commonUI/general/res/sass/startup-base.scss
Normal file
70
platform/commonUI/general/res/sass/startup-base.scss
Normal file
@ -0,0 +1,70 @@
|
||||
/*****************************************************************************
|
||||
* 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 "bourbon";
|
||||
@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);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
opacity: 1;
|
||||
&.fadeout {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.l-splash {
|
||||
// The splash element.
|
||||
@include splashElem();
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
// Make the NASA logo a bit bigger when we're in portrait mode.
|
||||
$w: 12%;
|
||||
width: $w * 2;
|
||||
padding-bottom: $w;
|
||||
padding-top: $w;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -100,9 +100,6 @@
|
||||
left: auto;
|
||||
width: $ueAppLogoW;
|
||||
z-index: 2;
|
||||
&.logo-openmctweb {
|
||||
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user