Skip to content

Commit

Permalink
💄 Popup for proposals address map preview decidim#524
Browse files Browse the repository at this point in the history
  • Loading branch information
@moustachu
moustachu committed Mar 13, 2019
1 parent edfa337 commit 328457c
Show file tree
Hide file tree
Showing 7 changed files with 200 additions and 56 deletions.
6 changes: 6 additions & 0 deletions decidim-core/app/assets/javascripts/decidim/map.js.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,10 @@ $(() => {
if ($map.length > 0) {
window.Decidim.currentMap = loadMap(mapId, markersData);
}

$("#address_input_modal").on("open.zf.reveal", () => {
setTimeout(() => {
window.Decidim.currentMap.invalidateSize();
}, 10);
})
});
22 changes: 22 additions & 0 deletions decidim-core/app/assets/stylesheets/decidim/modules/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,25 @@ label > [type='radio']{
}
}
}

.flex-input-group{
display: flex;
align-items: flex-end;

.input-wrapper{
flex-grow: 1;
}

.button-wrapper{
margin-left: .25rem;

.button{
padding: .5rem;
}

.icon{
height: 1.2rem;
width: 1.5rem;
}
}
}
81 changes: 81 additions & 0 deletions decidim-proposals/app/assets/stylesheets/decidim/proposals/proposals/_preview.css.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,84 @@
.preview--form__hidden{
display: none;
}

.preview{
padding-top: 1rem;

.card--proposal{
margin-bottom: .5rem;
}

button.card--button{
padding: 0;

.button-data{
display: flex;
width: 100%;
list-style: none;
align-items: center;
// margin: 1rem .9375rem;

& > *{
padding: .75rem;
}

.button-data--map{
padding: 0;
flex-grow: 0;

img{
margin: 0;
height: 3.2rem;
width: auto;
}
}

.button-data--info{
color: #777;
text-transform: uppercase;
vertical-align: middle;
}
}
}

.google-map{
margin-bottom: .5rem;
}

.dynamic-map-instructions{
margin-bottom: .5rem;
}

.actions{
margin: 1rem;
}
}

.map-modal{
outline: 0;
padding: 2.3rem .25rem 1rem;

.close-button{
outline: 0;
right: .6rem;
top: 0;

.icon{
height: .5em;
width: .5em;
}
}

.google-map{
margin-bottom: 0;
}

.actions{
margin: .5rem 0;

.button{
margin: 0;
}
}
}
8 changes: 3 additions & 5 deletions decidim-proposals/app/views/decidim/proposals/proposals/_dynamic_map_instructions.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<div class="column dynamic-map-instructions">
<div class="callout warning">
<h5><%= t(".primary") %></h5>
<p><%= t(".secondary") %></p>
</div>
<div class="callout warning dynamic-map-instructions">
<b><%= t(".primary") %></b>
<p><%= t(".secondary") %></p>
</div>
33 changes: 24 additions & 9 deletions decidim-proposals/app/views/decidim/proposals/proposals/_edit_form_fields.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,35 @@
<div class="field">
<%= form.check_box :has_address, checked: form_has_address? %>
</div>
<div class="field" id="address_input">
<%= form.text_field :address, placeholder: t("decidim.proposals.proposals.placeholder.address") %>
<div class="field flex-input-group" id="address_input">
<div class="input-wrapper">
<%= form.text_field :address, placeholder: t("decidim.proposals.proposals.placeholder.address") %>
</div>
<% if has_position?(@proposal) %>
<div class="callout warning"><%= t("decidim.proposals.proposals.dynamic_map_instructions.primary") %></div>
<%= dynamic_map_for proposal_preview_data_for_map(@proposal) do %>
<%= stylesheet_link_tag "decidim/map" %>
<%= javascript_include_tag "decidim/map" %>
<% end %>
<div class="button-wrapper">
<button type="button" name="map-preview" class="button hollow" data-open="address_input_modal">
<%= icon "map-marker" %>
</button>
</div>
<%= form.hidden_field :latitude, data: { type: "latitude" } %>
<%= form.hidden_field :longitude, data: { type: "longitude" } %>
<% elsif form_has_address? %>
<div class="callout warning"><%= t("decidim.proposals.proposals.preview.not_geocoded") %></div>
<div class="reveal map-modal" id="address_input_modal" data-reveal>
<div class="row column">
<div class="callout warning"><b><%= t("decidim.proposals.proposals.dynamic_map_instructions.primary") %></b></div>
</div>
<%= dynamic_map_for proposal_preview_data_for_map(@proposal) do %>
<%= stylesheet_link_tag "decidim/map" %>
<%= javascript_include_tag "decidim/map" %>
<% end %>
<button class="close-button" data-close aria-label="Close modal" type="button">
<%= icon "x" %>
</button>
</div>
<% end %>
</div>
<% if form_has_address? && !has_position?(@proposal) %>
<div class="callout warning"><%= t("decidim.proposals.proposals.preview.not_geocoded") %></div>
<% end %>
<% end %>

<% if @form.categories&.any? %>
Expand Down
104 changes: 63 additions & 41 deletions decidim-proposals/app/views/decidim/proposals/proposals/preview.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,75 @@

