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

#5270 Align checkbox with the text. #5372

Merged
merged 4 commits into from
Apr 8, 2019
Merged

#5270 Align checkbox with the text. #5372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ef94c0
#5270 Align checkbox with the text.
shivam15 Apr 5, 2019
40b6aca
#5270 moving css to file
shivam15 Apr 6, 2019
2bf6123
Override Bootstrap bug
sashadev-sky Apr 7, 2019
651c301
pulled changes from master
shivam15 Apr 8, 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 @@ -19,6 +19,7 @@
*= require_self
*= require style
*= require feature
*= require btsp_checkbox_override
*= require editor
*= require blog
*= require search
Expand Down
41 changes: 41 additions & 0 deletions app/assets/stylesheets/btsp_checkbox_override.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
https://github.com/twbs/bootstrap/issues/27755
The issue arises from Bootstrap V4 positioning checkboxes assuming they're a particular
pixel size, but Windows & Mac (and probably other OS's) size them slighlty differently.
Results in checkboxes not appearing vertically aligned to their labels depending
on the OS used (incompatibility is system-level) and to varying degrees depending on the browser
- see here for ex:https://github.com/publiclab/plots2/pull/5372#pullrequestreview-223542883
Note the issue has been flagged to solve for **Bootstrap V5** release.
On update: if resolved, can delete this but ensure compatibility first.
*/

/*
- To position checkboxes as hanging controls you should **only indent the labels**
this is v.4 usage as well.
- !important declarations ensure a Bootstrap update wont override these immediately
*/

div.form-check {
position: relative !important;
display: block !important;
padding-left: 1.75rem !important; /* btsp's default */

label.form-check-label {
margin-bottom: 0 !important; /* Override btsp's default `<label>` bottom margin */
}

input[type=checkbox].form-check-input {
margin: 0 !important; /* zero out btsp's margin declaration */
margin-top: 0 !important;
position: absolute !important;
margin-left: -1.75rem !important; /* btsp's default */
top: 50% !important;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%) !important;
}
}

4 changes: 4 additions & 0 deletions app/assets/stylesheets/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,7 @@
margin:3px 10px 10px;
width:30%;
}

.checkbox-text-align {
float:left;
}
121 changes: 52 additions & 69 deletions app/views/editor/rich.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<div class="ple-content">

<!-- errors module -->
<div class="ple-errors"></div>
<div class="ple-errors"></div>
<!-- end errors module -->

<!-- title module -->
Expand Down Expand Up @@ -90,52 +90,58 @@
</div>

<div class="ple-module-content col-md-9">
<button id="location_button" class="btn btn-lg btn-default"><i class="fa fa-map-marker" aria-hidden="true"></i> Add a location</button>
<p class="ple-help"><span class="ple-help-minor">Search location through place-name , latitude and longitude or by panning the map .</span></p>
<button id="location_button" class="btn btn-lg btn-default"><i class="fa fa-map-marker" aria-hidden="true"></i> Add a location</button>
<p class="ple-help"><span class="ple-help-minor">Search the map by entering a location's name or its latitude & longitude coordinates. You can also pan the map directly.</span></p>

<div id="map_content">
<div class="row">
<div class="col-md-6">
<div id="map" class="leaflet-map" style="width: 100% ; height: 300px; margin-bottom:8px;"></div>
</div>
<div class="col-md-6">
<label>By place name</label>
<p>
<input id="placenameInput" type="text" class="form-control" />
</p>
<p>
<label>Or by entering coordinates</label>
<div class="row">
<div class="col-md-6">
<p><label>
Latitude
<input id="lat" type="text" class="form-control" placeholder="Latitude" />
</label></p>
</div>
<div class="col-md-6">
<p><label>
Longitude
<input id="lng" type="text" class="form-control" placeholder="Longitude" />
</label></p>
</div>
</div>
</p>
<br>
<p><button class="btn btn-lg btn-default" onclick="editor.mapModule.blurredLocation.geocodeWithBrowser(true);">
<div id="ldi-geocode-button">
<i class="fa fa-compass"></i> Use current location
</div>
</button></p>

<br>
<label>
<input id="obscureLocation" type="checkbox" onchange='editor.mapModule.blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);'>
Blur my location
</label>
<a href="https://publiclab.org/location-privacy">Learn more</a>
</div>
<div id="map_content">
<div class="row">
<div class="col-md-6">
<div id="map" class="leaflet-map" style="width: 100% ; height: 300px; margin-bottom:8px;"></div>
</div>

