Feature | Geolocation expansion atlantic

.gitignore

@@ -44,3 +44,6 @@ yarn-debug.log*
 database_consistency*
 
 .DS_Store
+
+# Ignore asdf version files
+/.tool-versions

app/components/navbar/component.html.slim

@@ -1,42 +1,70 @@
 nav id="main-navbar" data-controller="navbar--component" class="#{non_sticky_paths ? "" : "sticky top-0 z-30"}"
-  .navbar.navbar--mobile class="h-20"
-    .navbar--mobile__menu class="flex items-center"
-      button data-action="click->navbar--component#openSideNavBar"
-        = inline_svg_tag 'menu.svg', size:'24*24'
-    = link_to root_path
-      = inline_svg_tag 'logo.svg', size:'130*32'
+  .navbar.navbar--mobile class="flex justify-between items-center w-full h-20"
+    div class="flex items-center"
+      .navbar--mobile__menu class="flex items-center"
+        button data-action="click->navbar--component#openSideNavBar"
+          = inline_svg_tag 'menu.svg', size:'24*24'
+      = link_to root_path, class: "ml-6"
+        = inline_svg_tag 'logo.svg', size:'130*32'
+    div class="inline-block flex relative items-center ml-4 font-medium cursor-pointer sm:" 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 data-action="dropdown#toggle:stop" class="flex justify-end items-center border-b-2 text-sm-underlined-color text-seafoam border-seafoam"
+          = inline_svg_tag "location-dot.svg", size:"9*9", class:"h-7 mr-3 fill-current"
+          p data-geolocation-target="currentLocation"
+            = @current_location[:city]
+        div data-dropdown-target="menu" class="flex hidden absolute right-0 top-4 z-10 mt-5 w-screen max-w-max"
+          ul class="overflow-hidden text-sm bg-white rounded border shadow-lg w-42"
+            - @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="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
+
   .navbar.navbar--desktop
     ul class="flex items-center"
       = link_to root_path
         = inline_svg_tag 'logo.svg', size:'130*32', class:'mr-2 mid:mr-7 lg:mr-11'
       div class="flex w-full"
-        li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/search") ? "text-seafoam border-seafoam" : ""}"
+        li class="mr-1 mid:mr-5 lg:mr-9 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/search") ? "text-seafoam border-seafoam" : ""}"
           = link_to 'Search', search_path
-        li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/nonprofit" ? "text-seafoam border-seafoam" : ""}"
+        li class="mr-1 mid:mr-5 lg:mr-9 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/nonprofit" ? "text-seafoam border-seafoam" : ""}"
           = link_to 'Add a Nonprofit', new_nonprofit_request_path
-        li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/about_us" ? "text-seafoam border-seafoam" : ""}"
+        li class="mr-1 mid:mr-5 lg:mr-9 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'] == "/about_us" ? "text-seafoam border-seafoam" : ""}"
           = link_to 'About Us', about_us_path
-        li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/discover") ? "text-seafoam border-seafoam" : ""}"
+        li class="mr-1 mid:mr-5 lg:mr-9 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO'].include?("/discover") ? "text-seafoam border-seafoam" : ""}"
           = link_to 'Discover', discover_path
-        li class="mr-2 mid:mr-7 lg:mr-11 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO']  == "/donate" ? "text-seafoam border-seafoam" : ""}"
+        li class="mr-1 mid:mr-5 lg:mr-9 text-sm-underlined-color font-medium border-b-2 border-transparent #{request.env['PATH_INFO']  == "/donate" ? "text-seafoam border-seafoam" : ""}"
           = link_to donate_path, class:"flex" do
             div class='mr-2'
               | Donate
             div class='flex items-center'
               = inline_svg_tag 'heart.svg', size:'9*9', class:'mt-1 fill-current text-red'
     ul class='flex items-center'
       - if @signed_in
