Update styles and layout for new budget investment form
This commit is contained in:
decabeza
@@ -1,5 +1,34 @@
|
||||
.budget-investment-form {
|
||||
|
||||
.required-fields {
|
||||
@include full-width-background($adjust-padding: true);
|
||||
background: $light;
|
||||
margin-bottom: $line-height;
|
||||
padding-top: $line-height;
|
||||
}
|
||||
|
||||
> fieldset > legend {
|
||||
float: left;
|
||||
font-size: rem-calc(36);
|
||||
font-weight: bold;
|
||||
margin-bottom: $line-height;
|
||||
text-transform: uppercase;
|
||||
|
||||
+ * {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
min-height: $line-height * 2;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
&:not(.js-add-language):not(.js-select-language) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.globalize-languages,
|
||||
.translatable-fields {
|
||||
@include grid-row-nest;
|
||||
@@ -13,6 +42,21 @@
|
||||
|
||||
[type="submit"] {
|
||||
@include regular-button;
|
||||
width: 100%;
|
||||
font-size: map-get($button-sizes, large);
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
.actions {
|
||||
border: 6px solid $border;
|
||||
border-radius: rem-calc(12);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: $line-height * 2;
|
||||
padding: $line-height * 2 $line-height;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,27 @@
|
||||
.budget-investment-new {
|
||||
$border-width: 4px;
|
||||
@include grid-column-gutter;
|
||||
|
||||
> * {
|
||||
@include grid-column-gutter;
|
||||
> :first-child:not(.print-info) {
|
||||
@include full-width-background($adjust-padding: true);
|
||||
background: $light;
|
||||
margin-top: -$line-height;
|
||||
padding-top: $line-height;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
@include has-fa-icon(building, regular, after);
|
||||
align-items: center;
|
||||
background-color: $body-background;
|
||||
border: $border-width solid;
|
||||
color: $brand-secondary;
|
||||
border-bottom-right-radius: rem-calc(12);
|
||||
border-top-right-radius: rem-calc(12);
|
||||
display: flex;
|
||||
margin-bottom: $line-height * 2;
|
||||
margin-top: $line-height * 2;
|
||||
|
||||
@include breakpoint(large) {
|
||||
@@ -38,7 +46,6 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: rem-calc(36);
|
||||
margin-bottom: 0;
|
||||
padding: $line-height * 2 0;
|
||||
|
||||
@include breakpoint(large) {
|
||||
|
||||
@@ -1074,7 +1074,6 @@ form {
|
||||
|
||||
.checkbox,
|
||||
.radio {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
line-height: $line-height;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -2,100 +2,108 @@
|
||||
|
||||
<%= render "shared/errors", resource: investment %>
|
||||
|
||||
<% unless budget.single_heading? %>
|
||||
<div class="small-12 medium-8">
|
||||
<%= f.select :heading_id, budget_heading_select_options(budget), { include_blank: true } %>
|
||||
</div>
|
||||
<% end %>
|
||||
<fieldset class="required-fields">
|
||||
<legend><%= t("shared.required") %></legend>
|
||||
|
||||
<div>
|
||||
<%= render "shared/globalize_locales", resource: investment %>
|
||||
</div>
|
||||
|
||||
<%= f.translatable_fields do |translations_form| %>
|
||||
<div>
|
||||
<%= translations_form.text_field :title,
|
||||
maxlength: Budget::Investment.title_max_length,
|
||||
data: suggest_data(investment) %>
|
||||
</div>
|
||||
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
|
||||
<% unless budget.single_heading? %>
|
||||
<div>
|
||||
<%= f.select :heading_id, budget_heading_select_options(budget), { include_blank: true } %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= translations_form.text_area :description,
|
||||
maxlength: Budget::Investment.description_max_length,
|
||||
class: "html-area" %>
|
||||
<%= render "shared/globalize_locales", resource: investment %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= f.translatable_fields do |translations_form| %>
|
||||
<div>
|
||||
<%= translations_form.text_field :title,
|
||||
maxlength: Budget::Investment.title_max_length,
|
||||
data: suggest_data(investment) %>
|
||||
</div>
|
||||
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
|
||||
|
||||
<div>
|
||||
<%= translations_form.text_area :description,
|
||||
maxlength: Budget::Investment.description_max_length,
|
||||
class: "html-area" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
|
||||
<%= f.invisible_captcha :subtitle %>
|
||||
|
||||
<% if feature?(:allow_images) %>
|
||||
<div class="images">
|
||||
<%= render "images/nested_image", imageable: investment, f: f %>
|
||||
</div>
|
||||
<% end %>
|
||||
<fieldset>
|
||||
<legend><%= t("shared.optional") %></legend>
|
||||
|
||||
<% if feature?(:allow_attached_documents) %>
|
||||
<div class="documents">
|
||||
<%= render "documents/nested_documents", documentable: investment, f: f %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if feature?(:allow_images) %>
|
||||
<div class="images">
|
||||
<%= render "images/nested_image", imageable: investment, f: f %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if feature?(:allow_attached_documents) %>
|
||||
<div class="documents">
|
||||
<%= render "documents/nested_documents", documentable: investment, f: f %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if feature?(:map) %>
|
||||
<div>
|
||||
<%= render "map_locations/form_fields",
|
||||
form: f,
|
||||
map_location: investment.map_location || MapLocation.new,
|
||||
label: t("budgets.investments.form.map_location"),
|
||||
help: t("budgets.investments.form.map_location_instructions"),
|
||||
remove_marker_label: t("budgets.investments.form.map_remove_marker"),
|
||||
parent_class: "budget_investment",
|
||||
i18n_namespace: "budgets.investments" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if feature?(:map) %>
|
||||
<div>
|
||||
<%= render "map_locations/form_fields",
|
||||
form: f,
|
||||
map_location: investment.map_location || MapLocation.new,
|
||||
label: t("budgets.investments.form.map_location"),
|
||||
help: t("budgets.investments.form.map_location_instructions"),
|
||||
remove_marker_label: t("budgets.investments.form.map_remove_marker"),
|
||||
parent_class: "budget_investment",
|
||||
i18n_namespace: "budgets.investments" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= f.text_field :location %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.text_field :organization_name %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :tag_list, t("budgets.investments.form.tags_label") %>
|
||||
<p class="help-text" id="tags-list-help-text"><%= t("budgets.investments.form.tags_instructions") %></p>
|
||||
|
||||
<div id="category_tags" class="tags">
|
||||
<%= f.label :category_tag_list, t("budgets.investments.form.tag_category_label") %>
|
||||
<% categories.each do |tag| %>
|
||||
<a class="js-add-tag-link"><%= tag.name %></a>
|
||||
<% end %>
|
||||
<%= f.text_field :location %>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<%= f.text_field :tag_list, value: investment.tag_list.to_s,
|
||||
label: false,
|
||||
placeholder: t("budgets.investments.form.tags_placeholder"),
|
||||
aria: { describedby: "tags-list-help-text" },
|
||||
class: "js-tag-list tag-autocomplete",
|
||||
data: { js_url: suggest_tags_path } %>
|
||||
</div>
|
||||
|
||||
<%= render SDG::RelatedListSelectorComponent.new(f) %>
|
||||
|
||||
<% unless current_user.manager? || investment.persisted? %>
|
||||
<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")
|
||||
) %>
|
||||
<%= f.text_field :organization_name %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="actions small-12 medium-6 large-4">
|
||||
<div>
|
||||
<%= f.label :tag_list, t("budgets.investments.form.tags_label") %>
|
||||
<p class="help-text" id="tags-list-help-text"><%= t("budgets.investments.form.tags_instructions") %></p>
|
||||
|
||||
<div id="category_tags" class="tags">
|
||||
<%= f.label :category_tag_list, t("budgets.investments.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: investment.tag_list.to_s,
|
||||
label: false,
|
||||
placeholder: t("budgets.investments.form.tags_placeholder"),
|
||||
aria: { describedby: "tags-list-help-text" },
|
||||
class: "js-tag-list tag-autocomplete",
|
||||
data: { js_url: suggest_tags_path } %>
|
||||
</div>
|
||||
|
||||
<%= render SDG::RelatedListSelectorComponent.new(f) %>
|
||||
</fieldset>
|
||||
|
||||
<div class="actions">
|
||||
<% unless current_user.manager? || investment.persisted? %>
|
||||
<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 %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="budget-investment-new">
|
||||
|
||||
<div class="clear float-right">
|
||||
<div class="print-info clear float-right">
|
||||
<%= render "/shared/print" %>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -774,6 +774,8 @@ en:
|
||||
zero: "0 languages in use"
|
||||
one: "1 language in use"
|
||||
other: "%{count} languages in use"
|
||||
optional: "Optional"
|
||||
required: "Required"
|
||||
social:
|
||||
facebook: "%{org} Facebook"
|
||||
twitter: "%{org} Twitter"
|
||||
|
||||
@@ -774,6 +774,8 @@ es:
|
||||
zero: "0 idiomas en uso"
|
||||
one: "1 idioma en uso"
|
||||
other: "%{count} idiomas en uso"
|
||||
optional: "Opcional"
|
||||
required: "Obligatorio"
|
||||
social:
|
||||
facebook: "Facebook de %{org}"
|
||||
twitter: "Twitter de %{org}"
|
||||
|
||||
Reference in New Issue
Block a user