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;
|
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) {
|
@media screen and (max-width: 1000px) {
|
||||||
.box,
|
.box,
|
||||||
|
|
|
||||||
|
|
@ -44,14 +44,6 @@ class CampaignsController < ApplicationController
|
||||||
end
|
end
|
||||||
|
|
||||||
@campaign_background_image = FetchBackgroundImage.with_model(@campaign)
|
@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
|
end
|
||||||
|
|
||||||
def activities
|
def activities
|
||||||
|
|
@ -122,29 +114,6 @@ class CampaignsController < ApplicationController
|
||||||
@profile = current_user.profile if current_user
|
@profile = current_user.profile if current_user
|
||||||
end
|
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
|
private
|
||||||
|
|
||||||
def check_nonprofit_status
|
def check_nonprofit_status
|
||||||
|
|
|
||||||
|
|
@ -64,14 +64,14 @@
|
||||||
image_url: @campaign_background_image,
|
image_url: @campaign_background_image,
|
||||||
is_editor: current_campaign_editor?,
|
is_editor: current_campaign_editor?,
|
||||||
hide_title: @campaign.hide_title && @campaign_background_image,
|
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' %>
|
<%= render 'components/preview_mode_notification' %>
|
||||||
|
|
||||||
<div class="container u-marginTop--15 <%= @brand_color ? 'is-branded' : '' %>" data-id='<%= @campaign.id %>'>
|
<div class="container u-marginTop--15 <%= @brand_color ? 'is-branded' : '' %>" data-id='<%= @campaign.id %>'>
|
||||||
|
|
||||||
|
<section class='box'>
|
||||||
<section class='box'>
|
|
||||||
<%= render 'campaign_media' %>
|
<%= render 'campaign_media' %>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -85,6 +85,14 @@
|
||||||
</button>
|
</button>
|
||||||
<% end %>
|
<% 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: -->
|
<!-- flimflam gift options javascript gets rendered into this div: -->
|
||||||
<div class='ff-sidebar'></div>
|
<div class='ff-sidebar'></div>
|
||||||
|
|
||||||
|
|
@ -105,6 +113,20 @@
|
||||||
|
|
||||||
</section>
|
</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'>
|
<section class='box'>
|
||||||
|
|
||||||
<div id='js-campaignBody' class='editable' data-path='/nonprofits/<%= @nonprofit.id %>/campaigns/<%= @campaign.id %>.json' data-key='campaign[body]'>
|
<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'>
|
<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;'>
|
<div class='fundraisingHeader--image-container' id='js-fundraisingHeader-image' style='display: none;'>
|
||||||
<img class='fundraisingHeader--image-aspectRatio' src="<%= asset_path 'graphics/10x6.jpg' %>">
|
<img class='fundraisingHeader--image-aspectRatio' src="<%= asset_path 'graphics/10x6.jpg' %>">
|
||||||
</div>
|
</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