Centralized avatar URL generation with `getAvatarUrl()` method to reduce redundancy and improve code maintainability. Updated relevant components to utilize the new method for cleaner and more consistent implementation.
73 lines
3.1 KiB
HTML
73 lines
3.1 KiB
HTML
<ng-container>
|
|
<app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
|
|
[overlay_gradient]="0.5">>
|
|
<div class="title" header-content>
|
|
<h1>Staffing Team</h1>
|
|
<h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to
|
|
create Altitude, to create home. This is where the magic happens.</h2>
|
|
</div>
|
|
</app-header>
|
|
|
|
<main>
|
|
<section class="darkmodeSection">
|
|
<div class="container teamContainer">
|
|
<h2 class="sectionTitle">Management</h2>
|
|
<div *ngFor="let member of getTeamMembers('owner') | async" class="member">
|
|
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
|
|
height="160" width="160" style="width: 160px;">
|
|
<h2>{{ member.name }}</h2>
|
|
<p>Owner</p>
|
|
</div>
|
|
<div *ngFor="let member of getTeamMembers('manager') | async" class="member">
|
|
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
|
|
height="160" width="160" style="width: 160px;">
|
|
<h2>{{ member.name }}</h2>
|
|
<p>Manager</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="darkmodeSectionThree">
|
|
<div class="container teamContainer">
|
|
<h2 class="sectionTitle">Admins</h2>
|
|
<div *ngFor="let member of getTeamMembers('admin') | async" class="member">
|
|
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
|
|
height="160" width="160" style="width: 160px;">
|
|
<h2>{{ member.name }}</h2>
|
|
<p>Admin</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="darkmodeSection">
|
|
<div class="container teamContainer">
|
|
<h2 class="sectionTitle">Head Moderators</h2>
|
|
<div *ngFor="let member of getTeamMembers('headmod') | async" class="member">
|
|
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
|
|
height="160" width="160" style="width: 160px;">
|
|
<h2>{{ member.name }}</h2>
|
|
<p>Admin</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="darkmodeSectionThree">
|
|
<div class="container teamContainer">
|
|
<h2 class="sectionTitle">Moderators</h2>
|
|
<div *ngFor="let member of getTeamMembers('moderator') | async" class="member">
|
|
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
|
|
height="160" width="160" style="width: 160px;">
|
|
<h2>{{ member.name }}</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section *ngIf="(getTeamMembers('trainee') | async)?.length ?? 0 > 0" class="darkmodeSection">
|
|
<div class="container teamContainer">
|
|
<h2 class="sectionTitle">Trainees</h2>
|
|
<div *ngFor="let member of getTeamMembers('trainee') | async" class="member">
|
|
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
|
|
height="160" width="160" style="width: 160px;">
|
|
<h2>{{ member.name }}</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</ng-container>
|