Skip to content

Commit cdfacd4

Browse files
ryanslattenryanslatten
authored
Homepage updated for support for smaller screens (#303)
* initial commit * fix title styling * updated css names
1 parent 83a8592 commit cdfacd4

File tree

8 files changed

+74
-53
lines changed

8 files changed

+74
-53
lines changed

‎web-app/src/app/feed-panel/feed-panel-tab.component.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="tab">
22
<div *ngIf="tab?.iconUrl" class="img" [ngClass]="{'img__active': active}" [ngStyle]="imageStyle"></div>
3-
<mat-icon *ngIf="tab?.icon" [ngClass]="{'icon__active': active, 'icon': true }">{{tab.icon}}</mat-icon>
4-
5-
<span class="tab--title" [ngClass]="{'tab--title__active': active }">{{tab?.title}}</span>
6-
</div>
7-
3+
<mat-icon *ngIf="tab?.icon" [ngClass]="{'icon__active': active, 'icon': true }" [matTooltip]="tab?.title"
4+
matTooltipPosition="right">
5+
{{tab.icon}}
6+
</mat-icon>
7+
</div>

‎web-app/src/app/feed-panel/feed-panel-tab.component.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
position: relative;
2525
display: flex;
2626
align-items: center;
27-
padding: 16px;
27+
padding: 0.75rem;
2828
color: rgba(255, 255, 255, 0.6);
2929
cursor: pointer;
3030
cursor: hand;
@@ -41,7 +41,7 @@
4141
color: var(--mdc-theme-primary, #1E88E5);
4242
}
4343

44-
.tab > mat-icon {
44+
.tab>mat-icon {
4545
font-size: 24px;
4646
height: 24px;
4747
width: 24px;

‎web-app/src/app/feed-panel/feed-panel.component.scss

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,13 @@ user-feed {
3838
position: absolute;
3939
background-color: white;
4040
border-right: 1px solid rgba(0, 0, 0, 0.20);
41-
width: 57px;
41+
width: 3rem;
4242
height: 100%;
4343
z-index: 10;
44-
overflow-y: auto;
45-
-webkit-transition: width .3s linear;
46-
transition: width .3s linear;
47-
-webkit-transform: translateZ(0) scale(1, 1);
48-
}
49-
50-
.feeds-nav:hover {
51-
width: 240px;
5244
}
5345

5446
.feeds-content {
5547
position: relative;
56-
margin-left: 56px;
48+
margin-left: 3rem;
5749
width: 100%;
5850
}

‎web-app/src/app/home/home.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55

66
<div class="home-content">
77
<mat-sidenav-container hasBackdrop="false">
8-
<mat-sidenav #feed mode="side" position="start" opened>
8+
<mat-sidenav #feed mode="side" position="start" class="feeds-nav">
99
<feed-panel class="feed" [event]="event" [observationLocation]="newObservation"></feed-panel>
1010
</mat-sidenav>
11-
11+
1212
<mat-sidenav #preferences mode="slide" position="end" disableClose="true">
1313
<preferences></preferences>
1414
</mat-sidenav>
15-
15+
1616
<map (addObservation)="onAddObservation($event)"></map>
17-
17+
1818
</mat-sidenav-container>
1919
</div>
2020

‎web-app/src/app/home/home.component.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,14 @@ mat-sidenav-container {
2626
background: #e1e2e1;
2727
order: 1;
2828
width: 500px;
29+
max-width: 100%;
2930
height: 100%;
3031
display: flex;
3132
flex-direction: row;
3233
position: relative;
3334
transition: margin-left .3s linear;
34-
z-index: 1;
35+
}
36+
37+
.feeds-nav {
38+
max-width: 100%;
3539
}

‎web-app/src/app/home/home.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ import { IngressModule } from '../ingress/ingress.module';
141141
import { FilterControlComponent } from '../map/controls/filter.component';
142142
import { ExportControlComponent } from '../map/controls/export.component';
143143
import { BannerModule } from '../banner/banner.module';
144+
import { MatMenuModule } from '@angular/material/menu';
144145

145146
const routes: Routes = [{
146147
path: '',
@@ -177,6 +178,7 @@ const routes: Routes = [{
177178
MatGridListModule,
178179
MatIconModule,
179180
MatInputModule,
181+
MatMenuModule,
180182
MatMomentDatetimeModule,
181183
MatPaginatorModule,
182184
MatProgressBarModule,
@@ -295,7 +297,7 @@ class AngularModule { }
295297
InputMaskModule.forRoot(),
296298
RouterModule.forChild(routes)
297299
],
298-
exports: [ RouterModule ]
300+
exports: [RouterModule]
299301
})
300302
export class HomeModule {
301303
}

‎web-app/src/app/navigation/navigation.component.html

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,60 @@
11
<mat-toolbar color="primary">
22
<div class="container">
33
<div class="menu">
4-
<button mat-icon-button class="navigation-options">
5-
<mat-icon>more_vert</mat-icon>
6-
</button>
7-
84
<button mat-icon-button *ngIf="state === 'map'" (click)="toggleFeed()">
95
<mat-icon>menu</mat-icon>
106
</button>
11-
12-
<span class="title">Mage</span>
137
</div>
148

15-
<div>
9+
<div class="event-title">
1610
<span class="filter-event">{{filteredEvent.name}}</span>
1711
<span *ngIf="filteredTeams" class="filter-teams"><span>> {{filteredTeams}}</span></span>
1812
<span *ngIf="filteredInterval" class="filter-interval"> {{filteredInterval}}</span>
1913
</div>
2014

21-
<div>
15+
<div class="collapsed-menu">
2216
<button mat-button (click)="togglePreferences()">
2317
<mat-icon>tune</mat-icon>
2418
</button>
25-
26-
<a [routerLink]="['/profile']" mat-button>
27-
<mat-icon>account_circle</mat-icon>
28-
</a>
29-
30-
<a [routerLink]="['/about']" mat-button>
31-
<mat-icon>info</mat-icon>
32-
</a>
33-
34-
<a *ngIf="isAdmin" mat-button href="admin/#/admin/">
35-
<mat-icon>admin_panel_settings</mat-icon>
36-
</a>
37-
38-
<a mat-button (click)="onLogout()">
39-
<mat-icon>logout</mat-icon>
40-
</a>
19+
<button mat-icon-button class="navigation-options" [matMenuTriggerFor]="menu">
20+
<mat-icon>more_vert</mat-icon>
21+
</button>
22+
<mat-menu #menu>
23+
<a mat-menu-item [routerLink]="['/profile']">
24+
<mat-icon>account_circle</mat-icon>
25+
<span>Profile</span>
26+
</a>
27+
<a mat-menu-item [routerLink]="['/about']">
28+
<mat-icon>info</mat-icon>
29+
<span>About</span>
30+
</a>
31+
<a mat-menu-item *ngIf="isAdmin" href="admin/#/admin/">
32+
<mat-icon>admin_panel_settings</mat-icon>
33+
<span>Admin</span>
34+
</a>
35+
<a mat-menu-item (click)="onLogout()">
36+
<mat-icon>logout</mat-icon>
37+
<span>Logout</span>
38+
</a>
39+
</mat-menu>
40+
41+
<div class="actions">
42+
<a [routerLink]="['/profile']" mat-button>
43+
<mat-icon>account_circle</mat-icon>
44+
</a>
45+
46+
<a [routerLink]="['/about']" mat-button>
47+
<mat-icon>info</mat-icon>
48+
</a>
49+
50+
<a *ngIf="isAdmin" mat-button href="admin/#/admin/">
51+
<mat-icon>admin_panel_settings</mat-icon>
52+
</a>
53+
54+
<a mat-button (click)="onLogout()">
55+
<mat-icon>logout</mat-icon>
56+
</a>
57+
</div>
4158
</div>
4259
</div>
4360
</mat-toolbar>

‎web-app/src/app/navigation/navigation.component.scss

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,20 @@
1010
justify-content: space-between;
1111
}
1212

13-
.menu {
13+
.collapsed-menu {
1414
display: flex;
1515
flex-direction: row;
1616
align-items: center;
1717
justify-content: center;
1818
}
1919

20-
.title {
21-
margin-left: 16px;
20+
.actions {
21+
display: none;
22+
}
23+
24+
.event-title {
25+
margin-top: 0.2rem;
26+
font-size: 0.75em;
2227
}
2328

2429
.profile-avatar {
@@ -30,9 +35,10 @@
3035

3136
@media(min-width:900px) {
3237
.navigation-options {
33-
visibility: hidden;
3438
display: none;
35-
width: 0;
36-
padding: 0;
39+
}
40+
41+
.actions {
42+
display: block;
3743
}
3844
}

0 commit comments

Comments
 (0)