aknuth
/
bizmatch-project
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 5 Releases Wiki Activity

Anpassungen für mobile

This commit is contained in:
Andreas Knuth 2025-03-27 20:09:08 +01:00
parent 6b97008643
commit b39370a6b5
18 changed files with 18 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bizmatch/src/app/components/drag-drop-mixed/drag-drop-mixed.component.html
View File

@ -1,16 +1,4 @@
<div #_container class="container"> <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 *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"> <div class="image-box hover:cursor-pointer">
<img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" /> <img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg drop-shadow-custom-bg" />

2
bizmatch/src/app/components/email-authorized/email-authorized.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto py-8 px-4 max-w-md"> <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 --> <!-- Loading state -->
<ng-container *ngIf="verificationStatus === 'pending'"> <ng-container *ngIf="verificationStatus === 'pending'">
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">

2
bizmatch/src/app/components/email-verification/email-verification.component.html
View File

@ -1,5 +1,5 @@
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100"> <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> <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 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> <p>Once verified, please return to the application.</p>

19
bizmatch/src/app/components/header/header.component.html
View File

@ -33,11 +33,6 @@
@for(item of sortByOptions; track item){ @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(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> </ul>
</div> </div>
</div> </div>
@ -178,18 +173,6 @@
</ul> </ul>
</div> </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>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user"> <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
<ul <ul
@ -233,7 +216,6 @@
</div> </div>
</div> </div>
<!-- Mobile filter button --> <!-- Mobile filter button -->
@if(isFilterUrl()){
<div class="md:hidden flex justify-center pb-4"> <div class="md:hidden flex justify-center pb-4">
<button <button
(click)="openModal()" (click)="openModal()"
@ -254,5 +236,4 @@
<i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria?.sortBy) }} <i class="fas fa-sort mr-2"></i>{{ selectOptions.getSortByOption(criteria?.sortBy) }}
</button> </button>
</div> </div>
}
</nav> </nav>

2
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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 <button
(click)="historyService.goBack()" (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" 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"

2
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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){ @if(listing){
<div class="p-6 relative"> <div class="p-6 relative">
<h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1> <h1 class="text-3xl font-bold mb-4">{{ listing?.title }}</h1>

2
bizmatch/src/app/pages/details/details-user/details-user.component.html
View File

@ -1,6 +1,6 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
@if(user){ @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 --> <!-- Header -->
<div class="flex items-center justify-between p-4 border-b relative"> <div class="flex items-center justify-between p-4 border-b relative">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">

2
bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
View File

@ -3,7 +3,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Amanda Taylor --> <!-- Amanda Taylor -->
@for (user of users; track user) { @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"> <div class="flex items-start space-x-4">
@if(user.hasProfile){ @if(user.hasProfile){
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" /> <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />

2
bizmatch/src/app/pages/listings/business-listings/business-listings.component.html
View File

@ -3,7 +3,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <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 --> <!-- Anzahl der Spalten auf 3 reduziert und den Abstand erhöht -->
@for (listing of listings; track listing.id) { @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 --> <!-- Hover-Effekt hinzugefügt -->
<div class="p-6 flex flex-col h-full relative z-[0]"> <div class="p-6 flex flex-col h-full relative z-[0]">
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">

2
bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html
View File

@ -2,7 +2,7 @@
@if(listings?.length>0){ @if(listings?.length>0){
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@for (listing of listings; track listing.id) { @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){ @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" /> <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}" alt="Image" class="w-full h-48 object-cover" />
} @else { } @else {

2
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@ -1,6 +1,6 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
@if (user){ @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"> <form #accountForm="ngForm" class="space-y-4">
<h2 class="text-2xl font-bold mb-4">Account Details</h2> <h2 class="text-2xl font-bold mb-4">Account Details</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

2
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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> <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
@if(listing){ @if(listing){
<form #listingForm="ngForm" class="space-y-4"> <form #listingForm="ngForm" class="space-y-4">

2
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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> <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
@if (listing){ @if (listing){
<form #listingForm="ngForm" class="space-y-4"> <form #listingForm="ngForm" class="space-y-4">

2
bizmatch/src/app/pages/subscription/email-us/email-us.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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> <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
<form #contactForm="ngForm" class="space-y-4"> <form #contactForm="ngForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

2
bizmatch/src/app/pages/subscription/favorites/favorites.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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> <h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
<!-- Desktop view --> <!-- Desktop view -->

2
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4"> <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> <h1 class="text-2xl font-bold md:mb-4">My Listings</h1>
<!-- Desktop view --> <!-- Desktop view -->

6
bizmatch/src/styles.scss
View File

@ -62,9 +62,9 @@ textarea {
flex-direction: column; flex-direction: column;
} }
header { // header {
height: 64px; /* Feste Höhe */ // height: 64px; /* Feste Höhe */
} // }
main { main {
flex: 1 0 auto; /* Füllt den verfügbaren Platz */ flex: 1 0 auto; /* Füllt den verfügbaren Platz */

1
bizmatch/tailwind.config.js
View File

@ -36,6 +36,7 @@ module.exports = {
}, },
dropShadow: { dropShadow: {
'custom-bg': '0 15px 20px rgba(0, 0, 0, 0.3)', // Wähle einen aussagekräftigen Namen '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)', '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-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 'custom-lg': '0 15px 20px rgba(0, 0, 0, 0.3)' // Dein großer Schatten