Merge pull request #224 from dancier/feature/more-fixes

center profile edit view, changes to recommendations loading view

src/app/profile/feature/edit-profile/edit-profile.component.html

@@ -1,78 +1,80 @@
-<h1 class="page-header mb-2">Profil bearbeiten</h1>
+<div class="my-10 max-w-[280px] mx-auto">
+  <h1 class="page-header mb-2">Profil bearbeiten</h1>
 
-<p class="mb-4">Hier kannst du dein Profil bearbeiten.</p>
+  <p class="mb-4">Hier kannst du dein Profil bearbeiten.</p>
 
-<h2 class="my-4 text-2xl">Profilbild</h2>
+  <h2 class="my-4 text-2xl">Profilbild</h2>
 
-<div class="edit-profile-image">
-  <div class="profile-image">
-    <img
-      alt="Profile Image"
-      [src]="
-        croppedImage
-          ? croppedImage
-          : (profileService.getProfileImageSrc() | async)
-      "
-      (error)="handleMissingImage($event)"
-    />
-  </div>
+  <div class="edit-profile-image">
+    <div class="profile-image">
+      <img
+        alt="Profile Image"
+        [src]="
+          croppedImage
+            ? croppedImage
+            : (profileService.getProfileImageSrc() | async)
+        "
+        (error)="handleMissingImage($event)"
+      />
+    </div>
 
-  <button class="btn-upload" mat-stroked-button (click)="fileInput.click()">
-    Neues Profilbild hochladen
-  </button>
+    <button class="btn-upload" mat-stroked-button (click)="fileInput.click()">
+      Neues Profilbild hochladen
+    </button>
 
-  <!-- Hidden input -->
-  <input
-    #fileInput
-    accept="image/*"
-    hidden
-    type="file"
-    (change)="fileChangeEvent($event)"
-  />
+    <!-- Hidden input -->
+    <input
+      #fileInput
+      accept="image/*"
+      hidden
+      type="file"
+      (change)="fileChangeEvent($event)"
+    />
 
-  <div *ngIf="imageChangedEvent" class="image-cropper-container">
-    <image-cropper
-      format="png"
-      [aspectRatio]="4 / 4"
-      [imageChangedEvent]="imageChangedEvent"
-      [maintainAspectRatio]="true"
-      [roundCropper]="false"
-      (imageCropped)="imageCropped($event)"
-    ></image-cropper>
+    <div *ngIf="imageChangedEvent" class="image-cropper-container">
+      <image-cropper
+        format="png"
+        [aspectRatio]="4 / 4"
+        [imageChangedEvent]="imageChangedEvent"
+        [maintainAspectRatio]="true"
+        [roundCropper]="false"
+        (imageCropped)="imageCropped($event)"
+      ></image-cropper>
+    </div>
   </div>
-</div>
 
-<h2 class="my-4 text-2xl">Persönliche Infos</h2>
+  <h2 class="my-4 text-2xl">Persönliche Infos</h2>
 
-<app-personal-data-form
-  [formGroup]="profileForm.controls.personalData"
-></app-personal-data-form>
+  <app-personal-data-form
+    [formGroup]="profileForm.controls.personalData"
+  ></app-personal-data-form>
 
-<h2 class="my-4 text-2xl">Eigene Tanzerfahrung</h2>
+  <h2 class="my-4 text-2xl">Eigene Tanzerfahrung</h2>
 
-<app-dance-experience-form
-  danceFormType="own"
-  [formGroup]="profileForm.controls.ownDances"
->
-</app-dance-experience-form>
+  <app-dance-experience-form
+    danceFormType="own"
+    [formGroup]="profileForm.controls.ownDances"
+  >
+  </app-dance-experience-form>
 
-<h2 class="my-4 text-2xl">Tanzerfahrung des Partners</h2>
+  <h2 class="my-4 text-2xl">Tanzerfahrung des Partners</h2>
 
-<app-dance-experience-form
-  danceFormType="partner"
-  [formGroup]="profileForm.controls.partnerDances"
->
-</app-dance-experience-form>
+  <app-dance-experience-form
+    danceFormType="partner"
+    [formGroup]="profileForm.controls.partnerDances"
+  >
+  </app-dance-experience-form>
 
-<mat-error *ngIf="error">
-  <span> {{ error | errorMessage }} </span>
-</mat-error>
+  <mat-error *ngIf="error">
+    <span> {{ error | errorMessage }} </span>
+  </mat-error>
 
-<button
-  class="big-button"
-  color="primary"
-  mat-flat-button
-  (click)="saveProfile()"
->
-  Speichern
-</button>
+  <button
+    class="big-button"
+    color="primary"
+    mat-flat-button
+    (click)="saveProfile()"
+  >
+    Speichern
+  </button>
+</div>

src/app/profile/profile.routes.ts

@@ -34,17 +34,11 @@ export const PROFILE_ROUTES: Routes = [
   },
   {
     path: 'edit',
-    component: NarrowPageComponent,
+    component: EditProfileComponent,
     canActivate: [
       loggedInGuard,
       ...mapToCanActivate([DancerProfileSufficientGuard]),
     ],
-    children: [
-      {
-        path: '',
-        component: EditProfileComponent,
-      },
-    ],
   },
   {
     path: 'initial-setup',

src/app/recommendation/recommendations.component.ts

@@ -67,23 +67,15 @@ import { RecommendedDancerComponent } from './ui/recommended-dancer.component';
       </ng-template>
 
       <ng-template #loading>
-        <h1 class="page-header">
+        <h1 class="page-header mb-10">
           Diese Tänzer könnten für Sie interessant sein
         </h1>
-        <div class="recommended-dancers">
+        <div class="recommended-dancers flex flex-col gap-10">
           <div class="rounded border bg-gray-100">
-            <div class="h-80 animate-pulse rounded-t bg-gray-400"></div>
-            <div class="space-y-4 p-6">
-              <div class="h-4 w-1/3 animate-pulse rounded bg-gray-400"></div>
-              <div class="h-4 w-3/4 animate-pulse rounded bg-gray-300"></div>
-            </div>
+            <div class="h-60 animate-pulse rounded-t bg-gray-400"></div>
           </div>
           <div class="rounded border bg-gray-100">
-            <div class="h-80 animate-pulse rounded-t bg-gray-400"></div>
-            <div class="space-y-4 p-6">
-              <div class="h-4 w-1/2 animate-pulse rounded bg-gray-400"></div>
-              <div class="h-4 w-3/4 animate-pulse rounded bg-gray-300"></div>
-            </div>
+            <div class="h-60 animate-pulse rounded-t bg-gray-400"></div>
           </div>
         </div>
       </ng-template>