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

Smaller menu for mobile devices. Made custom logo idiot proof

Browse source
This commit is contained in:
twanariens 2021-05-18 22:55:06 +02:00
commit 87800d80c8
5 changed files with 79 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,12 +3,15 @@
<div class="small-middle-container">
<div class="row">
<div class="col-md-push-3 col-md-6">
<div class="col-md-push-3 col-md-6 logo-container">
<div *ngIf="customizationSettings.logo">
<img [src]="customizationSettings.logo" style="width:100%"/>
<img class="logo-img" [src]="customizationSettings.logo"/>
</div>
<div *ngIf="!customizationSettings.logo">
<img src="{{baseUrl}}/images/logo.png" style="width:100%" />
<div *ngIf="!customizationSettings.logo && customizationSettings.applicationName" class="logo">
{{customizationSettings.applicationName}}
</div>
<div *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="logo">
OMBI
</div>
</div>
<div class="col-md-4 col-md-push-3 vcenter">
@ -39,11 +42,11 @@
<span [translate]="'LandingPage.OfflineParagraph'"></span>
<p [translate]="'LandingPage.CheckPageForUpdates'"></p>
</div>
<div class="button-continue">
<button id="continue" mat-raised-button [routerLink]="['/login', 'true']" color="accent" type="submit" data-cy="continue">{{ 'Common.ContinueButton' | translate }}</button>
</div>
</div>
</div>
<div class="col-md-3 offset-md-6 vcenter">
<button id="continue" mat-raised-button [routerLink]="['/login', 'true']" color="accent" type="submit" data-cy="continue">{{ 'Common.ContinueButton' | translate }}</button>
</div>
</div>
</div>

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

@ -1,10 +1,14 @@

.small-middle-container{
margin: auto;
width: 75%;
padding-top: 15%;
@import "~styles/variables.scss";
.small-middle-container{
height:100vh;
}
.row{
display:flex;
align-items: center;
justify-content: center;
height:100vh;
}
@media only screen and (max-width: 992px) {
div.centered {
@ -32,12 +36,6 @@ div.bg {
position: fixed;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.online{
color:lightgreen;
}
@ -61,4 +59,41 @@ span, b, i, p {
::ng-deep body {
background-color:#303030 !important;
}
.logo{
font:700 6em 'Montserrat', sans-serif;
text-align:center;
text-transform: uppercase;
color: $ombi-active;
padding:40px 20px;
white-space: normal;
}
@media (max-width: 1000px) {
.logo{
font:700 5em 'Montserrat', sans-serif;
}
}
@media (max-width: 800px) {
.logo{
font:700 4em 'Montserrat', sans-serif;
}
}
@media (max-width: 767px) {
.vcenter{
text-align:center;
}
}
.logo-img{
max-width:420px;
max-height:420px;
}
.logo-container{
display:flex;
justify-content: center;
}

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

@ -8,7 +8,7 @@
<mat-card class="mat-elevation-z8 top-margin login-card">
<H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
<H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
<img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
<img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo" class="logo-img">
<mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
<form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">

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

@ -210,6 +210,11 @@ div.bg {
margin-bottom:70px;
}
.logo-img{
max-width:420px;
max-height:420px;
}
@media (max-width: 700px){
.login-card H1.login_logo{
font-size:20vw;

17
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
View file

@ -174,6 +174,23 @@
}
}
@media (max-width: 600px) {
.sidenav-container .sidenav{
.application-name{
font-size:2em;
max-width:200px;
}
.mat-list-item{
width:14rem;
padding:10px 0px;
}
.active-list-item{
width:14rem;
padding:10px 0px;
}
}
}
.outer-profile .profile-img-container {
background: inherit;
}