diff options
Diffstat (limited to 'app/components.js')
| -rw-r--r-- | app/components.js | 57 |
1 files changed, 45 insertions, 12 deletions
diff --git a/app/components.js b/app/components.js index 6531206..1c8c6aa 100644 --- a/app/components.js +++ b/app/components.js @@ -1,5 +1,5 @@ import { Dom, DomOptions, ToastType } from "dom"; -import { AreaParam, District, Filters, House, HouseParameter, Weights } from "models"; +import { AreaParam, Filters, House, HouseParameter, Weights } from "models"; export class Widgets { /** @@ -422,7 +422,7 @@ export class Sidebar { children: [ Dom.heading( 3, - "Weights", + "Scoring", new DomOptions({ styles: { color: "#333", @@ -715,34 +715,67 @@ export class Modal { const imgSect = Dom.div( new DomOptions({ children: [ - Dom.div( + Dom.span( + "Images", new DomOptions({ - id: "img_title", - styles: { fontSize: "14px", fontWeight: "bold", marginBottom: "10px" }, + styles: { + fontSize: "14px", + fontWeight: "bold", + marginBottom: "10px", + }, }), ), Dom.div( new DomOptions({ children: house.images.slice(0, 3).map((src) => { - return Dom.img( - src, + // Wrap image in anchor tag that opens in new tab + return Dom.a( new DomOptions({ - attributes: { loading: "lazy" }, - styles: { borderRadius: "4px", flexShrink: "0", height: "100px" }, + attributes: { + href: src, + rel: "noopener noreferrer", + target: "_blank", + }, + children: [ + Dom.img( + src, + new DomOptions({ + attributes: { + alt: "House image", + loading: "lazy", + }, + styles: { + borderRadius: "4px", + cursor: "pointer", + flexShrink: "0", + height: "100px", + transition: "opacity 0.2s ease", + }, + }), + ), + ], + styles: { + display: "block", + textDecoration: "none", + }, }), ); }), - - styles: { display: "flex", gap: "10px", overflowX: "auto", paddingBottom: "5px" }, + styles: { + display: "flex", + gap: "10px", + overflowX: "auto", + paddingBottom: "5px", + }, }), ), ], styles: { marginBottom: "20px" }, }), ); + frag.appendChild(imgSect); } - return frag; } |