Skip to content

Commit

Permalink
[WIP] Redesign of location modal form (publiclab#7125)
Browse files Browse the repository at this point in the history 
* redesign location modal form

* change recent locations from badges to drop down select

* add modal footer, move used locations

* hide place name input on profile pages

* style location modal footer for breakpoints

* add data-preventOverwrite to placenameDisplay

* move coord_button css to location.css

* update yarn.lock

* do not hide location placename field when it is for a user profile
  • Loading branch information
@nstjean @jywarren
nstjean authored and jywarren committed Jan 16, 2020
1 parent 03ac17f commit 632fb74
Show file tree
Hide file tree
Showing 5 changed files with 242 additions and 110 deletions.
98 changes: 97 additions & 1 deletion app/assets/stylesheets/location.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,98 @@
#map_content .form-group .btn {
margin-top: .4rem;
}
#map_content .form-group.recent-locations {
/* margin-bottom: 1.2rem; */
}
#map_content .recent-locations label {
margin-bottom: 0;
}
#map_content .slide-container label {
margin: 0;
}

#blurred-location-modal .small-description {
font-size: 0.9rem;
color: #808080;
}

#blurred-location-modal .modal-header {
border-bottom: 0;
padding-bottom: 0;
}
#blurred-location-modal .modal-header .close {
padding-bottom: 0.5rem;
}

#blurred-location-modal .modal-content .badge-group {
margin-left: -6px;
}

#blurred-location-modal .modal-content .badge.badge-info {
background-color: #337ab7;
margin-left: 7px;
margin-bottom: 2px;
padding: 3px;
}
#blurred-location-modal .modal-content .badge {
background-color: white;
color: #337ab7;
margin: 0;
}
#blurred-location-modal .modal-footer {
justify-content: space-between;
flex-wrap: wrap;
}
#blurred-location-modal #place_name {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blurred-location-modal .modal-footer .location-box {
flex: 0 1 100%;
}
#blurred-location-modal #placenameDisplay {
flex: 0 1 100%;
}
#blurred-location-modal .modal-footer label {
flex: 0 1 100%;
margin: 0;
}
#blurred-location-modal .modal-footer .button-box {
flex: 0 1 100%;
display: flex;
justify-content: center;
margin: 0.5rem 0 0 0;
}

@media (min-width: 576px) {
#blurred-location-modal .modal-footer {
justify-content: space-between;
flex-wrap: nowrap;
}
#blurred-location-modal .modal-footer .button-box {
flex: 0 0 10%;
display: inline;
margin: 0 0 0 3rem;
}
}

@media (min-width: 992px) {
#blurred-location-modal #place_name {
flex-wrap: nowrap;
}
#blurred-location-modal .modal-footer .location-box {
flex: 1 1 50%;
}
#blurred-location-modal #placenameDisplay {
flex: 1 1 60%;
}
#blurred-location-modal .modal-footer label {
flex: 1 1 40%;
margin: 0;
padding-left: 0.5rem;
}
}

a:not([href]):not([tabindex]).btn-location,
.btn-location {
Expand All @@ -25,4 +117,8 @@ a:not([href]):not([tabindex]).btn-outline-secondary.btn-location:hover i,
.btn-outline-secondary.btn-location:hover,
.btn-outline-secondary.btn-location:hover i {
color: white;
}
}

#coord_button {
text-decoration: underline;
}
4 changes: 0 additions & 4 deletions app/views/editor/rich.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@
margin: 0 auto;
}

#coord_button {
text-decoration: underline;
}

button i.fa-map-marker {
color: #c40;
}
Expand Down
182 changes: 114 additions & 68 deletions app/views/locations/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,100 @@
<%= javascript_include_tag('/lib/leaflet-spin/example/spin/dist/spin.min.js') %>
<%= javascript_include_tag('/lib/leaflet-spin/example/leaflet.spin.min.js') %>

