github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better login backgrounds! (#1852)

Browse source 
* 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
This commit is contained in:
Louis Laureys 2018-01-05 07:35:28 +01:00 • committed by Jamie
commit 67223d2d54
5 changed files with 21 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Ombi/ClientApp/app/landingpage/landingpage.component.html
View file

@ -1,5 +1,5 @@
<div *ngIf="landingPageSettings && customizationSettings">
<img *ngIf="background" class="landingDiv bg" [style.background-image]="background" />
<div *ngIf="background" class="bg" [style.background-image]="background"></div>
<div class="centered col-md-12">
<div class="row">

38
src/Ombi/ClientApp/app/landingpage/landingpage.component.scss
View file

@ -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% */
}
}
}

2
src/Ombi/ClientApp/app/login/login.component.html
View file

@ -4,7 +4,7 @@ include the remember me checkbox
-->
<div *ngIf="form && customizationSettings">
<img *ngIf="background" class="landingDiv bg" [style.background-image]="background" />
<div *ngIf="background" class="bg" [style.background-image]="background"></div>
<div class="container" id="login">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->

31
src/Ombi/ClientApp/app/login/login.component.scss
View file

@ -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 {

2
src/Ombi/ClientApp/app/login/resetpassword.component.html
View file

@ -3,7 +3,7 @@ you can substitue the span of reauth email for a input with the email and
include the remember me checkbox
-->
<div *ngIf="form && customizationSettings && background">
<img class="landingDiv bg" [style.background-image]="background" />
<div class="bg" [style.background-image]="background"></div>
<div class="container" id="login">
<div class="card card-container">
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->