diff --git a/src/Ombi/ClientApp/app/app.component.html b/src/Ombi/ClientApp/app/app.component.html index 8bf3b4969..7f912a718 100644 --- a/src/Ombi/ClientApp/app/app.component.html +++ b/src/Ombi/ClientApp/app/app.component.html @@ -44,12 +44,9 @@ -
+
-
- -
diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html index b14b36abd..1705ede8e 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html @@ -1,52 +1,35 @@ -
- - - - - - - -
-

Notice

+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+

Notice

+ +
+
+
+

Currently Online

+ The media server is currently online + Check this page for continous site updates. +
+
+
+
+ +
+
diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss b/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss index 962348019..26a13eb4d 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.scss @@ -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 -} \ No newline at end of file +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% */ + } +} diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts index 5bf482bb8..90a816409 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts @@ -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; diff --git a/src/Ombi/ClientApp/app/login/login.component.html b/src/Ombi/ClientApp/app/login/login.component.html index ee96038d8..736331a87 100644 --- a/src/Ombi/ClientApp/app/login/login.component.html +++ b/src/Ombi/ClientApp/app/login/login.component.html @@ -2,7 +2,9 @@ you can substitue the span of reauth email for a input with the email and include the remember me checkbox --> -
+
+ +
@@ -15,10 +17,10 @@ include the remember me checkbox - + - - Reset your password? + + Forgot your password?
diff --git a/src/Ombi/ClientApp/app/login/login.component.scss b/src/Ombi/ClientApp/app/login/login.component.scss index 496eca24c..39160995b 100644 --- a/src/Ombi/ClientApp/app/login/login.component.scss +++ b/src/Ombi/ClientApp/app/login/login.component.scss @@ -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; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts index b9a3801fc..6742d3eb4 100644 --- a/src/Ombi/ClientApp/app/login/login.component.ts +++ b/src/Ombi/ClientApp/app/login/login.component.ts @@ -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 + ')'); + }); }