NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style banner uploading, show banner for all campaings

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/stylesheets/common/image_uploader.css.scss
View file

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

47
app/views/campaigns/_settings_modal.html.erb
View file

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

4
app/views/components/_upload_banner_image.html.erb
View file

@ -7,7 +7,7 @@
<p>Select and upload a banner image for this page.</p> <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> <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> <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> <span><i class='fa fa-image'></i> Select</span>
<input type='file' name="<%= input_name %>" required> <input type='file' name="<%= input_name %>" required>
</div> </div>
@ -15,7 +15,7 @@
<!--= show_if (length image_upload.error) --> <!--= show_if (length image_upload.error) -->
<small><!--= put image_upload.error --></small> <small><!--= put image_upload.error --></small>
</p> </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...'> <button type='submit' class='button--small u-width--full u-marginTop--20' data-loading='Uploading...'>
Upload <%= image_url ? 'Different Image' : '' %> Upload <%= image_url ? 'Different Image' : '' %>
</button> </button>