Skip to content

Commit bd2e48a

Browse files
author
motorox
committed
made UI fixes in event module.
Fixed other design anomalies. Merge branch 'MaterialDesign' into updateversions Please enter a commit message to explain why this merge is necessary,
2 parents 13c918e + 242c95d commit bd2e48a

27 files changed

+370
-262
lines changed

‎HamEvent/ClientApp/angular.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,9 @@
3131
],
3232
"styles": [
3333
"@angular/material/prebuilt-themes/indigo-pink.css",
34-
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
35-
"node_modules/bootstrap/dist/css/bootstrap.min.css",
3634
"src/styles.css"
3735
],
3836
"scripts": [
39-
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
4037
]
4138
},
4239
"configurations": {

‎HamEvent/ClientApp/package-lock.json‎

Lines changed: 0 additions & 62 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎HamEvent/ClientApp/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828
"@angular/router": "^18.1.2",
2929
"@ngx-translate/core": "^15.0.0",
3030
"@ngx-translate/http-loader": "^8.0.0",
31-
"bootstrap": "^5.2.0",
32-
"bootstrap-icons": "^1.11.1",
3331
"jquery": "^3.6.0",
3432
"moment": "^2.30.1",
3533
"ngx-pagination": "^6.0.3",

‎HamEvent/ClientApp/src/app/app.component.html‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
<div>
2-
<app-nav-menu></app-nav-menu>
3-
<router-outlet></router-outlet>
4-
<app-footer></app-footer>
5-
</div>
1+
<div class="site-container">
2+
<header class="site-header">
3+
<app-nav-menu></app-nav-menu>
4+
</header>
5+
6+
<main class="site-content">
7+
<router-outlet></router-outlet>
8+
</main>
69

10+
<footer>
11+
<app-footer></app-footer>
12+
</footer>
13+
</div>

‎HamEvent/ClientApp/src/app/event-card/event-card.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<mat-card class="event-card">
22
<mat-card-header>
3-
<div mat-card-avatar class="example-header-image">{{event.icon}}</div>
3+
<!--<div mat-card-avatar class="example-header-image">{{event.icon}}</div>-->
44
<mat-card-title>{{event.name}}</mat-card-title>
55
<mat-card-subtitle>{{event.subtitle?event.subtitle:''}}</mat-card-subtitle>
66
</mat-card-header>

‎HamEvent/ClientApp/src/app/event/event-routing.module.ts‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,15 @@ const eventRoutes: Routes = [
2424
title: "routing: Top"
2525
},
2626
{
27+
path: ":id/live",
28+
component: DashboardComponent,
29+
title: "routing: Top"
30+
}, {
2731
path: '',
2832
pathMatch: 'full',
2933
component: EventComponent,
3034
},
3135
];
32-
const routes: Routes = [
33-
{
34-
path: '',
35-
component: EventComponent,
36-
children: [
37-
{
38-
path: '',
39-
pathMatch: 'full',
40-
redirectTo: 'dashboard'
41-
},
42-
43-
{
44-
path: "dashboard",
45-
component: DashboardComponent,
46-
title: "routing: Dashboard"
47-
},
48-
]
49-
}
50-
];
5136

