Skip to content

Commit 6dc7d4a

Browse files
wurstbrotwurstbrot
authored
Merge pull request #356 from vbakke/feat/347-responsive-app
Responsive app
2 parents c6cc45d + 812194d commit 6dc7d4a

8 files changed

Lines changed: 314 additions & 202 deletions

File tree

‎src/app/app-routing.module.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { TeamsComponent } from './component/teams/teams.component';
1212
const routes: Routes = [
1313
{ path: '', component: MatrixComponent },
1414
{ path: 'circular-heatmap', component: CircularHeatmapComponent },
15+
{ path: 'matrix', component: MatrixComponent },
1516
{ path: 'activity-description', component: ActivityDescriptionComponent },
1617
{ path: 'mapping', component: MappingComponent },
1718
{ path: 'usage', redirectTo: 'usage/' },

‎src/app/app.component.css‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,34 @@
22
.main-container {
33
width: 100%;
44
height: 100%;
5-
/*border: 10px solid yellow;*/
65
}
76

87
.sidenav-content {
98
display: flex;
109
padding: 10px;
11-
align-items: left;
12-
justify-content: left;
13-
/*background-color: red;*/
10+
justify-content: space-between;
1411
}
1512

16-
.example-sidenav {
13+
.sidenav-menu {
1714
padding: 20px;
1815
}
1916

17+
.menu-close {
18+
position: absolute;
19+
right: 0;
20+
top: 2px;
21+
background: transparent;
22+
border: 0;
23+
color: #ddd;
24+
}
25+
2026
.github-fork-ribbon:before {
2127
background-color: #333;
2228
}
29+
30+
@media only screen and (max-width: 750px) {
31+
.github-fork-ribbon {
32+
display: none;
33+
}
34+
35+
}

‎src/app/app.component.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
<mat-drawer-container class="main-container" autosize>
2-
<mat-drawer #drawer class="example-sidenav" mode="side">
2+
<mat-drawer
3+
#drawer
4+
class="sidenav-menu"
5+
mode="side"
6+
opened="{{ menuIsOpen }}">
7+
<button class="menu-close" (click)="toggleMenu()">
8+
<mat-icon class="white-icon">close</mat-icon>
9+
</button>
310
<a routerLink="/"><app-logo></app-logo></a>
411
<app-sidenav-buttons></app-sidenav-buttons>
512
</mat-drawer>
613

714
<div class="sidenav-content">
8-
<button type="button" mat-button (click)="drawer.toggle()" color="primary">
15+
<button type="button" mat-button (click)="toggleMenu()" color="primary">
916
<mat-icon>menu</mat-icon>
1017
</button>
1118
<a

‎src/app/app.component.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22

33
@Component({
44
selector: 'app-root',
55
templateUrl: './app.component.html',
66
styleUrls: ['./app.component.css'],
77
})
8-
export class AppComponent {
8+
export class AppComponent implements OnInit {
99
title = 'DSOMM';
10+
menuIsOpen: boolean = true;
11+
12+
ngOnInit(): void {
13+
let menuState: string | null = localStorage.getItem('state.menuIsOpen');
14+
if (menuState === 'false') {
15+
setTimeout(() => {
16+
this.menuIsOpen = false;
17+
}, 600);
18+
}
19+
}
20+
21+
toggleMenu(): void {
22+
this.menuIsOpen = !this.menuIsOpen;
23+
localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
24+
}
1025
}

‎src/app/component/circular-heatmap/circular-heatmap.component.css‎

Lines changed: 100 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,34 @@
1717
}
1818

1919
.right-panel {
20-
float: right;
21-
width: 25%;
2220
margin: 5%;
2321
padding: 20px;
22+
height: 80vh;
23+
display: grid;
24+
grid-template-rows: auto 1fr auto;
2425
}
25-
.downloadButtonClass {
26-
position: fixed;
27-
padding: 10px;
28-
bottom: 5%;
29-
right: 5%;
26+
27+
.heatmapClass {
28+
display: grid;
29+
grid-template-rows: auto 1fr auto;
30+
grid-template-columns: 6fr 4fr;
31+
height: 100%;
32+
width: 100%;
3033
}
31-
.resetButtonClass {
32-
position: fixed;
33-
padding: 10px;
34-
bottom: 5%;
35-
right: 18%;
34+
35+
.heatmapChart {
36+
grid-row: 1/4;
37+
display: grid;
38+
justify-items: center;
39+
align-content: space-between;
40+
}
41+
#chart {
42+
width: 100%;
43+
max-width: min(100vh - 60px, 100vw - 60px);
44+
}
45+
46+
.downloadButtonClass {
47+
margin: 10px 0;
3648
}
3749
.overlay-details {
3850
z-index: 2;
@@ -69,15 +81,86 @@
6981
justify-content: top;
7082
margin-left: auto;
7183
}
84+
.team-filter {
85+
padding: 0.4rem;
86+
grid-column: 2/3;
87+
display: flex;
88+
flex-direction: column;
89+
}
90+
91+
.team-filter.hidden {
92+
height: 0;
93+
visibility: collapse;
94+
}
95+
96+
.filter-toggle .hidden {
97+
display: none;
98+
}
7299
.team-list {
73100
list-style-type: none;
74101
margin: 0;
75102
padding: 0 1em;
76103
}
77-
/* .team-filter {
104+
.mat-chip-list {
105+
display: flex;
106+
flex-direction: row;
107+
flex-wrap: wrap;
108+
padding: 1rem;
109+
}
110+
.filter-container {
111+
position: relative;
112+
}
113+
button.filter-toggle {
114+
position: absolute;
115+
top: 2px;
116+
right: 2px;
117+
border: 0;
118+
background-color: transparent;
119+
z-index: 1;
78120
padding: 0;
79-
width: 60%;
80-
} */
81-
.team-filter > .mat-form-field {
82-
display: block;
121+
min-width: 0;
122+
line-height: 24px;
83123
}
124+
125+
.footer-buttons {
126+
grid-column: 2/3;
127+
place-self: flex-end;
128+
margin: 0 1rem;
129+
padding-top: 1rem;
130+
display: flex;
131+
align-items: flex-end;
132+
flex-direction: column;
133+
}
134+
135+
@media only screen and (max-width: 750px) {
136+
.heatmapClass {
137+
grid-template-rows: auto auto 1fr auto;
138+
grid-template-columns: 1fr;
139+
}
140+
141+
.team-filter, .heatmapChart, .footer-buttons {
142+
grid-column: 1;
143+
}
144+
145+
.team-filter {
146+
grid-row: 1;
147+
padding: 0.4rem;
148+
}
149+
150+
.mat-chip-list {
151+
padding: 0.4rem;
152+
}
153+
154+
.heatmapChart {
155+
grid-row: 2;
156+
}
157+
158+
#chart {
159+
max-width: max(60vh, 60vw);
160+
}
161+
162+
.overlay-details {
163+
width: 100%;
164+
}
165+
166+
}

‎src/app/component/circular-heatmap/circular-heatmap.component.html‎

Lines changed: 72 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,18 @@ <h2>Nothing to show</h2>
192192
</div>
193193
</ng-template>
194194
</div>
195-
<div id="chart" class="heatmapClass">
196-
<div class="right-panel">
197-
<div class="team-filter">
195+
<div class="heatmapClass">
196+
<div id="chart" class="heatmapChart"></div>
197+
<div class="filter-container">
198+
<button
199+
class="filter-toggle"
200+
mat-button
201+
color="primary"
202+
(click)="toggleFilters()">
203+
<mat-icon [class.hidden]="!showFilters">keyboard_arrow_up</mat-icon>
204+
<mat-icon [class.hidden]="showFilters">filter_alt</mat-icon>
205+
</button>
206+
<div class="team-filter" [class.hidden]="!showFilters">
198207
<mat-form-field class="team-chip-list">
199208
<mat-label>Team Group Filter</mat-label>
200209
<mat-chip-list selectable>
@@ -225,68 +234,69 @@ <h2>Nothing to show</h2>
225234
</mat-chip-list>
226235
</mat-form-field>
227236
</div>
228-
<mat-card class="example-card" *ngIf="showActivityCard">
229-
<mat-card-title-group>
230-
<mat-card-title>{{ cardHeader }}</mat-card-title>
231-
<mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
232-
</mat-card-title-group>
233-
<mat-card-content
234-
*ngFor="let activity of activityData; index as activityIndex">
235-
<mat-expansion-panel>
236-
<mat-expansion-panel-header>
237-
<mat-panel-title>
238-
<button
239-
class="title-button"
237+
</div>
238+
<mat-card class="example-card" *ngIf="showActivityCard">
239+
<mat-card-title-group>
240+
<mat-card-title>{{ cardHeader }}</mat-card-title>
241+
<mat-card-subtitle>{{ cardSubheader }}</mat-card-subtitle>
242+
</mat-card-title-group>
243+
<mat-card-content
244+
*ngFor="let activity of activityData; index as activityIndex">
245+
<mat-expansion-panel>
246+
<mat-expansion-panel-header>
247+
<mat-panel-title>
248+
<button
249+
class="title-button"
250+
(click)="
251+
$event.preventDefault();
252+
openActivityDetails(
253+
currentDimension,
254+
cardHeader,
255+
activity['activityName']
256+
)
257+
">
258+
{{ activity['activityName'] }}
259+
</button>
260+
</mat-panel-title>
261+
</mat-expansion-panel-header>
262+
<ng-template matExpansionPanelContent>
263+
<ul class="team-list">
264+
<li *ngFor="let teamname of teamVisible">
265+
<mat-checkbox
266+
[checked]="activity.teamsImplemented[teamname]"
267+
color="primary"
240268
(click)="
241-
$event.preventDefault();
242-
openActivityDetails(
243-
currentDimension,
244-
cardHeader,
245-
activity['activityName']
246-
)
269+
this.teamCheckbox(activityIndex, teamname);
270+
$event.preventDefault()
247271
">
248-
{{ activity['activityName'] }}
249-
</button>
250-
</mat-panel-title>
251-
</mat-expansion-panel-header>
252-
<ng-template matExpansionPanelContent>
253-
<ul class="team-list">
254-
<li *ngFor="let teamname of teamVisible">
255-
<mat-checkbox
256-
[checked]="activity.teamsImplemented[teamname]"
257-
color="primary"
258-
(click)="
259-
this.teamCheckbox(activityIndex, teamname);
260-
$event.preventDefault()
261-
">
262-
{{ teamname }}
263-
</mat-checkbox>
264-
</li>
265-
</ul>
266-
<b *ngIf="teamVisible.length === 0">
267-
No Teams Selected, Please select a team from the filters
268-
above.
269-
</b>
270-
</ng-template>
271-
</mat-expansion-panel>
272-
</mat-card-content>
273-
</mat-card>
272+
{{ teamname }}
273+
</mat-checkbox>
274+
</li>
275+
</ul>
276+
<b *ngIf="teamVisible.length === 0">
277+
No Teams Selected, Please select a team from the filters
278+
above.
279+
</b>
280+
</ng-template>
281+
</mat-expansion-panel>
282+
</mat-card-content>
283+
</mat-card>
284+
<div class="footer-buttons">
285+
<button
286+
class="normal-button"
287+
mat-raised-button
288+
class="downloadButtonClass"
289+
(click)="saveEditedYAMLfile()">
290+
Download edited YAML file
291+
</button>
292+
<button
293+
class="normal-button"
294+
mat-raised-button
295+
class="resetButtonClass"
296+
(click)="deleteLocalTeamsProgress()">
297+
Reset Implemented
298+
</button>
274299
</div>
275-
276-
<button
277-
class="normal-button"
278-
mat-raised-button
279-
class="downloadButtonClass"
280-
(click)="saveEditedYAMLfile()">
281-
Download edited YAML file
282-
</button>
283-
<button
284-
class="normal-button"
285-
mat-raised-button
286-
class="resetButtonClass"
287-
(click)="deleteLocalTeamsProgress()">
288-
Delete team progress
289-
</button>
290300
</div>
291301
</div>
292302
<div class="col-md-3"></div>

0 commit comments

Comments
 (0)