-        li = link_to "My Account", my_account_path, class:"text-base font-bold mr-1 lg:mr-6 border-b-2 border-transparent #{request.env['PATH_INFO'] == "/my_account" ? "text-seafoam border-seafoam" : ""}"
+        li = link_to "My Account", my_account_path, class:"text-base font-bold mr-1 lg:mr-6 border-b-2 border-transparent md:text-sm #{request.env['PATH_INFO'] == "/my_account" ? "text-seafoam border-seafoam" : ""}"
       - else
         li = link_to "Sign in", signin_path, class:'text-base font-bold mr-2 mid:mr-4 lg:mr-6'
         li = link_to "Create Account", signup_path, class:'c-button py-2.5 px-5 text-white bg-blue-medium'
+      li class="inline-block flex relative items-center mx-2 w-36 font-medium cursor-pointer md:w-28" 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 data-action="dropdown#toggle:stop" class="flex items-center border-b-2 text-sm-underlined-color text-seafoam border-seafoam"
+          = inline_svg_tag "location-dot.svg", size:"9*9", class:"h-7 mr-3 fill-current"
+          p data-geolocation-target="currentLocation"
+            = @current_location[:city]
+        div data-dropdown-target="menu" class="flex hidden absolute right-0 top-4 z-10 mt-5 w-screen max-w-max"
+          ul class="overflow-hidden text-sm bg-white rounded border shadow-lg w-42"
+            - @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="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
 
-  .sidebar class='fixed top-0 bottom-0 left-0 right-0 z-10 hidden h-screen overflow-y-hidden bg-gray-9' data-navbar--component-target="sideNavBar"
+  .sidebar class='hidden overflow-y-hidden fixed top-0 right-0 bottom-0 left-0 z-10 h-screen bg-gray-9' data-navbar--component-target="sideNavBar"
     section class="pt-8 pb-4 px-7 #{ @signed_in ? 'h-4/5' : 'h-3/4' }"
       div class='flex justify-end pb-6'
         button class='p-2.5' data-action="navbar--component#collapseSideNavBar"
           = inline_svg_tag 'x-icon.svg', size:'12*12', class:"fill-current text-gray-1"
-      ul class='flex flex-col text-2xl font-bold text-center gap-9 text-gray-3'
+      ul class='flex flex-col gap-9 text-2xl font-bold text-center text-gray-3'
         - if @signed_in
           li = link_to "My Account", my_account_path
         li = link_to "Search", search_path

app/components/navbar/component.rb

@@ -1,17 +1,11 @@
-# frozen_string_literal: true
-
-# navbar view component
-# rubocop:disable Style/ClassAndModuleChildren
-# rubocop:disable Lint/MissingSuper
 class Navbar::Component < ApplicationViewComponent
-  def initialize(signed_in:)
+  def initialize(signed_in:, current_location:, locations: @locations)
+    @current_location = current_location
     @signed_in = signed_in
+    @locations = locations
   end
 
   def non_sticky_paths
     request.env["PATH_INFO"] == "/searches" || request.env["PATH_INFO"] == "/my_account"
   end
 end
-
-# rubocop:enable Style/ClassAndModuleChildren
-# rubocop:enable Lint/MissingSuper

app/components/navbar/component.scss

@@ -12,15 +12,6 @@
   }
 
   &--mobile {
-    &::after {
-      content: "";
-      flex: 1;
-    }
-
-    &__menu {
-      flex: 1;
-    }
-
     @media (min-width: 768px) {
       display: none;
       flex: none;
@@ -42,7 +33,7 @@
     }
 
     @media (min-width: 1280px) {
-      padding: 0 149px 0 139px;
+      padding: 0 0 0 139px;
     }
   }
 }

app/components/search_bar/component.html.erb

