CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-19 15:08:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

General usability improvements

Browse Source 
* Reevaluate all featuers stroke widths for shadow, casing, stroke
* Shadow width is important to make sure all features are easily clickable
* Casing width is important to see oneway arrows
* Make sure all line styles have normal and low-zoom variants
* Show directional arrows for all waterway types
This commit is contained in:
Bryan Housel
2017-03-16 16:16:35 -04:00
parent d2a314ff01
commit af757d31be
8 changed files with 347 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/30_highways.css
+162 -74
View File
@@ -1,39 +1,44 @@
/* highways */
.preset-icon .icon.tag-highway.other-line {
color: #fff;
fill: #777;
}
path.casing.tag-highway {
stroke: #444;
}
path.stroke.tag-highway {
stroke: #ccc;
}
/* highway areas */
path.stroke.area.tag-highway {
stroke:#fff;
stroke: #fff;
stroke-dasharray: none;
stroke-width: 2;
}
/* wide highways */
.preset-icon .icon.tag-highway.other-line {
color: #fff;
fill: #777;
}
path.shadow.tag-highway {
stroke-width:16;
stroke-width: 20;
}
path.casing.tag-highway {
stroke:#444;
stroke-width:10;
stroke-width: 10;
}
path.stroke.tag-highway {
stroke:#ccc;
stroke-width:8;
stroke-width: 8;
}
.low-zoom path.shadow.tag-highway {
stroke-width:12;
stroke-width: 16;
}
.low-zoom path.casing.tag-highway {
stroke-width:6;
stroke-width: 7;
}
.low-zoom path.stroke.tag-highway {
stroke-width:4;
stroke-width: 5;
}
.preset-icon .icon.highway-motorway,
@@ -224,33 +229,54 @@ path.casing.tag-unclassified {
/* narrow highways */
path.stroke.tag-highway-living_street,
path.stroke.tag-highway-service,
path.stroke.tag-highway-track,
path.stroke.tag-highway-path,
path.stroke.tag-highway-footway,
path.stroke.tag-highway-cycleway,
path.stroke.tag-highway-bridleway,
path.stroke.tag-highway-corridor,
path.stroke.tag-highway-pedestrian,
path.stroke.tag-highway-steps,
path.stroke.tag-highway-road,
path.stroke.tag-living_street,
path.stroke.tag-service,
path.stroke.tag-track,
path.stroke.tag-path,
path.stroke.tag-footway,
path.stroke.tag-cycleway,
path.stroke.tag-bridleway,
path.stroke.tag-corridor,
path.stroke.tag-pedestrian,
path.stroke.tag-steps,
path.stroke.tag-road {
stroke-width:4;
path.shadow.tag-highway-living_street,
path.shadow.tag-highway-service,
path.shadow.tag-highway-track,
path.shadow.tag-highway-road,
path.shadow.tag-living_street,
path.shadow.tag-service,
path.shadow.tag-track,
path.shadow.tag-road {
stroke-width: 16;
}
path.casing.tag-highway-living_street,
path.casing.tag-highway-service,
path.casing.tag-highway-track,
path.casing.tag-highway-road,
path.casing.tag-living_street,
path.casing.tag-service,
path.casing.tag-track,
path.casing.tag-road {
stroke-width: 7;
}
path.stroke.tag-highway-living_street,
path.stroke.tag-highway-service,
path.stroke.tag-highway-track,
path.stroke.tag-highway-road,
path.stroke.tag-living_street,
path.stroke.tag-service,
path.stroke.tag-track,
path.stroke.tag-road {
stroke-width: 5;
}
path.shadow.tag-highway-path,
path.shadow.tag-highway-footway,
path.shadow.tag-highway-cycleway,
path.shadow.tag-highway-bridleway,
path.shadow.tag-highway-corridor,
path.shadow.tag-highway-pedestrian,
path.shadow.tag-highway-steps,
path.shadow.tag-path,
path.shadow.tag-footway,
path.shadow.tag-cycleway,
path.shadow.tag-bridleway,
path.shadow.tag-corridor,
path.shadow.tag-pedestrian,
path.shadow.tag-steps {
stroke-width: 16;
}
path.casing.tag-highway-path,
path.casing.tag-highway-footway,
path.casing.tag-highway-cycleway,
@@ -258,48 +284,79 @@ path.casing.tag-highway-bridleway,
path.casing.tag-highway-corridor,
path.casing.tag-highway-pedestrian,
path.casing.tag-highway-steps,
path.casing.tag-highway-road,
path.casing.tag-living_street,
path.casing.tag-service,
path.casing.tag-track,
path.casing.tag-path,
path.casing.tag-footway,
path.casing.tag-cycleway,
path.casing.tag-bridleway,
path.casing.tag-corridor,
path.casing.tag-pedestrian,
path.casing.tag-steps,
path.casing.tag-road {
stroke-width:6;
path.casing.tag-steps {
stroke-width: 5;
}
path.stroke.tag-highway-path,
path.stroke.tag-highway-footway,
path.stroke.tag-highway-cycleway,
path.stroke.tag-highway-bridleway,
path.stroke.tag-highway-corridor,
path.stroke.tag-highway-pedestrian,
path.stroke.tag-highway-steps,
path.stroke.tag-path,
path.stroke.tag-footway,
path.stroke.tag-cycleway,
path.stroke.tag-bridleway,
path.stroke.tag-corridor,
path.stroke.tag-pedestrian,
path.stroke.tag-steps {
stroke-width: 3;
}
.low-zoom path.stroke.tag-highway-living_street,
.low-zoom path.stroke.tag-highway-service,
.low-zoom path.stroke.tag-highway-track,
.low-zoom path.stroke.tag-highway-path,
.low-zoom path.stroke.tag-highway-footway,
.low-zoom path.stroke.tag-highway-cycleway,
.low-zoom path.stroke.tag-highway-bridleway,
.low-zoom path.stroke.tag-highway-corridor,
.low-zoom path.stroke.tag-highway-pedestrian,
.low-zoom path.stroke.tag-highway-steps,
.low-zoom path.stroke.tag-highway-road,
.low-zoom path.stroke.tag-living_street,
.low-zoom path.stroke.tag-service,
.low-zoom path.stroke.tag-track,
.low-zoom path.stroke.tag-path,
.low-zoom path.stroke.tag-footway,
.low-zoom path.stroke.tag-cycleway,
.low-zoom path.stroke.tag-bridleway,
.low-zoom path.stroke.tag-corridor,
.low-zoom path.stroke.tag-pedestrian,
.low-zoom path.stroke.tag-steps,
.low-zoom path.stroke.tag-road {
stroke-width:2;
.low-zoom path.shadow.tag-highway-living_street,
.low-zoom path.shadow.tag-highway-service,
.low-zoom path.shadow.tag-highway-track,
.low-zoom path.shadow.tag-highway-road,
.low-zoom path.shadow.tag-living_street,
.low-zoom path.shadow.tag-service,
.low-zoom path.shadow.tag-track,
.low-zoom path.shadow.tag-road {
stroke-width: 12;
}
.low-zoom path.casing.tag-highway-living_street,
.low-zoom path.casing.tag-highway-service,
.low-zoom path.casing.tag-highway-track,
.low-zoom path.casing.tag-highway-road,
.low-zoom path.casing.tag-living_street,
.low-zoom path.casing.tag-service,
.low-zoom path.casing.tag-track,
.low-zoom path.casing.tag-road {
stroke-width: 5;
}
.low-zoom path.stroke.tag-highway-living_street,
.low-zoom path.stroke.tag-highway-service,
.low-zoom path.stroke.tag-highway-track,
.low-zoom path.stroke.tag-highway-road,
.low-zoom path.stroke.tag-living_street,
.low-zoom path.stroke.tag-service,
.low-zoom path.stroke.tag-track,
.low-zoom path.stroke.tag-road {
stroke-width: 3;
}
.low-zoom path.shadow.tag-highway-path,
.low-zoom path.shadow.tag-highway-footway,
.low-zoom path.shadow.tag-highway-cycleway,
.low-zoom path.shadow.tag-highway-bridleway,
.low-zoom path.shadow.tag-highway-corridor,
.low-zoom path.shadow.tag-highway-pedestrian,
.low-zoom path.shadow.tag-highway-steps,
.low-zoom path.shadow.tag-path,
.low-zoom path.shadow.tag-footway,
.low-zoom path.shadow.tag-cycleway,
.low-zoom path.shadow.tag-bridleway,
.low-zoom path.shadow.tag-corridor,
.low-zoom path.shadow.tag-pedestrian,
.low-zoom path.shadow.tag-steps {
stroke-width: 12;
}
.low-zoom path.casing.tag-highway-path,
.low-zoom path.casing.tag-highway-footway,
.low-zoom path.casing.tag-highway-cycleway,
@@ -307,20 +364,32 @@ path.casing.tag-road {
.low-zoom path.casing.tag-highway-corridor,
.low-zoom path.casing.tag-highway-pedestrian,
.low-zoom path.casing.tag-highway-steps,
.low-zoom path.casing.tag-highway-road,
.low-zoom path.casing.tag-living_street,
.low-zoom path.casing.tag-service,
.low-zoom path.casing.tag-track,
.low-zoom path.casing.tag-path,
.low-zoom path.casing.tag-footway,
.low-zoom path.casing.tag-cycleway,
.low-zoom path.casing.tag-bridleway,
.low-zoom path.casing.tag-corridor,
.low-zoom path.casing.tag-pedestrian,
.low-zoom path.casing.tag-steps,
.low-zoom path.casing.tag-road {
stroke-width:4;
.low-zoom path.casing.tag-steps {
stroke-width: 3;
}
.low-zoom path.stroke.tag-highway-path,
.low-zoom path.stroke.tag-highway-footway,
.low-zoom path.stroke.tag-highway-cycleway,
.low-zoom path.stroke.tag-highway-bridleway,
.low-zoom path.stroke.tag-highway-corridor,
.low-zoom path.stroke.tag-highway-pedestrian,
.low-zoom path.stroke.tag-highway-steps,
.low-zoom path.stroke.tag-path,
.low-zoom path.stroke.tag-footway,
.low-zoom path.stroke.tag-cycleway,
.low-zoom path.stroke.tag-bridleway,
.low-zoom path.stroke.tag-corridor,
.low-zoom path.stroke.tag-pedestrian,
.low-zoom path.stroke.tag-steps {
stroke-width: 1;
}
.preset-icon .icon.highway-living-street {
color: #bbb;
@@ -347,6 +416,12 @@ path.stroke.tag-pedestrian {
stroke:#fff;
stroke-dasharray: 2, 8;
}
.low-zoom path.stroke.tag-highway-corridor,
.low-zoom path.stroke.tag-highway-pedestrian,
.low-zoom path.stroke.tag-corridor,
.low-zoom path.stroke.tag-pedestrian {
stroke-dasharray: 1, 4;
}
path.casing.tag-highway-corridor,
path.casing.tag-highway-pedestrian,
path.casing.tag-corridor,
@@ -406,6 +481,13 @@ path.stroke.tag-highway-bridleway {
stroke-linecap: butt;
stroke-dasharray: 6, 6;
}
.low-zoom path.stroke.tag-highway-path,
.low-zoom path.stroke.tag-highway-footway,
.low-zoom path.stroke.tag-highway-cycleway,
.low-zoom path.stroke.tag-highway-bridleway {
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
path.casing.tag-highway-path,
path.casing.tag-highway-path.tag-unpaved {
@@ -450,6 +532,9 @@ path.stroke.tag-highway-footway.tag-crossing {
stroke: #444;
stroke-dasharray: 6, 4;
}
.low-zoom path.stroke.tag-highway-footway.tag-crossing {
stroke-dasharray: 3, 2;
}
.preset-icon .icon.tag-route-bicycle,
.preset-icon .icon.highway-cycleway {
@@ -478,6 +563,9 @@ path.stroke.tag-highway-steps {
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
.low-zoom path.stroke.tag-highway-steps {
stroke-dasharray: 2, 2;
}
path.casing.tag-highway-steps,
path.casing.tag-highway-steps.tag-unpaved {
stroke: #fff;