Skip to content

Commit

Permalink
feat: DAH-2661 add fixed header styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@tallulahkay
tallulahkay committed Dec 20, 2024
1 parent bb86970 commit 6d3e0b9
Show file tree
Hide file tree
Showing 7 changed files with 449 additions and 346 deletions.
212 changes: 112 additions & 100 deletions app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,121 +225,133 @@ exports[`For Rent renders ForRent component 1`] = `
id="main-content"
>
<div>
<header
class="page-header"
<div
id="for-rent-page-header"
>
<hgroup
class="page-header__group"
<header
class="page-header"
>
<h1
class="page-header__title"
data-testid="page-header"
>
Rent affordable housing
</h1>
<p
class="page-header__lead"
>
If you tell us your household size and income, we can show you listings you may qualify for.
</p>
<p
class="mt-4 md:mt-8 mb-2"
<hgroup
class="page-header__group"
>
<h1
class="page-header__title"
data-testid="page-header"
>
Rent affordable housing
</h1>
<p
class="page-header__lead"
>
If you tell us your household size and income, we can show you listings you may qualify for.
</p>
<p
class="mt-4 md:mt-8 mb-2"
>
<a
class="button"
href="/eligibility-estimator/rental"
tabindex="0"
target="_self"
>
Find matching listings
</a>
</p>
<a
class="button"
href="/eligibility-estimator/rental"
tabindex="0"
target="_self"
class="text-base text-primary-dark"
href="/income-calculator/rental/intro"
>
Find matching listings
or get help calculating your income
</a>
</p>
<a
class="text-base text-primary-dark"
href="/income-calculator/rental/intro"
>
or get help calculating your income
</a>
</hgroup>
</header>
</hgroup>
</header>
</div>
<div
class="directory-page-navigation-bar"
class="directory-page-navigation-bar__container"
id="nav-bar-container"
>
<a
class="seeds-button directory-page-navigation-bar__button"
data-size="md"
data-variant="primary"
href="#enter-a-lottery"
<div
class="directory-page-navigation-bar"
>
<span
class="ui-icon ui-medium"
<a
class="seeds-button directory-page-navigation-bar__button"
data-size="md"
data-variant="primary"
href="#enter-a-lottery"
id="nav-bar-button-enter-a-lottery"
>
<svg
fill="currentColor"
viewBox="0 0 51 45"
<span
class="ui-icon ui-medium"
>
<path
d="M49.7173 21.1504C50.2904 21.6532 50.3425 22.4593 49.7608 23.1094C49.3353 23.6815 48.4496 23.7335 47.8766 23.1528L44.6292 20.2923V37.4466C44.6292 41.278 41.5207 44.3812 37.6829 44.3812H12.6762C8.84011 44.3812 5.72991 41.278 5.72991 37.4466V20.2923L2.48165 23.1528C1.90597 23.7335 1.02805 23.6815 0.520446 23.1094C0.0127579 22.4593 0.0676337 21.6532 0.642961 21.1504L24.2592 0.346902C24.7888 -0.115634 25.5703 -0.115634 26.0999 0.346902L49.7173 21.1504ZM12.6762 41.6074H18.2332V27.7383C18.2332 26.204 19.4749 24.9644 21.0118 24.9644H29.3473C30.8842 24.9644 32.1258 26.204 32.1258 27.7383V41.6074H37.6829C39.9838 41.6074 41.8507 39.7437 41.8507 37.4466V17.9172L25.1795 3.23671L8.50843 17.9172V37.4466C8.50843 39.7437 10.3752 41.6074 12.6762 41.6074ZM21.0118 41.6074H29.3473V27.7383H21.0118V41.6074Z"
/>
</svg>
</span>
Enter a lottery (0)
</a>
<a
class="seeds-button directory-page-navigation-bar__button"
data-size="md"
data-variant="primary"
href="#upcoming-lotteries"
>
<span
class="ui-icon ui-medium"
<svg
fill="currentColor"
viewBox="0 0 51 45"
>
<path
d="M49.7173 21.1504C50.2904 21.6532 50.3425 22.4593 49.7608 23.1094C49.3353 23.6815 48.4496 23.7335 47.8766 23.1528L44.6292 20.2923V37.4466C44.6292 41.278 41.5207 44.3812 37.6829 44.3812H12.6762C8.84011 44.3812 5.72991 41.278 5.72991 37.4466V20.2923L2.48165 23.1528C1.90597 23.7335 1.02805 23.6815 0.520446 23.1094C0.0127579 22.4593 0.0676337 21.6532 0.642961 21.1504L24.2592 0.346902C24.7888 -0.115634 25.5703 -0.115634 26.0999 0.346902L49.7173 21.1504ZM12.6762 41.6074H18.2332V27.7383C18.2332 26.204 19.4749 24.9644 21.0118 24.9644H29.3473C30.8842 24.9644 32.1258 26.204 32.1258 27.7383V41.6074H37.6829C39.9838 41.6074 41.8507 39.7437 41.8507 37.4466V17.9172L25.1795 3.23671L8.50843 17.9172V37.4466C8.50843 39.7437 10.3752 41.6074 12.6762 41.6074ZM21.0118 41.6074H29.3473V27.7383H21.0118V41.6074Z"
/>
</svg>
</span>
Enter a lottery (0)
</a>
<a
class="seeds-button directory-page-navigation-bar__button"
data-size="md"
data-variant="primary"
href="#upcoming-lotteries"
id="nav-bar-button-upcoming-lotteries"
>
<svg
fill="currentColor"
viewBox="0 0 32 32"
<span
class="ui-icon ui-medium"
>
<path
d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
/>
<path
d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
/>
</svg>
</span>
Upcoming lotteries (0)
</a>
<a
class="seeds-button directory-page-navigation-bar__button"
data-size="md"
data-variant="primary"
href="#lottery-results"
>
<span
class="ui-icon ui-medium"
<svg
fill="currentColor"
viewBox="0 0 32 32"
>
<path
d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
/>
<path
d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
/>
</svg>
</span>
Upcoming lotteries (0)
</a>
<a
class="seeds-button directory-page-navigation-bar__button"
data-size="md"
data-variant="primary"
href="#lottery-results"
id="nav-bar-button-lottery-results"
>
<svg
fill="currentColor"
viewBox="0 0 32 32"
<span
class="ui-icon ui-medium"
>
<path
d="M22.754 22.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
/>
<path
d="M22.754 18.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
/>
<path
d="M22.754 14.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
/>
<path
d="M9.365 12.013h7.438c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.438c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"
/>
<path
d="M27.526 4.877l-4.416-4.358c-0.216-0.213-0.514-0.506-1.072-0.506h-16.285c-0.947 0-1.717 0.781-1.717 1.741v26.014c0 0.205 0.098 0.387 0.246 0.51l3.142 3.36c0.126 0.134 0.302 0.211 0.486 0.211s0.362-0.077 0.486-0.211l3.506-3.747 3.629 3.875c0.251 0.269 0.722 0.269 0.973 0l3.629-3.875 3.629 3.875c0.126 0.134 0.301 0.21 0.483 0.211 0.002 0 0.002 0 0.003 0 0.182 0 0.357-0.075 0.483-0.206l3.117-3.27c0.117-0.123 0.184-0.29 0.184-0.459v-22.029c0.002-0.562-0.274-0.902-0.509-1.138zM26.102 5.347h-3.398v-3.355l3.398 3.355zM24.259 30.341l-3.634-3.88c-0.126-0.134-0.302-0.211-0.486-0.211s-0.362 0.077-0.486 0.211l-3.629 3.875-3.629-3.875c-0.251-0.269-0.722-0.269-0.973 0l-3.506 3.747-2.544-2.718v-25.736c0-0.221 0.174-0.408 0.382-0.408l15.616-0.010v4.677c0 0.368 0.299 0.667 0.667 0.667h4.667v21.094l-2.445 2.566z"
/>
</svg>
</span>
Lottery results (0)
</a>
<svg
fill="currentColor"
viewBox="0 0 32 32"
>
<path
d="M22.754 22.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
/>
<path
d="M22.754 18.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
/>
<path
d="M22.754 14.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
/>
<path
d="M9.365 12.013h7.438c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.438c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"
/>
<path
d="M27.526 4.877l-4.416-4.358c-0.216-0.213-0.514-0.506-1.072-0.506h-16.285c-0.947 0-1.717 0.781-1.717 1.741v26.014c0 0.205 0.098 0.387 0.246 0.51l3.142 3.36c0.126 0.134 0.302 0.211 0.486 0.211s0.362-0.077 0.486-0.211l3.506-3.747 3.629 3.875c0.251 0.269 0.722 0.269 0.973 0l3.629-3.875 3.629 3.875c0.126 0.134 0.301 0.21 0.483 0.211 0.002 0 0.002 0 0.003 0 0.182 0 0.357-0.075 0.483-0.206l3.117-3.27c0.117-0.123 0.184-0.29 0.184-0.459v-22.029c0.002-0.562-0.274-0.902-0.509-1.138zM26.102 5.347h-3.398v-3.355l3.398 3.355zM24.259 30.341l-3.634-3.88c-0.126-0.134-0.302-0.211-0.486-0.211s-0.362 0.077-0.486 0.211l-3.629 3.875-3.629-3.875c-0.251-0.269-0.722-0.269-0.973 0l-3.506 3.747-2.544-2.718v-25.736c0-0.221 0.174-0.408 0.382-0.408l15.616-0.010v4.677c0 0.368 0.299 0.667 0.667 0.667h4.667v21.094l-2.445 2.566z"
/>
</svg>
</span>
Lottery results (0)
</a>
</div>
</div>
<div
class="match-banner"
Expand Down
Loading

0 comments on commit 6d3e0b9

Please sign in to comment.