<div class="container blurred-location">
<div class="form-group">
<label for="placenameInput"><b>Search by place name</b></label>
<input id="placenameInput" type="text" class="form-control" />
</div>
<div id="map_content" class="modal-body text-left">
<div class="row">

<!-- Not part of LBL library -->
<% if current_user %>
<% latest_locations = current_user.recent_locations %>
<% if latest_locations.count > 0 %>
<p><b>Your recently used locations:</b></p>
<div class="row">
<% latest_locations.each_with_index do |location, index| %>
<a href="#" onclick="blurredLocation.goTo(<%= location.lat %>, <%= location.lon %>, 6);">
<span class="badge badge-info" style="background-color: #337ab7 ; margin-left: 7px ;margin-top: 2px; ">
<% if location.place %>
<%= location.place %>
<% end %>
<span class="badge" style="background-color: white; color: #337ab7;"><%= location.lat %></span>
<span class="badge" style="background-color: white; color: #337ab7;"><%= location.lon %></span>
</span>
</a>
<% end %>
<div class="col-lg-7">

<div id="map" class="leaflet-map" style="width: 100%; height: 300px; margin-bottom:10px;"></div>
<div class="slide-container">
<label>Scale</label>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="18" data-slider-step="1" data-slider-value="6" style="width: 100%"/>
<p class="small-description d-inline">World</p>
<p class="small-description d-inline" style="float: right">Building</p>
</div>
<% end %>
<% end %>

<br>
<p><b>By dragging the map</b></p>
<div id="map" class="leaflet-map" style="width: 100%; height: 300px; margin-bottom:10px;"></div>
<p>
<h3><strong>Scale</strong></h3>
<div class="slidecontainer" style="border-bottom: 2px solid #ccc;">
<b><p style="display: inline">Country</p></b>
<b><p style="display: inline; float: right">Building</p></b>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="5" data-slider-max="18" data-slider-step="1" data-slider-value="6" style="width: 100%"/>

</div>
</p>

<br>

<p>
<b>Or by co-ordinates</b>
<div class="row">
<div class="col-lg-6 form-group">
<input id="lat" type="text" class="form-control" value="<%= latitude ||= 40 %>">
<div class="col-lg-5">

<div class="form-group">
<label for="placenameInput">Search by place name</label>
<input id="placenameInput" type="text" class="form-control" />
</div>

<div class="form-group">
Or <a href="#" id="coord_button">by entering coordinates</a>

<div id="coord_input" class="row">
<div class="col-sm-6">
<label class="small-description">Latitude</label>
<input id="lat" type="text" class="form-control" placeholder="Latitude" />
</div>

<div class="col-sm-6">
<label class="small-description">Longitude</label>
<input id="lng" type="text" class="form-control" placeholder="Longitude" />
</div>
</div>
</div>
<div class="col-lg-6 form-group">
<input id="lng" type="text" class="form-control" value="<%= longitude ||= -90 %>">

<!-- Not part of LBL library -->
<% if current_user %>
<div class="form-group recent-locations">
<% latest_locations = current_user.recent_locations %>
<% if latest_locations.count > 0 %>
<label>Your recently used locations:</label>
<select id="recent_locations" name="recent_locations" class="custom-select custom-select-sm">
<% latest_locations.reverse.each_with_index do |location, index| %>
<option value='{ "lat": <%= location.lat %>, "lon": <%= location.lon %> }' >
<% if location.place %>
<%= location.place %>:
<% end %>
(<%= location.lat %>, <%= location.lon %>)
</option>
<% end %>
</select>
<% end %>
</div>
<% end %>

<div class="form-group">
<button class="btn btn-lg btn-outline-secondary" onclick="blurredLocation.geocodeWithBrowser(true);">
<div id="ldi-geocode-button">
<i class="fa fa-compass"></i>
Use current location
</div>
</button>
</div>

