created remote console page
TODO: Remove HTERM.
Change-Id: I72026e5ea64c9fba3089b68dfd2b8198255dabb8
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index b1a7942..ac201b9 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -2,50 +2,12 @@
$nav__toplvlWidth: 120px;
$nav__seclvlWidth: 240px;
-// Page header
-.page-header {
- position: relative;
- border-bottom: 1px solid $lightbg__grey;
- margin: 1.625em 0 1.2em 0;
- padding-left: 0;
- overflow: hidden;
- .h4 {
- padding: 0;
- margin: 0 0 .5em 0;
- font-weight: bold;
- }
-}
-
.content__container {
margin-left: $nav__toplvlWidth;
padding: 1em .1em;
transition: left 1s ease;
@include mediaQuery(x-small){
- //margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
+ margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
padding: 1rem 2rem;
}
}
-
-section.row {
- padding-left: 0;
- padding-right: 0;
-}
-
-.content-header {
- font-weight: 700;
- margin-bottom: 0;
- margin-top: 2em;
-}
-
-.content-label, label {
- color: $darkgrey;
- text-transform: uppercase;
- font-weight: 700;
- font-size: .75em;
- margin-bottom: 0;
-}
-
-.subhead {
- border-bottom: 1px solid $medgrey;
- padding-bottom: .5em;
-}
\ No newline at end of file
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index fe06d0b..9bbe7e8 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -1,15 +1,15 @@
-$logoHeight: 30px;
+
+$logoHeight: 40px;
$logoMaxHeight: 100px;
$logoMaxWidth: 125px;
#header__wrapper {
position: fixed;
- top: 0;
+ top:0;
left: 0;
- right: 0;
- z-index: 300;
+ right:0;
+ z-index: 100;
}
-
.app__version {
margin-left: 1em;
display: none;
@@ -20,144 +20,32 @@
transform: translateY(-50%);
}
}
-
header {
position: relative;
- background: #000;
+ background: $black;
color: $white;
- overflow: hidden;
-}
+ padding: .8em;
-.header__logout {
- float: right;
- display: inline-block;
- color: $white;
- font-size: .9em;
- text-decoration: none;
- padding: 1em;
- &:visited {
- color: $white;
- }
-}
-
-.header__functions-wrapper {
- color: $white;
- background: $darkbg__primary;
- padding: 0 1.1em;
- box-sizing: border-box;
- display: block;
- position: relative;
- overflow: hidden;
- min-height: 5em;
- #header__server-name {
- //margin-top: .8em;
- font-size: 1.5em;
- font-weight: 500;
- color: $white;
- padding: .9em;
- height: 100%;
- background: transparent;
- max-width: 350px;
- white-space: nowrap;
- }
.logo__wrapper {
- padding-top: .5em;
- //position: absolute;
- //top: 50%;
- //transform: translateY(-50%);
+ display: inline-block;
}
#header__logo {
vertical-align: middle;
- margin: 1em;
+ margin-right: 1em;
float: left;
- height: $logoHeight; //required for <SVG> logos - can remove if using img
+ height:$logoHeight; //required for <SVG> logos - can remove if using img
max-height: $logoMaxHeight;
max-width: $logoMaxWidth;
width: auto;
}
- #header__funct-icon {
- display: block;
- font-size: 2.3em;
- color: $white;
- padding: 0;
- &:before {
- content: '\2261';
- line-height: .5;
- font-size: 2em;
- padding: 0 .3em;
- }
- @include mediaQuery(medium) {
- display: none;
- }
- }
- .header__functions {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- background: $darkbg__primary;
- z-index: 100;
- @include fastTransition-all;
- span {
- display: block;
- color: $white;
- font-size: 1em;
- }
- a, p, button {
- display: block;
- float: left;
- text-decoration: none;
- border-left: 1px solid #384456;
- color: $lightgrey;
- margin: 0;
- padding: 1.250em 1.688em;
- height: 100%;
- font-size: 0.875em;
- line-height: 1;
- > span {
- font-size: 1rem;
- font-weight: bold;
- }
- }
- }
-
- // hide/show header functions based on screen size
- .header__functions > #header__server-health {
- display: none;
- @include mediaQuery(small) {
- display: block;
- }
- }
-
- .header__functions > .header__refresh {
- display: none;
- @include mediaQuery(medium) {
- display: block;
- }
- }
-
- .header__functions {
- .header__refresh {
- color: $lightgrey;
- line-height: 1.8;
- margin-top: -4px;
- }
- }
- .header__server-power,
- .header__page-refresh {
- &:hover {
- background: rgba(60, 109, 240, .4);
- }
- }
- .header__page-refresh {
- img {
- stroke: $white;
- height: 22px;
- width: 24px;
- }
- }
}
-// end header__functions-wrapper
+.header__functions-wrapper {
+ color: $white;
+ background: green;
+ padding: 1em 1.1em;
+ box-sizing: border-box;
+ display: block;
+}
diff --git a/app/common/styles/layout/header.scss~HEAD b/app/common/styles/layout/header.scss~HEAD
new file mode 100644
index 0000000..fe06d0b
--- /dev/null
+++ b/app/common/styles/layout/header.scss~HEAD
@@ -0,0 +1,163 @@
+$logoHeight: 30px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 300;
+}
+
+.app__version {
+ margin-left: 1em;
+ display: none;
+ @include mediaQuery(x-small) {
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+}
+
+header {
+ position: relative;
+ background: #000;
+ color: $white;
+ overflow: hidden;
+}
+
+.header__logout {
+ float: right;
+ display: inline-block;
+ color: $white;
+ font-size: .9em;
+ text-decoration: none;
+ padding: 1em;
+ &:visited {
+ color: $white;
+ }
+}
+
+.header__functions-wrapper {
+ color: $white;
+ background: $darkbg__primary;
+ padding: 0 1.1em;
+ box-sizing: border-box;
+ display: block;
+ position: relative;
+ overflow: hidden;
+ min-height: 5em;
+ #header__server-name {
+ //margin-top: .8em;
+ font-size: 1.5em;
+ font-weight: 500;
+ color: $white;
+ padding: .9em;
+ height: 100%;
+ background: transparent;
+ max-width: 350px;
+ white-space: nowrap;
+ }
+ .logo__wrapper {
+ padding-top: .5em;
+ //position: absolute;
+ //top: 50%;
+ //transform: translateY(-50%);
+ }
+
+ #header__logo {
+ vertical-align: middle;
+ margin: 1em;
+ float: left;
+ height: $logoHeight; //required for <SVG> logos - can remove if using img
+ max-height: $logoMaxHeight;
+ max-width: $logoMaxWidth;
+ width: auto;
+ }
+ #header__funct-icon {
+ display: block;
+ font-size: 2.3em;
+ color: $white;
+ padding: 0;
+ &:before {
+ content: '\2261';
+ line-height: .5;
+ font-size: 2em;
+ padding: 0 .3em;
+ }
+ @include mediaQuery(medium) {
+ display: none;
+ }
+ }
+
+ .header__functions {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: $darkbg__primary;
+ z-index: 100;
+ @include fastTransition-all;
+ span {
+ display: block;
+ color: $white;
+ font-size: 1em;
+ }
+ a, p, button {
+ display: block;
+ float: left;
+ text-decoration: none;
+ border-left: 1px solid #384456;
+ color: $lightgrey;
+ margin: 0;
+ padding: 1.250em 1.688em;
+ height: 100%;
+ font-size: 0.875em;
+ line-height: 1;
+ > span {
+ font-size: 1rem;
+ font-weight: bold;
+ }
+ }
+ }
+
+ // hide/show header functions based on screen size
+ .header__functions > #header__server-health {
+ display: none;
+ @include mediaQuery(small) {
+ display: block;
+ }
+ }
+
+ .header__functions > .header__refresh {
+ display: none;
+ @include mediaQuery(medium) {
+ display: block;
+ }
+ }
+
+ .header__functions {
+ .header__refresh {
+ color: $lightgrey;
+ line-height: 1.8;
+ margin-top: -4px;
+ }
+ }
+ .header__server-power,
+ .header__page-refresh {
+ &:hover {
+ background: rgba(60, 109, 240, .4);
+ }
+ }
+ .header__page-refresh {
+ img {
+ stroke: $white;
+ height: 22px;
+ width: 24px;
+ }
+ }
+}
+
+// end header__functions-wrapper
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index 4183519..1122ffe 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,2 +1,2 @@
@import 'header';
-@import 'content';
+@import 'navigation';
diff --git a/app/common/styles/layout/index.scss~HEAD b/app/common/styles/layout/index.scss~HEAD
new file mode 100644
index 0000000..4183519
--- /dev/null
+++ b/app/common/styles/layout/index.scss~HEAD
@@ -0,0 +1,2 @@
+@import 'header';
+@import 'content';
diff --git a/app/common/styles/layout/navigation.scss b/app/common/styles/layout/navigation.scss
new file mode 100644
index 0000000..024e869
--- /dev/null
+++ b/app/common/styles/layout/navigation.scss
@@ -0,0 +1,86 @@
+#nav__top-level {
+ background: $black;
+ height: 100%;
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 99;
+ list-style-type: none;
+ margin: 0;
+ li { margin: 0; }
+ .button, button, a {
+ background: transparent;
+ height: auto;
+ border: 0;
+ color: $white;
+ fill: $white;
+ width: 100%;
+ padding: 1em;
+ display: block;
+ text-align: center;
+ margin-bottom: 0;
+ white-space: normal;
+ .nav__icon {
+ color: $white;
+ max-height: 40px;
+ stroke-width: .5;
+ margin-bottom: -.5em;
+ }
+ a {
+ margin-bottom: 5px;
+ }
+ p {
+ margin: 0;
+ font-size: .9em;
+ line-height:1.2rem;
+ }
+
+ .nav__icon-help__outer {
+ fill: transparent;
+ stroke: $white;
+ stroke-miterlimit: 10;
+ stroke-width: 1px;
+ }
+ .nav__icon-help__Inner {
+ fill: $white;
+ }
+ &:hover {
+ background: $white;
+ fill: $black;
+ color: $black;
+ padding: 1em;
+ border-radius: 0;
+ .nav__icon-help__outer {
+ stroke: $black;
+ }
+ .nav__icon-help__inner {
+ fill: $black;
+ }
+ }
+ }
+ .opened {
+ background: $white;
+ fill: $black;
+ color: $black;
+ }
+}
+
+.nav__second-level {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 97;
+ display: block;
+ background: $white;
+ padding: 10px .6em;
+ margin: 0;
+ list-style-type: none;
+ transition: all ease-out 0.5s;
+ box-shadow: 0 2px 5px 0 $black;
+ &.opened {
+ transition: all ease-out .8s;
+
+ }
+}