Skip to content

Commit

Permalink
Fix city dropdown responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@aliciapaz
aliciapaz committed Apr 5, 2024
1 parent 7e65f15 commit ceaddd4
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 38 deletions.
17 changes: 8 additions & 9 deletions app/components/search_bar/component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div id="search-bar" class="sticky inset-x-0 z-20 flex items-center justify-center px-6 py-4
bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:gap-5">
<div id="search-bar" class="flex sticky inset-x-0 top-20 z-20 justify-center items-center px-6 py-4 bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 md:top-22.75 md:gap-5">
<%# Keyword input %>
<div class="relative flex items-center w-full max-w-xl divide-x">
<div class="flex relative items-center w-full max-w-xl divide-x">
<div class="flex items-center w-full">
<span class="absolute flex items-center ml-2 pointer-events-none">
<span class="flex absolute items-center ml-2 pointer-events-none">
<%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
</span>
<%= @form.search_field(
Expand All @@ -18,23 +17,23 @@ bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:
}
) %>
</div>
<div class="flex m-0 font-medium bg-white cursor-pointer h-46px w-52 rounded-r-md"
<div class="flex m-0 w-52 font-medium bg-white rounded-r-md cursor-pointer h-46px"
data-controller="dropdown"
data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide">
<button type="button" class="flex items-center pl-2 border-l-gray w-52" data-action="dropdown#toggle:stop">
<button type="button" class="flex items-center pl-2 border-l-gray" data-action="dropdown#toggle:stop">
<%= inline_svg_tag "location-dot.svg", size:"9*9", class:"h-7 mr-2 fill-current" %>
<p data-geolocation-target="currentLocation">
<%= @current_location[:city] %>
</p>
</button>
<div data-dropdown-target="menu" class="absolute right-0 flex bg-white z-110 w-52 top-11">
<ul class="w-full overflow-hidden text-sm bg-white border rounded shadow-lg">
<div data-dropdown-target="menu" class="flex absolute right-0 top-11 w-52 bg-white sm:w-1/3 z-110">
<ul class="overflow-hidden w-full text-sm bg-white rounded border shadow-lg">
<% @locations.each do |location| %>
<li class="block px-4 py-2 text-gray-3 hover:bg-seafoam" data-action="click->geolocation#updateLocation">
<%= location %>
</li>
<% end %>
<li class="flex items-center block px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition">
<li class="block flex items-center px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition">
<%= inline_svg_tag "my-location.svg", size:"12*12", class:"h-7 mr-2 fill-current text-gray-3" %>
Search near me
</li>
Expand Down
58 changes: 29 additions & 29 deletions app/views/home/index.html.slim
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
main
section class="relative hidden bg-electric-teal" data-controller="banner" data-banner-target="banner"
div class="flex max-w-3xl mx-auto py-7 md:py-8"
section class="hidden relative bg-electric-teal" data-controller="banner" data-banner-target="banner"
div class="flex py-7 mx-auto max-w-3xl md:py-8"
div class="hidden md:block md:pl-4 lg:pl-0"
= inline_svg_tag 'megaphone.svg', size: '65*70'
div class="pl-8 pr-10 md:px-0 md:ml-8 text-gray-1 "
div class="text-sm md:text-base mb-1.5 font-bold"
div class="pr-10 pl-8 md:px-0 md:ml-8 text-gray-1"
div class="mb-1.5 text-sm font-bold md:text-base"
| We officially launched in Nashville!
div class="text-xs leading-5 md:leading-6 md:text-sm md:pr-2"
| We currently only have nonprofit listings in Nashville, TN.
br
| We will enable searching by City, State, and Zip Code once we expand to other cities.
div class="absolute inset-y-0 right-0 flex items-start pt-1 pr-1 sm:pt-1.5 sm:pr-5 sm:items-start"
div class="flex absolute inset-y-0 right-0 items-start pt-1 pr-1 sm:pt-1.5 sm:pr-5 sm:items-start"
button class="flex p-2 rounded-md hover:bg-gray" type="button" data-action="banner#closeBanner"
span.sr-only Dismiss
= inline_svg_tag 'x-icon.svg', size: '14*14'
Expand All @@ -22,21 +22,21 @@ main
| Search for listings of nonprofit organizations based on your needs.
= form_with model: @search, url: search_path, method: :get do |f|
.c-form class="py-0 mx-auto sm:px-3 sm:flex-col sm:justify-center sm:max-w-4xl"
div class="relative flex w-full p-0 divide-x rounded-md c-input sm:max-w-xl mb-7 sm:mb-0"
div class="relative flex w-full"
div class="flex relative p-0 mb-7 w-full rounded-md divide-x c-input sm:max-w-xl sm:mb-0"
div class="flex relative w-full"
= f.text_field :keyword, autocomplete: "search", class:"border-none rounded-l-md pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\"", data: { test_id: "home_search_input" }
= inline_svg_tag 'search-icon.svg', class:"absolute top-1/3 left-4"
div class="flex m-0 font-medium bg-white cursor-pointer w-52 rounded-r-md" data-controller="dropdown" data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide"
button type="button" class="flex items-center pl-2 w-52 border-l-gray" data-action="dropdown#toggle:stop"
div class="flex m-0 w-52 font-medium bg-white rounded-r-md cursor-pointer" data-controller="dropdown" data-action="click@window->dropdown#hide touchstart@window->dropdown#hide keydown.up->dropdown#previousItem keydown.down->dropdown#nextItem keydown.esc->dropdown#hide"
button type="button" class="flex items-center pl-2 md:w-52 border-l-gray" data-action="dropdown#toggle:stop"
= inline_svg_tag "location-dot.svg", size:"9*9", class:"h-7 mr-2 fill-current"
p data-geolocation-target="currentLocation"
= @current_location[:city]
div data-dropdown-target="menu" class="absolute right-0 z-10 flex w-52 top-11"
ul class="w-full overflow-hidden text-sm bg-white border rounded shadow-lg"
div data-dropdown-target="menu" class="flex absolute right-0 top-11 z-10 w-52"
ul class="overflow-hidden w-full text-sm bg-white rounded border shadow-lg"
- @locations.each do |location|
li class="block px-4 py-2 text-gray-3 hover:bg-seafoam" data-action="click->geolocation#updateLocation"
= location
li class="flex items-center block px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition"
li class="block flex items-center px-4 py-1 font-medium text-gray-3 border-gray-5 hover:bg-seafoam focus:bg-seafoam" data-action="click->geolocation#getCurrentPosition"
= inline_svg_tag "my-location.svg", size:"12*12", class:"h-7 mr-2 fill-current text-gray-3"
| Search near me
div
Expand All @@ -47,8 +47,8 @@ main
section class="pt-6 text-gray-2 sm:pt-10"
h2 class="pb-8 text-2xl font-bold text-center uppercase sm:pb-5"
| How it works
div class="flex flex-col mx-auto max-w-7xl lg:flex-row justify-evenly xl:px-16"
div class="max-w-xs mx-auto text-center mb-9 lg:mb-0"
div class="flex flex-col justify-evenly mx-auto max-w-7xl lg:flex-row xl:px-16"
div class="mx-auto mb-9 max-w-xs text-center lg:mb-0"
div class="flex items-end mb-2 h-36"
= inline_svg_tag 'search-needs.svg', class:'mx-auto'
h5 class="pb-3 font-bold uppercase md:pb-1"
Expand All @@ -62,15 +62,15 @@ main
| 2. Connect with organizations
p.px-8
| Browse through nonprofit profiles to find the one that matches your needs.
div class="max-w-xs mx-auto text-center"
div class="mx-auto max-w-xs text-center"
div class="flex items-end mb-2 h-36"
= inline_svg_tag 'help.svg', class:'mx-auto'
h5 class="pb-3 font-bold uppercase md:pb-1"
| 3. Receive help
p class="px-5"
| Found a nonprofit that meets your needs criteria? Reach out through the contact information provided on their individual profiles.
section class="flex flex-col items-center px-6 overflow-hidden"
div class="relative max-w-xl pt-32 mb-14"
section class="flex overflow-hidden flex-col items-center px-6"
div class="relative pt-32 mb-14 max-w-xl"
h2 class="mb-6 text-2xl font-bold text-center uppercase text-gray-2 dark:text-white"
| Browse by causes
p class="text-center"
Expand All @@ -79,40 +79,40 @@ main
| Scroll through listings to browse for nonprofits meeting your needs.
= inline_svg_tag "browse-causes-green-blur.svg", class: "absolute -left-1/4 top-0 -z-1 w-full", aria_hidden: true
= inline_svg_tag "browse-causes-purple-blur.svg", class: "absolute -right-1/4 top-0 -z-1 w-full", aria_hidden: true
nav class="w-full max-w-5xl mb-9"
nav class="mb-9 w-full max-w-5xl"
= render CausesList::Component.new(causes: Cause.top(limit: 9), \
icon_svg_options: {class: "w-1/2", aria_hidden: true}, \
list_options: { class: "grid grid-cols-auto-fill-6.75 justify-items-center gap-y-6"}, \
cause_options: { class: "group interactive-btn w-24 text-sm transition-colors hover:text-blue-medium font-medium" }, \
icon_wrapper_options: { class: "thick-icon w-20 h-20 transition-colors group-hover:bg-blue-medium", aria_hidden: true})