<div class="form-check">
<label class="form-check-label">
<input id="obscureLocation" type="checkbox" checked class="form-check-input" onchange='blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);' />
Blur my location
</label>
<span class="small-description"><a href="https://publiclab.org/location-privacy" target="_blank">Learn more »</a></span>
</div>
</div>

<div class="form-group">
<label for="placenameDisplay"> <b>Place name as it will be saved:</b></label>
<input editable="false" id="placenameDisplay" type="text" class="form-control" />
</div>

<button data-dismiss="modal" class="btn btn-lg btn-primary" onclick="saveLocation()">Save</button>
</div>
</div>

<div class="modal-footer bg-light">

<button id="ldi-geocode-button" class="btn btn-outline-secondary btn-lg" onclick='blurredLocation.geocodeWithBrowser(true);'>Auto-locate me</button>
&nbsp; <label>
<input id="obscureLocation" type="checkbox" checked onchange='blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);'>
Blur my location
</label>
<div class="location-box text-left">
<div id="place_name">
<input id="placenameDisplay" type="text" class="form-control" data-preventOverwrite="false" />
<label for="placenameDisplay" class="small-description">How this location will be saved</label>
</div>
</div>

<div class="button-box">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
<button data-dismiss="modal" class="btn btn-lg btn-primary" onclick="saveLocation()">Save</button>
</div>

</div>

Expand All @@ -79,13 +109,14 @@
var options = {
InterfaceOptions: {
latId: 'lat',
lngId: 'lng'
lngId: 'lng',
placenameDisplayOnError: ''
},
location: {
lat: 23 ,
lat: 23,
lon: 77
}
} ;
};

var blurredLocation;

Expand Down Expand Up @@ -120,13 +151,38 @@
let zoom = blurredLocation.map.getZoom();
$('#ex1').slider('setValue', zoom);
})

$('#coord_button').click((event) => {
event.preventDefault();
$('#coord_input').toggle();
});
$("#coord_input").hide();

$('#recent_locations').change((event) => {
let location = JSON.parse($('#recent_locations').val());
blurredLocation.map.setView([location.lat, location.lon], blurredLocation.getZoomFromCoordinates(location.lat, location.lon));
});

var initialPlacename = '';
$('#placenameDisplay').on('focusin', function() {
initialPlacename = $('#placenameDisplay').val();
});
$('#placenameDisplay').on('focusout', function() {
if($('#placenameDisplay').val() === '') {
$('#placenameDisplay').attr('data-preventOverwrite', 'false');
} else if ($('#placenameDisplay').val() !== initialPlacename) {
$('#placenameDisplay').attr('data-preventOverwrite', 'true');
}
});

})();

function saveLocation() {
var tags = 'lat:' + blurredLocation.getLat() + ',lon:' + blurredLocation.getLon() + ',zoom:' + blurredLocation.getZoom();
if (blurredLocation.isBlurred()) tags = tags + ',' + 'location:blurred'
if ($('#placenameDisplay').val() != 'Location unavailable') tags = tags + ',' + 'place:' + parameterize($('#placenameDisplay').val());
if ($('#placenameDisplay').val() !== ('Location unavailable' || '')) {
tags = tags + ',' + 'place:' + parameterize($('#placenameDisplay').val());
}
<% if params[:url] %>
addTag(tags, '<%= params[:url] %>');
<% else %>
Expand All @@ -141,13 +197,3 @@
}

</script>

<style>
.modal-body {
background: #f8f8f8;
}
.blurred-location {
background: #f8f8f8;
width: 100%;
}
</style>
12 changes: 3 additions & 9 deletions app/views/locations/_modal.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,9 @@
<h4 class="modal-title">Enter a location</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<%= render partial: 'locations/form' %>
</div>
<!--
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
-->

<%= render partial: 'locations/form' %>

</div>
</div>
</div>
Loading

0 comments on commit 632fb74

Please sign in to comment.