Style banner uploading, show banner for all campaings

This commit is contained in:
Kasia Jarmołkowicz 2018-05-30 17:35:37 +02:00 committed by Eric Schultz
parent e1287683f5
commit 3167a53da8
3 changed files with 37 additions and 24 deletions

View file

@ -19,6 +19,11 @@
width: 192px;
}
.image-upload--banner {
width: 100%;
height: auto;
}
.image-upload span {
margin-top: 30px;
padding: 5px;
@ -28,6 +33,11 @@
@include basicShadow;
}
.image-upload--banner span {
margin-top: 30px;
margin-bottom: 30px;
}
.image-upload--large span {
margin-top: 60px;
}

View file

@ -93,31 +93,34 @@
</section>
<hr>
<section class='layout--two u-overflow--hidden'>
<% if @nonprofit.custom_layout %>
<section class='layout--one'>
<fieldset>
<label>Banner <small>(1000x120)</small></label>
<p><small>Custom image at the very top of the campaign page</small></p>
<% if @campaign.banner_image_url.present? %>
<div class='image-upload u-inlineBlock' style='background-image:url(<%= @campaign.banner_image_url %>)'>
<div class='image-upload image-upload--banner u-inlineBlock u-marginBottom--15' style='background-image:url(<%= @campaign.banner_image_url %>)'>
<!--= on 'click' (open_modal 'uploadBannerImage') -->
<span><i class='fa fa-pencil'></i> Edit</span>
</div>
<% else %>
<a class='button edit'>
<a class='button edit u-marginBottom--15'>
<!--= on 'click' (open_modal 'uploadBannerImage') -->
<i class='fa fa-plus'></i> Add Image </i>
</a>
<% end %>
</fieldset>
<% end %>
</section>
<% if @campaign.parent_campaign.blank? %>
<hr>
<section class='layout--two'>
<fieldset>
<label>Default reason for peer-to-peer campaigns</label>
<p><small>Use it to suggest a good, pre-filled reason for campaigners</small></p>
<textarea class='u-marginTop--15' rows='4' name='campaign[default_reason_for_supporting]' value='<%= @campaign.default_reason_for_supporting %>'></textarea>
</fieldset>
</section>
<% end %>
<hr>

View file

@ -7,7 +7,7 @@
<p>Select and upload a banner image for this page.</p>
<p class='u-marginBottom--20'>For best results, the image should be <strong>1000px by 120px</strong> in size.</p>
<form autosubmit action='<%= end_point %>' method='put' data-reload>
<div class='image-upload image-upload--large' style='background-image:url(<%= image_url ? image_url : '' %>)'>
<div class='image-upload image-upload--banner' style='background-image:url(<%= image_url ? image_url : '' %>)'>
<span><i class='fa fa-image'></i> Select</span>
<input type='file' name="<%= input_name %>" required>
</div>
@ -15,7 +15,7 @@
<!--= show_if (length image_upload.error) -->
<small><!--= put image_upload.error --></small>
</p>
<div class='u-width--250 u-margin--auto'>
<div class='u-width--500 u-margin--auto'>
<button type='submit' class='button--small u-width--full u-marginTop--20' data-loading='Uploading...'>
Upload <%= image_url ? 'Different Image' : '' %>
</button>