Remove custom ERB file, add campaigner profile and p2p button to campaign page
This commit is contained in:
Kasia Jarmołkowicz
Eric Schultz
parent
e948b0ce45
commit
0a5d78b7f4
7 changed files with 91 additions and 298 deletions
|
|
@ -1,78 +0,0 @@
|
|||
@import 'mixins';
|
||||
@import 'common/fundraisers';
|
||||
|
||||
main button, main a.js-contributeButton {
|
||||
background: #01a490 !important;
|
||||
}
|
||||
|
||||
main a.button {
|
||||
background: #0089d0 !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main .button.edit, main .button--tiny.edit {
|
||||
color: white;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
main > header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
body > .ymca-banner {
|
||||
margin: auto;
|
||||
width: 100vw;
|
||||
height: 120px;
|
||||
background-color: #01a490;
|
||||
}
|
||||
|
||||
main > header div.fundraisingHeader--image-container {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
img.fundraisingHeader--image-aspectRatio {
|
||||
width: 1200px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
main > .container {
|
||||
max-width: none;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.campaigner-profile {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.campaigner-profile > figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.campaigner-profile > figure > .avatar {
|
||||
flex-basis: 20%;
|
||||
}
|
||||
|
||||
.avatar > img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
clip-path: circle(50% at center);
|
||||
}
|
||||
|
||||
.campaigner-profile > figure > figcaption {
|
||||
flex-basis: 55%;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -103,6 +103,43 @@
|
|||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.campaigner-profile {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.campaigner-profile > figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: auto 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.campaigner-profile > figure > .avatar {
|
||||
flex-basis: 20%;
|
||||
min-width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.avatar > img {
|
||||
clip-path: circle(50% at center);
|
||||
}
|
||||
|
||||
.campaigner-profile > figure > figcaption {
|
||||
flex-basis: 40%;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.campaigner-profile .reason {
|
||||
flex-basis: 60%;
|
||||
}
|
||||
|
||||
.campaigner-profile .pastelBox-body {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.box,
|
||||
|
|
|
|||
|
|
@ -44,14 +44,6 @@ class CampaignsController < ApplicationController
|
|||
end
|
||||
|
||||
@campaign_background_image = FetchBackgroundImage.with_model(@campaign)
|
||||
|
||||
if @nonprofit.custom_layout.blank?
|
||||
respond_to do |format|
|
||||
format.html
|
||||
end
|
||||
else
|
||||
render template: "nonprofits/custom_campaign_layouts/" + @nonprofit.custom_layout
|
||||
end
|
||||
end
|
||||
|
||||
def activities
|
||||
|
|
@ -122,29 +114,6 @@ class CampaignsController < ApplicationController
|
|||
@profile = current_user.profile if current_user
|
||||
end
|
||||
|
||||
def custom_layout
|
||||
@campaign = current_campaign
|
||||
@timezone = Format::Timezone.to_proxy(current_nonprofit.timezone)
|
||||
if @campaign.deleted && !current_campaign_editor?
|
||||
redirect_to nonprofit_path(current_nonprofit)
|
||||
flash[:notice] = "Sorry, we couldn't find that campaign"
|
||||
return
|
||||
end
|
||||
@nonprofit = current_nonprofit
|
||||
@url = Format::Url.concat(root_url, @campaign.url)
|
||||
|
||||
if @campaign.parent_campaign
|
||||
@parent_campaign = @campaign.parent_campaign
|
||||
@peer_to_peer_campaign_param = @parent_campaign.id
|
||||
else
|
||||
@peer_to_peer_campaign_param = @campaign.id
|
||||
end
|
||||
|
||||
@campaign_background_image = FetchBackgroundImage.with_model(@campaign)
|
||||
|
||||
render template: "nonprofits/custom_campaign_layouts/safety_around_water"
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def check_nonprofit_status
|
||||
|
|
@ -160,7 +129,7 @@ class CampaignsController < ApplicationController
|
|||
|
||||
p2p_params = params.except(:nonprofit_id, :summary,:goal_amount)
|
||||
p2p_params.merge!(parent_campaign.child_params)
|
||||
|
||||
|
||||
base_slug = Format::Url.convert_to_slug "#{p2p_params[:name]}-#{profile.name}"
|
||||
algo = SlugP2pCampaignNamingAlgorithm.new(p2p_params[:nonprofit_id])
|
||||
p2p_params[:slug] = algo.create_copy_name(base_slug)
|
||||
|
|
|
|||
|
|
@ -64,14 +64,14 @@
|
|||
image_url: @campaign_background_image,
|
||||
is_editor: current_campaign_editor?,
|
||||
hide_title: @campaign.hide_title && @campaign_background_image,
|
||||
header_content_partial: 'header_content' %>
|
||||
header_content_partial: 'header_content',
|
||||
banner_image_url: @campaign.banner_image&.url %>
|
||||
|
||||
<%= render 'components/preview_mode_notification' %>
|
||||
|
||||
<div class="container u-marginTop--15 <%= @brand_color ? 'is-branded' : '' %>" data-id='<%= @campaign.id %>'>
|
||||
|
||||
|
||||
<section class='box'>
|
||||
<section class='box'>
|
||||
<%= render 'campaign_media' %>
|
||||
</section>
|
||||
|
||||
|
|
@ -85,6 +85,14 @@
|
|||
</button>
|
||||
<% end %>
|
||||
|
||||
<% if !@campaign.parent_campaign %>
|
||||
<aside class='u-marginBottom--15 pastelBox--grey'>
|
||||
<a class='button u-width--full' target='_blank' if-branded='background-color, dark' href='/peer-to-peer?campaign_id=<%= @peer_to_peer_campaign_param %>'>
|
||||
Start Your Own Campaign for <%= @nonprofit.name %>
|
||||
</a>
|
||||
</aside>
|
||||
<% end %>
|
||||
|
||||
<!-- flimflam gift options javascript gets rendered into this div: -->
|
||||
<div class='ff-sidebar'></div>
|
||||
|
||||
|
|
@ -105,6 +113,20 @@
|
|||
|
||||
</section>
|
||||
|
||||
<% if @campaign.parent_campaign %>
|
||||
<%= render 'components/fundraising_pages/campaigner_profile',
|
||||
profile: @campaign.profile,
|
||||
campaign_name: @campaign.name,
|
||||
reason_for_supporting: @campaign.reason_for_supporting
|
||||
%>
|
||||
|
||||
<section class='box'>
|
||||
<a class='button u-width--full' target='_blank' if-branded='background-color, dark' href='/peer-to-peer?campaign_id=<%= @peer_to_peer_campaign_param %>'>
|
||||
Start Your Own Campaign for <%= @nonprofit.name %>
|
||||
</a>
|
||||
</section>
|
||||
<% end %>
|
||||
|
||||
<section class='box'>
|
||||
|
||||
<div id='js-campaignBody' class='editable' data-path='/nonprofits/<%= @nonprofit.id %>/campaigns/<%= @campaign.id %>.json' data-key='campaign[body]'>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<section class='box'>
|
||||
<section class="campaigner-profile">
|
||||
<figure>
|
||||
<div class="avatar">
|
||||
<img src='<%= profile.picture %>' />
|
||||
</div>
|
||||
<figcaption>
|
||||
<p><%= profile.name %></p>
|
||||
<p><%= profile.city %></p>
|
||||
<% if profile.state_code && profile.city %>
|
||||
<p><%= profile.city_state %> <%= profile.state_code %></p>
|
||||
<% end %>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<section class='u-marginBottom--15 pastelBox--grey'>
|
||||
<header>What's your reason for supporting <%= campaign_name %>?</header>
|
||||
<div class='pastelBox-body'>
|
||||
<%= reason_for_supporting %>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
|
||||
|
||||
<header class="container fundraisingHeader--plain" <%= css_style.html_safe %> id='js-fundraisingHeader'>
|
||||
<% if banner_image_url %>
|
||||
<div class='campaign-banner'>
|
||||
<img src='<%= banner_image_url %>'>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class='fundraisingHeader--image-container' id='js-fundraisingHeader-image' style='display: none;'>
|
||||
<img class='fundraisingHeader--image-aspectRatio' src="<%= asset_path 'graphics/10x6.jpg' %>">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,185 +0,0 @@
|
|||
<%= content_for(:title_prefix) { "#{@campaign.name} - #{@campaign.nonprofit.name} | ".html_safe } %>
|
||||
<% content_for(:fixed_position_cta_hidden) {'hidden'} %>
|
||||
<%= content_for(:meta_description) {raw @campaign.summary} %>
|
||||
<% @brand_color = @nonprofit.brand_color ? @nonprofit.brand_color : nil %>
|
||||
|
||||
<%= content_for :javascripts do %>
|
||||
<script>
|
||||
app.campaign_id = <%= @campaign.id %>
|
||||
app.campaign = <%= raw(@campaign.to_json) %>
|
||||
app.header_image_url = '<%= @campaign_background_image %>'
|
||||
app.campaign_end_datetime = '<%= @campaign.end_datetime %>'
|
||||
app.timezone = '<%= @timezone %>'
|
||||
app.end_date_time = app.campaign_end_datetime
|
||||
app.hide_activities = <%= @campaign.hide_activity_feed %>
|
||||
app.days_remaining = '<%= @campaign.days_left %>'
|
||||
app.recurring_fund = <%= @campaign.recurring_fund? %>
|
||||
app.vimeo_id = "<%= @campaign.vimeo_video_id ? @campaign.vimeo_video_id : '' %>"
|
||||
app.current_campaign_editor = <%= current_campaign_editor? %>
|
||||
appl.def('has_video', <%= @campaign.video_url.present? %>)
|
||||
appl.def('campaign_is_deleted', <%= @campaign.deleted || false %>)
|
||||
appl.def('has_main_image', <%= @campaign.main_image.file.present? %>)
|
||||
</script>
|
||||
<%= render 'schema', campaign: @campaign, url: @url %>
|
||||
<%= render 'common/froala' if current_campaign_editor? %>
|
||||
|
||||
<%= IncludeAsset.js '/client/js/campaigns/show/page.js' %>
|
||||
<% end %>
|
||||
|
||||
<%= content_for :stylesheets do %>
|
||||
<%= stylesheet_link_tag 'campaigns/show/page' %>
|
||||
<%= stylesheet_link_tag 'campaigns/edit/page' %>
|
||||
<%= stylesheet_link_tag 'campaigns/custom_layout/safety_around_water' %>
|
||||
<style>
|
||||
.force-
|
||||
.ios-force-absolute-positioning {
|
||||
position: absolute !important;
|
||||
}
|
||||
</style>
|
||||
<% end %>
|
||||
|
||||
<% content_for :head do %>
|
||||
<link rel="canonical" href='<%= @url %>' />
|
||||
<% end %>
|
||||
|
||||
<%= content_for :facebook_tags do %>
|
||||
<meta property="og:title" content="<%= raw @campaign.name %>">
|
||||
<meta property="og:description" content="<%= @campaign.summary.present? ? raw(@campaign.summary) : raw(@campaign.name) %>">
|
||||
<meta property="og:image" content="<%= @campaign.main_image_url(:normal) %>">
|
||||
<% end %>
|
||||
|
||||
<%= content_for :twitter_tags do %>
|
||||
<meta property="twitter:title" content="<%= raw @campaign.name %>">
|
||||
<meta property="twitter:description" content="<%= raw @campaign.summary %>">
|
||||
<meta property="twitter:image" content="<%= @campaign.main_image_url(:normal) %>">
|
||||
<% end %>
|
||||
|
||||
<% if current_campaign_editor? %>
|
||||
<%= render 'admin_top_nav' %>
|
||||
<% end %>
|
||||
|
||||
<%= render '/components/trial_bar' if QueryBillingSubscriptions.currently_in_trial?(@nonprofit.id) %>
|
||||
|
||||
<% hide_title = @campaign.hide_title && @campaign_background_image ? true : false %>
|
||||
<% css_style = current_campaign_editor? ? "style='margin-top: 0'" : '' %>
|
||||
|
||||
<main class="custom-campaign-layout" id="safety-around-water">
|
||||
<div class='ymca-banner'>
|
||||
<img src='<%= @campaign.banner_image.url %>' height=120>
|
||||
</div>
|
||||
|
||||
<%= render 'components/fundraising_pages/header',
|
||||
image_url: @campaign_background_image,
|
||||
is_editor: current_campaign_editor?,
|
||||
hide_title: @campaign.hide_title && @campaign_background_image,
|
||||
header_content_partial: 'header_content' %>
|
||||
|
||||
<%= render 'components/preview_mode_notification' %>
|
||||
|
||||
<div class="container <%= @brand_color ? 'is-branded' : '' %>" data-id='<%= @campaign.id %>'>
|
||||
<section class='box'>
|
||||
<%= render 'campaign_media' %>
|
||||
</section>
|
||||
|
||||
<section class='box-r'>
|
||||
|
||||
<% if current_campaign_editor? %>
|
||||
<!-- Campaign editor gift option management modal -->
|
||||
<button class='button edit u-width--full u-marginBottom--15'>
|
||||
<!--= on 'click' (open_modal 'manageGiftOptionsModal') -->
|
||||
<i class='fa fa-gift'></i> Manage Gift Options
|
||||
</button>
|
||||
<% end %>
|
||||
|
||||
<% if !@campaign.parent_campaign %>
|
||||
<aside class='u-marginBottom--15 pastelBox--grey'>
|
||||
<a class='button u-width--full' target='_blank' if-branded='background-color, dark' href='/peer-to-peer?campaign_id=<%= @peer_to_peer_campaign_param %>'>
|
||||
Start Your Own Campaign for <%= @nonprofit.name %>
|
||||
</a>
|
||||
</aside>
|
||||
<% end %>
|
||||
|
||||
<!-- flimflam gift options javascript gets rendered into this div: -->
|
||||
<div class='ff-sidebar'></div>
|
||||
|
||||
<aside class='u-marginTop--15 pastelBox--grey'>
|
||||
<header>Promote This Campaign</header>
|
||||
<div class='pastelBox-body'>
|
||||
<%= render 'common/social_buttons' %>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</section>
|
||||
|
||||
<% if @campaign.parent_campaign %>
|
||||
<section class='box'>
|
||||
|
||||
<section class="campaigner-profile">
|
||||
<figure>
|
||||
<div class="avatar">
|
||||
<img src=<%= @campaign.profile.picture %> />
|
||||
</div>
|
||||
<figcaption>
|
||||
<p><%= @campaign.profile.name %></p>
|
||||
<p><%= @campaign.profile.city %></p>
|
||||
<% if @campaign.profile.state_code && @campaign.profile.city %>
|
||||
<p><%= @campaign.profile.city_state %> <%= @campaign.profile.state_code %></p>
|
||||
<% end %>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<section class='u-marginTop--15 u-marginBottom--15 pastelBox--grey'>
|
||||
<header>I am supporting the Y because…</header>
|
||||
<div class='pastelBox-body'>
|
||||
<%= @campaign.reason_for_supporting %>
|
||||
</div>
|
||||
|
||||
<a class='button u-width--full' target='_blank' if-branded='background-color, dark' href='/peer-to-peer?campaign_id=<%= @peer_to_peer_campaign_param %>'>
|
||||
Start Your Own Campaign for <%= @nonprofit.name %>
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<% end %>
|
||||
|
||||
<section class='box'>
|
||||
<h1><%= @campaign.name %></h1>
|
||||
|
||||
<div id='js-campaignBody' class='editable' data-path='/nonprofits/<%= @nonprofit.id %>/campaigns/<%= @campaign.id %>.json' data-key='campaign[body]'>
|
||||
<%= raw @campaign.body %>
|
||||
</div>
|
||||
|
||||
<% unless @campaign.hide_activity_feed %>
|
||||
<div class='u-marginTop--15 showWhenMobile'>
|
||||
<%= render 'components/activity_feed' %>
|
||||
</div>
|
||||
<% end %>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<% if current_campaign_editor? %>
|
||||
<%= render 'settings_modal' %>
|
||||
<%= render 'video_modal' %>
|
||||
<%= render 'donations/campaign_new_offline_modal' %>
|
||||
<%= render 'campaign_gift_options/manage_modal'%>
|
||||
<%= render 'campaign_gift_options/form_modal'%>
|
||||
<%= render 'components/upload_background_image',
|
||||
end_point: "/nonprofits/#{@nonprofit.id}/campaigns/#{@campaign.id}",
|
||||
image_url: @campaign_background_image,
|
||||
input_name: 'campaign[background_image]' %>
|
||||
<%= render 'components/upload_banner_image',
|
||||
end_point: "/nonprofits/#{@nonprofit.id}/campaigns/#{@campaign.id}",
|
||||
image_url: @campaign.banner_image.url,
|
||||
input_name: 'campaign[banner_image]' %>
|
||||
<%= render 'components/custom_receipt_modal',
|
||||
title: 'Campaign Receipt Message',
|
||||
type: 'campaign',
|
||||
path: nonprofit_campaign_path(@nonprofit, @campaign),
|
||||
key: 'campaign[receipt_message]',
|
||||
text: @campaign.receipt_message %>
|
||||
<%= render 'components/duplicate_fundraiser_modal', type: 'campaign' %>
|
||||
<% end %>
|
||||
|
||||
<%= render 'components/share_modal', name: @campaign.name, type: 'campaign' %>
|
||||
<%= render 'common/email_share_modal', fundraiser: @campaign.name, fundraiser_url: @url %>
|
||||
Loading…
Reference in a new issue