Skip to content

Commit 08a313c

Browse files
ittipatkenkeenthekeen
ittipatken
and
keenthekeen
authored
feat: update home page UI (#41)
* feat: update home page UI * make footer not sticky sticky footer decreases useful screen area on mobile devices * fix: cursor-pointer on non-clickable part of last played card --------- Co-authored-by: Siwat T. <keen@keendev.net>
1 parent 34ce8ff commit 08a313c

3 files changed

Lines changed: 91 additions & 55 deletions

File tree

‎src/app/home/home.page.html‎

Lines changed: 68 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,73 @@
11
<ion-header [translucent]="true">
2-
<ion-toolbar>
3-
<ion-title>
4-
MDCU Recorded Lecture
5-
</ion-title>
6-
<ion-buttons slot="secondary">
7-
<ion-button fill="solid" color="secondary" (click)="logout()">
8-
Sign out
9-
<ion-icon slot="end" name="log-out-outline"></ion-icon>
10-
</ion-button>
11-
</ion-buttons>
12-
</ion-toolbar>
2+
<ion-toolbar>
3+
<ion-title>
4+
MDCU Recorded Lecture
5+
</ion-title>
6+
<ion-buttons slot="end">
7+
<ion-button fill="outline" color="secondary" (click)="logout()">
8+
Sign out
9+
<ion-icon slot="end" name="log-out-outline"></ion-icon>
10+
</ion-button>
11+
</ion-buttons>
12+
</ion-toolbar>
1313
</ion-header>
1414

15-
<ion-content [fullscreen]="true">
16-
@if (response$ | async; as response) {
17-
<div>
18-
<ion-grid>
19-
<ion-row>
20-
@for (folder of Object.keys(response.years); track folder) {
21-
<ion-col size-xs="12" size-sm="6" size-md="4" size-lg="3" size-xl="2">
22-
<ion-card [routerLink]="folder" [ngStyle]="{'background-color': colorByFolderName(folder)}">
23-
<ion-card-header>
24-
<ion-card-title>{{ folder }}</ion-card-title>
25-
</ion-card-header>
26-
</ion-card>
27-
</ion-col>
28-
}
29-
</ion-row>
30-
</ion-grid>
31-
@if (response.last_played) {
32-
<div>
33-
<p>
34-
Last played:
35-
<a (click)="goToLastVideo(response.last_played.video)" (keyup)="goToLastVideo(response.last_played.video)" tabindex="0">
36-
<span class="course-name">{{ response.last_played.video.course.name }}</span>
37-
<ion-icon name="play"></ion-icon>
38-
</a>
39-
</p>
40-
</div>
41-
}
42-
<p class="small-text">
43-
@if (response.last_fetched_at) {
44-
<span>
45-
Last fetched from MDCU E-Learning at {{ response.last_fetched_at }}<br/>
46-
</span>
15+
<ion-content [fullscreen]="true" class="ion-padding">
16+
<main>
17+
@if (response$ | async; as response) {
18+
@if (response.last_played) {
19+
<ion-card color="tertiary" class="ion-margin-top">
20+
<ion-card-header>
21+
<ion-card-title>Last Played</ion-card-title>
22+
</ion-card-header>
23+
<ion-card-content>
24+
<ion-item button="true" detail="true" (click)="goToLastVideo(response.last_played.video)">
25+
<ion-label>
26+
<h2>{{ response.last_played.video.course.name }}</h2>
27+
</ion-label>
28+
<ion-icon name="play-circle" slot="end" size="large" color="secondary"></ion-icon>
29+
</ion-item>
30+
</ion-card-content>
31+
</ion-card>
32+
}
33+
34+
<ion-grid>
35+
<ion-row>
36+
@for (folder of Object.keys(response.years); track folder) {
37+
<ion-col size-xs="12" size-sm="6" size-md="4" size-lg="3" size-xl="2">
38+
<ion-card [routerLink]="folder" [ngStyle]="{'background-color': colorByFolderName(folder)}"
39+
class="ion-text-center hover-card">
40+
<ion-card-header>
41+
<ion-card-title>{{ folder }}</ion-card-title>
42+
</ion-card-header>
43+
</ion-card>
44+
</ion-col>
45+
}
46+
</ion-row>
47+
</ion-grid>
48+
49+
} @else {
50+
<ion-spinner name="crescent" class="ion-margin-top center-spinner"></ion-spinner>
51+
<h4 class="ion-text-center ion-margin-top">Loading lectures...</h4>
4752
}
48-
Your feedback and suggestions are welcome. Please email them to <a href="mailto:siwat.techa@docchula.com" target="_blank">siwat.techa&#64;docchula.com</a>.<br/>
49-
Contents are provided for MDCU students only. You may not copy, reproduce, distribute, publish, display, create derivative works,
50-
transmit, or
51-
in any way exploit any such content.
52-
</p>
53-
</div>
54-
} @else {
55-
<h4 class="center-text">Loading...</h4>
56-
}
53+
</main>
54+
55+
<footer>
56+
<ion-text class="ion-padding small-text">
57+
@if (response$ | async; as response) {
58+
@if (response.last_fetched_at) {
59+
<p>Last fetched from MDCU E-Learning at {{ response.last_fetched_at }}</p>
60+
}
61+
}
62+
<p>
63+
Your feedback is welcome. Email:
64+
<a href="mailto:siwat.techa@docchula.com">siwat.techa&#64;docchula.com</a> or
65+
<a href="mailto:it@docchula.com">it&#64;docchula.com</a>
66+
</p>
67+
<p>
68+
Contents are provided for MDCU students only. You may not copy, reproduce, distribute, publish, display, create
69+
derivative works, transmit, or in any way exploit any such content.
70+
</p>
71+
</ion-text>
72+
</footer>
5773
</ion-content>

‎src/app/home/home.page.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1+
main {
2+
min-height: 60vh;
3+
@media screen and (min-width: 768px) {
4+
min-height: 70vh;
5+
}
6+
}
7+
18
ion-card {
29
min-height: 4rem;
3-
cursor: pointer;
410
}
511

612
ion-card-title {
@@ -21,6 +27,11 @@ ion-card-title {
2127
text-align: center;
2228
}
2329

30+
.center-spinner {
31+
display: block;
32+
margin: 1rem auto;
33+
}
34+
2435
.small-text {
2536
color: #aaaaaa;
2637
a {
@@ -35,6 +46,15 @@ ion-card-title {
3546
}
3647
}
3748

49+
.hover-card {
50+
transition: transform 0.2s ease;
51+
cursor: pointer;
52+
}
53+
54+
.hover-card:hover {
55+
transform: translateY(-0.5rem) scale(1.02);
56+
}
57+
3858
p {
3959
padding: 0 1.5rem 0 1.5rem;
4060
color: gray;

‎src/app/home/home.page.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { AuthService } from '../auth.service';
66
import { colorByFolderName } from '../../helpers';
77
import { addIcons } from "ionicons";
88
import { logOutOutline, play } from "ionicons/icons";
9-
import { IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle } from '@ionic/angular/standalone';
9+
import { IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonText, IonSpinner } from '@ionic/angular/standalone';
1010
import { NgStyle, AsyncPipe } from '@angular/common';
1111

1212
@Component({
1313
selector: 'app-home',
1414
templateUrl: 'home.page.html',
1515
styleUrls: ['home.page.scss'],
16-
imports: [IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonGrid, IonRow, IonCol, IonCard, RouterLink, NgStyle, IonCardHeader, IonCardTitle, AsyncPipe]
16+
imports: [IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonGrid, IonRow, IonCol, IonCard, RouterLink, NgStyle, IonCardHeader, IonCardTitle, AsyncPipe, IonCardContent, IonItem, IonLabel, IonText, IonSpinner]
1717
})
1818
export class HomePage implements OnInit {
1919
response$: Observable<CourseListResponse>;

0 commit comments

Comments
 (0)