cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor the directions table to use bootstrap table styling

Browse source 
This allows us to remove some custom CSS
This commit is contained in:
Andy Allan 2023-09-13 11:30:50 +01:00
parent d45c1435e6
commit 5473be178a
2 changed files with 4 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/index/directions.js
View file

@ -268,7 +268,8 @@ OSM.Directions = function (map) {
I18n.t("javascripts.directions.descend") + ": " + formatHeight(route.descend) + "."); I18n.t("javascripts.directions.descend") + ": " + formatHeight(route.descend) + ".");
} }
var turnByTurnTable = $("<table class='mb-3'>"); var turnByTurnTable = $("<table class='table table-sm mb-3'>")
.append($("<tbody>"));
var directionsCloseButton = $("<button type='button' class='btn-close'>") var directionsCloseButton = $("<button type='button' class='btn-close'>")
.attr("aria-label", I18n.t("javascripts.close")); .attr("aria-label", I18n.t("javascripts.close"));
@ -304,8 +305,8 @@ OSM.Directions = function (map) {
} }
var row = $("<tr class='turn'/>"); var row = $("<tr class='turn'/>");
row.append("<td><div class='direction i" + direction + "'/></td> "); row.append("<td class='border-0'><div class='direction i" + direction + "'/></td> ");
row.append("<td class='instruction'>" + instruction); row.append("<td>" + instruction);
row.append("<td class='distance'>" + dist); row.append("<td class='distance'>" + dist);
row.on("click", function () { row.on("click", function () {

5
app/assets/stylesheets/common.scss
View file

@ -698,11 +698,6 @@ div.direction {
div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
} }
td.instruction, td.distance {
padding-top: $lineheight/5;
padding-bottom: $lineheight/5;
border-bottom: 1px solid $grey;
}
td.distance { td.distance {
color: $darkgrey; color: $darkgrey;
text-align: right; text-align: right;