From af1257d4aec81b12dc8a74c4796bc6388d107e77 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 29 Mar 2017 10:22:52 +0200 Subject: [PATCH 1/5] update UI on login screen --- .../src/less/pages/login.less | 153 +++++------ .../src/less/variables.less | 1 + .../views/common/dialogs/login.controller.js | 1 + .../src/views/common/dialogs/login.html | 249 +++++++++--------- 4 files changed, 199 insertions(+), 205 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/login.less b/src/Umbraco.Web.UI.Client/src/less/pages/login.less index 166a9bfb56..9404ca288d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/pages/login.less +++ b/src/Umbraco.Web.UI.Client/src/less/pages/login.less @@ -4,9 +4,6 @@ .login-overlay { width: 100%; height: 100%; - background: @gray-1 url(../img/application/logo.png) no-repeat 25px 30px fixed !important; - background-size: 30px 30px !important; - color: @white; position: absolute; z-index: 10000; top: 0; @@ -16,34 +13,24 @@ border: none; border-radius: 0; overflow-y: auto; + background-color: @purple-d2; } - -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-resolution: 144dpi) -{ - .login-overlay { - background-image: url(../img/application/logo@2x.png) !important; - } +.login-overlay__background-image { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 100%; + position: absolute; + opacity: 0.05; } - -@media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi) -{ - .login-overlay { - background-image: url(../img/application/logo@2x.png) !important; - } -} - - -@media only screen and (-webkit-min-device-pixel-ratio: 3), - only screen and (min-resolution: 3dppx), - only screen and (min-resolution: 350dpi) -{ - .login-overlay { - background-image: url(../img/application/logo@3x.png) !important; - } +.login-overlay__logo { + position: absolute; + top: 22px; + left: 25px; + z-index: 1; } .login-overlay .umb-modalcolumn { @@ -51,21 +38,56 @@ border: none; } +.login-overlay .umb-login-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + position: relative; + z-index: 3; + box-sizing: border-box; +} + +@media (max-width: 565px) { + // making sure we don't crash into the logo + .login-overlay .umb-login-container { + padding-top: 80px; + } +} + .login-overlay .form { - position:relative; - display: block; - top: 100px; - left: 165px; - width: 370px; - text-align: right; + background: @white; + padding: 25px; + width: 500px; + margin-left: 25px; + margin-right: 25px; + margin-top: auto; + margin-bottom: auto; +} + +.login-overlay .form input[type="text"], +.login-overlay .form input[type="password"] { + height: 36px; + padding-left: 10px; + padding-right: 10px; +} + +.login-overlay .btn-success { + padding: 12px 24px; +} + +.login-overlay .form label { + font-weight: bold; } .login-overlay h1 { display: block; - text-align: right; - color: @white; - font-size: 18px; + text-align: center; + color: @black; + font-size: 24px; font-weight: bold; + margin-bottom: 20px; } .login-overlay .alert { @@ -76,62 +98,19 @@ text-align: center; } -.login-overlay .switch-view { - margin-top: 10px; +.login-overlay .external-logins form { + margin-bottom: 20px; } -@media (max-width: 767px) and (max-height: 420px) and (orientation: landscape) { - // Move form closer to top on narrow screen sizes - .login-overlay .form { - top: 50px; - } -} - -@media (max-width: 565px) { - // Remove padding on login-form on smaller devices - .login-overlay .form { - top: 60px; - right: 25px; - left: inherit; - padding-left: 25px; - padding-right:25px; - width: auto; - } -} - -@media (max-width: 339px) { - .login-overlay .form { - input[type="text"], input[type="password"] { - width: 250px; - } - } -} - -#hrOr { - height: 30px; - text-align: center; - position: relative; - padding-top: 20px; -} - -#hrOr hr { +.login-overlay .btn-social { + padding-top: 8px; + padding-bottom: 8px; margin: 0; - border: none; - background-color: @gray-3; - height: 1px; + margin-bottom: 5px; } -#hrOr div { - background-color: @black; - position: relative; - top: -16px; - border: 1px solid @gray-3; - padding: 4px; - border-radius: 50%; - width: 20px; - height: 20px; - margin: auto; - color: @gray-8; +.login-overlay .btn-social>:first-child { + line-height: 36px; } .login-overlay .text-error, diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 314035f1ae..9c2d5e914d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -42,6 +42,7 @@ @turquoise-l3: #C0F0ED; @turquoise-washed: #F3FDFC; +@purple-d2: #1D1333; @purple-d1: #2E2246; @purple: #413659; @purple-l1: #675E7A; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js index d5687aa6b7..9a5b29cc3f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js @@ -81,6 +81,7 @@ $scope.externalLoginProviders = externalLoginInfo.providers; $scope.externalLoginInfo = externalLoginInfo; $scope.resetPasswordCodeInfo = resetPasswordCodeInfo; + $scope.backgroundImage = "assets/img/installer.jpg"; $scope.activateKonamiMode = function () { if ($cookies.konamiLogin == "1") { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html index abf17f53df..f9b8fc72f3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html @@ -1,133 +1,146 @@ 
+
-
-

{{greeting}}

+ + -
+ -

- Log in below. - Log in below -

+