From 67223d2d5467bba272c0d7fae1aba2715930915d Mon Sep 17 00:00:00 2001 From: Louis Laureys Date: Fri, 5 Jan 2018 07:35:28 +0100 Subject: [PATCH 1/3] Better login backgrounds! (#1852) * Background center and fix for gray border Center the background using `background-size: cover;`. Looks better on mobile now. Change img to div to avoid gray border around image in chrome and safari. * Remove fat-fingered typo --- .../landingpage/landingpage.component.html | 2 +- .../landingpage/landingpage.component.scss | 38 +++++-------------- .../ClientApp/app/login/login.component.html | 2 +- .../ClientApp/app/login/login.component.scss | 31 ++++----------- .../app/login/resetpassword.component.html | 2 +- 5 files changed, 21 insertions(+), 54 deletions(-) diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html index f9bf90bdd..209f9d977 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html @@ -1,5 +1,5 @@ 
- +
diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss b/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss index e978b0d5f..c0841ae27 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss @@ -1,29 +1,19 @@ -landingDiv { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -div.centered { +div.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } -img.bg { - /* Set rules to fill background */ - min-height: 100%; - min-width: 1024px; - /* Set up proportionate scaling */ - width: 100%; - height: auto; - /* Set up positioning */ +div.bg { + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-clip: inherit; + background-size: cover; + height: 100vh; + width: 100vw; position: fixed; - top: 0; - left: 0; - z-index: -1; } .vcenter { @@ -47,12 +37,4 @@ img.bg { p { font-size: 14px !important; -} - - -@media screen and (max-width: 1024px) { /* Specific to this particular image */ - img.bg { - left: 50%; - margin-left: -512px; /* 50% */ - } -} +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/app/login/login.component.html b/src/Ombi/ClientApp/app/login/login.component.html index 323a9653d..a000971ce 100644 --- a/src/Ombi/ClientApp/app/login/login.component.html +++ b/src/Ombi/ClientApp/app/login/login.component.html @@ -4,7 +4,7 @@ include the remember me checkbox -->
- +
diff --git a/src/Ombi/ClientApp/app/login/login.component.scss b/src/Ombi/ClientApp/app/login/login.component.scss index 0bb04318b..b07001f90 100644 --- a/src/Ombi/ClientApp/app/login/login.component.scss +++ b/src/Ombi/ClientApp/app/login/login.component.scss @@ -16,36 +16,21 @@ body, html { background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important; } -landingDiv { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - img.center { display: block; margin: 0 auto; max-width: 100%; } -img.bg { - /* Set rules to fill background */ - min-height: 100%; - min-width: 1024px; - /* Set up proportionate scaling */ - width: 100%; - height: auto; - /* Set up positioning */ +div.bg { + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-clip: inherit; + background-size: cover; + height: 100vh; + width: 100vw; position: fixed; - top: 0; - left: 0; - z-index: -1; - /*-webkit-filter: blur(5px); - -moz-filter: blur(5px); - -o-filter: blur(5px); - -ms-filter: blur(5px); - filter: blur(5px);*/ } .card-container.card { diff --git a/src/Ombi/ClientApp/app/login/resetpassword.component.html b/src/Ombi/ClientApp/app/login/resetpassword.component.html index a902b56e4..c1c013719 100644 --- a/src/Ombi/ClientApp/app/login/resetpassword.component.html +++ b/src/Ombi/ClientApp/app/login/resetpassword.component.html @@ -3,7 +3,7 @@ you can substitue the span of reauth email for a input with the email and include the remember me checkbox -->
- +
From f13bcf5321dd4306d32cf304053a18b80553bab0 Mon Sep 17 00:00:00 2001 From: Louis Laureys Date: Fri, 5 Jan 2018 19:42:05 +0100 Subject: [PATCH 2/3] Change plus to list in menu (#1855) --- src/Ombi/ClientApp/app/app.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Ombi/ClientApp/app/app.component.html b/src/Ombi/ClientApp/app/app.component.html index c6bbf1cae..a4d8c03ce 100644 --- a/src/Ombi/ClientApp/app/app.component.html +++ b/src/Ombi/ClientApp/app/app.component.html @@ -31,7 +31,7 @@