Use consistent container style, improve sound shapes theme

LittleBigRefresh · Nov 6, 2023 · 506e312 · 506e312
1 parent 8354b89
commit 506e312
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 23 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -10,7 +10,7 @@
     </ng-container>
 </ng-container>
 
-<div class="bg-header-background text-header-foreground border-b-backdrop border-b-2 h-[59px] flex items-center flex-col">
+<div class="bg-header-background text-header-foreground border-b-backdrop default:border-b-2 h-[59px] flex items-center flex-col">
   <div class="container items-center flex h-[59px]">
     <div class="flex mr-2.5">
       <a class="bg-logo bg-cover cursor-pointer w-12 h-12 drop-shadow-lg" *ngIf="getTheme() != 'hotdogStand'" routerLink="/" title="Home"></a>

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -95,6 +95,7 @@ import {FormsModule} from "@angular/forms";
 import {ForgotPasswordComponent} from './pages/forgot-password/forgot-password.component';
 import {DateComponent} from './components/date/date.component';
 import {StatisticsComponent} from './pages/statistics/statistics.component';
+import { ContainerComponent } from './components/container/container.component';
 
 @NgModule({
     declarations: [
@@ -160,6 +161,7 @@ import {StatisticsComponent} from './pages/statistics/statistics.component';
         ForgotPasswordComponent,
         DateComponent,
         StatisticsComponent,
+        ContainerComponent,
     ],
     imports: [
         BrowserModule,

diff --git a/src/app/components/container/container.component.html b/src/app/components/container/container.component.html
@@ -0,0 +1,4 @@
+<div class="bg-form-background rounded px-5 py-3.5 drop-shadow-lg
+    soundShapes:bg-backdrop soundShapes:drop-shadow-none soundShapes:border-secondary soundShapes:border-2 soundShapes:rounded-[.5rem]">
+    <ng-content></ng-content>
+</div>
diff --git a/src/app/components/container/container.component.ts b/src/app/components/container/container.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'container',
+  templateUrl: './container.component.html',
+})
+export class ContainerComponent {
+
+}
diff --git a/src/app/components/divider/divider.component.html b/src/app/components/divider/divider.component.html
@@ -1 +1,2 @@
-<div class="my-3 h-[3px] rounded-sm bg-divider drop-shadow-md"></div>
+<div class="my-3 h-[3px] rounded-sm bg-divider drop-shadow-md
+    soundShapes:border-none soundShapes:drop-shadow-none soundShapes:h-[2px]"></div>
diff --git a/src/app/components/photo/photo.component.html b/src/app/components/photo/photo.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="_photo">
   <a [routerLink]="'/photo/' + _photo.photoId" *ngIf="_link">
-    <img [src]="GetPhotoLink(_photo)" class="rounded-md w-full drop-shadow-lg" alt="Photo">
+    <img [src]="GetPhotoLink(_photo)" class="rounded-md w-full" alt="Photo">
   </a>
 
   <div *ngIf="!_link">
-    <img [src]="GetPhotoLink(_photo)" class="rounded-md w-full drop-shadow-lg" alt="Photo">
+    <img [src]="GetPhotoLink(_photo)" class="rounded-md w-full" alt="Photo">
   </div>
 
   <div class="pt-2.5">

diff --git a/src/app/pages/level-categories/level-categories.component.html b/src/app/pages/level-categories/level-categories.component.html
@@ -2,7 +2,7 @@
 <p>{{description}}</p>
 
 <ngx-masonry [options]="masonryOptions" [ordered]="true" *ngIf="categories">
-  <div ngxMasonryItem *ngFor="let c of categories" class="bg-form-background px-5 py-3.5 rounded masonry-grid-item">
+  <container ngxMasonryItem *ngFor="let c of categories" class="masonry-grid-item">
     <div class="text-xl font-medium">
       <fa-icon class="mr-2" [icon]="getIcon(c.fontAwesomeIcon)"></fa-icon>
       <a routerLink="/levels/{{c.apiRoute}}">{{c.name}}
@@ -14,11 +14,11 @@
       <divider></divider>
       <level-preview [level]="c.previewLevel"></level-preview>
     </div>
-  </div>
+  </container>
 </ngx-masonry>
 
 <ngx-masonry [options]="masonryOptions" [ordered]="true" *ngIf="!categories">
-  <div ngxMasonryItem *ngFor="let i of GenerateEmptyList(3)" class="bg-form-background px-5 py-3.5 rounded masonry-grid-item">
+  <container ngxMasonryItem *ngFor="let i of GenerateEmptyList(3)" class="masonry-grid-item">
     <div class="animate-pulse">
       <div class="text-xl font-medium">
         <div class="inline-block bg-secondary w-5 h-5 rounded-md mr-2"></div>
@@ -30,5 +30,5 @@
       <divider></divider>
       <level-preview></level-preview>
     </div>
-  </div>
+  </container>
 </ngx-masonry>
diff --git a/src/app/pages/level-listing/level-listing.component.html b/src/app/pages/level-listing/level-listing.component.html
@@ -4,9 +4,9 @@
   <p>{{routeCategory.description}}</p>
   <p>There are {{total}} total levels to browse in {{routeCategory.name}}.</p>
   <ngx-masonry [options]="masonryOptions" [ordered]="true">
-    <div ngxMasonryItem *ngFor="let l of levels" class="bg-form-background p-2.5 rounded masonry-grid-item">
+    <container ngxMasonryItem *ngFor="let l of levels" class="masonry-grid-item">
       <level-preview [level]="l" [description]="true"></level-preview>
-    </div>
+    </container>
   </ngx-masonry>
   <div intersectionObserver (visibilityChange)="loadNextPage($event)"></div>
 
@@ -16,9 +16,9 @@
 <div *ngIf="!levels">
   <div class="inline-block h-5 w-56 bg-secondary rounded-full pt-2.5 animate-pulse"></div>
   <ngx-masonry [options]="masonryOptions" [ordered]="true">
-    <div ngxMasonryItem *ngFor="let i of GenerateEmptyList(10)"
-         class="bg-form-background p-2.5 rounded masonry-grid-item">
+    <container ngxMasonryItem *ngFor="let i of GenerateEmptyList(10)"
+         class="masonry-grid-item">
       <level-preview [level]="" [description]="true"></level-preview>
-    </div>
+    </container>
   </ngx-masonry>
 </div>
diff --git a/src/app/pages/level/level.component.html b/src/app/pages/level/level.component.html
@@ -57,8 +57,8 @@
   </div>
 </page-header-block>
 
-<div class="flex flex-row gap-2.5 max-md:flex-col">
-  <div class="bg-form-background rounded p-5 mt-5 w-full">
+<div class="flex flex-row gap-2.5 max-md:flex-col pt-5">
+  <container class="w-full">
     <div class="flex">
       <h2 class="text-3xl font-bold flex-grow">Leaderboard</h2>
       <form-dropdown *ngIf="level?.gameVersion !== 4" name="Score Type" [options]="scoreTypes" (change)="this.formChanged()" [(value)]="scoreType"></form-dropdown>
@@ -101,8 +101,8 @@ <h2 class="text-3xl font-bold flex-grow">Leaderboard</h2>
     <div *ngIf="this.scores !== undefined && this.scores!.length % 10 == 0 && this.scores!.length !== 0">
       <secondary-button text="Load more" (click)="loadMoreScores()"></secondary-button>
     </div>
-  </div>
-  <div class="bg-form-background rounded p-5 mt-5 w-full">
+  </container>
+  <container class="w-full">
     <h2 class="text-3xl font-bold">Recent Activity</h2>
     <divider></divider>
 
@@ -117,5 +117,5 @@ <h2 class="text-3xl font-bold">Recent Activity</h2>
         <activity-event></activity-event>
       </div>
     </div>
-  </div>
+  </container>
 </div>
diff --git a/src/app/pages/photo-listing/photo-listing.component.html b/src/app/pages/photo-listing/photo-listing.component.html
@@ -3,9 +3,9 @@
 <div *ngIf="photos">
   <p>Users have uploaded {{total}} photos!</p>
   <ngx-masonry [options]="masonryOptions" [ordered]="true">
-    <div ngxMasonryItem *ngFor="let photo of photos" class="rounded-md bg-form-background m-1 p-2.5 masonry-grid-item">
+    <container ngxMasonryItem *ngFor="let photo of photos" class="masonry-grid-item">
       <photo [photo]="photo"></photo>
-    </div>
+    </container>
   </ngx-masonry>
   <div intersectionObserver (visibilityChange)="loadNextPage($event)"></div>
 
@@ -15,9 +15,9 @@
 <div *ngIf="!photos">
   <div class="inline-block h-5 w-56 bg-secondary rounded-full pt-2.5 animate-pulse"></div>
   <ngx-masonry [options]="masonryOptions" [ordered]="true">
-    <div ngxMasonryItem *ngFor="let i of GenerateEmptyList(20)"
-         class="rounded-md bg-form-background m-1 p-2.5 masonry-grid-item">
+    <container ngxMasonryItem *ngFor="let i of GenerateEmptyList(20)"
+         class="m-1 masonry-grid-item">
       <photo [photo]=""></photo>
-    </div>
+    </container>
   </ngx-masonry>
 </div>