@@ -1,32 +1,57 @@
-<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 w-full max-w-xl">
-    <span class="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
-      <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
-    </span>
-
-    <%= @form.search_field(
-      :keyword,
-      value: "#{ params.dig('search', 'keyword') }",
-      class: "block px-10 h-46px w-full py-3.5 px-4 rounded-6px text-base text-gray-3 focus:outline-none",
-      id: "search-keyword-input",
-      placeholder: "Try \"Mental Health Nonprofits\"",
-      data: {
-        action: "input->search#displayClearKeywordButton",
-        search_target: "keywordInput",
-      }
-    ) %>
-
-    <button
-    type="button"
-    class="absolute inset-y-0 right-0 px-3 <%= "hidden" unless params.dig('search', 'keyword').present? %>"
-    data-search-target="clearKeywordButton"
-    data-action="click->search#clearKeywordInput">
-      <%= inline_svg_tag "x-icon.svg", class: "w-3.5 h-3.5 icon", aria_hidden: true %>
-    </button>
+  <div class="flex relative items-center w-full max-w-xl divide-x">
+    <div class="flex w-full h-46px">
+      <div class="flex items-center w-full">
+        <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(
+          :keyword,
+          value: "#{ params.dig('search', 'keyword') }",
+          class: "rounded-l-md border-none block px-10 h-46px w-full py-3.5 px-4 text-base text-gray-3 focus:outline-none",
+          id: "search-keyword-input",
+          placeholder: "Try \"Mental Health Nonprofits\"",
+          data: {
+            action: "input->search#displayClearKeywordButton",
+            search_target: "keywordInput",
+          }
+        ) %>
+      </div>
+      <button
+        type="button"
+        class="relative inset-y-0 right-0 px-3 bg-white h-full <%= "hidden" unless params.dig('search', 'keyword').present? %>"
+        data-search-target="clearKeywordButton"
+        data-action="click->search#clearKeywordInput">
+        <%= inline_svg_tag "x-icon.svg", class: "w-3.5 h-3.5 icon", aria_hidden: true %>
+      </button>
+    </div>
+    <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 md:w-52" 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="flex absolute right-0 top-11 w-52 bg-white 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="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>
+        </ul>
+      </div>
+    </div>
+    <%= @form.hidden_field :lat, value: @current_location[:latitude], data: { geolocation_target:  "formLatitude" }  %>
+    <%= @form.hidden_field :lon, value: @current_location[:longitude], data: { geolocation_target:  "formLongitude" }  %>
   </div>
