From b39370a6b563948793dbf54d48f2fac6e4cea0c5 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Thu, 27 Mar 2025 20:09:08 +0100
Subject: [PATCH] =?UTF-8?q?Anpassungen=20f=C3=BCr=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../drag-drop-mixed.component.html            | 12 ------------
 .../email-authorized.component.html           |  2 +-
 .../email-verification.component.html         |  2 +-
 .../components/header/header.component.html   | 19 -------------------
 .../details-business-listing.component.html   |  2 +-
 ...commercial-property-listing.component.html |  2 +-
 .../details-user/details-user.component.html  |  2 +-
 .../broker-listings.component.html            |  2 +-
 .../business-listings.component.html          |  2 +-
 ...ommercial-property-listings.component.html |  2 +-
 .../account/account.component.html            |  2 +-
 .../edit-business-listing.component.html      |  2 +-
 ...commercial-property-listing.component.html |  2 +-
 .../email-us/email-us.component.html          |  2 +-
 .../favorites/favorites.component.html        |  2 +-
 .../my-listing/my-listing.component.html      |  2 +-
 bizmatch/src/styles.scss                      |  6 +++---
 bizmatch/tailwind.config.js                   |  1 +
 18 files changed, 18 insertions(+), 48 deletions(-)

diff --git a/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html b/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
index 0544dc3..3d91964 100644
--- a/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
+++ b/bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
@@ -1,16 +1,4 @@
 <div #_container class="container">
-  <!-- <div
-    *ngFor="let item of items"
-    cdkDrag
-    (cdkDragEnded)="dragEnded($event)"
-    (cdkDragStarted)="dragStarted()"
-    (cdkDragMoved)="dragMoved($event)"
-    class="item"
-    [class.animation]="isAnimationActive"
-    [class.large]="item === 3"
-  >
-    Drag Item {{ item }}
-  </div> -->
   <div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item">
     <div class="image-box hover:cursor-pointer">
       <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" />
diff --git a/bizmatch/src/app/components/email-authorized/email-authorized.component.html b/bizmatch/src/app/components/email-authorized/email-authorized.component.html
index 5e5137d..b9dd44d 100644
--- a/bizmatch/src/app/components/email-authorized/email-authorized.component.html
+++ b/bizmatch/src/app/components/email-authorized/email-authorized.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto py-8 px-4 max-w-md">
-  <div class="bg-white p-6 rounded-lg drop-shadow-custom-bg text-center">
+  <div class="bg-white p-6 rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg text-center">
     <!-- Loading state -->
     <ng-container *ngIf="verificationStatus === 'pending'">
       <div class="flex justify-center mb-4">
diff --git a/bizmatch/src/app/components/email-verification/email-verification.component.html b/bizmatch/src/app/components/email-verification/email-verification.component.html
index 03cf40e..ff0dd88 100644
--- a/bizmatch/src/app/components/email-verification/email-verification.component.html
+++ b/bizmatch/src/app/components/email-verification/email-verification.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-  <div class="bg-white p-8 rounded drop-shadow-custom-bg w-full max-w-md text-center">
+  <div class="bg-white p-8 rounded drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg w-full max-w-md text-center">
     <h2 class="text-2xl font-bold mb-4">Email Verification</h2>
     <p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p>
     <p>Once verified, please return to the application.</p>
diff --git a/bizmatch/src/app/components/header/header.component.html b/bizmatch/src/app/components/header/header.component.html
index 551a8fa..6bf5629 100644
--- a/bizmatch/src/app/components/header/header.component.html
+++ b/bizmatch/src/app/components/header/header.component.html
@@ -33,11 +33,6 @@
             @for(item of sortByOptions; track item){
             <li (click)="sortBy(item.value)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">{{ item.selectName ? item.selectName : item.name }}</li>
             }
-            <!-- <li (click)="sortBy('priceAsc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Ascending</li>
-            <li (click)="sortBy('priceDesc')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Price Descending</li>
-            <li (click)="sortBy('creationDateFirst')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date First</li>
-            <li (click)="sortBy('creationDateLast')" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Creation Date Last</li>
-            <li (click)="sortBy(null)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">Default Sorting</li> -->
           </ul>
         </div>
       </div>
@@ -178,18 +173,6 @@
         </ul>
       </div>
       }
-      <!-- <button
-        data-collapse-toggle="navbar-user"
-        type="button"
-        class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-        aria-controls="navbar-user"
-        aria-expanded="false"
-      >
-        <span class="sr-only">Open main menu</span>
-        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
-        </svg>
-      </button> -->
     </div>
     <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
       <ul
@@ -233,7 +216,6 @@
     </div>
   </div>
   <!-- Mobile filter button -->
-  @if(isFilterUrl()){
   <div class="md:hidden flex justify-center pb-4">
     <button
       (click)="openModal()"
@@ -254,5 +236,4 @@
       <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria?.sortBy) }}
     </button>
   </div>
-  }
 </nav>
