diff --git a/backend/src/assets/css/image-viewer.css b/backend/src/assets/css/image-viewer.css index 3a12bad5..d1c00c5f 100644 --- 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 index d3e6516a..a884cdff 100644 --- a/backend/src/components/ImageViewer.tsx +++ b/backend/src/components/ImageViewer.tsx @@ -156,7 +156,7 @@ const ImageViewer = ({ {closeComponent || '×'} - {title && {title}} + {title && {title}} {src.length > 1 && ( =960px) { - div.main { + div.property-card { max-width: 872px; margin-right: auto; margin-left: auto; @@ -14,22 +14,26 @@ 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; @@ -37,7 +41,7 @@ div.main div.property div.images-container { 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,7 +116,7 @@ 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; @@ -120,71 +124,71 @@ div.main div.property div.right-panel div.price { 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 index 958ecc40..aac0fba3 100644 --- a/frontend/src/components/ImageViewer.tsx +++ b/frontend/src/components/ImageViewer.tsx @@ -156,7 +156,7 @@ const ImageViewer = ({ {closeComponent || '×'} - {title && {title}} + {title && {title}} {src.length > 1 && ( - {title && {title}} + {title && {title}} { { property && image && ( - <> - + + {/* Main image */} @@ -268,12 +269,14 @@ const Property = () => { /> ) } - > + ) } {loading && } {noMatch && } + + ) }