-
   <%# Search Button %>
   <%= @form.submit(
     'Search',

app/components/search_bar/component.rb

@@ -1,13 +1,10 @@
-# frozen_string_literal: true
-
-# search bar view component
-# rubocop:disable Lint/MissingSuper
-# rubocop:disable Style/Documentation
 module SearchBar
   class Component < ApplicationViewComponent
-    def initialize(form:, search:)
+    def initialize(form:, search:, current_location:, locations:)
       @form = form
       @search = search
+      @current_location = current_location
+      @locations = locations
     end
 
     def options
@@ -18,5 +15,3 @@ def options
     end
   end
 end
-# rubocop:enable Lint/MissingSuper
-# rubocop:enable Style/Documentation

app/components/search_pills/component.html.slim

@@ -2,50 +2,51 @@ div class="w-full bg-gray-9"
   div data-controller="tabs" data-tabs-active-tab=("border-b-4 border-blue-medium")
     div class="flex"
       / Clear-Counter button
-      span class="flex justify-center items-center w-14 pl-5 py-3 pr-2 text-xs bg-blue-pale"
+      span class="flex items-center justify-center py-3 pl-5 pr-2 text-xs w-14 bg-blue-pale"
         span class="inline-flex hidden items-center px-1 py-0.5 border border-blue-medium rounded-full bg-white" data-search-target="pillsCounterWrapper"
           span data-search-target="pillsCounter" class="mr-0.5"
           button type="button" data-action="search#clearCheckedPills"
             = inline_svg_tag "x-icon.svg", class: 'h-2 w-2 fill-current stroke-current stroke-1 text-blue-medium ml-1 relative'
         = inline_svg_tag "solid_filters.svg", class: 'h-4 w-4 fill-current text-gray-2 -ml-0.5 relative', data: { 'search-target': "filtersIcon" }
       / Tabs
-      ul class="flex flex-1 gap-x-6 pl-5 pr-6 text-sm list-none overflow-x-auto overflow-y-hidden bg-blue-pale text-gray-2"
+      ul class="flex flex-1 pl-5 pr-6 overflow-x-auto overflow-y-hidden text-sm list-none gap-x-6 bg-blue-pale text-gray-2"
         - @tabs_labels.each do |tab_label|
           li data-action="click->tabs#change" data-tabs-target="tab"
             a class="inline-block py-3 whitespace-nowrap" href="#" = tab_label
         li data-action="click->modal#open"
           button class="inline-block py-3 whitespace-nowrap" type="button" id="advanced-filters-button"
             | Advanced Filters
-            span class="relative hidden w-2 h-2 rounded-full bg-salmon ml-1 mb-2" id="appliedIcon"
+            span class="relative hidden w-2 h-2 mb-2 ml-1 rounded-full bg-salmon" id="appliedIcon"
 
     / Panels
     div class="bg-white"
       / Causes
-      div class="flex flex-wrap gap-x-2 gap-y-3 hidden max-h-28 py-4 px-6 border-l border-b border-r overflow-y-auto" data-tabs-target="panel"
+      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
         - @causes.each do |cause|
           = render SearchPills::Pill::Component.new(name: "search[causes][]", value: cause.name, checked: @params.dig(:search, :causes)&.include?(cause.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Location
       div class="flex flex-col hidden border-b md:flex-row md:items-center" data-tabs-target="panel"
-        div class="py-4 pl-6 text-gray-2 text-sm"
+        div class="py-4 pl-6 text-sm text-gray-2"
           span class="inline-flex items-center"
             = inline_svg_tag "location-dot.svg", class: "h-3 w-3 fill-current text-blue-medium mr-1"
-            | Nashville
+            p data-geolocation-target="currentLocation"
+              = @current_location[:city]
         div class="flex w-full md:w-auto md:py-3.5 md:pl-7"
           - @radii_in_miles.each do |radius|
             = render SearchPills::Button::Component.new(name: "search[distance]", value: miles_to_km(radius), checked: @params.dig(:search, :distance) == miles_to_km(radius).to_s, copy: radius == "Any" ? radius : "#{radius} mi")
       / Services
-      div class="flex flex-wrap gap-x-2 gap-y-3 hidden max-h-28 py-4 px-6 border-l border-b border-r overflow-y-auto" data-tabs-target="panel"
+      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
         - @services.each do |service|
           = render SearchPills::Pill::Component.new(name: "search[services][#{service.cause.name}][]", value: service.name, checked: @params.dig('search', 'services', service.cause.name)&.include?(service.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Populations Served
-      div class="flex flex-wrap gap-x-2 gap-y-3 hidden max-h-28 py-4 px-6 border-l border-b border-r overflow-y-auto" data-tabs-target="panel"
+      div class="flex flex-wrap hidden px-6 py-4 overflow-y-auto border-b border-l border-r gap-x-2 gap-y-3 max-h-28" data-tabs-target="panel"
         - @beneficiary_subcategories.each do |subcategory|
           = render SearchPills::Pill::Component.new(name: "search[beneficiary_groups][#{subcategory.beneficiary_group.name}][]", value: subcategory.name, checked: @params.dig('search', 'beneficiary_groups', subcategory.beneficiary_group.name)&.include?(subcategory.name), options: { multiple: true })
         = render SearchPills::MoreFiltersButton::Component.new
       / Hours
-      div class="flex hidden gap-x-2 w-full py-4 px-6 border-l border-b border-r" data-tabs-target="panel"
+      div class="flex hidden w-full px-6 py-4 border-b border-l border-r gap-x-2" data-tabs-target="panel"
         = render SearchPills::Pill::Component.new(name: "search[open_now]", value: true, checked: @params.dig('search', 'open_now') == 'true') do
           | Open Now
         = render SearchPills::Pill::Component.new(name: "search[open_weekends]", value: true, checked: @params.dig('search', 'open_weekends') == 'true') do