/* * Search Engine V2's Search Component styling (search-engine-v2/SEARCH_UI_SPECIFICATION.md). * New file, not a modification of public/css/search-widget.css (V1) — see * search-engine-v2/TECHNICAL_DECISIONS.md Decision 1. Row-content class * names/structure deliberately mirror V1's proven layout (.sugg-title/ * .sugg-sub/.sugg-count, RTL-aware count margin) since that design already * works well; namespaced under .search-v2- to avoid any collision with V1's * still-live .suggestion-item styles on the same page during the phases * where both widgets can appear together. */ .search-v2-widget { position: relative; width: 100%; } .search-v2-form { position: relative; display: flex; align-items: center; } .search-v2-input { /* Bootstrap's .form-control (width: 100%) otherwise leaves this exactly as narrow as whatever the parent container happens to be — on the sitewide header that meant the placeholder ("Search for District, City, postal code or by current location") was cut off after a few characters. */ min-width: 240px; height: 40px; border-radius: 8px; } /* * This app's does NOT set dir="rtl" (confirmed by reading * master.blade.php directly) — lang affects language/font handling, not * box/flex layout direction, so without an explicit `direction` the typed * query rendered left-aligned even in Arabic, and every .search-v2-item * row's flexbox order (icon, then text, then count — the DOM order * search-box.js's rowHtml() always emits) stayed strict left-to-right * regardless of locale, instead of the icon-on-the-right/text-flowing-left * order Arabic users expect. Scoped to html[lang="ar"] rather than relying * on the site ever adding a real dir="rtl" attribute. */ html[lang="ar"] .search-v2-input { direction: rtl; text-align: right; } html[lang="ar"] .search-v2-item, html[lang="ar"] .search-v2-current-location { /* Reverses flex visual order automatically per the flexbox spec (the DOM's first child renders at the RTL "start" edge, which is the right side) — icon (1st child) ends up rightmost, sugg-count (last child, when present) ends up leftmost, matching the existing .sugg-count margin override below, which was already written for this exact reversed order but had no effect without this. */ direction: rtl; } /* Sitewide header context (resources/views/login_layout/header-map-listing.blade.php's desktop instance, wrapped in .ht_search_widget) gets noticeably more room than the general default — it has the header's full row width available and the longest placeholder text of any instance. Scoped to this one wrapper class so the home hero, neighborhood, and Playground instances (which size themselves against their own, already-generous containers) are unaffected. */ @media (min-width: 1200px) { .ht_search_widget .search-v2-widget { width: 400px; } } @media (min-width: 992px) and (max-width: 1199px) { .ht_search_widget .search-v2-widget { width: 400px; } } /* * Mobile compact bar (header-map-listing.blade.php's mobile instance, * wrapped in .trulia-mobile-search — the collapsed pill next to the logo * and hamburger menu, BEFORE the user taps it into the fullscreen * takeover). V1's own equivalent markup (.mailchimp_form .form-control) * already solves this exact problem with `min-width: 0 !important` so the * input shrinks to fit the flex row instead of forcing a fixed floor — * see the comment on that rule further down in header-map-listing.blade.php * referencing a past overflow bug from a competing hardcoded width. That * fix doesn't cover .search-v2-input (different class), so the general * min-width: 240px above was overriding it here, squeezing the hamburger * icon. Same fix, same reasoning, applied to this component's own class. */ .trulia-mobile-search .search-v2-widget { flex: 1 1 auto; min-width: 0; width: auto; } .trulia-mobile-search .search-v2-input { min-width: 0; width: 100%; } /* * Mobile fullscreen takeover results panel. V1's equivalent rule * (`body.mobile-search-fullscreen .trulia-mobile-search .navbar-suggest-box`, * further down in header-map-listing.blade.php) already makes ITS box * `position: fixed` stretching to the bottom of the viewport instead of * the default `.search-v2-box` rule above (`position: absolute`, * `max-height: 420px`) — but it targets V1's `.navbar-suggest-box` class, * not `.search-v2-box`, so this component fell back to the short, * content-sized box instead of filling the screen like V1's version does. * Same fix, same values (top's 85px is overwritten inline by the JS * onOpen hook with the real measured header height, same as V1's own * openMobileSearchFullscreen()), applied to this component's own class. */ body.mobile-search-fullscreen .trulia-mobile-search .search-v2-box { position: fixed; top: 85px; left: 0; right: 0; bottom: 0; max-height: none; margin-top: 0; border: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: 99999; } .search-v2-clear { border: none; background: transparent; color: #9aa0a6; position: absolute; right: 10px; padding: 4px; line-height: 1; cursor: pointer; } html[lang="ar"] .search-v2-clear { right: auto; left: 10px; } .search-v2-box { position: absolute; z-index: 1000; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, .12); max-height: 420px; overflow-y: auto; /* text-align inherits from whatever ancestor a host page happens to wrap this component in — e.g. the mobile nav menu's own text is center-aligned by default, which otherwise cascades straight into every row's title/subtitle here. Reset once at the container so every descendant (labels, sugg-title, sugg-sub, current-location) is correct regardless of host-page context, instead of a page ever needing its own override. */ text-align: left; } html[lang="ar"] .search-v2-box { text-align: right; } .search-v2-results { list-style: none; margin: 0; padding: 8px 0; } .search-v2-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; } .search-v2-item > i { flex-shrink: 0; color: #9aa0a6; } .search-v2-item .sugg-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1 1 auto; } .search-v2-item .sugg-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-v2-item .sugg-sub { font-size: 12px; color: #9aa0a6; } .search-v2-item .sugg-count { font-size: 12px; color: #9aa0a6; flex-shrink: 0; margin-left: 8px; } html[lang="ar"] .search-v2-item .sugg-count { margin-left: 0; margin-right: 8px; } .search-v2-item.is-highlighted, .search-v2-item:hover { background-color: #f7f7f7; } .search-v2-item.did-you-mean-item .sugg-title { font-style: italic; } .search-v2-current-location { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; color: #0d6efd; } .search-v2-current-location:hover { background-color: #f7f7f7; } .search-v2-remove { border: none; background: transparent; color: #9aa0a6; margin-left: auto; padding: 0 4px; font-size: 14px; line-height: 1; flex-shrink: 0; cursor: pointer; } .search-v2-remove:hover { color: #555; } .search-v2-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9aa0a6; font-weight: 700; margin: 12px 16px 6px; } .search-v2-empty, .search-v2-error { padding: 10px 16px; color: #9aa0a6; font-size: 13px; margin: 0; } .search-v2-error { color: #dc3545; } .search-v2-loading { display: flex; align-items: center; justify-content: center; padding: 14px 16px; color: #9aa0a6; font-size: 16px; } /* Property type shortcuts row (search_engine_v2.md "PROPERTY TYPE SHORTCUTS") */ .search-v2-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #eee; } .search-v2-shortcut { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #eee; border-radius: 8px; background: #fff; padding: 8px 12px; min-width: 64px; font-size: 11px; color: #333; cursor: pointer; } .search-v2-shortcut:hover { border-color: #0d6efd; color: #0d6efd; } .search-v2-shortcut i { font-size: 16px; }