Adjusting location UI, small changes on login and contact form

frontend/src/app/components/contact/contact-form/contact-form.component.html

@@ -19,7 +19,7 @@
 >
   <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
     <h2 class="text-2xl font-bold mb-4">Kontaktirajte nas</h2>
-    <form (ngSubmit)="submitForm()">
+    <form #form="ngForm" (ngSubmit)="submitForm(form)">
       <div class="mb-4">
         <label class="block text-gray-700 font-bold mb-2" for="name"
           >Ime i prezime *</label

frontend/src/app/components/contact/contact-form/contact-form.component.ts

@@ -3,7 +3,7 @@ import {
   ContactFormModel,
   ContactFormErrors,
 } from '../../../shared/models/contact-form.model';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgForm } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { ContactService } from 'src/app/shared/services/contact.service';
 
@@ -72,7 +72,7 @@ export class ContactFormComponent {
         : '';
   }
 
-  submitForm() {
+  submitForm(form: NgForm) {
     this.validateForm();
     if (
       this.formErrors.name ||
@@ -87,6 +87,7 @@ export class ContactFormComponent {
       (response) => {
         console.log('Form data successfully submitted:', response);
         this.closeForm();
+        form.resetForm();
       },
       (error) => {
         console.error('Error submitting form:', error);

frontend/src/app/components/location-card/location-card.component.html

@@ -1,16 +1,27 @@
-<div class="w-full max-w-5xl mx-auto rounded-xl p-4 sm:flex sm:items-center sm:space-x-6 shadow-md hover:shadow-sm transition-shadow duration-300 mb-4 bg-white cursor-pointer" (click)="onSelectLocation()" [ngClass]="{'shadow-none border-l-8 border-blue-500 text-white' : isSelected}">
-  <img class="block mx-auto h-16 w-16 object-cover rounded-full sm:mx-0 sm:flex-shrink-0" [src]="location.image" alt="">
-  <div class="text-center space-y-2 sm:text-left">
-    <div class="space-y-0.5">
-      <p class="text-lg text-black font-semibold">
-        {{ location.name }}
-      </p>
-      <p class="text-gray-500 text-sm text-slate-500 truncate">
-        {{ location.address }}
+<div class="w-full max-w-5xl mx-auto rounded-xl p-4 shadow-md hover:shadow-sm transition-shadow duration-300 mb-4 bg-white cursor-pointer location-list" 
+     (click)="onSelectLocation()" 
+     [ngClass]="{'shadow-none border-l-8 border-blue-500 text-white' : isSelected}">
+
+  <!-- Title -->
+  <div class="text-lg text-black font-semibold mb-2">
+    {{ location.name }}
+  </div>
+
+  <!-- Content Container -->
+  <div class="sm:flex sm:space-x-6">
+    <!-- Image -->
+    <img class="block h-32 w-32 object-cover rounded-md sm:mx-0 sm:flex-shrink-0" 
+         [src]="location.image" alt="{{ location.name }}">
+
+    <!-- Description and Type -->
+    <div class="space-y-2 flex-1 location-detail mt-2 sm:mt-0">
+      <!-- <span class="text-gray-600 text-slate-500 tracking-widest location-type">
+        {{ location.type }}
+      </span> -->
+      <span class="inline-flex items-center bg-gray-50 px-1 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 tracking-widest location-type">{{ location.type }}</span>
+      <p class="text-gray-600 text-sm text-slate-500 description">
+        {{ location.description | slice:0:100 }}...
       </p>
-      <!-- <p class="text-gray-600 text-sm text-slate-500 truncate">
-        Kategorija: {{ location.type }}
-      </p> -->
     </div>
   </div>
 </div>

frontend/src/app/components/location-card/location-card.component.scss

@@ -0,0 +1,15 @@
+.location-list {
+    font-size: 10px;
+    .location-detail {
+        .description {
+            line-height: 1;
+        }
+        .location-type {
+            font-weight: bold;
+            text-transform: uppercase;
+            font-size: 10px;
+            line-height: 1;
+        }
+    }
+
+}

frontend/src/app/components/location-card/location-card.component.ts

@@ -1,11 +1,11 @@
-import { NgClass } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Location } from 'src/app/shared/models/location.model';
 
 @Component({
   selector: 'app-location-card',
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass, CommonModule],
   templateUrl: './location-card.component.html',
   styleUrls: ['./location-card.component.scss'],
 })

frontend/src/app/components/navbar/navbar.component.html

@@ -33,16 +33,16 @@
                     <img src="../../../assets/images/smetovi-trees.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer" />
 
                     <div *ngIf="subMenuOpen"
-                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-sm border z-10">
+                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-md z-10">
                         <ul>
                             <li>
-                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Admin</a>
+                                <a routerLink="/dashboard" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Admin</a>
                             </li>
                             <li>
-                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Postavke</a>
+                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Postavke</a>
                             </li>
                             <li>
-                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
+                                <a (click)="logout()" (click)="toggleMenu()" class="rounded-md cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
                             </li>
                         </ul>
                     </div>
@@ -55,8 +55,9 @@
                 <!-- Weather Component (Visible on Mobile) -->
                 <app-weather-widget *ngIf="isMobileView"
                     [hasScrolled]="hasScrolled || !isHomePage || isMobileMenuOpen"></app-weather-widget>
-                <button id="mobile-menu-button" class="text-black focus:outline-none"
-                    [class.text-white]="isHomePage && !hasScrolled && !isMobileMenuOpen">
+                <button id="mobile-menu-button" class="focus:outline-none"
+                    [class.text-white]="isHomePage && !hasScrolled && !isMobileMenuOpen"
+                    [class.text-black]="!isHomePage && hasScrolled && isMobileMenuOpen">
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -67,16 +68,16 @@
                     <img src="../../../assets/images/smetovi-trees.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer" />
 
                     <div *ngIf="subMenuOpen"
-                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-sm shadow-sm border z-10">
+                        class="sub-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-md z-10">
                         <ul>
                             <li>
-                                <a routerLink="/dashboard" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Admin</a>
+                                <a routerLink="/dashboard" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Admin</a>
                             </li>
                             <li>
-                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="block px-8 py-2 hover:bg-gray-100">Postavke</a>
+                                <a routerLink="/dashboard/postavke" (click)="toggleMenu()" class="rounded-md block px-8 py-2 hover:bg-gray-100">Postavke</a>
                             </li>
                             <li>
-                                <a (click)="logout()" (click)="toggleMenu()" class="cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
+                                <a (click)="logout()" (click)="toggleMenu()" class="rounded-md cursor-pointer block px-8 py-2 hover:bg-gray-100">Odjava</a>
                             </li>
                         </ul>
                     </div>

frontend/src/app/home/pages/location/location.component.html

@@ -1,6 +1,6 @@
 <main class="flex items-center justify-center bg-gray-100">
   <div class="w-full lg:flex container">
-    <div class="lg:w-1/3 py-6 px-4">
+    <div class="lg:w-1/2 py-6 px-4">
       <ng-container *ngFor="let locationItem of locations; let i = index">
         <app-location-card 
           [location]="locationItem"

frontend/src/app/pages/login/login.component.html

@@ -11,7 +11,7 @@ <h3 class="text-gray-800 text-3xl font-extrabold">Prijavi se</h3>
           <div>
             <label class="text-gray-800 text-sm mb-2 block">Korisničko ime</label>
             <div class="relative flex items-center">
-              <input formControlName="username" type="text"
+              <input formControlName="username" type="email"
                 class="w-full text-sm text-gray-800 border border-gray-300 px-4 py-3 rounded-lg outline-blue-600"
                 placeholder="Unesite email" />
               <svg xmlns="http://www.w3.org/2000/svg" fill="#bbb" stroke="#bbb"

frontend/src/app/shared/models/location.model.ts

@@ -6,6 +6,7 @@ export interface WorkingHours {
 export interface Location {
   id: number;
   name: string;
+  description: string,
   address: string;
   type: string;
   image?: string;

frontend/src/assets/data/data.json

@@ -2,20 +2,23 @@
     "locations": [
       {
         "name": "Konjički klub 'Smet'",
-        "description": "Horse riding club",
+        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "type": "Rekreacija",
         "image": "/assets/images/smet.jpg",
         "coordinates": { "lat": 44.241592, "lng": 17.969323 }
       },
       {
         "name": "Spomen obilježje",
-        "description": "Memorial monument",
+        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "type": "Rekreacija",
         "image": "/assets/images/spomenik.jpg",
         "coordinates": { "lat": 44.244918, "lng": 17.959509 }
       },
       {
         "name": "Restoran 960",
-        "description": "Restaurant 960",
+        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
         "image": "/assets/images/restoran_960.jpg",
+        "type": "Restoran",
         "coordinates": { "lat": 44.242418, "lng": 17.97361 },
         "workingHours": [
           { "day": "Ponedjeljak", "open": "10:00", "close": "22:00" },
@@ -29,9 +32,17 @@
       },
       {
         "name": "Dom Saveza Izviđača i Radioamatera",
-        "description": "Dom Saveza Izviđača i Radioamatera",
+        "description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text",
+        "type": "Smještaj",
         "image": "/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg",
         "coordinates": { "lat": 44.245125, "lng": 17.978405 }
+      },
+      {
+        "name": "Planinarski dom Smet",
+        "description": "Planinarski dom Smet se nalazi na poznatom izletištu Smetovi. Ovo izletište je proglašeno i za jedinstvenu zeničku zračnu banju. Planinarski dom Smet se nalazi na nadmorskoj visini od 964 metara. Dom posjeduje restoran, salu, terasu, igralište, parkove za djecu te prostor za roštilj. Domom upravlja planinarsko društvo Željezara iz Zenice.",
+        "type": "Smještaj",
+        "image": "/assets/images/dom_saveza_izvidaca_i_radioamatera.jpg",
+        "coordinates": { "lat": 44.247535, "lng": 17.971122 }
       }
     ]
   }