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

Rework sidebar to use padding on the sidebar_content div

Browse source 
This saves every header, list, paragraph etc having to sort out their own padding. The couple of instances where we want edge-to-edge can be acheived using the negative margin spacing utilities.

The padding is based on $spacer so that it can be adjusted automatically via bootstrap configuration.

This also means that we can remove many (mis-)uses of the browse-section class, which is only supposed to be for cases where there are multiple browse-sections in sequence (e.g. multiple nodes in the node history browse pages).
This commit is contained in:
Andy Allan 2021-06-16 15:09:48 +01:00
parent c2587b5b57
commit c8f0a81eb7
16 changed files with 36 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -362,6 +362,10 @@ body.compact-nav {
display: none;
}
#sidebar_content {
padding: $spacer;
}
> div {
position: relative;
float: left;
@ -370,7 +374,6 @@ body.compact-nav {
}
h2 {
padding: $lineheight $lineheight $lineheight/2;
font-size: 1.5rem;
}
@ -676,6 +679,10 @@ body.compact-nav {
margin-left: auto;
margin-right: auto;
}
> div {
padding: $spacer;
}
}
#sidebar {
@ -739,13 +746,6 @@ header .search_forms,
/* Rules for routing */
#sidebar_content>table {
padding: 5px 20px 10px 15px;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
div.direction {
background-image: image-url('routing-sprite.png');
width: 20px;
@ -756,10 +756,6 @@ div.direction {
div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
}
p#routing_summary {
padding: 0 $lineheight $lineheight/4;
}
td.instruction, td.distance {
padding-top: $lineheight/5;
padding-bottom: $lineheight/5;
@ -821,7 +817,8 @@ tr.turn:hover {
#sidebar_content {
.browse-section {
padding: $lineheight/2 $lineheight;
padding-bottom: $spacer;
margin-bottom: $spacer;
border-bottom: 1px solid $grey;
h4:first-child {
@ -942,17 +939,8 @@ tr.turn:hover {
margin: 0 0 10px 10px;
}
.query-intro p {
padding: $lineheight $lineheight $lineheight/2;
}
.query-results {
display: none;
padding-bottom: $lineheight/2;
h3 {
padding: 0 $lineheight;
}
ul {
li {
@ -981,8 +969,6 @@ tr.turn:hover {
/* Rules for export sidebar */
.export_form {
padding: $lineheight;
.export_area_inputs,
.export_button {
text-align: center;