From 2f9b817f0587bbbb1b8b6b803592edeaac5d6e44 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 16 Nov 2016 06:06:27 -0800 Subject: [PATCH 1/2] Add original message back to loading screen. Run CSS through autoprefixer. --- src/ui/views/ui_app.jade | 90 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 81 insertions(+), 9 deletions(-) diff --git a/src/ui/views/ui_app.jade b/src/ui/views/ui_app.jade index 8b7f812415a05..d37d560bfbd27 100644 --- a/src/ui/views/ui_app.jade +++ b/src/ui/views/ui_app.jade @@ -14,18 +14,43 @@ block content .application { height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - flex: 1 0 auto; - flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; background: #5A5A5A; } + /** + * 1. The kibanaLoadingMessage will push the loader up. This top margin pushes it back down so + * it's in the same position as the login form. + */ .kibanaLoader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 620px; height: 185px; - margin: auto; padding: 0; + margin-top: 130px; /* 1 */ text-align: center; background: #3caed2; box-shadow: 0 0 2em #444444; @@ -36,7 +61,8 @@ block content height: 100%; padding: 20px; background-color: #E8488B; - animation: colorShift 3s infinite; + -webkit-animation: colorShift 3s infinite; + animation: colorShift 3s infinite; box-shadow: inset -10px 0 20px -10px rgba(0, 0, 0, 0.5); } @@ -49,15 +75,42 @@ block content } .kibanaLoader__content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: center; - flex: 1 1 auto; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; color: white; font-size: 38px; font-weight: 300; - font-family: "Open Sans", Helvetica, Arial, sans-serif; - padding-bottom: 12px; + font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; + padding-bottom: 16px; + } + + @-webkit-keyframes colorShift { + 0% { + background-color: #DD4484; + } + 33% { + background-color: #E4BB51; + } + 66% { + background-color: #8AC336; + } + 100% { + background-color: #DD4484; + } } @keyframes colorShift { @@ -75,12 +128,31 @@ block content } } + /** + * 1. If we change the height or top margin, we'll need to increase the top margin on + * kibanaLoader too. + */ + .kibanaLoadingMessage { + font-family: "Open Sans", Helvetica, Arial, sans-serif; + color: white; + max-width: 540px; + height: 50px; /* 1 */ + margin-top: 80px; /* 1 */ + text-align: center; + font-size: 18px; + line-height: 1.4; + opacity: 0.8; + } + .application .kibanaLoader .kibanaLoader__logo .logo .kibanaLoader__content | Loading Kibana + .kibanaLoadingMessage. + Give me a moment here. I’m loading a whole bunch of code. Don’t worry, all this + good stuff will be cached up for next time! script. window.onload = function () { From 30a452ee9468c8213b85ac37ff29411a9df6783d Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 16 Nov 2016 10:24:21 -0800 Subject: [PATCH 2/2] Make kibanaWelcomeView and kibanaWelcomeLogo styles available to plugins which may need them, by moving them into ui_app.jade. --- src/ui/views/chrome.jade | 35 +++++++++++++++++++++++++++++++++++ src/ui/views/ui_app.jade | 38 ++------------------------------------ 2 files changed, 37 insertions(+), 36 deletions(-) diff --git a/src/ui/views/chrome.jade b/src/ui/views/chrome.jade index ae90ee091959f..2163ebd650499 100644 --- a/src/ui/views/chrome.jade +++ b/src/ui/views/chrome.jade @@ -68,6 +68,41 @@ html(lang='en') name='theme-color' content='#ffffff' ) + style. + .kibanaWelcomeView { + height: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background: #5A5A5A; + } + + .kibanaWelcomeLogo { + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: contain; + background-image: url('data:image/svg+xml;utf8,Logo-KibanaIcon'); + } + block head body(kbn-chrome, id='#{appName}-body') kbn-initial-state(data=JSON.stringify(kibanaPayload)) diff --git a/src/ui/views/ui_app.jade b/src/ui/views/ui_app.jade index d37d560bfbd27..bf4b82054ff3c 100644 --- a/src/ui/views/ui_app.jade +++ b/src/ui/views/ui_app.jade @@ -12,32 +12,6 @@ block content margin: 0; } - .application { - height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - background: #5A5A5A; - } - /** * 1. The kibanaLoadingMessage will push the loader up. This top margin pushes it back down so * it's in the same position as the login form. @@ -66,14 +40,6 @@ block content box-shadow: inset -10px 0 20px -10px rgba(0, 0, 0, 0.5); } - .logo { - width: 100%; - height: 100%; - background-repeat: no-repeat; - background-size: contain; - background-image: url('data:image/svg+xml;utf8,Logo-KibanaIcon'); - } - .kibanaLoader__content { display: -webkit-box; display: -webkit-flex; @@ -144,10 +110,10 @@ block content opacity: 0.8; } - .application + .kibanaWelcomeView .kibanaLoader .kibanaLoader__logo - .logo + .kibanaWelcomeLogo .kibanaLoader__content | Loading Kibana .kibanaLoadingMessage.