diff --git a/lib/gui/app/components/safe-webview.js b/lib/gui/app/components/safe-webview.js index 6ee8897e..487185df 100644 --- a/lib/gui/app/components/safe-webview.js +++ b/lib/gui/app/components/safe-webview.js @@ -65,8 +65,10 @@ const API_VERSION_PARAM = 'api-version' * should only be changed when truly necessary as it introduces breaking changes. * This version number is exposed to the banner such that it can determine what * features are safe to utilize. + * + * See `git blame -L n` where n is the line below for the history of version changes. */ -const API_VERSION = 1 +const API_VERSION = 2 /** * @summary Webviews that hide/show depending on the HTTP status returned diff --git a/lib/gui/app/pages/finish/styles/_finish.scss b/lib/gui/app/pages/finish/styles/_finish.scss index ad7aa7f9..8bb7cb6e 100644 --- a/lib/gui/app/pages/finish/styles/_finish.scss +++ b/lib/gui/app/pages/finish/styles/_finish.scss @@ -16,6 +16,7 @@ .page-finish { margin-top: -25px; + flex: 1; } .page-finish .button-label { diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 0d00f7d0..a93d106e 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -14,14 +14,19 @@ * limitations under the License. */ -.page-main { -margin-top: 50px; -} - svg-icon > img[disabled] { opacity: $disabled-opacity; } +.page-main { + flex: 1; + align-self: center; +} + +.page-main > .col-xs { + height: 165px; +} + .page-main .step-selection-text { display: flex; flex-wrap: wrap; diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index f8890630..3e6f5051 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -72,6 +72,21 @@ $disabled-opacity: 0.2; body { letter-spacing: 1px; + display: flex; + flex-direction: column; + + > header { + flex: 0 0 auto; + } + + > main { + flex: 1; + display: flex; + } + + > footer { + flex: 0 0 auto; + } } body, @@ -84,13 +99,10 @@ body, display: flex; align-items: center; justify-content: center; + position: relative; - position: fixed; - bottom: 20px; - left: 0; - right: 0; color: $palette-theme-dark-disabled-foreground; - margin: 0 60px; + margin: 0 60px 20px 60px; padding-top: 15px; border-top: 2px solid $palette-theme-dark-soft-background; text-align: center; @@ -139,7 +151,7 @@ body, bottom: 0; left: 0; width: 100%; - height: 255px; + height: 355px; } } diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 02caa55e..52e97167 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -6522,12 +6522,16 @@ svg-icon { * See the License for the specific language governing permissions and * limitations under the License. */ -.page-main { - margin-top: 50px; } - svg-icon > img[disabled] { opacity: 0.2; } +.page-main { + flex: 1; + align-self: center; } + +.page-main > .col-xs { + height: 165px; } + .page-main .step-selection-text { display: flex; flex-wrap: wrap; @@ -6709,7 +6713,8 @@ svg-icon > img[disabled] { * limitations under the License. */ .page-finish { - margin-top: -25px; } + margin-top: -25px; + flex: 1; } .page-finish .button-label { margin: 0 auto 15px; @@ -6829,7 +6834,16 @@ svg-icon > img[disabled] { font-style: normal; } body { - letter-spacing: 1px; } + letter-spacing: 1px; + display: flex; + flex-direction: column; } + body > header { + flex: 0 0 auto; } + body > main { + flex: 1; + display: flex; } + body > footer { + flex: 0 0 auto; } body, .tooltip, @@ -6840,12 +6854,9 @@ body, display: flex; align-items: center; justify-content: center; - position: fixed; - bottom: 20px; - left: 0; - right: 0; + position: relative; color: #787c7f; - margin: 0 60px; + margin: 0 60px 20px 60px; padding-top: 15px; border-top: 2px solid #64686a; text-align: center; } @@ -6877,7 +6888,7 @@ body, bottom: 0; left: 0; width: 100%; - height: 255px; } + height: 355px; } .wrapper { height: 100%;