Add footer to property page

aelassas · Jan 3, 2025 · e9842fc · e9842fc
1 parent 83dcfef
commit e9842fc
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 45 deletions.
diff --git a/backend/src/assets/css/image-viewer.css b/backend/src/assets/css/image-viewer.css
@@ -55,7 +55,7 @@
   cursor: pointer;
 }
 
-.title {
+.img-title {
   position: absolute;
   top: 15px;
   left: 15px;

diff --git a/backend/src/components/ImageViewer.tsx b/backend/src/components/ImageViewer.tsx
@@ -156,7 +156,7 @@ const ImageViewer = ({
           {closeComponent || '×'}
         </span>
 
-        {title && <span className="title">{title}</span>}
+        {title && <span className="img-title">{title}</span>}
 
         {src.length > 1 && (
           <span

diff --git a/frontend/src/assets/css/image-viewer.css b/frontend/src/assets/css/image-viewer.css
@@ -55,7 +55,7 @@
   cursor: pointer;
 }
 
-.title {
+.img-title {
   position: absolute;
   top: 15px;
   left: 15px;

diff --git a/frontend/src/assets/css/map.css b/frontend/src/assets/css/map.css
@@ -1,4 +1,4 @@
-.title {
+.map-title {
   text-align: center;
   font-weight: 500;
 }

diff --git a/frontend/src/assets/css/property.css b/frontend/src/assets/css/property.css
@@ -1,43 +1,47 @@
 @media only screen and (width <=960px) {
-  div.main div.property {
+  div.property-card div.property {
     display: flex;
     flex-direction: column;
   }
 }
 
 @media only screen and (width >=960px) {
-  div.main {
+  div.property-card {
     max-width: 872px;
     margin-right: auto;
     margin-left: auto;
     margin-top: 15px;
     padding-bottom: 30px;
   }
 
-  div.main div.property {
+  div.property-card div.property {
     display: flex;
     flex-direction: row;
   }
 }
 
-div.main {
+div.main-page {
+  min-height: 100vh;
+  transform: translate3d(0, 0, 0);
+}
+
+div.property-card {
   background-color: #fff;
   border: 1px solid #ededed;
   border-radius: 4px;
   padding: 15px;
-  margin-bottom: 15px;
-  transform: translate3d(0, 0, 0);
+  margin-bottom: 120px;
 }
 
-div.main div.property div.images-container {
+div.property-card div.property div.images-container {
   width: 350px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-right: 15px;
 }
 
-div.main div.property div.main-image {
+div.property-card div.property div.main-image {
   width: 100%;
   height: 350px;
   padding: 5px;
@@ -48,18 +52,18 @@ div.main div.property div.main-image {
   justify-content: center;
 }
 
-div.main div.property img.main-image {
+div.property-card div.property img.main-image {
   max-width: 100%;
   max-height: 100%;
 }
 
-div.main div.property div.images {
+div.property-card div.property div.images {
   display: flex;
   flex-flow: row wrap;
   overflow-x: auto;
 }
 
-div.main div.property div.images div.image {
+div.property-card div.property div.images div.image {
   width: 60px;
   height: 60px;
   border: 2px solid #D5DBDB;
@@ -72,33 +76,33 @@ div.main div.property div.images div.image {
   margin: 5px;
 }
 
-div.main div.property div.images div.image:hover {
+div.property-card div.property div.images div.image:hover {
   border: 2px solid #004b91;
 }
 
-div.main div.property div.images div.selected,
-div.main div.property div.images div.selected:hover {
+div.property-card div.property div.images div.selected,
+div.property-card div.property div.images div.selected:hover {
   border: 2px solid #FF8F00;
 }
 
-div.main div.property div.images img.image {
+div.property-card div.property div.images img.image {
   max-width: 100%;
   max-height: 100%;
 }
 
-div.main div.property div.right-panel {
+div.property-card div.property div.right-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
-div.main div.property div.right-panel div.right-panel-header {
+div.property-card div.property div.right-panel div.right-panel-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
-div.main div.property div.right-panel div.name h2 {
+div.property-card div.property div.right-panel div.name h2 {
   font-size: 1.8em;
   font-weight: 700;
   text-size-adjust: none;
@@ -112,79 +116,79 @@ div.main div.property div.right-panel div.name h2 {
   text-overflow: ellipsis;
 }
 
-div.main div.property div.right-panel div.price {
+div.property-card div.property div.right-panel div.price {
   color: #383838;
   font-size: 1.5em;
   font-weight: 700;
   white-space: nowrap;
   margin-left: 15px;
 }
 
-div.main div.property-footer {
+div.property-card div.property-footer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
-div.main div.property-footer form.action {
+div.property-card div.property-footer form.action {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   margin-top: 20px;
 }
 
-div.main div.property-footer form.action .from {
+div.property-card div.property-footer form.action .from {
   margin-right: 5px;
 }
 
-div.main div.property-footer form.action .to {
+div.property-card div.property-footer form.action .to {
   margin-right: 7px;
 }
 
-div.main div.property-footer form.action .btn-book {
+div.property-card div.property-footer form.action .btn-book {
   margin: 1px;
   background-color: #232323;
 }
 
-div.main div.property-footer form.action .button {
+div.property-card div.property-footer form.action .button {
   width: 100%;
   height: 38px;
 }
 
-div.main div.property-footer div.agency {
+div.property-card div.property-footer div.agency {
   display: flex;
   align-items: center;
 }
 
 @media only screen and (width <=960px) {
-  div.main div.property-footer {
+  div.property-card div.property-footer {
     flex-direction: column;
     justify-content: flex-start;
   }
 
-  div.main div.property-footer form.action {
+  div.property-card div.property-footer form.action {
     flex-direction: column;
     justify-content: flex-end;
     margin-top: 20px;
   }
 
-  div.main div.property-footer form.action .from {
+  div.property-card div.property-footer form.action .from {
     margin-right: 0;
   }
 
-  div.main div.property-footer form.action .to {
+  div.property-card div.property-footer form.action .to {
     margin-top: 10px;
     margin-right: 0;
   }
 
-  div.main div.property-footer form.action .btn-book {
+  div.property-card div.property-footer form.action .btn-book {
     margin-top: 10px;
     min-height: 56px !important;
     font-size: 1.1em;
   }
 }
 
-div.main div.agency span.agency-logo {
+div.property-card div.agency span.agency-logo {
   border: 1px solid #e6e6e6;
   border-radius: 3px;
   display: flex;
@@ -195,12 +199,12 @@ div.main div.agency span.agency-logo {
   height: 32px;
 }
 
-div.main div.agency span.agency-logo img {
+div.property-card div.agency span.agency-logo img {
   max-width: 100%;
   max-height: 100%;
 }
 
-div.main div.agency a.agency-info {
+div.property-card div.agency a.agency-info {
   color: #0064c8;
   text-decoration: underline;
   font-size: 0.9em;

diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
@@ -156,7 +156,7 @@ const ImageViewer = ({
           {closeComponent || '×'}
         </span>
 
-        {title && <span className="title">{title}</span>}
+        {title && <span className="img-title">{title}</span>}
 
         {src.length > 1 && (
           <span

diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx
@@ -146,7 +146,7 @@ const Map = ({
 
   return (
     <>
-      {title && <h1 className="title">{title}</h1>}
+      {title && <h1 className="map-title">{title}</h1>}
       <MapContainer
         center={position}
         zoom={_initialZoom}

diff --git a/frontend/src/pages/Property.tsx b/frontend/src/pages/Property.tsx
@@ -12,13 +12,14 @@ import env from '@/config/env.config'
 import { strings as commonStrings } from '@/lang/common'
 import { strings } from '@/lang/properties'
 import * as helper from '@/common/helper'
+import * as PropertyService from '@/services/PropertyService'
+import * as UserService from '@/services/UserService'
 import PropertyInfo from '@/components/PropertyInfo'
 import NoMatch from './NoMatch'
 import ImageViewer from '@/components/ImageViewer'
 import AgencyBadge from '@/components/AgencyBadge'
 import DatePicker from '@/components/DatePicker'
-import * as PropertyService from '@/services/PropertyService'
-import * as UserService from '@/services/UserService'
+import Footer from '@/components/Footer'
 
 import '@/assets/css/property.css'
 
@@ -117,8 +118,8 @@ const Property = () => {
       {
         property && image
         && (
-          <>
-            <div className="main">
+          <div className="main-page">
+            <div className="property-card">
               <div className="property">
                 <div className="images-container">
                   {/* Main image */}
@@ -268,12 +269,14 @@ const Property = () => {
                 />
               )
             }
-          </>
+          </div>
         )
       }
 
       {loading && <Backdrop text={commonStrings.PLEASE_WAIT} />}
       {noMatch && <NoMatch hideHeader />}
+
+      <Footer />
     </Layout>
   )
 }