diff --git a/app/components/discover_nonprofit_card/head/component.html.slim b/app/components/discover_nonprofit_card/head/component.html.slim index 3a57a915a..311378cb8 100644 --- a/app/components/discover_nonprofit_card/head/component.html.slim +++ b/app/components/discover_nonprofit_card/head/component.html.slim @@ -3,12 +3,11 @@ div class="flex gap-x-5" = image_tag @location.organization.logo, class: "w-20 h-20 object-contain", alt: "logo" div class="flex flex-col" // name and verified icon - div class="flex justify-between items-start mb-1.5" - h4 class="w-fit font-semibold text-lg leading-6 text-gray-2" + div class="flex items-center mb-1.5" + h4 class="text-lg font-semibold leading-6 w-fit text-gray-2" = link_to(@location.name, location_path(@location), target: "_blank") - if @location.organization.verified? - span aria-hidden="true" class="ml-1" - = inline_svg_tag('verified_nonprofit_check.svg') + = render partial: "locations/verified_checkmark", locals: { position: "right-0" } // maps and phone - if @location.public_address? = link_to(@location.formatted_address, @location.link_to_google_maps, class: "w-3/4", target: "_blank") diff --git a/app/components/location_infowindow/component.html.slim b/app/components/location_infowindow/component.html.slim index 24ec56d32..f78920b74 100644 --- a/app/components/location_infowindow/component.html.slim +++ b/app/components/location_infowindow/component.html.slim @@ -7,11 +7,11 @@ div = image_tag @location.organization.logo, class: "w-3/5 h-3/5 m-auto" // Name -div +div class="flex items-center gap-1" a id="pointer" = link_to @location.name, location_path(@location), target:"_blank", class: "text-small font-bold text-gray-2" - if @location.organization.verified? - = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1 align-text-bottom inline" + = render partial: "locations/verified_checkmark", locals: { position: "right-0" } // Address, website, phone, and availability - if @location.public_address? diff --git a/app/components/map_left_popup/component.html.slim b/app/components/map_left_popup/component.html.slim index fff2a98db..1fffa2c39 100644 --- a/app/components/map_left_popup/component.html.slim +++ b/app/components/map_left_popup/component.html.slim @@ -1,14 +1,14 @@ -div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@result.id}_popup" data-places-target="popup" +div class="relative flex flex-col gap-2 bg-white p-7 rounded-6px" id="loc_#{@result.id}_popup" data-places-target="popup" div class="flex items-start gap-1 mb-3" = image_tag @result.organization.logo, class: "flex-shrink-0 w-1/5 h-1/5 mt-1" div class="flex flex-col ml-2" - div + div class="flex items-center" = link_to location_path(@result), class: "font-semibold text-sm lg:text-base cursor-pointer", target: "_blank" do = @result.organization.name - if @result.organization.verified? - = inline_svg_tag 'verified_nonprofit_check.svg', class: 'w-4 h-4 ml-1 align-text-bottom inline' + = render partial: "locations/verified_checkmark", locals: { position: "right-0" } - if @result.public_address? - p class="text-gray-500 lg:text-sm text-xs" id="pointer" + p class="text-xs text-gray-500 lg:text-sm" id="pointer" = link_to @result.formatted_address, @result.link_to_google_maps, target: "blank" // Designations = render DesignationTag::Component.new(@result.organization) @@ -23,9 +23,9 @@ div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res div class="pt-4 mb-4 border-t border-gray-8" = render DiscoverNonprofitCard::ActionsMenu::Component.new(user: @current_user, location: @result) - div class="text-left pt-4 border-t border-gray-8" + div class="pt-4 text-left border-t border-gray-8" - unless @result.causes.empty? - h3 class="uppercase text-sm font-bold" causes + h3 class="text-sm font-bold uppercase" causes = render CausesList::Component.new( \ causes: @result.organization.causes.uniq, \ tooltip: true, \ @@ -37,12 +37,12 @@ div class="relative flex flex-col gap-2 p-7 bg-white rounded-6px" id="loc_#{@res div class="pt-4 border-t border-gray-8" = render WorkingHours::Component.new(result: @result) - if @result.images.attached? - div class="pt-4 border-t border-gray-8 mt-4" + div class="pt-4 mt-4 border-t border-gray-8" h3 class="text-sm font-bold text-black uppercase" photos = render DiscoverNonprofitCard::ImagesCarousel::Component.new(images: @result.images, \ carousel_container_options: { class: "rounded-sm h-44 mt-4" }) - if @result.organization.mission_statement_en.present? - div class="border-t border-gray-8 my-4" + div class="my-4 border-t border-gray-8" div class="flex flex-col text-left" h3 class="text-sm font-bold text-black uppercase" | MISSION - WHAT WE DO diff --git a/app/components/result_card/component.html.erb b/app/components/result_card/component.html.erb index e619061ac..df81dd3cf 100644 --- a/app/components/result_card/component.html.erb +++ b/app/components/result_card/component.html.erb @@ -8,17 +8,17 @@
<%# Org name %> -
+
<%= helpers.title_link(@turbo_frame, @id, @title) %> <% if @verified %> - <%= inline_svg_tag 'verified_nonprofit_check.svg', class: 'w-4 h-4 ml-1 align-text-bottom inline' %> + <%= render partial: "locations/verified_checkmark" %> <% end %>
<%= render SaveButton::Component.new(user: @current_user, location: Location.find(@id), simplified: true) %>
-
+
<% 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