open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Landing and login page changes #865 #1485

Browse Source
pull/1488/head
tidusjar 7 years ago
parent abd5a4889e
commit fcd015c5ce
7 changed files with 262 additions and 180 deletions
Show Stats Download Patch File Download Diff File

5
src/Ombi/ClientApp/app/app.component.html
Unescape View File

@ -44,12 +44,9 @@
</nav>
<div *ngIf="showNav" class="container top-spacing">
<div [ngClass]="{'container top-spacing': showNav}">
<router-outlet></router-outlet>
</div>
<div *ngIf="!showNav">
<router-outlet></router-outlet>
</div>

81
src/Ombi/ClientApp/app/landingpage/landingpage.component.html
Unescape View File

@ -1,52 +1,35 @@
<div *ngIf="landingPageSettings && customizationSettings && background">
<style>
landingDiv {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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 */
position: fixed;
top: 0;
left: 0;
z-index: -1;
/*background-image: linear-gradient(-10deg, transparent 20%, rgba(255, 255, 255, 0.3) 20%, rgba(0, 0, 255, 0.3) 80%, transparent 80%), url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")*/
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
</style>
<img class="landingDiv bg" [style.background-image]="background"/>
<div class="centered">
<h3>Notice</h3>
<div *ngIf="landingPageSettings && customizationSettings && background">
<img class="landingDiv bg" [style.background-image]="background" />
<div class="centered col-md-12">
<div class="row">
<div class="col-md-push-5 col-md-2">
<div *ngIf="customizationSettings.logo">
<img [src]="customizationSettings.logo" style="width:100%"/>
</div>
<div *ngIf="!customizationSettings.logo">
<img src="/images/logo.png" style="width:100%" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-3 vcenter">
<div *ngIf="landingPageSettings.noticeEnabled">
<h3><i class="fa fa-bell-o"></i> <b>Notice</b></h3>
<span [innerHtml]="landingPageSettings.noticeText"></span>
</div>
<div>
<div *ngIf="mediaServerStatus">
<h3 class="online"><i class="fa fa-check-circle "></i> Currently Online</h3>
<span>The media server is currently online</span>
<span>Check this page for continous site updates.</span>
</div>
</div>
</div>
<div class="col-md-3 col-md-push-4 vcenter">
<button [routerLink]="['/search']" class="btn btn-lg btn-success-outline">Contine</button>
</div>
</div>
</div>
</div>

60
src/Ombi/ClientApp/app/landingpage/landingpage.component.scss
Unescape View File

@ -1,16 +1,48 @@
.landing-box {
height: 150px;
background: #333333 !important;
border-radius: 2%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
box-shadow: 5px 3px 5px black;
landingDiv {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.landing-logo {
position: relative;
right: 20%;
width: 300px
}
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 */
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.online{
color:lightgreen;
}
.offline {
color: #F44336
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}

2
src/Ombi/ClientApp/app/landingpage/landingpage.component.ts
Unescape View File

@ -29,7 +29,7 @@ export class LandingPageComponent implements OnInit {
this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = x);
this.requestService.getRequestsCount().subscribe(x => this.requestCount = x);
this.images.getRandomBackground().subscribe(x => {
this.background = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.3) 20.1%, rgba(0,0,0,0.3) 80.1%, transparent 80%), url(' + x.url + ')');
this.background = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(' + x.url + ')');
});
this.mediaServerStatus = true;

10
src/Ombi/ClientApp/app/login/login.component.html
Unescape View File

@ -2,7 +2,9 @@
you can substitue the span of reauth email for a input with the email and
include the remember me checkbox
-->
<div *ngIf="form && customizationSettings">
<div *ngIf="form && customizationSettings && background">
<img class="landingDiv bg" [style.background-image]="background" />
<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="" /> -->
@ -15,10 +17,10 @@ include the remember me checkbox
<input type="email" id="inputEmail" class="form-control" formControlName="username" placeholder="Username" autofocus>
<input type="password" id="inputPassword" class="form-control" formControlName="password" placeholder="Password">
<button class="btn btn-success-outline" [disabled]="form.invalid" type="submit">Sign in</button>
<button class="btn btn-success" type="submit">Sign in</button>
</form><!-- /form -->
<a [routerLink]="['/reset']" class="forgot-password">
Reset your password?
<a [routerLink]="['/reset']" class="forgot-password col-md-12">
<b>Forgot your password?</b>
</a>
</div><!-- /card-container -->
</div><!-- /container -->

275
src/Ombi/ClientApp/app/login/login.component.scss
Unescape View File

@ -8,6 +8,7 @@ $info-colour: #5bc0de;
$warning-colour: #f0ad4e;
$danger-colour: #d9534f;
$success-colour: #5cb85c;
$placeholder-colour: #101010;
body, html {
height: 100% !important;
@ -16,132 +17,192 @@ body, html {
}
.card-container.card {
max-width: 350px;
padding: 40px 40px;
landingDiv {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
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 component
*/
.card {
/*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
background-color: $bg-colour;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
.card-container.card {
max-width: 500px;
padding: 45px 45px;
background-color: rgba(0,0,0, 0.0);
border-radius: 5%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:100%;
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
/*
* Card component
*/
.card {
/*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
background-color: $bg-colour;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
/*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*
* Form styles
*/
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
.form-control {
color: #fefefe;
background-color: $bg-colour-disabled !important;
}
.form-control {
color: black;
background-color: white !important;
}
.reauth-email {
display: block;
color: white;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.reauth-email {
display: block;
color: white;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.btn.btn-signin {
/*background-color: #4d90fe; */
background-color: rgb(104, 145, 162);
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.btn.btn-signin {
/*background-color: #4d90fe; */
background-color: rgb(104, 145, 162);
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}
.forgot-password {
color: rgb(104, 145, 162);
text-align:center;
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus {
color: rgb(12, 97, 33);
}
// Placeholders
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: $placeholder-colour;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $placeholder-colour;
opacity: 1;
}
.forgot-password {
color: rgb(104, 145, 162);
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $placeholder-colour;
opacity: 1;
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus {
color: rgb(12, 97, 33);
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $placeholder-colour;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: $placeholder-colour;
}

9
src/Ombi/ClientApp/app/login/login.component.ts
Unescape View File

@ -8,6 +8,9 @@ import { NotificationService } from '../services/notification.service';
import { SettingsService } from '../services/settings.service';
import { ICustomizationSettings } from '../interfaces/ISettings';
import { DomSanitizer } from '@angular/platform-browser';
import { ImageService } from '../services/image.service';
@Component({
templateUrl: './login.component.html',
@ -17,7 +20,7 @@ export class LoginComponent implements OnInit {
constructor(private authService: AuthService, private router: Router, private notify: NotificationService, private status: StatusService,
private fb: FormBuilder, private settingsService : SettingsService) {
private fb: FormBuilder, private settingsService: SettingsService, private images: ImageService, private sanitizer: DomSanitizer) {
this.form = this.fb.group({
username: ["", [Validators.required]],
password: ["", [Validators.required]]
@ -32,9 +35,13 @@ export class LoginComponent implements OnInit {
form: FormGroup;
customizationSettings : ICustomizationSettings;
background: any;
ngOnInit(): void {
this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
this.images.getRandomBackground().subscribe(x => {
this.background = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%),url(' + x.url + ')');
});
}

Write Preview
Loading…
Cancel
Save