diff --git a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
index d894080..ac8d121 100644
--- a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden relative">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
     <button
       (click)="historyService.goBack()"
       class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden"
diff --git a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
index c41c0bd..0637399 100644
--- a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white drop-shadow-custom-bg rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
     @if(listing){
     <div class="p-6 relative">
       <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>
diff --git a/bizmatch/src/app/pages/details/details-user/details-user.component.html b/bizmatch/src/app/pages/details/details-user/details-user.component.html
index b4931e9..044d4fb 100644
--- a/bizmatch/src/app/pages/details/details-user/details-user.component.html
+++ b/bizmatch/src/app/pages/details/details-user/details-user.component.html
@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4">
   @if(user){
-  <div class="bg-white drop-shadow-custom-bg rounded-lg overflow-hidden">
+  <div class="bg-white drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b relative">
       <div class="flex items-center space-x-4">
diff --git a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
index 99403e0..0efb79e 100644
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
@@ -3,7 +3,7 @@
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     <!-- Amanda Taylor -->
     @for (user of users; track user) {
-    <div class="bg-white rounded-lg drop-shadow-custom-bg p-6 flex flex-col justify-between">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between">
       <div class="flex items-start space-x-4">
         @if(user.hasProfile){
         <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />
diff --git a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
index f0101f9..894e769 100644
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
@@ -3,7 +3,7 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
     <!-- Anzahl der Spalten auf 3 reduziert und den Abstand erhöht -->
     @for (listing of listings; track listing.id) {
-    <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
       <!-- Hover-Effekt hinzugefügt -->
       <div class="p-6 flex flex-col h-full relative z-[0]">
         <div class="flex items-center mb-4">
diff --git a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html b/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
index c670321..0307000 100644
--- a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
+++ b/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
@@ -2,7 +2,7 @@
   @if(listings?.length>0){
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
     @for (listing of listings; track listing.id) {
-    <div class="bg-white rounded-lg drop-shadow-custom-bg overflow-hidden flex flex-col h-full">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden flex flex-col h-full">
       @if (listing.imageOrder?.length>0){
       <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
       } @else {
diff --git a/bizmatch/src/app/pages/subscription/account/account.component.html b/bizmatch/src/app/pages/subscription/account/account.component.html
index fbbac07..b9cb25a 100644
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/bizmatch/src/app/pages/subscription/account/account.component.html
@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4">
   @if (user){
-  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <form #accountForm="ngForm" class="space-y-4">
       <h2 class="text-2xl font-bold mb-4">Account Details</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
diff --git a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
index 53733d1..029a91b 100644
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if(listing){
     <form #listingForm="ngForm" class="space-y-4">
diff --git a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html b/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
index 2b53f52..d8e705b 100644
--- a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
     @if (listing){
     <form #listingForm="ngForm" class="space-y-4">
diff --git a/bizmatch/src/app/pages/subscription/email-us/email-us.component.html b/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
index 7425bcc..a40bdd3 100644
--- a/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
+++ b/bizmatch/src/app/pages/subscription/email-us/email-us.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
     <form #contactForm="ngForm" class="space-y-4">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
diff --git a/bizmatch/src/app/pages/subscription/favorites/favorites.component.html b/bizmatch/src/app/pages/subscription/favorites/favorites.component.html
index 81215dd..f42ab5d 100644
--- a/bizmatch/src/app/pages/subscription/favorites/favorites.component.html
+++ b/bizmatch/src/app/pages/subscription/favorites/favorites.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
 
     <!-- Desktop view -->
diff --git a/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html b/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
index 9063400..41678a3 100644
--- a/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
+++ b/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container mx-auto p-4">
-  <div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
+  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
     <h1 class="text-2xl font-bold md:mb-4">My Listings</h1>
 
     <!-- Desktop view -->
diff --git a/bizmatch/src/styles.scss b/bizmatch/src/styles.scss
index 523b5c0..801b885 100644
--- a/bizmatch/src/styles.scss
+++ b/bizmatch/src/styles.scss
@@ -62,9 +62,9 @@ textarea {
   flex-direction: column;
 }
 
-header {
-  height: 64px; /* Feste Höhe */
-}
+// header {
+//   height: 64px; /* Feste Höhe */
+// }
 
 main {
   flex: 1 0 auto; /* Füllt den verfügbaren Platz */
diff --git a/bizmatch/tailwind.config.js b/bizmatch/tailwind.config.js
index de679ee..141ffef 100644
--- a/bizmatch/tailwind.config.js
+++ b/bizmatch/tailwind.config.js
@@ -36,6 +36,7 @@ module.exports = {
       },
       dropShadow: {
         'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)', // Wähle einen aussagekräftigen Namen
+        'custom-bg-mobile': '0 1px 2px rgba(0, 0, 0, 0.2)', // Wähle einen aussagekräftigen Namen
         'inner-faint': '0 3px 6px rgba(0, 0, 0, 0.1)',
         'custom-md': '0 10px 15px rgba(0, 0, 0, 0.25)', // Dein mittlerer Schatten
         'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)'   // Dein großer Schatten