From e9ca404f85745cf0baf9c517c6350e68e78d2fe2 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 24 Feb 2019 02:08:56 +0100 Subject: [PATCH] Add sidebar navigation --- static/src/app/app.component.html | 24 ++- static/src/app/app.component.scss | 61 +------ static/src/app/app.module.ts | 3 +- .../navigation-header.component.html | 171 +++++++++--------- .../navigation-header.component.scss | 47 ++++- .../navigation/sidenav-list.component.html | 105 ++++++++++- .../navigation/sidenav-list.component.scss | 4 +- .../navigation/sidenav-list.component.ts | 11 +- .../search-field/search-field.component.scss | 4 + .../war/war-list/war-list.component.html | 7 +- .../war/war-list/war-list.component.scss | 3 - static/src/styles.scss | 6 +- 12 files changed, 269 insertions(+), 177 deletions(-) diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index b4dcee0..7ebb66e 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -2,25 +2,23 @@ -
-
- - -
- -
- - -
-
+
+ +
+ +
+ + +
+
diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index e555101..3ac6808 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -1,73 +1,24 @@ @import "style/load-indicator.scss"; mat-sidenav-container, mat-sidenav-content, mat-sidenav { - height: 100%; + height: 100vh; + display: inline; + background: #fdfdfd; } mat-sidenav { + top: 50px; width: 250px; } -ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -li { - display: inline; -} - -.content { - padding-left: 15px; - padding-right: 15px; -} - -.scrollable-menu { - height: auto; - max-height: 200px; - overflow-x: hidden; -} - #scrollTopBtn { position: fixed; bottom: 20px; right: 30px; z-index: 99; background: rgba(16, 16, 16, 0.8); -} -#scrollTopBtn:hover { - background: #101010; -} - -.unprocessed { - -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */ - -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ - animation-name: color-blink; - animation-duration: 4s; - animation-iteration-count: infinite; -} - -.unprocessed-child { - background-color: orange; -} - -/* Safari 4.0 - 8.0 */ -@-webkit-keyframes color-blink { - from { - background-color: #222222; - } - to { - background-color: orange; - } -} - -@keyframes color-blink { - from { - background-color: #222222; - } - to { - background-color: orange; + &:hover { + background: #101010; } } diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index 792b881..ac162dc 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SettingsService} from './services/settings.service'; import {HttpGateway} from './services/http-gateway'; -import {MatListModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; +import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ @@ -37,6 +37,7 @@ import {FlexLayoutModule} from '@angular/flex-layout'; MatSidenavModule, MatToolbarModule, MatListModule, + MatMenuModule, FlexLayoutModule, ], diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html index f92bdd8..143f2f8 100644 --- a/static/src/app/common/navigation/navigation-header.component.html +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -29,85 +29,82 @@
  • {{'navigation.top.statistics' | translate}}
    • -
  • - - +
  • + + + {{'navigation.top.management' | translate}} + + + + + + + + +
    • -
  • - - +
  • + + + {{'navigation.top.request' | translate}} + + + + + + + +
    • -
  • - - +
  • + + + {{'navigation.top.request.manage' | translate}} + + + + + + +
    • diff --git a/static/src/app/common/navigation/navigation-header.component.scss b/static/src/app/common/navigation/navigation-header.component.scss index 6857758..d3816be 100644 --- a/static/src/app/common/navigation/navigation-header.component.scss +++ b/static/src/app/common/navigation/navigation-header.component.scss @@ -3,20 +3,24 @@ li { line-height: 46px; } -li > a { +li a { font-size: 16px; text-decoration: none; color: #9d9d9d; padding: 16px 5px; } -li:hover, li.active{ - > a { +li mat-list-item { + cursor: pointer; +} + +li:hover, li.active { + a { color: white; } } -.navigation-items{ +.navigation-items { list-style-type: none; padding: 0; margin: 0; @@ -26,7 +30,7 @@ li:hover, li.active{ background: #222222; } -mat-toolbar{ +mat-toolbar { height: 2.5em; min-height: 50px; } @@ -50,8 +54,39 @@ mat-toolbar{ color: #bebebe; } -@media all and (max-width : 599px) { +@media all and (max-width: 599px) { .brand-logo { margin: auto; } } + +.unprocessed { + -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */ + -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ + animation-name: color-blink; + animation-duration: 4s; + animation-iteration-count: infinite; +} + +.unprocessed-child { + background-color: orange; +} + +/* Safari 4.0 - 8.0 */ +@-webkit-keyframes color-blink { + from { + background-color: #222222; + } + to { + background-color: orange; + } +} + +@keyframes color-blink { + from { + background-color: #222222; + } + to { + background-color: orange; + } +} diff --git a/static/src/app/common/navigation/sidenav-list.component.html b/static/src/app/common/navigation/sidenav-list.component.html index e845859..682b90d 100644 --- a/static/src/app/common/navigation/sidenav-list.component.html +++ b/static/src/app/common/navigation/sidenav-list.component.html @@ -1,11 +1,104 @@ - - home Home + + {{'navigation.top.overview' | translate}} - - assignment_ind Owner Actions + + {{'navigation.top.ranks' | translate}} - - account_balanceAccount Actions + + {{'navigation.top.decorations' | translate}} + + + {{'navigation.top.statistics' | translate}} + + + + + {{'navigation.top.management' | translate}} + + + + + + + + + + + + + {{'navigation.top.request' | translate}} + + + + + + + + + + + + {{'navigation.top.request.manage' | translate}} + + + + + + + + + + + + + + {{'navigation.top.admin' | translate}} + + + + + + + + + {{'navigation.top.logout' | translate}} + + + {{'navigation.top.login' | translate}} + + + + {{'navigation.top.board' | translate}} diff --git a/static/src/app/common/navigation/sidenav-list.component.scss b/static/src/app/common/navigation/sidenav-list.component.scss index 569e4a6..460a29b 100644 --- a/static/src/app/common/navigation/sidenav-list.component.scss +++ b/static/src/app/common/navigation/sidenav-list.component.scss @@ -3,11 +3,11 @@ a { color: white; } -a:hover, a:active{ +a:hover, a:active { color: lightgray; } -.nav-caption{ +.nav-caption { display: inline-block; padding-left: 6px; } diff --git a/static/src/app/common/navigation/sidenav-list.component.ts b/static/src/app/common/navigation/sidenav-list.component.ts index 00a59cb..1c7b8a2 100644 --- a/static/src/app/common/navigation/sidenav-list.component.ts +++ b/static/src/app/common/navigation/sidenav-list.component.ts @@ -1,4 +1,8 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {RouteConfig} from '../../app.config'; +import {LoginService} from '../../services/app-user-service/login-service'; +import {PromotionService} from '../../services/army-management/promotion.service'; +import {AwardingService} from '../../services/army-management/awarding.service'; @Component({ selector: 'app-sidenav-list', @@ -9,7 +13,12 @@ export class SidenavListComponent implements OnInit { @Output() sidenavClose = new EventEmitter(); - constructor() { } + config = RouteConfig; + + constructor(public loginService: LoginService, + private promotionService: PromotionService, + private awardingService: AwardingService) { + } ngOnInit() { } diff --git a/static/src/app/common/user-interface/search-field/search-field.component.scss b/static/src/app/common/user-interface/search-field/search-field.component.scss index 04be8be..b010b31 100644 --- a/static/src/app/common/user-interface/search-field/search-field.component.scss +++ b/static/src/app/common/user-interface/search-field/search-field.component.scss @@ -2,3 +2,7 @@ width: 100%; padding-bottom: 20px; } + +input.form-control { + z-index: 0; +} diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html index bb0781e..be50ca0 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.html +++ b/static/src/app/statistic/war/war-list/war-list.component.html @@ -47,8 +47,7 @@ [selected]="war._id == selectedWarId"> - - -
    +
    +
    diff --git a/static/src/app/statistic/war/war-list/war-list.component.scss b/static/src/app/statistic/war/war-list/war-list.component.scss index a840a37..4937254 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.scss +++ b/static/src/app/statistic/war/war-list/war-list.component.scss @@ -88,9 +88,6 @@ } .fill-vertical-border { - width: 20%; - top: 0; - z-index: -20; position: fixed; border-right: 1px solid #dadada; height: 100vh; diff --git a/static/src/styles.scss b/static/src/styles.scss index 378bf51..7dd1afd 100644 --- a/static/src/styles.scss +++ b/static/src/styles.scss @@ -48,12 +48,16 @@ form { #left { max-width: 20%; - min-width: min-content; + min-width: 345px; margin: 0; position: static; float: left; border-right: thin solid #dadada; box-shadow: #dadada 1px 1px 6px; + + @media all and (max-width: 599px) { + // TODO + } } #right {