Update styles and layout for new proposals form

This commit is contained in:
decabeza
2020-06-10 19:58:53 +02:00
committed by Javi Martín
parent 909fd00714
commit 578f3437da
7 changed files with 130 additions and 131 deletions

View File

@@ -69,6 +69,7 @@ main {
&.budget-investment-new,
&.debate-new,
&.proposal-new,
&.sdg-goals-index,
&.sdg-goal-show {
@include grid-column-gutter;

View File

@@ -244,19 +244,6 @@
// 02. New participation
// ---------------------
.proposal-new {
.icon-proposals {
font-size: rem-calc(50);
line-height: $line-height;
opacity: 0.5;
}
.icon-proposals {
color: $proposals;
}
}
.recommendations {
list-style-type: none;
margin-left: 0;
@@ -273,13 +260,6 @@
}
}
.proposal-new {
.recommendations li::before {
color: $proposals;
}
}
.budget-investment-new,
.proposal-new,
.proposal-edit,

View File

@@ -1,9 +1,3 @@
.proposal-form {
.globalize-languages,
.translatable-fields {
@include grid-row-nest;
@include grid-column-gutter;
}
@extend %public-form;
}

View File

@@ -0,0 +1,15 @@
.proposal-new {
@extend %public-form-header;
header h1 {
@include has-fa-icon(lightbulb, regular, after);
}
aside {
margin-top: $line-height;
}
.recommendations li::before {
color: $proposals;
}
}

View File

@@ -1,106 +1,114 @@
<%= translatable_form_for(proposal, url: url, html: { class: "proposal-form" }) do |f| %>
<%= render "shared/errors", resource: proposal %>
<%= render "shared/globalize_locales", resource: proposal %>
<fieldset class="required-fields">
<legend><%= t("shared.required") %></legend>
<%= f.translatable_fields do |translations_form| %>
<div>
<%= translations_form.text_field :title,
maxlength: Proposal.title_max_length,
data: suggest_data(proposal) %>
</div>
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
<%= render "shared/globalize_locales", resource: proposal %>
<div>
<%= translations_form.text_area :summary,
rows: 4, maxlength: 200,
hint: t("proposals.form.proposal_summary_note") %>
</div>
<%= f.translatable_fields do |translations_form| %>
<div>
<%= translations_form.text_field :title,
maxlength: Proposal.title_max_length,
data: suggest_data(proposal) %>
</div>
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
<div>
<%= translations_form.text_area :description,
maxlength: Proposal.description_max_length,
class: "html-area" %>
</div>
<% end %>
<div>
<%= translations_form.text_area :summary,
rows: 4, maxlength: 200,
hint: t("proposals.form.proposal_summary_note") %>
</div>
<div>
<%= translations_form.text_area :description,
maxlength: Proposal.description_max_length,
class: "html-area" %>
</div>
<% end %>
</fieldset>
<%= f.invisible_captcha :subtitle %>
<div>
<%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %>
</div>
<fieldset>
<legend><%= t("shared.optional") %></legend>
<% if feature?(:allow_images) %>
<div class="images">
<%= render "images/nested_image", imageable: proposal, f: f %>
</div>
<% end %>
<% if feature?(:allow_attached_documents) %>
<div class="documents">
<%= render "documents/nested_documents", documentable: proposal, f: f %>
</div>
<% end %>
<div>
<%= f.select :geozone_id, geozone_select_options,
include_blank: t("geozones.none") %>
</div>
<% if feature?(:map) %>
<div>
<%= render "map_locations/form_fields",
form: f,
map_location: proposal.map_location || MapLocation.new,
label: t("proposals.form.map_location"),
help: t("proposals.form.map_location_instructions"),
remove_marker_label: t("proposals.form.map_remove_marker"),
parent_class: "proposal",
i18n_namespace: "proposals" %>
</div>
<% end %>
<div>
<%= f.label :tag_list, t("proposals.form.tags_label") %>
<p class="help-text" id="tag-list-help-text"><%= t("proposals.form.tags_instructions") %></p>
<div id="category_tags" class="tags">
<%= f.label :category_tag_list, t("proposals.form.tag_category_label") %>
<% categories.each do |tag| %>
<a class="js-add-tag-link"><%= tag.name %></a>
<% end %>
<%= f.text_field :video_url, hint: t("proposals.form.proposal_video_url_note") %>
</div>
<br>
<%= f.text_field :tag_list, value: proposal.tag_list.to_s,
label: false,
placeholder: t("proposals.form.tags_placeholder"),
class: "js-tag-list tag-autocomplete",
aria: { describedby: "tag-list-help-text" },
data: { js_url: suggest_tags_path } %>
</div>
<% if current_user.unverified? %>
<div>
<%= f.text_field :responsible_name,
hint: t("proposals.form.proposal_responsible_name_note") %>
</div>
<% end %>
<%= render SDG::RelatedListSelectorComponent.new(f) %>
<div>
<% if proposal.new_record? %>
<%= f.check_box :terms_of_service,
title: t("form.accept_terms_title"),
label: t("form.accept_terms",
policy: link_to(t("form.policy"), "/privacy", target: "blank"),
conditions: link_to(t("form.conditions"), "/conditions", target: "blank")
) %>
<% if feature?(:allow_images) %>
<div class="images">
<%= render "images/nested_image", imageable: proposal, f: f %>
</div>
<% end %>
</div>
<% if feature?(:allow_attached_documents) %>
<div class="documents">
<%= render "documents/nested_documents", documentable: proposal, f: f %>
</div>
<% end %>
<div>
<%= f.select :geozone_id, geozone_select_options,
include_blank: t("geozones.none") %>
</div>
<% if feature?(:map) %>
<div>
<%= render "map_locations/form_fields",
form: f,
map_location: proposal.map_location || MapLocation.new,
label: t("proposals.form.map_location"),
help: t("proposals.form.map_location_instructions"),
remove_marker_label: t("proposals.form.map_remove_marker"),
parent_class: "proposal",
i18n_namespace: "proposals" %>
</div>
<% end %>
<div>
<%= f.label :tag_list, t("proposals.form.tags_label") %>
<p class="help-text" id="tag-list-help-text"><%= t("proposals.form.tags_instructions") %></p>
<div id="category_tags" class="tags">
<%= f.label :category_tag_list, t("proposals.form.tag_category_label") %>
<% categories.each do |tag| %>
<a class="js-add-tag-link"><%= tag.name %></a>
<% end %>
</div>
<br>
<%= f.text_field :tag_list, value: proposal.tag_list.to_s,
label: false,
placeholder: t("proposals.form.tags_placeholder"),
class: "js-tag-list tag-autocomplete",
aria: { describedby: "tag-list-help-text" },
data: { js_url: suggest_tags_path } %>
</div>
<% if current_user.unverified? %>
<div>
<%= f.text_field :responsible_name,
hint: t("proposals.form.proposal_responsible_name_note") %>
</div>
<% end %>
<%= render SDG::RelatedListSelectorComponent.new(f) %>
</fieldset>
<div class="actions">
<% if proposal.new_record? %>
<div>
<%= f.check_box :terms_of_service,
title: t("form.accept_terms_title"),
label: t("form.accept_terms",
policy: link_to(t("form.policy"), "/privacy", target: "blank"),
conditions: link_to(t("form.conditions"), "/conditions", target: "blank")
) %>
</div>
<% end %>
<%= f.submit(class: "button", value: t("proposals.#{action_name}.form.submit_button")) %>
</div>
<% end %>

View File

@@ -1,25 +1,21 @@
<div class="proposal-new">
<main class="proposal-new">
<%= back_link_to proposals_path, t("proposals.index.section_header.title") %>
<div class="small-12 medium-9 column">
<%= back_link_to %>
<%= header do %>
<%= link_to help_path(anchor: "proposals"), title: t("shared.target_blank"), target: "_blank" do %>
<%= t("proposals.new.more_info") %>
<% end %>
<% end %>
<h1><%= t("proposals.new.start_new") %></h1>
<div data-alert class="callout primary">
<%= link_to help_path(anchor: "proposals"), title: t("shared.target_blank"), target: "_blank" do %>
<%= t("proposals.new.more_info") %>
<% end %>
</div>
<%= render Proposals::FormComponent.new(proposal, url: proposals_path) %>
</div>
<div class="small-12 medium-3 column">
<span class="icon-proposals float-right"></span>
<aside>
<h2><%= t("proposals.new.recommendations_title") %></h2>
<ul class="recommendations">
<li><%= t("proposals.new.recommendation_one") %></li>
<li><%= t("proposals.new.recommendation_two") %></li>
<li><%= t("proposals.new.recommendation_three") %></li>
</ul>
</div>
</div>
</aside>
<%= render Proposals::FormComponent.new(proposal, url: proposals_path) %>
</main>

View File

@@ -1,7 +1,12 @@
class Proposals::NewComponent < ApplicationComponent
include Header
attr_reader :proposal
def initialize(proposal)
@proposal = proposal
end
def title
t("proposals.new.start_new")
end
end