<div class="col-md-6">
<label>By place name</label>
<p>
<input id="placenameInput" type="text" class="form-control" />
</p>
<p>
<label>Or by entering coordinates</label>
<div class="row">
<div class="col-md-6">
<p><label>
Latitude
<input id="lat" type="text" class="form-control" placeholder="Latitude" />
</label></p>
</div>
<div class="col-md-6">
<p><label>
Longitude
<input id="lng" type="text" class="form-control" placeholder="Longitude" />
</label></p>
</div>
</div>
</p>

<br>

<p><button class="btn btn-lg btn-default" onclick="editor.mapModule.blurredLocation.geocodeWithBrowser(true);">
<div id="ldi-geocode-button">
<i class="fa fa-compass"></i> Use current location
</div>
</button></p>

<br>

<div class="form-check">
<label class="form-check-label">
<input id="obscureLocation" type="checkbox" class="form-check-input" onchange='editor.mapModule.blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);'>
Blur my location
</label>
<a href="https://publiclab.org/location-privacy">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Map Module end -->
Expand Down Expand Up @@ -173,13 +179,10 @@
<!-- multi module -->
<!--
<div class="ple-module-multi ple-module container">
<div class="ple-module-guide col-md-3">
<p>Extras</p>
</div>
<div class="ple-module-content col-md-9">
<div class="btn-group">
<a class="btn btn-lg btn-default">
<i class="fa fa-comment-o"></i> Invite responses <i class="fa fa-caret-down"></i>
Expand All @@ -197,9 +200,7 @@
More <i class="fa fa-caret-down"></i>
</a>
</div>
</div>
</div>
-->
<!-- end multi module -->
Expand Down Expand Up @@ -248,20 +249,16 @@

</div>
<script>

$( document ).ready(function() {
$("#map_content").hide() ;
$("#location_button").click(function(){
$("#map_content").toggle() ;
}) ;
});

var editor;

(function() {

editor = new PL.Editor({

data: {
token: $('meta[name="csrf-token"]').attr('content')
},
Expand All @@ -270,31 +267,25 @@
lon: <%= @lon %> ,
<% end %>
textarea: $('.ple-textarea')[0],

<% if @main_image %>
mainImageUrl: '<%= @main_image %>',
<% end %>

<% if params[:action] == 'edit' %>
destination: '/notes/update/<%= @node.id %>?rich=true',
<% else %>
destination: '/notes/create?rich=true',
<% end %>

<% if params[:redirect] == 'question' %>
redirect: 'redirect',
<% end %>

<% if (@node && @node.errors.size > 0) && (@revision && @revision.errors.size > 0) %>
errors: <%=raw (@node.errors.to_h.merge(@revision.errors.to_h)).to_json %>,
<% elsif (@node && @node.errors.size > 0) %>
errors: <%=raw (@node.errors.to_h).to_json %>,
<% elsif (@revision && @revision.errors.size > 0) %>
errors: <%=raw (@revision.errors.to_h).to_json %>,
<% end %>

format: 'publiclab',

publishCallback: function publishCallback(response) {
// parse and display errors!
if (typeof response === "string") {
Expand All @@ -309,23 +300,19 @@
window.scroll(0, 0);
}
},

mapModule: true,

mainImageModule: {
uid: <%= current_user.id %><% if @node && @node.id %>,
nid: <%= @node.id %><% end %>,
nid: <%= @node.id %><% end %>,
token: $('meta[name="csrf-token"]').attr('content')
},

richTextModule: {
authorsAutocomplete: false,
tagsAutocomplete: false,
formats: ['jpg', 'jpeg', 'png', 'gif'],
attachmentFormats: ['csv', 'xls', 'zip', 'kml', 'kmz', 'gpx', 'lut', 'stl', 'dxf', 'txt', 'pdf', 'svg', 'doc', 'ppt', 'docx', 'bmp', 'obj', 'json']
//formats: ['csv', 'xls', 'zip', 'kml', 'kmz', 'gpx', 'lut', 'stl', 'dxf', 'txt', 'pdf', 'svg', 'doc', 'ppt', 'docx', 'bmp', 'obj', 'json', 'jpg', 'jpeg', 'png', 'gif']
},

titleModule: {
suggestRelated: true,
fetchRelated: debounce(function(show) {
Expand Down Expand Up @@ -355,7 +342,6 @@
});
}, 1000)
},

tagsModule: {
remote: {
url: "/tag/suggested/test",
Expand All @@ -365,14 +351,11 @@
}
}
});

})();

$('.legacy-button').click(function onLegacyClick(event) {
event.preventDefault();
window.location = "/post?legacy=true&body=" + editor.richTextModule.value() + "&tags=" + editor.tagsModule.value() + "&title=" + editor.titleModule.value();
});

function draftCheck() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
Expand All @@ -388,4 +371,4 @@
}
console.log("Draft:", editor.data.draft);
}
</script>
</script>