5237
@NgModule({
5338
imports: [RouterModule.forChild(eventRoutes)],

‎HamEvent/ClientApp/src/app/event/event.component.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.tab-content-wrapper {
2+
padding: 20px;
3+
/* Ensures the content within the tab is nicely centered or spaced */
4+
max-width: 800px;
5+
margin: auto;
6+
}
7+
8+
.event-card {
9+
/* Adds some margin around the card within the tab */
10+
margin-top: 15px;
11+
}
12+
13+
.details-section {
14+
display: flex;
15+
justify-content: space-between; /* Spaces date and location evenly */
16+
gap: 20px; /* Space between the two detail items */
17+
margin-bottom: 20px;
18+
flex-wrap: wrap; /* Allows items to wrap on smaller screens */
19+
}
20+
21+
.detail-item {
22+
display: flex;
23+
align-items: center; /* Aligns icon and text vertically */
24+
}
25+
26+
.detail-item mat-icon {
27+
margin-right: 10px;
28+
/* Optional: Adjust icon size slightly */
29+
}
30+
31+
.description {
32+
margin-top: 20px;
33+
line-height: 1.5;
34+
}
35+
36+
/* Optional: Make the card header stand out */
37+
mat-card-title {
38+
font-size: 1.5rem;
39+
font-weight: bold;
40+
}

‎HamEvent/ClientApp/src/app/event/event.component.html‎

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,45 @@
55
<div class="mat-elevation-z8 page-header" *ngIf="event">
66
<mat-tab-group dynamicHeight (selectedTabChange)="tabClick($event)">
77
<mat-tab label="{{event.name}}">
8-
<ng-template mat-tab-label>
9-
<!--<mat-icon class="example-tab-icon">thumb_up</mat-icon>-->
10-
{{event.name}}
11-
</ng-template>
12-
<mat-divider></mat-divider>
13-
<p>Start date: {{event.startDate | date:'medium'}}</p>
14-
<p>End date: {{event.endDate | date:'medium'}}</p>
15-
16-
<mat-divider></mat-divider>
8+
9+
<div class="tab-content-wrapper">
10+
<mat-card class="event-card">
11+
<mat-card-header>
12+
<mat-card-title>{{ event.name }}</mat-card-title>
13+
<mat-card-subtitle>Amateur Radio Event</mat-card-subtitle>
14+
</mat-card-header>
15+
16+
<mat-card-content>
17+
<div class="details-section">
18+
<!-- Date and Location side-by-side using CSS Flexbox -->
19+
<div class="detail-item">
20+
<mat-icon color="primary">event</mat-icon>
21+
<span>
22+
**Start:** {{ event.startDate | date: 'full' }} <br>
23+
**End:** {{ event.endDate | date: 'full' }}
24+
</span>
25+
</div>
26+
27+
<div class="detail-item">
28+
<mat-icon color="primary">location_on</mat-icon>
29+
<span>Timisoara KQT Club</span>
30+
</div>
31+
</div>
32+
33+
<mat-divider></mat-divider>
34+
35+
<p class="description">
36+
{{ event.description }}
37+
</p>
38+
39+
</mat-card-content>
40+
41+
<mat-card-actions>
42+
<button mat-raised-button color="accent">Participate Now</button>
43+
</mat-card-actions>
44+
</mat-card>
45+
</div>
46+
1747
<!--<form role="search" (ngSubmit)="submitForm()" [formGroup]="searchForm">
1848
<div class="input-group">
1949
<input type="search" class="form-control" placeholder="{{'Callsign 2' | translate}}" formControlName="search">
@@ -39,10 +69,7 @@ <h5 class="card-title">{{'Download Diploma' | translate}}</h5>
3969
<input matEndDate placeholder="End date">
4070
</mat-date-range-input>
4171
<mat-date-range-picker #picker></mat-date-range-picker>-->
42-
4372
<!--<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>-->
44-
<mat-divider></mat-divider>
45-
<p class="page-description" [innerHTML]="event.description"></p>
4673
</mat-tab>
4774

4875

@@ -52,7 +79,7 @@ <h5 class="card-title">{{'Download Diploma' | translate}}</h5>
5279
</mat-tab>
5380
<mat-tab label="{{ 'Logs' | translate}}">
5481
<ng-template mat-tab-label><mat-icon class="example-tab-icon">notes</mat-icon>{{ 'Logs' | translate}}</ng-template>
55-
<table mat-table [dataSource]="logs" class="mat-elevation-z8 page-table">
82+
<table id="logs" mat-table [dataSource]="logs" class="mat-elevation-z8 page-table">
5683
<!-- Name Column -->
5784
<!--<mat-text-column name="callsign1"></mat-text-column>-->
5885

@@ -96,7 +123,53 @@ <h5 class="card-title">{{'Download Diploma' | translate}}</h5>
96123
</mat-tab>
97124
<mat-tab label="{{ 'Rankings' | translate}}">
98125
<ng-template mat-tab-label><mat-icon class="example-tab-icon">star</mat-icon>{{ 'Rankings' | translate}}</ng-template>
99-
Content 3
126+
<table id="top" mat-table [dataSource]="top" class="mat-elevation-z8 page-table">
127+
<!-- Name Column -->
128+
<!--<mat-text-column name="callsign1"></mat-text-column>-->
129+
130+
<ng-container matColumnDef="callsign1">
131+
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Callsign 1' | translate}}</th>
132+
<td mat-cell *matCellDef="let element">{{element.callsign}}</td>
133+
</ng-container>
134+
135+
<!-- Count Column -->
136+
<ng-container matColumnDef="count">
137+
<th mat-header-cell *matHeaderCellDef>{{'Count' | translate}}</th>
138+
<td mat-cell *matCellDef="let element">{{element.count}}</td>
139+
</ng-container>
140+
141+
<!-- Symbol Column -->
142+
<ng-container matColumnDef="mode">
143+
<th mat-header-cell *matHeaderCellDef>{{'Mode' | translate}}</th>
144+
<td mat-cell *matCellDef="let element">{{element.mode}}</td>
145+
</ng-container>
146+
147+
<!-- Name Column -->
148+
<ng-container matColumnDef="band">
149+
<th mat-header-cell *matHeaderCellDef>{{'Band' | translate}}</th>
150+
<td mat-cell *matCellDef="let element">{{element.band}}</td>
151+
</ng-container>
152+
153+
<!-- Weight Column -->
154+
<ng-container matColumnDef="points">
155+
<th mat-header-cell *matHeaderCellDef>{{'Points' | translate}}</th>
156+
<td mat-cell *matCellDef="let element">{{element.points}}</td>
157+
</ng-container>
158+
159+
<!-- Weight Column -->
160+
<ng-container matColumnDef="rank">
161+
<th mat-header-cell *matHeaderCellDef>{{'Rank' | translate}}</th>
162+
<td mat-cell *matCellDef="let element">{{element.rank}}</td>
163+
</ng-container>
164+
165+
<tr mat-header-row *matHeaderRowDef="displayedColumnsTop"></tr>
166+
<tr mat-row *matRowDef="let row; columns: displayedColumnsTop;"
167+
class="element-row"></tr>
168+
</table>
169+
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
170+
showFirstLastButtons
171+
aria-label="Select page of periodic elements">
172+
</mat-paginator>
100173
</mat-tab>
101174
</mat-tab-group>
102175

0 commit comments

Comments
 (0)