Übersicht über alle Auszeichnungen
-
-
{{fraction.BLUFOR}}
-
-
+
+
{{fraction.BLUFOR}}
+
{{fraction.OPFOR}}
+
GLOBAL
-
-
{{fraction.OPFOR}}
-
-
-
-
-
-
Global
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
index a752a70..2c0bf72 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@@ -15,13 +15,13 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
})
export class DecorationOverviewComponent implements OnInit {
- decorationsBlufor: Decoration[];
+ decorations: Decoration[];
- decorationsGlobal: Decoration[];
+ medals: Decoration[];
- decorationsOpfor: Decoration[];
+ ribbons: Decoration[];
- hasFixedTableHeader = false;
+ active: string;
readonly fraction = Fraction;
@@ -35,12 +35,17 @@ export class DecorationOverviewComponent implements OnInit {
// init decoration data
this.decorationService.findDecorations()
.subscribe(decorations => {
- this.decorationsBlufor = decorations.filter(d => d.fraction === 'BLUFOR');
- this.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
- this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
+ this.decorations = decorations;
+ this.switchFraction('BLUFOR');
});
};
+ switchFraction(value: string) {
+ this.medals = this.decorations.filter(d => d.fraction === value && d.isMedal);
+ this.ribbons = this.decorations.filter(d => d.fraction === value && !d.isMedal);
+ this.active = value;
+ }
+
select(decoration: Decoration) {
this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
}
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
index 0e00af8..e6f19a8 100644
--- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
@@ -1,8 +1,8 @@
.decoration-card {
background: rgba(255, 255, 255, 0.87);
- width: 200px;
- height: 300px;
- margin: 6px;
+ width: 229px;
+ height: 258px;
+ margin: 7px 12px;
padding: 0;
overflow: hidden;
float: left;
@@ -26,7 +26,7 @@
}
.image-head {
- height: 110px;
+ height: 100px;
text-align: center;
padding: 12px;
}
@@ -47,8 +47,8 @@ img.img-medal {
}
img.img-ribbon {
- padding-top: 20%;
- width: 70%;
+ padding-top: 10%;
+ width: 55%;
}
.gradient {
diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts
index f1f1a63..dc1c331 100644
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@@ -8,13 +8,14 @@ import {MatTableModule} from '@angular/material/table';
import {MatCardModule} from '@angular/material/card';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatListModule} from '@angular/material/list';
+import {MatTabsModule} from '@angular/material/tabs';
import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
@NgModule({
declarations: pubRoutingComponents,
entryComponents: [UserListSheetComponent],
imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, MatBottomSheetModule, MatListModule,
- pubRouterModule],
+ MatTabsModule, pubRouterModule],
providers: [DecorationService, RankService]
})
export class PublicModule {
diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts
index e8200f3..8e5837d 100644
--- a/static/src/app/pub/public.routing.ts
+++ b/static/src/app/pub/public.routing.ts
@@ -5,7 +5,6 @@ import {DecorationOverviewComponent} from './decoration-overview/decoration-over
import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
-import {DecorationNavigationComponent} from './decoration-overview/decoration-navigation/decoration-navigation.component';
export const publicRoutes: Routes = [
{
@@ -26,5 +25,5 @@ export const publicRoutes: Routes = [
export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
- RankPanelComponent, UserListSheetComponent, DecorationNavigationComponent];
+ RankPanelComponent, UserListSheetComponent];
diff --git a/static/src/app/pub/rank-overview/rank-overview.component.css b/static/src/app/pub/rank-overview/rank-overview.component.css
index e9606e0..3c29700 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.css
+++ b/static/src/app/pub/rank-overview/rank-overview.component.css
@@ -37,7 +37,10 @@ h1, h3 {
h3 {
font-weight: bolder;
- margin-bottom: 20px;
+ padding-bottom: 14px;
+ padding-top: 11px;
+ margin-bottom: 0;
+ background: #222222;
}
.column-container {