<% if @public_address %>
<%= link_to @address, @link_to_google_maps, target: "blank" %>
<% end %>
@@ -43,10 +43,10 @@
<%= formated_description %>
+
<% unless @causes.empty? %>
- Causes
+ Causes
<%= render CausesList::Component.new( \
causes: @causes, \
tooltip: true, \
diff --git a/app/views/locations/_verified_checkmark.html.slim b/app/views/locations/_verified_checkmark.html.slim
new file mode 100644
index 000000000..03f96ff6b
--- /dev/null
+++ b/app/views/locations/_verified_checkmark.html.slim
@@ -0,0 +1,7 @@
+div data-controller="popover"
+ span data-action="mouseenter->popover#show mouseleave->popover#hide" data-popover-target="popover"
+ = inline_svg_tag 'verified_nonprofit_check.svg', class: "h-4 ml-1"
+ template data-popover-target="content"
+ div data-popover-target="card" class="absolute #{local_assigns[:position].presence || "" } z-10 px-3 py-1 mx-1 text-xs text-center text-white rounded-sm bg-gray-2 bg-opacity-90"
+ p
+ = "Information verified by nonprofit."
\ No newline at end of file
diff --git a/app/views/locations/show.html.slim b/app/views/locations/show.html.slim
index d857c77d8..e16f1c8aa 100644
--- a/app/views/locations/show.html.slim
+++ b/app/views/locations/show.html.slim
@@ -14,13 +14,7 @@ div class=""
div class="flex justify-center items-center mb-2.5"
h5 class="mb-1 text-lg font-bold text-center"
= @location.name
- div data-controller="popover"
- span data-action="mouseenter->popover#show mouseleave->popover#hide" data-popover-target="popover"
- = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1"
- template data-popover-target="content"
- div data-popover-target="card" class="absolute px-3 py-1 mx-1 text-xs text-center text-white rounded-sm bg-gray-2 bg-opacity-90"
- p
- = "Information verified by nonprofit."
+ = render partial: "locations/verified_checkmark"
p class="text-xs text-center font-base text-gray-4"
= "This nonprofit has verified the listed information."
- else
@@ -139,7 +133,7 @@ div class=""
a class="font-bold text-small text-gray-2"
| #{@location.organization.name}
- if @location.organization.verified?
- = inline_svg_tag 'verified_nonprofit_check.svg', class: "align-text-bottom inline w-4 h-4 ml-1"
+ = render partial: "locations/verified_checkmark", locals: { position: "right-0" }
p class="text-xs text-gray-4"
| #{@location.address}
p class="text-xs text-gray-4"
diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
index 4ac0068cb..0ac4998be 100644
--- a/app/views/my_accounts/show.html.slim
+++ b/app/views/my_accounts/show.html.slim
@@ -120,7 +120,7 @@ div class="w-full h-full bg-white"
span class="flex items-center text-base font-medium text-grey-2"
| #{organization.name}
- if organization.verified?
- = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1 mt-1"
+ = render partial: "locations/verified_checkmark"
= link_to "Edit", edit_organization_path(organization), class:"text-blue-medium"
- else
diff --git a/app/views/organizations/edit.html.slim b/app/views/organizations/edit.html.slim
index ada6c0760..1b0eebfe1 100644
--- a/app/views/organizations/edit.html.slim
+++ b/app/views/organizations/edit.html.slim
@@ -4,21 +4,21 @@ div class="w-full h-full bg-grey-9"
| Edit Page
div class="flex items-center"
- h2 class="font-sans text-xl text-gray-2 mb-1"
+ h2 class="mb-1 font-sans text-xl text-gray-2"
= @organization.name
- if @organization.verified?
- = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1"
+ = render "locations/verified_checkmark"
div class="my-4 border-t border-t-blue-pale"
- if @organization.errors.any?
- p class="text-red-500 italic font-semibold"
+ p class="italic font-semibold text-red-500"
| Please review the problems below:
ul
- @organization.errors.full_messages.each do |message|
- li class="text-red-500 text-sm"
+ li class="text-sm text-red-500"
= "- #{message}"
= form_for @organization, data: { controller: "form-validation" } do |f|
section class="text-gray-2"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'star.svg', class: "w-4 h-4 mr-1"
| General Information
p class="text-sm leading-5 text-gray-4"
@@ -63,9 +63,9 @@ div class="w-full h-full bg-grey-9"
= f.label :logo, class: "block text-sm text-gray-3 font-medium my-2"
div data-controller="logo" class="flex flex-row"
= image_tag url_for(@organization.logo), class: "h-24 w-24 border border-gray-8 rounded mb-2 border-2 border-gray-5 object-contain", data: { target: "logo.output" }
- label class=" ml-4 h-full"
+ label class="h-full ml-4 "
= f.file_field :logo, accept: 'image/png,image/jpeg', data: { target: "logo.input", action: "logo#readURL" }, class: "invisible"
- div class="border border-gray-5 rounded px-2 py-1 text-md text-gray-3 w-fit mb-2"
+ div class="px-2 py-1 mb-2 border rounded border-gray-5 text-md text-gray-3 w-fit"
| Change
div class="text-body-2 text-gray-2"
| Maximum size of 5MB
@@ -96,7 +96,7 @@ div class="w-full h-full bg-grey-9"
= f.label :volunteer_availability_false, "No", class: "text-sm text-black"
div class="mt-6 #{f.object.volunteer_availability? ? '' : 'hidden'}" data-toggle-target="toggleable"
- div class="text-sm text-gray-4 mb-1"
+ div class="mb-1 text-sm text-gray-4"
p class="mb-1"
| If "Yes" is indicated but no link is provided, then only the volunteer tag appears (no volunteer button).
p If "Yes" is indicated and a link is provided, then both the volunteer tag and button appear.
@@ -104,9 +104,9 @@ div class="w-full h-full bg-grey-9"
= f.label :volunteer_link, class: "block text-sm text-gray-3 font-medium"
= f.text_field :volunteer_link, { class: "block h-46px mt-1 h-full w-full py-0 px-4 rounded-6px border-gray-5 text-base text-gray-3 focus:ring-blue-medium focus:border-blue-medium" }
- div class="my-4 border-t mt-6 border-t-blue-pale"
+ div class="my-4 mt-6 border-t border-t-blue-pale"
section class="mt-6 text-gray-2" data-controller="toggle"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'list.svg', class: "w-4 h-4 mr-1"
| Organization Information
@@ -153,9 +153,9 @@ div class="w-full h-full bg-grey-9"
= f.label :tagline_es, "Services - How We Do It (ES)", class: "block text-sm text-gray-3 font-medium"
= f.text_area :tagline_es, rows: 5, class: "block mt-1 w-full p-4 rounded-6px border-gray-5 text-base text-gray-3 focus:ring-blue-medium focus:border-blue-medium"
- div class="my-4 border-t mt-6 border-t-blue-pale"
+ div class="my-4 mt-6 border-t border-t-blue-pale"
section class="mt-6 text-gray-2"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'heart_outlined.svg', class: "w-4 h-4 mr-1"
| Causes
p class="max-w-lg text-sm text-gray-4"
@@ -169,9 +169,9 @@ div class="w-full h-full bg-grey-9"
= label_tag "", "* Which causes best describe your organization’s work?", class: "block text-sm text-gray-3 font-medium"
= render SelectMultiple::Component.new(f: f, klass: "Cause", items: @causes, selected: @organization.causes.pluck(:name), placeholder: 'Write causes', required: true)
- div class="my-4 border-t mt-6 border-t-blue-pale"
+ div class="my-4 mt-6 border-t border-t-blue-pale"
section class="mt-6 text-gray-2"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'user_group.svg', class: "w-4 h-4 mr-1"
| Populations Served
p class="max-w-lg text-sm text-gray-4"
@@ -183,7 +183,7 @@ div class="w-full h-full bg-grey-9"
div class="grid grid-cols-12 gap-6 mt-8"
div class="col-span-12 lg:col-span-6 md:col-span-7" data-controller="options general-population" data-options-options-value=@beneficiaries data-general-population-disabled-class="pointer-events-none"
= f.label :beneficiary_subcategories, "Which target populations (beneficiaries) does your organization serve?", class: "block text-sm text-gray-3 font-medium"
- p class="text-sm text-gray-4 mt-2 mb-5"
+ p class="mt-2 mb-5 text-sm text-gray-4"
| Selections should only be made if your organization specifically serves that group through your programs. If your organization generally serves all populations, check the box
| “We generally serve all populations” below. This will then appear on your organizations profile under Populations Served.
| If you select the check box below for all populations served, then the field for specific populations served will be disabled.
@@ -200,14 +200,14 @@ div class="w-full h-full bg-grey-9"
- else
- tags = @organization.tags.pluck(:name).join(', ')
= f.label :tags_attributes, "Additional keywords to describe my organization’s work.", class: "block text-sm text-gray-3 font-medium"
- p class="text-sm text-gray-4 mt-1"
+ p class="mt-1 text-sm text-gray-4"
| Adding additional keywords will help users connect with your organization. Keywords will not appear on your nonprofit’s profile, but are useful for improving search results and SEO.
= f.text_field :tags_attributes, { data: { 'tags-target': 'output' }, placeholder:'Write some tags', value: tags, class: "flex flex-wrap tagify-look items-center min-h-46px bg-white text-xs mt-1 w-full px-4 rounded-6px border-gray-5 text-gray-3 focus:ring-blue-medium focus:border-blue-medium mt-6" }
- div class="my-4 border-t mt-6 border-t-blue-pale"
+ div class="my-4 mt-6 border-t border-t-blue-pale"
section data-controller="nested-form"
section class="mt-6 text-gray-2"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'office.svg', class: "w-4 h-4 mr-1"
| Main Location
p class="text-sm leading-5 text-gray-4"
@@ -221,7 +221,7 @@ div class="w-full h-full bg-grey-9"
= f.fields_for :locations do |location_form| %
div class="grid grid-cols-12 gap-6 mt-8 nested-fields" data-action="google-maps-callback@window->places#initMap" data-controller="places extend-toggle" data-places-imageurl-value="#{asset_path 'markergc.png'}"
- if location_form.index == 1
- div class="col-span-12 lg:col-span-7 md:col-span-7 mt-12 text-gray-2"
+ div class="col-span-12 mt-12 lg:col-span-7 md:col-span-7 text-gray-2"
h6 class="pb-2 text-lg font-medium leading-7"
| Additional Locations
p class="text-sm leading-5 text-gray-4"
@@ -269,13 +269,13 @@ div class="w-full h-full bg-grey-9"
div class="hidden col-span-3 md:flex"
= location_form.label :youtube_video_link, "YouTube Video Link", class:"block text-sm text-gray-3 font-medium pt-4"
- p class="text-sm leading-5 text-gray-4 mt-1"
+ p class="mt-1 text-sm leading-5 text-gray-4"
| The listed YouTube video will appear on your nonprofit’s page.
= location_form.text_field :youtube_video_link, class: "block h-46px mt-1 h-full w-full py-0 px-4 rounded-6px border-gray-5 text-base text-gray-3 focus:ring-blue-medium focus:border-blue-medium"
div class="hidden col-span-3 md:flex"
= location_form.label :images, "Location Images", class:"block text-sm text-gray-3 font-medium pt-4"
- p class="text-sm leading-5 text-gray-4 mt-1"
+ p class="mt-1 text-sm leading-5 text-gray-4"
| The listed images will appear as a carousel on your nonprofit’s page. You can select multiple photos at once and press save at the bottom of the page when you are ready to upload.
- if location_form.object.images.attached?
div class="flex flex-wrap p-5 text-center"
@@ -283,7 +283,7 @@ div class="w-full h-full bg-grey-9"
div class="relative"
= link_to inline_svg_tag('trash.svg', class: 'absolute trash bottom-0 top-2.5 right-2.5'), url_for(controller: :organizations, action: :delete_upload, id: @organization.id, upload_id: image.id), data: { confirm: 'Are you sure?' }
= image_tag url_for(image), class: "block object-cover rounded-6px m-2 w-20 h-20 lg:w-40 lg:h-40"
- p class="text-sm text-gray-4 mt-1"
+ p class="mt-1 text-sm text-gray-4"
| For best image quality, please submit landscape photos in PNG format.
= location_form.file_field :images, multiple: true, class: "block mt-2 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
@@ -311,16 +311,16 @@ div class="w-full h-full bg-grey-9"
div class='my-3' data-controller="services" data-services-options-value=@services
div class="col-span-12 lg:col-span-5 md:col-span-7"
= label_tag "", "Services offered at this location", class:"text-sm font-medium leading-4 text-gray-2"
- p class="text-sm text-gray-4 mt-1"
+ p class="mt-1 text-sm text-gray-4"
| Email
a href="mailto:admin@givingconnection.org"
| admin@givingconnection.org
| if you would like to add a service not currently found in the list below.
= render SelectMultiple::Component.new(f: location_form, klass: "Service", items: @services, selected: location_form.object.location_services.map{ |location_service| location_service.service.name }, placeholder: "Write services")
- div class="col-span-12 lg:col-span-6 md:col-span-7 text-sm font-medium leading-4 text-gray-2 mt-4"
+ div class="col-span-12 mt-4 text-sm font-medium leading-4 lg:col-span-6 md:col-span-7 text-gray-2"
| Hours of Operation
- p class="text-sm text-gray-4 mt-2 mb-4"
+ p class="mt-2 mb-4 text-sm text-gray-4"
| Please specify your organization's standard operating hours by clicking "Edit Opening Hours" below. If your organization does not have standard operating hours, you can check one of the checkboxes below to indicate if your organization is 1) Always Open, 2) By Appointment Only, or 3) No Set Business Hours - Call to Inquire. Only one selection can be made. This selection will appear in the Hours of Operation section throughout the platform.
div[data-controller="modal" data-modal-allow-background-close="false"]
button type="button" class="flex justify-center px-6 py-3 mx-auto text-base font-medium hover:text-blue-medium text-gray-3" data-action="modal#open modal#readCheckboxesState"
@@ -329,8 +329,8 @@ div class="w-full h-full bg-grey-9"
span class="capitalize"
| edit opening hours
// Edit hours modal
- div class="fixed inset-0 flex items-center justify-center hidden w-full md:max-w-592px mx-auto animated fadeIn" data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" style="z-index: 9999;"
- div class="relative w-full max-h-screen px-6 pt-8 pb-11 text-base bg-white rounded shadow"
+ div class="fixed inset-0 flex items-center justify-center hidden w-full mx-auto md:max-w-592px animated fadeIn" data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" style="z-index: 9999;"
+ div class="relative w-full max-h-screen px-6 pt-8 text-base bg-white rounded shadow pb-11"
div class="flex justify-between w-full mb-4"
h6.pb-4.text-lg.font-semibold aria-level="7"
| Hours
@@ -343,16 +343,16 @@ div class="w-full h-full bg-grey-9"
| Please enter times for each day of the week to avoid an error message.
// For horizontal scrolling
div class="w-full my-10 overflow-x-auto"
- table class="schedule-editor table-fixed w-full text-left"
+ table class="w-full text-left table-fixed schedule-editor"
tbody
// column headers
tr class="text-left"
- th class="w-28 p-3 font-medium"
- th class="w-44 font-medium"
+ th class="p-3 font-medium w-28"
+ th class="font-medium w-44"
| Open time
- th class="w-44 font-medium"
+ th class="font-medium w-44"
| Close time
- th class="w-20 text-center font-medium"
+ th class="w-20 font-medium text-center"
| Closed
- Date::DAYNAMES.each_with_index do |day, index|
= location_form.fields_for :office_hours, location_form.object.office_hours.find_or_initialize_by(day: index) do |sched|
@@ -397,9 +397,9 @@ div class="w-full h-full bg-grey-9"
button class="block uppercase border mt-9 border-salmon text-salmon px-5 py-2.5 mx-auto rounded-6px mb-8" type='button' data-action="click->nested-form#add_association"
| + Add More Locations
- div class="my-4 border-t mt-6 border-t-blue-pale"
+ div class="my-4 mt-6 border-t border-t-blue-pale"
section class="mt-6 text-gray-2"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'like.svg', class: "w-4 h-4 mr-1"
| Social Media
p class="text-sm leading-5 text-gray-4"
@@ -443,17 +443,17 @@ div class="w-full h-full bg-grey-9"
div class="col-span-12 lg:col-span-6 md:col-span-7"
= social_media_form.label :blog, class: "block text-sm text-gray-3 font-medium"
= social_media_form.text_field :blog, { class: "block h-46px mt-1 h-full w-full py-0 px-4 rounded-6px border-gray-5 text-base text-gray-3 focus:ring-blue-medium focus:border-blue-medium" }
- div class="my-4 border-t mt-6 border-t-blue-pale"
+ div class="my-4 mt-6 border-t border-t-blue-pale"
section class="mt-6 text-gray-2"
div class="grid grid-cols-12 gap-6"
div class="col-span-12 lg:col-span-6 md:col-span-7"
- h3 class="text-lg font-medium leading-7 text-blue-medium flex items-center"
+ h3 class="flex items-center text-lg font-medium leading-7 text-blue-medium"
= inline_svg_tag 'verify.svg', class: "w-4 h-4 mr-1"
| Information Verification
- p class="text-sm leading-5 text-gray-4 mt-1"
+ p class="mt-1 text-sm leading-5 text-gray-4"
| Verifying your nonprofit’s profile allows users to see a green checkmark next to the nonprofit’s name throughout the platform. This indicates to users that the information is trusted and reliable.
div class="mt-8"
- p class="text-sm text-gray-3 font-medium"
+ p class="text-sm font-medium text-gray-3"
| Do you verify the listed information?
div class="flex items-center mt-3"
= f.check_box :verified, class: "h-4 w-4 mt-1 mr-2 rounded-6px text-base text-blue-medium focus:border-0 focus:ring-0 focus:ring-transparent", checked: @organization.verified