Design Anpassungen

This commit is contained in:
2025-03-27 19:37:53 +01:00
parent 715fbdf2f5
commit 6b97008643
22 changed files with 64 additions and 192 deletions

View File

@@ -1,6 +1,6 @@
<div class="container mx-auto p-4">
@if (user){
<div class="bg-white rounded-lg shadow-md p-6">
<div class="bg-white rounded-lg 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">
@@ -16,7 +16,7 @@
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
@if(user?.hasCompanyLogo){
<img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 shadow-md hover:cursor-pointer" (click)="deleteConfirm('logo')">
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('logo')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -38,7 +38,7 @@
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
@if(user?.hasProfile){
<img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 shadow-md hover:cursor-pointer" (click)="deleteConfirm('profile')">
<div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('profile')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>

View File

@@ -1,5 +1,5 @@
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="bg-white rounded-lg 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">

View File

@@ -1,5 +1,5 @@
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="bg-white rounded-lg 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">
@@ -18,80 +18,19 @@
</ng-select>
</div>
<!-- <div class="mb-4">
<label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
<input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
</div> -->
<div>
<app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
</div>
<div>
<!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
<quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
<app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
</div>
<!-- <div>
<label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
<ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
<!-- <app-validated-city label="Location" name="location" [(ngModel)]="listing.location"></app-validated-city> -->
<app-validated-location label="Location" name="location" [(ngModel)]="listing.location"></app-validated-location>
</div>
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
</div>
<div class="w-1/2">
<label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
<input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> -->
<!-- <app-validated-ng-select label="State" name="state" [(ngModel)]="listing.location.state" [items]="selectOptions?.states"></app-validated-ng-select>
<app-validated-input label="City" name="city" [(ngModel)]="listing.location.city"></app-validated-input> -->
<!-- </div> -->
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
<input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
<div class="w-1/2">
<label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
<input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
<app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
</div> -->
<!-- <div class="mb-4">
<label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
<textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
</div> -->
<!-- <div class="flex items-center mb-4"> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- <div class="w-1/2">
<label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
<input
type="text"
id="price"
[(ngModel)]="listing.price"
name="price"
class="w-full p-2 border border-gray-300 rounded-md"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div> -->
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
<div class="flex justify-center">
<label class="flex items-center cursor-pointer">
@@ -103,34 +42,8 @@
</label>
</div>
</div>
<!-- <div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@for (image of listing.imageOrder; track listing.imageOrder) {
<div class="relative aspect-video cursor-move">
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
}
</div>
</div> -->
<div class="container mx-auto pt-2">
<!-- <div class="grid-container"> -->
<!-- @for (image of listing.imageOrder; track image) {
<div cdkDrag class="grid-item">
<div class="image-box">
<img [src]="getImageUrl(image)" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
</div>
} -->
<app-drag-drop-mixed [listing]="listing" [ts]="ts" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed>
<!-- </div> -->
</div>
@@ -150,7 +63,6 @@
Upload
</button>
}
<!-- <input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" /> -->
</div>
@if (mode==='create'){
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button>

View File

@@ -1,5 +1,5 @@
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="bg-white rounded-lg 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">

View File

@@ -1,10 +1,10 @@
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h1 class="text-2xl font-bold md:mb-4">My Favorites</h1>
<!-- Desktop view -->
<div class="hidden md:block">
<table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
<table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
<thead class="bg-gray-100">
<tr>
<th class="py-2 px-4 text-left">Title</th>
@@ -44,7 +44,7 @@
<!-- Mobile view -->
<div class="md:hidden">
<div *ngFor="let listing of favorites" class="bg-white shadow-md rounded-lg p-4 mb-4">
<div *ngFor="let listing of favorites" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
<h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
<p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
<p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }}, {{ listing.location.state }}</p>

View File

@@ -1,10 +1,10 @@
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="bg-white rounded-lg drop-shadow-custom-bg p-6">
<h1 class="text-2xl font-bold md:mb-4">My Listings</h1>
<!-- Desktop view -->
<div class="hidden md:block">
<table class="w-full bg-white shadow-md rounded-lg overflow-hidden">
<table class="w-full bg-white drop-shadow-inner-faint rounded-lg overflow-hidden">
<thead class="bg-gray-100">
<tr>
<th class="py-2 px-4 text-left">Title</th>
@@ -57,7 +57,7 @@
<!-- Mobile view -->
<div class="md:hidden">
<div *ngFor="let listing of myListings" class="bg-white shadow-md rounded-lg p-4 mb-4">
<div *ngFor="let listing of myListings" class="bg-white drop-shadow-inner-faint rounded-lg p-4 mb-4">
<h2 class="text-xl font-semibold mb-2">{{ listing.title }}</h2>
<p class="text-gray-600 mb-2">Category: {{ listing.listingsCategory === 'commercialProperty' ? 'Commercial Property' : 'Business' }}</p>
<p class="text-gray-600 mb-2">Located in: {{ listing.location.name ? listing.location.name : listing.location.county }} - {{ listing.location.state }}</p>