Skip to content

Commit

Permalink
#5270 Align checkbox with the text. (#5372)
Browse files Browse the repository at this point in the history 
* #5270 Align checkbox with the text.

* #5270 moving css to file

* Override Bootstrap bug
  • Loading branch information
@shivam15 @jywarren
shivam15 authored and jywarren committed Apr 8, 2019
1 parent 453456c commit 01c7ace
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 69 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.css
View file
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
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
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
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>

0 comments on commit 01c7ace

Please sign in to comment.