Added electron styling

This commit is contained in:
Zakary Timson 2019-03-24 13:07:14 -04:00
parent ae4d1922be
commit 6e0a113d32
3 changed files with 12 additions and 12 deletions

View File

@ -1,16 +1,16 @@
<div [ngClass]="{lock: lock, unlock: !lock}"> <div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light"> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container"> <div [ngClass]="{container: !electron.isElectronApp, 'container-fluid': electron.isElectronApp}">
<a class="navbar-brand roboto" [routerLink]="['/']"> <a class="navbar-brand roboto" [routerLink]="['/']">
<span class="fh-fade">fh</span> <span class="fh-fade">fh</span>
<span class="rainbow"> & </span> <span class="rainbow"> & </span>
<span class="sons-fade">sons</span> <span class="sons-fade">sons</span>
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <button *ngIf="!electron.isElectronApp" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbar"> <div *ngIf="!electron.isElectronApp" class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" [routerLink]="['/about']">About</a> <a class="nav-link text-dark" [routerLink]="['/about']">About</a>
@ -50,7 +50,7 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="d-print-none"> <footer *ngIf="!electron.isElectronApp" class="d-print-none">
<div class="d-flex py-4 justify-content-center"> <div class="d-flex py-4 justify-content-center">
<div class="d-none d-md-inline ml-5 text-left"> <div class="d-none d-md-inline ml-5 text-left">
<h5>MAIN MENU</h5> <h5>MAIN MENU</h5>
@ -59,7 +59,7 @@
<a [routerLink]="['/about']">About</a> <a [routerLink]="['/about']">About</a>
</li> </li>
<li> <li>
<a [routerLink]="['/store']">Store</a> <a [routerLink]="['/catalog']">Catalog</a>
</li> </li>
<li> <li>
<a [routerLink]="['/formulaManager']">Formula Manager</a> <a [routerLink]="['/formulaManager']">Formula Manager</a>

View File

@ -11,14 +11,14 @@
<mat-list> <mat-list>
<ng-container *ngFor="let f of formulas | async; let i = index"> <ng-container *ngFor="let f of formulas | async; let i = index">
<mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider> <mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}"> <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f); mobile ? drawer.close() : null" [ngClass]="{'active': f.id == formula?.id}">
<mat-icon *ngIf="!f.approved" class="mr-3 text-danger">remove_circle</mat-icon> <mat-icon *ngIf="!f.approved" class="mr-3 text-danger">remove_circle</mat-icon>
{{f.name}} {{f.name}}
</mat-list-item> </mat-list-item>
</ng-container> </ng-container>
</mat-list> </mat-list>
</mat-drawer> </mat-drawer>
<mat-drawer-content class="p-3 bg-white ml-print-0" style="min-height: 450px; background: url('assets/img/splatter.jpg') center; background-size: cover;"> <mat-drawer-content class="p-3 bg-white ml-print-0" style="min-height: calc(100vh - 56px); background: url('assets/img/splatter.jpg') center; background-size: cover;">
<div class="d-block d-print-none" style="overflow: auto"> <div class="d-block d-print-none" style="overflow: auto">
<button *ngIf="mobile" class="mr-2" mat-raised-button (click)="drawer.open()"> <button *ngIf="mobile" class="mr-2" mat-raised-button (click)="drawer.open()">
<mat-icon>opacity</mat-icon> Formulas <mat-icon>opacity</mat-icon> Formulas
@ -32,7 +32,7 @@
</button> </button>
</span> </span>
</div> </div>
<div *ngIf="(electron.isElectronApp || mobile) && !formula"> <div *ngIf="mobile && !formula">
<img src="assets/img/starthere.png" class="m-4"> <img src="assets/img/starthere.png" class="m-4">
</div> </div>
<mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto mt-4" style="max-width: 600px"> <mat-card *ngIf="!electron.isElectronApp && !mobile && !formula" class="mx-auto mt-4" style="max-width: 600px">

View File

@ -14,10 +14,10 @@
</a> </a>
</div> </div>
<div class="col-12 col-md-4 text-center"> <div class="col-12 col-md-4 text-center">
<a class="no-underline" style="max-width: 20rem" [routerLink]="['/store']"> <a class="no-underline" style="max-width: 20rem" [routerLink]="['/catalog']">
<mat-card class="dark-hover mb-3" style="min-height: 320px;"> <mat-card class="dark-hover mb-3" style="min-height: 320px;">
<mat-icon class="my-5" style="transform: scale(4); color: #53709f;">local_grocery_store</mat-icon> <mat-icon class="my-5" style="transform: scale(4); color: #53709f;">local_grocery_store</mat-icon>
<h3 class="text-dark mb-4">Store</h3> <h3 class="text-dark mb-4">Catalog</h3>
<mat-divider class="custom-line"></mat-divider> <mat-divider class="custom-line"></mat-divider>
<p class="text-black-50">Buy equipment, ink and anything else you might need!</p> <p class="text-black-50">Buy equipment, ink and anything else you might need!</p>
</mat-card> </mat-card>