Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clean up styling of location form #6969

Merged
merged 3 commits into from
Dec 17, 2019
Merged

Clean up styling of location form #6969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e271835
cleaned up styling of location form
nstjean Dec 13, 2019
612dcdf
click to show coordinates on form
nstjean Dec 17, 2019
0f131b4
make entering coordinates link underlined
nstjean Dec 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,5 @@
*= require jquery-confirm/css/jquery-confirm.css
*= require jquery.atwho
*= require profile
*= require location
*/
16 changes: 16 additions & 0 deletions app/assets/stylesheets/location.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.leaflet-marker-icon {
background: url("https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-black.png") ;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nstjean, is there a reason behind adding this code? This is currently turning all marker icons' background to black.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@crisner Looks like I just moved that code from rich.html.rb into a stylesheet. So feel free to remove it if it's causing issues!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha, yes i think this will overwrite LEL css also.
@nstjean , ideally we should make this a functionality in PL.editor to change marker color by taking input from user.
But for now let's move this css back as it may cause issues in future 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I don't actually see it changing the marker color in /post/ - I'm wondering if we can just remove it altogether. @crisner where are you seeing the color change?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here:https://publiclab.org/map
publiclab org_map

And here: https://publiclab.org/wiki/unearthing-pvd
publiclab org_wiki_unearthing-pvd

I guess wherever we have maps.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh, now I see where it is!
Fix in PR #7222

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!

}

#map_content p {
margin: 0;
}
#map_content label {
margin-bottom: .2rem;
}
#map_content .form-group {
margin-bottom: 1.4rem;
}
#map_content .form-group .btn {
margin-top: .4rem;
}
66 changes: 36 additions & 30 deletions app/views/editor/rich.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@
<%= javascript_include_tag('/lib/leaflet-spin/example/leaflet.spin.min.js') %>

<style type="text/css">
.leaflet-marker-icon {
background: url("https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-black.png") ;
}
/* Fix a background-color error on this page. */
body {
background-color: white;
}
Expand All @@ -35,6 +33,10 @@
.ple-module-main_image .col-lg-9 {
margin: 0 auto;
}

#coord_button {
text-decoration: underline;
}
</style>

<div class="pl-editor">
Expand Down Expand Up @@ -137,45 +139,44 @@
</div>

<div class="col-lg-6">
<label>By place name</label>
<p>
<input id="placenameInput" type="text" class="form-control" />
</p>
<p><label>Or by entering coordinates</label></p>

<div class="row">
<div class="col-lg-6">
<p>
<label>
Latitude
<div class="form-group">
<label>By place name</label>
<p>
<input id="placenameInput" type="text" class="form-control" />
</p>
</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>Latitude</label>
<p>
<input
id="lat"
type="text"
class="form-control"
placeholder="Latitude"
/>
</label>
</p>
</div>
</p>
</div>

<div class="col-lg-6">
<p>
<label>
Longitude
<div class="col-sm-6">
<label>Longitude</label>
<p>
<input
id="lng"
type="text"
class="form-control"
placeholder="Longitude"
/>
</label>
</p>
</p>
</div>
</div>
</div>

<br>

<p>
<div class="form-group">
<button
class="btn btn-lg btn-outline-secondary"
onclick="editor.mapModule.blurredLocation.geocodeWithBrowser(true);"
Expand All @@ -185,10 +186,8 @@
Use current location
</div>
</button>
</p>
</div>

<br>

<div class="form-check">
<label class="form-check-label">
<input
Expand All @@ -199,7 +198,7 @@
/>
Blur my location
</label>
<a href="https://publiclab.org/location-privacy">Learn more</a>
<a href="https://publiclab.org/location-privacy" target="_blank">Learn more »</a>
</div>

</div>
Expand Down Expand Up @@ -415,6 +414,12 @@
}
});

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

// upload via posting "posted_main_image"
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
Expand Down Expand Up @@ -459,4 +464,5 @@
}
console.log("Draft:", editor.data.draft);
}

</script>