ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve analysis tab CSS

Browse source 
There are some ways the look of the analysis tab can be polished:
- Properly right-align the length header
  (it had extra margins required for the sorting arrows in the data tab)
- Use the same font size for table header and body (like in the data tab)
- Improve padding of the totals row (to align with the rows above)
- Add missing style for headings, so they look more balanced
  (the CSS was already there, but the wrong class was used in the HTML)
- Fine-tune vertical spacing (to help visual grouping)
- Remove unused and redundant CSS
- Do not show yellow hover effect over table header
This commit is contained in:
Henrik Fehlauer 2020-05-24 18:00:00 +00:00
parent 9d648fc1d7
commit 8ca92e260d
2 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/style.css
View file

@ -249,22 +249,21 @@ input#trackname:focus:invalid {
margin: 0;
}
.track-analysis-header-distance {
table.dataTable.mini .track-analysis-header-distance {
text-align: right;
padding-right: 4px;
}
.track-analysis-table td {
.track-analysis-table {
font-size: small;
padding-bottom: 0.5em;
}
table.dataTable.track-analysis-table tfoot td {
font-weight: bold;
text-align: right;
padding-right: 0;
}
table.track-analysis-table tr:hover {
background-color: rgba(255, 255, 0, 0.3);
padding-right: 4px;
padding-top: 4px;
}
.track-analysis-title {
@ -276,8 +275,8 @@ table.track-analysis-table tr:hover {
}
.track-analysis-heading {
margin-top: 15px;
font-weight: bold;
margin-top: 0.7em;
margin-bottom: 0.1em;
font-size: 1.2em;
}
@ -447,13 +446,10 @@ table.dataTable thead .sorting {
background-position: center right -3px;
}
table.track-analysis-table tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
background-color: rgba(255, 255, 0, 0.2);
table.dataTable.display tbody tr:hover {
background-color: rgba(255, 255, 0, 0.3);
}
table.dataTable.hover tbody tr:hover.selected,
table.dataTable.display tbody tr:hover.selected {

12
js/control/TrackAnalysis.js
View file

@ -226,11 +226,17 @@ BR.TrackAnalysis = L.Class.extend({
var $content = $('#track_statistics');
$content.html('');
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>'));
$content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>')
);
$content.append(this.renderTable('highway', analysis.highway));
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>'));
$content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>')
);
$content.append(this.renderTable('surface', analysis.surface));
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>'));
$content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>')
);
$content.append(this.renderTable('smoothness', analysis.smoothness));
},