<div class="columns large-6">
<%= render partial: "wizard_header", locals: { callout_help_text_class: "warning" } %>
<div class="card">
<div class="p-l">
<%= render partial: "proposal_preview", locals: { proposal: @proposal } %>
<div class="card preview">
<%= render partial: "proposal_preview", locals: { proposal: @proposal } %>
<% if component_settings.geocoding_enabled? %>

<% if component_settings.geocoding_enabled? %>
<% if has_position?(@proposal) %>
<%= render partial: "dynamic_map_instructions" %>
<%= dynamic_map_for proposal_preview_data_for_map(@proposal), "column" do %>
<%= stylesheet_link_tag "decidim/map" %>
<%= javascript_include_tag "decidim/map" %>
<% end %>
<%= decidim_form_for(@form, url: update_draft_proposal_path(@form), html: { method: :patch, class: "column" }) do |form| %>
<%= form.hidden_field :title %>
<%= form.hidden_field :body, rows: 10 %>
<%= form.hidden_field :address %>
<%= form.hidden_field :latitude, data: { type: "latitude" } %>
<%= form.hidden_field :longitude, data: { type: "longitude" } %>
<div class="preview--form__hidden">
<% if @form.categories&.any? %>
<%= form.categories_select :category_id, @form.categories %>
<% end %>
<% if current_participatory_space.has_subscopes? %>
<%= scopes_picker_field form, :scope_id %>
<% if form_has_address? %>
<div class="card-section">
<button type="button" class="button hollow expanded card--button" data-open="address_input_modal">
<div class="button-data">
<div class="button-data--icon">
<%= icon "map-marker", class: "icon--big" %>
</div>
<div class="button-data--map">
<%= image_tag decidim.static_map_path(sgid: @proposal.to_sgid.to_s) %>
</div>
<div class="button-data--info">
<strong><%= @proposal.address %></strong>
</div>
</div>
</button>
<div class="reveal map-modal" id="address_input_modal" data-reveal>
<% if has_position?(@proposal) %>
<div class="row column">
<%= render partial: "dynamic_map_instructions" %>
</div>
<%= dynamic_map_for proposal_preview_data_for_map(@proposal) do %>
<%= stylesheet_link_tag "decidim/map" %>
<%= javascript_include_tag "decidim/map" %>
<% end %>
<% if current_user.user_groups.verified.any? %>
<%= form.select :user_group_id, current_user.user_groups.verified.map { |g| [g.name, g.id] }, prompt: current_user.name %>
<%= decidim_form_for(@form, url: update_draft_proposal_path(@form), html: { method: :patch, class: "column" }) do |form| %>
<%= form.hidden_field :title %>
<%= form.hidden_field :body, rows: 10 %>
<%= form.hidden_field :has_address %>
<%= form.hidden_field :address %>
<%= form.hidden_field :latitude, data: { type: "latitude" } %>
<%= form.hidden_field :longitude, data: { type: "longitude" } %>
<div class="preview--form__hidden">
<% if @form.categories&.any? %>
<%= form.categories_select :category_id, @form.categories %>
<% end %>
<% if current_participatory_space.has_subscopes? %>
<%= scopes_picker_field form, :scope_id %>
<% end %>
<% if current_user.user_groups.verified.any? %>
<%= form.select :user_group_id, current_user.user_groups.verified.map { |g| [g.name, g.id] }, prompt: current_user.name %>
<% end %>
</div>
<div class="actions">
<%= form.submit t(".update_pos"), class: "button expanded small", data: { disable: true } %>
</div>
<% end %>
</div>
<div class="actions">
<%= form.submit t(".update_pos"), class: "button expanded", data: { disable: true } %>
</div>
<% end %>
<% elsif form_has_address? %>
<div class="column text-center">
<div class="callout warning">
<p><%= t(".not_geocoded") %></p>
<p><%= t(".address", address: @proposal.address) %></p>
</div>
<% elsif form_has_address? %>
<div class="column text-center">
<div class="callout warning">
<p><%= t(".not_geocoded") %></p>
<p><%= t(".address", address: @proposal.address) %></p>
</div>
</div>
<% end %>
<button class="close-button" data-close aria-label="Close modal" type="button">
<%= icon "x" %>
</button>
</div>
<% end %>
</div>
<% end %>
<% end %>

<div class="row column flex-center">
<%= link_to t(".modify"), edit_draft_proposal_path(@proposal) %>

<%= button_to t(".publish"), publish_proposal_path(@proposal), method: :post, class: "button button--nomargin small" %>
</div>
<div class="row column flex-center pb-l">
<%= link_to t(".modify"), edit_draft_proposal_path(@proposal) %>
<%= button_to t(".publish"), publish_proposal_path(@proposal), method: :post, class: "button button--nomargin small" %>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion decidim-proposals/app/views/decidim/proposals/proposals/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ edit_link(
<%= simple_format present(@proposal).body(links: true) %>
<% end %>
<% if component_settings.geocoding_enabled? %>
<%= render partial: "decidim/shared/static_map", locals: { icon_name: "proposals", geolocalizable: @proposal } %>
<%= render partial: "decidim/shared/static_map", locals: { icon_name: "map-marker", geolocalizable: @proposal } %>
<% end %>
<%= cell "decidim/proposals/proposal_tags", @proposal %>
</div>
Expand Down

0 comments on commit 328457c

Please sign in to comment.