= link_to "see more", discover_path << "/#causes-section", class: "px-10 py-4 rounded-md mb-32 text-white leading-5 uppercase tracking-wider font-bold bg-blue-dark transition-colors hover:bg-blue-medium"
section class="flex flex-col mx-auto md:flex-row max-w-7xl justify-evenly sm:mb-1 525px:pb-20 md:px-8"
div class="relative flex flex-col justify-center mb-16 text-center md:mx-0 md:mb-0"
div class="max-w-sm py-4 mx-auto"
section class="flex flex-col justify-evenly mx-auto max-w-7xl md:flex-row sm:mb-1 525px:pb-20 md:px-8"
div class="flex relative flex-col justify-center mb-16 text-center md:mx-0 md:mb-0"
div class="py-4 mx-auto max-w-sm"
h2 class="px-10 pb-4 text-2xl font-bold text-center text-gray-2"
| We want to make living and giving simpler.
p class="px-4 pt-3 pb-6 md:pb-10"
| We are a nonprofit search tool connecting you with resources in your community.
= link_to "Start your search", '#search', class:'c-button inline-block text-white bg-blue-medium'
div class="hidden sm:block sm:absolute -top-20 -left-32 -z-1"
div class="hidden -top-20 -left-32 sm:block sm:absolute -z-1"
= inline_svg_tag 'lw-desk-blur-left.svg'
div class="right-0 hidden overflow-hidden sm:block sm:absolute -top-40 xl:-right-28 -z-1"
div class="hidden overflow-hidden right-0 -top-40 sm:block sm:absolute xl:-right-28 -z-1"
= inline_svg_tag 'lw-desk-blur-right.svg'
div class="absolute -left-6 -z-1 sm:hidden"
= inline_svg_tag 'lw-mob-blur-left.svg', size:'320*428'
div class="absolute right-0 overflow-visible -top-40 -z-1 sm:hidden"
div class="overflow-visible absolute right-0 -top-40 -z-1 sm:hidden"
= inline_svg_tag 'lw-mob-blur-right.svg'
div class="flex justify-center px-0"
= image_tag 'board-members.png', class:"525px:rounded-xl object-cover h-350px sm:h-full"
section class="relative bg-seafoam"
div class="relative max-w-md pb-20 mx-auto text-center"
h2 class="px-5 pt-20 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark pb-11"
div class="relative pb-20 mx-auto max-w-md text-center"
h2 class="px-5 pt-20 pb-11 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark"
| Are you a nonprofit organization interested in joining our listings?
= link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark'
div class="top-0 left-0 hidden -z-1 sm:block sm:absolute"
div class="hidden top-0 left-0 -z-1 sm:block sm:absolute"
= inline_svg_tag 'lc-desk-blur-left.svg'
div class="top-0 right-0 hidden -z-1 sm:block sm:absolute"
div class="hidden top-0 right-0 -z-1 sm:block sm:absolute"
= inline_svg_tag 'lc-desk-blur-right.svg'
div class="absolute bottom-0 right-0 -z-1 sm:hidden"
div class="absolute right-0 bottom-0 -z-1 sm:hidden"
= inline_svg_tag 'lc-mob-blur-right.svg'

0 comments on commit ceaddd4

Please sign in to comment.