mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-21 07:46:58 +02:00
Only show Detroit vector tiles when map is around Detroit
Also adds an "About" link to the github page.
This commit is contained in:
Bryan Housel
+180
-205
@@ -1,6 +1,5 @@
|
||||
/* Basics
|
||||
------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
Opera misbehaves when the window is resized vertically unless 100% width + height are
|
||||
applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
|
||||
@@ -202,7 +201,6 @@ a:hover {
|
||||
|
||||
/* Forms
|
||||
------------------------------------------------------- */
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
|
||||
@@ -288,7 +286,6 @@ table.tags, table.tags td, table.tags th {
|
||||
|
||||
/* Grid
|
||||
------------------------------------------------------- */
|
||||
|
||||
.col0 { float: left; width: 04.1666%; }
|
||||
.col1 { float: left; width: 08.3333%; }
|
||||
.col2 { float: left; width: 16.6666%; }
|
||||
@@ -305,7 +302,6 @@ table.tags, table.tags td, table.tags th {
|
||||
|
||||
/* UI Lists
|
||||
------------------------------------------------------- */
|
||||
|
||||
ul li { list-style: none;}
|
||||
|
||||
.toggle-list > label {
|
||||
@@ -348,22 +344,18 @@ ul li { list-style: none;}
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fillL2 {
|
||||
background: #f6f6f6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fillL3 {
|
||||
background: #ececec;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fillD {
|
||||
background: rgba(0,0,0,.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fillD2 {
|
||||
background: rgba(0,0,0,.75);
|
||||
color: #fff;
|
||||
@@ -396,31 +388,9 @@ li.hide {
|
||||
background-size: 5px 5px;
|
||||
}
|
||||
|
||||
.panewrap {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
right: -100%;
|
||||
}
|
||||
|
||||
|
||||
.pane {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
top: 0;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.pane:first-child {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pane:last-child {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
/* Buttons
|
||||
------------------------------------------------------- */
|
||||
button {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
@@ -611,8 +581,8 @@ button.add-note svg.icon {
|
||||
}
|
||||
|
||||
|
||||
/* Icons */
|
||||
|
||||
/* Icons
|
||||
------------------------------------------------------- */
|
||||
.icon {
|
||||
vertical-align: top;
|
||||
width: 20px;
|
||||
@@ -664,9 +634,8 @@ button.add-note svg.icon {
|
||||
}
|
||||
|
||||
|
||||
/* ToolBar / Persistent UI Elements
|
||||
/* Toolbar / Persistent UI Elements
|
||||
------------------------------------------------------- */
|
||||
|
||||
#bar {
|
||||
position: fixed;
|
||||
padding: 10px 0;
|
||||
@@ -687,7 +656,6 @@ button.add-note svg.icon {
|
||||
|
||||
/* Header for modals / panes
|
||||
------------------------------------------------------- */
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 60px;
|
||||
@@ -775,7 +743,6 @@ button.add-note svg.icon {
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.footer > a {
|
||||
@@ -791,9 +758,8 @@ button.add-note svg.icon {
|
||||
}
|
||||
|
||||
|
||||
/* Hide-Toggle
|
||||
/* Hide/Toggle collapsable sections (aka Disclosure)
|
||||
------------------------------------------------------- */
|
||||
|
||||
.hide-toggle .icon.pre-text {
|
||||
vertical-align: text-top;
|
||||
width: 16px;
|
||||
@@ -814,9 +780,8 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* Inspector
|
||||
/* Sidebar / Inspector
|
||||
------------------------------------------------------- */
|
||||
|
||||
#sidebar {
|
||||
position: relative;
|
||||
float: left;
|
||||
@@ -838,6 +803,28 @@ a.hide-toggle {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.panewrap {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
right: -100%;
|
||||
}
|
||||
|
||||
.pane {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
top: 0;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.pane:first-child {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pane:last-child {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.inspector-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -859,15 +846,12 @@ a.hide-toggle {
|
||||
.feature-list-pane .inspector-body {
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.preset-list-pane .inspector-body {
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.entity-editor-pane .inspector-body {
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.selection-list-pane .inspector-body {
|
||||
top: 60px;
|
||||
}
|
||||
@@ -903,12 +887,12 @@ a.hide-toggle {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Feature list */
|
||||
|
||||
/* Feature List / Search Results
|
||||
------------------------------------------------------- */
|
||||
.feature-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-results-item,
|
||||
.geocode-item,
|
||||
.feature-list-item {
|
||||
@@ -977,11 +961,8 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* Presets
|
||||
/* Preset List and Icons
|
||||
------------------------------------------------------- */
|
||||
|
||||
/* Preset grid */
|
||||
|
||||
.preset-list {
|
||||
width: 100%;
|
||||
padding: 20px 20px 10px 20px;
|
||||
@@ -1159,7 +1140,6 @@ a.hide-toggle {
|
||||
.preset-list-item button.tag-reference-button:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.preset-list-item button.tag-reference-button .icon {
|
||||
opacity: .5;
|
||||
}
|
||||
@@ -1206,27 +1186,23 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* Preset Editor */
|
||||
|
||||
/* Entity/Preset Editor
|
||||
------------------------------------------------------- */
|
||||
.preset-editor {
|
||||
overflow: hidden;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.preset-editor a.hide-toggle {
|
||||
margin: 0 20px 5px 20px;
|
||||
}
|
||||
|
||||
.preset-editor .form-fields-container {
|
||||
padding: 10px;
|
||||
margin: 0 10px 10px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.preset-editor .form-fields-container:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.entity-editor-pane .preset-list-item .preset-list-button-wrap {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -1326,8 +1302,8 @@ a.hide-toggle {
|
||||
border-bottom: 1px solid #ccc
|
||||
}
|
||||
|
||||
/* Preset form (hover mode) */
|
||||
|
||||
/* Inspector (hover styles)
|
||||
------------------------------------------------------- */
|
||||
.inspector-hover .checkselect label:last-of-type,
|
||||
.inspector-hover .preset-input-wrap .label,
|
||||
.inspector-hover .form-field-multicombo,
|
||||
@@ -1462,8 +1438,8 @@ a.hide-toggle {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* adding additional preset fields */
|
||||
|
||||
/* More Fields dropdown
|
||||
------------------------------------------------------- */
|
||||
.more-fields {
|
||||
padding: 0 20px 20px 20px;
|
||||
font-weight: bold;
|
||||
@@ -1499,10 +1475,8 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* preset form access */
|
||||
/* preset form cycleway */
|
||||
/* preset form structure extras */
|
||||
|
||||
/* Field - Access, Cycleway, Structure
|
||||
------------------------------------------------------- */
|
||||
.structure-extras-wrap li,
|
||||
.form-field-cycleway .preset-input-wrap li,
|
||||
.form-field-access .preset-input-wrap li {
|
||||
@@ -1571,8 +1545,8 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* preset form multicombo */
|
||||
|
||||
/* Field - Multicombo
|
||||
------------------------------------------------------- */
|
||||
.form-field-multicombo {
|
||||
border: 1px solid #cfcfcf;
|
||||
border-top: 0px;
|
||||
@@ -1582,11 +1556,9 @@ a.hide-toggle {
|
||||
border-radius: 0 0 4px 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-field-multicombo:focus {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.form-field-multicombo.active {
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
@@ -1631,8 +1603,8 @@ a.hide-toggle {
|
||||
}
|
||||
|
||||
|
||||
/* preset form numbers */
|
||||
|
||||
/* Field - Numeric
|
||||
------------------------------------------------------- */
|
||||
input[type=number] {
|
||||
position: relative;
|
||||
padding-right: 20%;
|
||||
@@ -1685,13 +1657,11 @@ input[type=number] {
|
||||
left: 0; right: 0; bottom: 0; top: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.spin-control button.decrement::after {
|
||||
border-top: 5px solid #ccc;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
|
||||
.spin-control button.increment::after {
|
||||
border-bottom: 5px solid #ccc;
|
||||
border-left: 5px solid transparent;
|
||||
@@ -1699,27 +1669,23 @@ input[type=number] {
|
||||
}
|
||||
|
||||
|
||||
/* preset form checkbox */
|
||||
|
||||
/* Field - Checkbox
|
||||
------------------------------------------------------- */
|
||||
.checkselect label:last-of-type {
|
||||
display: block;
|
||||
background: #fff;
|
||||
padding: 5px 10px;
|
||||
color: #7092ff;
|
||||
}
|
||||
|
||||
.checkselect label:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.checkselect .set {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.checkselect label:not(.set) input[type="checkbox"] {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.checkselect .reverser.button {
|
||||
display: block;
|
||||
float: right;
|
||||
@@ -1735,21 +1701,23 @@ input[type=number] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Preset form radio button */
|
||||
|
||||
/* Field - Radio button
|
||||
------------------------------------------------------- */
|
||||
.toggle-list button.remove {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.toggle-list button.remove .icon {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.toggle-list button.remove::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
/* Field - Maxspeed
|
||||
------------------------------------------------------- */
|
||||
#preset-input-maxspeed_advisory,
|
||||
#preset-input-maxspeed {
|
||||
border-right: none;
|
||||
@@ -1771,7 +1739,9 @@ input[type=number] {
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
|
||||
/* Wikipedia field */
|
||||
|
||||
/* Field - Wikipedia
|
||||
------------------------------------------------------- */
|
||||
.form-field .wiki-lang {
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -1791,7 +1761,9 @@ input[type=number] {
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
/* Localized field */
|
||||
|
||||
/* Field - Localized Name
|
||||
------------------------------------------------------- */
|
||||
.form-field .localized-main {
|
||||
padding-right: 12%;
|
||||
}
|
||||
@@ -1822,7 +1794,6 @@ input[type=number] {
|
||||
.form-field .localized-wrap {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.form-field .localized-wrap .entry {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -1845,18 +1816,17 @@ input[type=number] {
|
||||
border-radius: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.form-field .localized-wrap .entry .localized-value {
|
||||
border-top-width: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.form-field .localized-wrap .form-label button {
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
/* Preset form address */
|
||||
|
||||
/* Field - Address
|
||||
------------------------------------------------------- */
|
||||
.addr-row input {
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
@@ -1895,8 +1865,9 @@ input[type=number] {
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
|
||||
/* Restrictions editor */
|
||||
|
||||
/* Field - Restriction Editor
|
||||
------------------------------------------------------- */
|
||||
.form-field-restrictions .restriction-controls-container {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
@@ -1986,8 +1957,9 @@ input[type=number] {
|
||||
color: #78f;
|
||||
}
|
||||
|
||||
/* Changeset editor while comment text is empty */
|
||||
|
||||
/* Field - Changeset Comment
|
||||
------------------------------------------------------- */
|
||||
.form-field-comment:not(.present) #preset-input-comment {
|
||||
border-color: rgb(230, 100, 100);
|
||||
}
|
||||
@@ -2008,8 +1980,9 @@ input[type=number] {
|
||||
border-color: rgb(230, 100, 100);
|
||||
}
|
||||
|
||||
/* combobox dropdown */
|
||||
|
||||
/* Field - Combobox
|
||||
------------------------------------------------------- */
|
||||
div.combobox {
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
@@ -2066,8 +2039,9 @@ div.combobox {
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
|
||||
/* Field Help */
|
||||
|
||||
/* Field Help
|
||||
------------------------------------------------------- */
|
||||
.field-help-body {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -2167,8 +2141,8 @@ div.combobox {
|
||||
}
|
||||
|
||||
|
||||
/* Raw Tag Editor */
|
||||
|
||||
/* Raw Tag Editor
|
||||
------------------------------------------------------- */
|
||||
.tag-list {
|
||||
padding-top: 10px;
|
||||
}
|
||||
@@ -2294,7 +2268,6 @@ div.combobox {
|
||||
}
|
||||
|
||||
/* Adding form fields to tag editor */
|
||||
|
||||
.raw-tag-editor .add-tag {
|
||||
width: 40%;
|
||||
height: 30px;
|
||||
@@ -2312,7 +2285,6 @@ div.combobox {
|
||||
}
|
||||
|
||||
/* Tag reference */
|
||||
|
||||
button.minor.tag-reference-loading {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
@@ -2374,8 +2346,8 @@ img.tag-reference-wiki-image {
|
||||
}
|
||||
|
||||
|
||||
/* Raw relation membership editor */
|
||||
|
||||
/* Raw Member / Membership Editor
|
||||
------------------------------------------------------- */
|
||||
.raw-member-editor .member-list li:first-child,
|
||||
.raw-membership-editor .member-list li:first-child {
|
||||
padding-top: 10px;
|
||||
@@ -2422,7 +2394,8 @@ input.key-trap {
|
||||
}
|
||||
|
||||
|
||||
/* OSM Note UI */
|
||||
/* OSM Note Editor
|
||||
------------------------------------------------------- */
|
||||
.note-header {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 5px;
|
||||
@@ -2547,7 +2520,8 @@ input.key-trap {
|
||||
}
|
||||
|
||||
|
||||
/* Map Data Inspector */
|
||||
/* Custom Data Editor
|
||||
------------------------------------------------------- */
|
||||
.data-header {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 5px;
|
||||
@@ -2600,29 +2574,8 @@ input.key-trap {
|
||||
}
|
||||
|
||||
|
||||
/* Fullscreen button */
|
||||
div.full-screen {
|
||||
float: right;
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
div.full-screen .tooltip {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
div.full-screen > button, div.full-screen > button.active {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
div.full-screen > button:hover {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
/* Map Controls */
|
||||
|
||||
/* Map Controls
|
||||
------------------------------------------------------- */
|
||||
.map-controls {
|
||||
right: 0;
|
||||
top: 132px;
|
||||
@@ -2650,7 +2603,32 @@ div.full-screen > button:hover {
|
||||
background: #7092ff;
|
||||
}
|
||||
|
||||
/* Zoomer */
|
||||
|
||||
/* Fullscreen Button (disabled)
|
||||
------------------------------------------------------- */
|
||||
div.full-screen {
|
||||
float: right;
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
div.full-screen .tooltip {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
div.full-screen > button, div.full-screen > button.active {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
div.full-screen > button:hover {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
|
||||
/* Zoom Buttons
|
||||
------------------------------------------------------- */
|
||||
.zoombuttons > button.zoom-in {
|
||||
border-radius: 4px 0 0 0;
|
||||
}
|
||||
@@ -2658,7 +2636,9 @@ div.full-screen > button:hover {
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
/* Geolocator */
|
||||
|
||||
/* Geolocate Button
|
||||
------------------------------------------------------- */
|
||||
.geolocate-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -2669,7 +2649,9 @@ div.full-screen > button:hover {
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
|
||||
/* Pane Buttons */
|
||||
|
||||
/* Background / Map Data / Help Pane buttons
|
||||
------------------------------------------------------- */
|
||||
.help-control > button {
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
@@ -2689,8 +2671,8 @@ div.full-screen > button:hover {
|
||||
}
|
||||
|
||||
|
||||
/* Background / Map Data Settings */
|
||||
|
||||
/* Background / Map Data Settings
|
||||
------------------------------------------------------- */
|
||||
.map-data-control,
|
||||
.background-control {
|
||||
position: relative;
|
||||
@@ -2721,19 +2703,15 @@ div.full-screen > button:hover {
|
||||
.layer-list > li:first-child {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.layer-list > li:last-child {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.layer-list > li:only-child {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.layer-list li:not(:last-child) {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.layer-list li:hover {
|
||||
background-color: #ececec;
|
||||
}
|
||||
@@ -2774,9 +2752,45 @@ div.full-screen > button:hover {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.map-data-control .layer-list button,
|
||||
.background-control .layer-list button {
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
border-left: 1px solid #ccc;
|
||||
border-radius: 0;
|
||||
}
|
||||
[dir='rtl'] .map-data-control .layer-list button,
|
||||
[dir='rtl'] .background-control .layer-list button {
|
||||
float: left;
|
||||
border-left: none;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Background Display Options */
|
||||
.map-data-control .layer-list button .icon,
|
||||
.background-control .layer-list button .icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.map-data-control .layer-list button:first-of-type,
|
||||
.background-control .layer-list button:first-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
[dir='rtl'] .map-data-control .layer-list button:first-of-type,
|
||||
[dir='rtl'] .background-control .layer-list button:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.map-data-control .vectortile-container .vectortile-header {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.map-data-control .vectortile-container .vectortile-footer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Background - Display Options Sliders
|
||||
------------------------------------------------------- */
|
||||
.display-options-container {
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -2809,8 +2823,8 @@ div.full-screen > button:hover {
|
||||
}
|
||||
|
||||
|
||||
/* Adjust Alignment controls */
|
||||
|
||||
/* Background - Adjust Alignment
|
||||
------------------------------------------------------- */
|
||||
.background-control .nudge-container {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
@@ -2937,36 +2951,8 @@ div.full-screen > button:hover {
|
||||
}
|
||||
|
||||
|
||||
.map-data-control .layer-list button,
|
||||
.background-control .layer-list button {
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
border-left: 1px solid #ccc;
|
||||
border-radius: 0;
|
||||
}
|
||||
[dir='rtl'] .map-data-control .layer-list button,
|
||||
[dir='rtl'] .background-control .layer-list button {
|
||||
float: left;
|
||||
border-left: none;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.map-data-control .layer-list button .icon,
|
||||
.background-control .layer-list button .icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.map-data-control .layer-list button:first-of-type,
|
||||
.background-control .layer-list button:first-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
[dir='rtl'] .map-data-control .layer-list button:first-of-type,
|
||||
[dir='rtl'] .background-control .layer-list button:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* Side panes */
|
||||
/* Side Panes - Background / Map Data / Help
|
||||
------------------------------------------------------- */
|
||||
.map-pane {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
@@ -3012,9 +2998,9 @@ div.full-screen > button:hover {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Help */
|
||||
|
||||
|
||||
/* Help
|
||||
------------------------------------------------------- */
|
||||
.help-wrap p {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
@@ -3115,9 +3101,8 @@ div.full-screen > button:hover {
|
||||
}
|
||||
|
||||
|
||||
/* Tiles
|
||||
/* Raster Background Tiles
|
||||
------------------------------------------------------- */
|
||||
|
||||
img.tile {
|
||||
position: absolute;
|
||||
transform-origin: 0 0;
|
||||
@@ -3177,7 +3162,6 @@ img.tile-debug {
|
||||
|
||||
/* Map
|
||||
------------------------------------------------------- */
|
||||
|
||||
#map {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -3205,6 +3189,7 @@ img.tile-debug {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Map-In-Map
|
||||
------------------------------------------------------- */
|
||||
.map-in-map {
|
||||
@@ -3262,7 +3247,7 @@ img.tile-debug {
|
||||
}
|
||||
|
||||
|
||||
/* Debug
|
||||
/* Debug Data
|
||||
------------------------------------------------------- */
|
||||
.debug {
|
||||
stroke: currentColor;
|
||||
@@ -3301,7 +3286,8 @@ img.tile-debug {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* Info Box
|
||||
|
||||
/* Information Panels
|
||||
------------------------------------------------------- */
|
||||
.info-panels {
|
||||
display: flex;
|
||||
@@ -3358,7 +3344,6 @@ img.tile-debug {
|
||||
.panel-title button.close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel-title button.close .icon {
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
@@ -3407,9 +3392,8 @@ img.tile-debug {
|
||||
}
|
||||
|
||||
|
||||
/* About Section
|
||||
/* About Section, Attribution, Footer
|
||||
------------------------------------------------------- */
|
||||
|
||||
#about {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@@ -3474,8 +3458,9 @@ img.tile-debug {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* footer flash message */
|
||||
|
||||
/* Footer - Flash messages
|
||||
------------------------------------------------------- */
|
||||
#flash-wrap {
|
||||
display: flex;
|
||||
flex: 0 0 100%;
|
||||
@@ -3557,8 +3542,8 @@ img.tile-debug {
|
||||
}
|
||||
|
||||
|
||||
/* footer scale */
|
||||
|
||||
/* Footer - Scale bar, About, Source Switcher
|
||||
------------------------------------------------------- */
|
||||
#scale-block {
|
||||
vertical-align: bottom;
|
||||
width: 250px;
|
||||
@@ -3604,7 +3589,6 @@ img.tile-debug {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
|
||||
#about-list {
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
@@ -3633,7 +3617,6 @@ img.tile-debug {
|
||||
padding: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
|
||||
#about-list li:last-child {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
@@ -3686,8 +3669,8 @@ img.tile-debug {
|
||||
color: #ccf;
|
||||
}
|
||||
|
||||
/* Notification Badges */
|
||||
|
||||
/* Notification Badges
|
||||
------------------------------------------------------- */
|
||||
/* For an icon (e.g. new version) */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
@@ -3734,9 +3717,8 @@ img.tile-debug {
|
||||
}
|
||||
|
||||
|
||||
/* Modals
|
||||
/* Modals / Prompts
|
||||
------------------------------------------------------- */
|
||||
|
||||
.modal {
|
||||
top: 40px;
|
||||
display: inline-block;
|
||||
@@ -3752,7 +3734,6 @@ img.tile-debug {
|
||||
.modal .loader {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.modal .description {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -3766,7 +3747,6 @@ img.tile-debug {
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.shaded:before {
|
||||
content:'';
|
||||
background: rgba(0,0,0,0.5);
|
||||
@@ -3778,11 +3758,9 @@ img.tile-debug {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.modal-section.header h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-section.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -3856,7 +3834,7 @@ img.tile-debug {
|
||||
color: #e06c5e;
|
||||
}
|
||||
|
||||
/* Success Modal
|
||||
/* Success Screen / Community Index
|
||||
------------------------------------------------------- */
|
||||
.save-success.body {
|
||||
overflow-y: scroll;
|
||||
@@ -4071,7 +4049,6 @@ svg.mouseclick use.right {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.settings-custom-data .instructions-url {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -4178,9 +4155,9 @@ svg.mouseclick use.right {
|
||||
|
||||
.changeset-list li:first-child { border-top: 0;}
|
||||
|
||||
|
||||
/* Conflict resolution
|
||||
------------------------------------------------------- */
|
||||
|
||||
.conflicts-help {
|
||||
padding: 20px;
|
||||
background-color: #ffffbb;
|
||||
@@ -4228,9 +4205,9 @@ svg.mouseclick use.right {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* Notices
|
||||
------------------------------------------------------- */
|
||||
|
||||
/* Notices (Zoom in to Edit)
|
||||
------------------------------------------------------- */
|
||||
.notice {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
@@ -4262,9 +4239,9 @@ svg.mouseclick use.right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltips
|
||||
------------------------------------------------------- */
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
display: none;
|
||||
@@ -4505,8 +4482,8 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
}
|
||||
|
||||
|
||||
/* radial menu (deprecated) */
|
||||
|
||||
/* Contextual Radial Menu (deprecated)
|
||||
------------------------------------------------------- */
|
||||
.radial-menu-tooltip {
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
@@ -4544,8 +4521,9 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
color: rgba(40,40,40,.5);
|
||||
}
|
||||
|
||||
/* edit menu */
|
||||
|
||||
/* Contextual Edit Menu
|
||||
------------------------------------------------------- */
|
||||
.edit-menu-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -4579,13 +4557,14 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
color: #79f;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.edit-menu-item.disabled use {
|
||||
fill: rgba(32,32,32,.2);
|
||||
color: rgba(40,40,40,.2);
|
||||
}
|
||||
|
||||
|
||||
/* Lasso
|
||||
------------------------------------------------------- */
|
||||
.lasso-path {
|
||||
fill-opacity: 0.3;
|
||||
stroke: #fff;
|
||||
@@ -4594,22 +4573,19 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
stroke-dasharray: 5, 5;
|
||||
}
|
||||
|
||||
|
||||
/* Media Queries
|
||||
------------------------------------------------------- */
|
||||
|
||||
@media only screen and (max-width: 840px) {
|
||||
/* override hide for save button */
|
||||
#bar .save .label { display: block;}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.user-list { display: none !important; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
#userLink { display: none !important; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
#scale-block { display: none !important; }
|
||||
}
|
||||
@@ -4617,7 +4593,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
|
||||
/* Scrollbars
|
||||
----------------------------------------------------- */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 20px;
|
||||
overflow: visible;
|
||||
@@ -4644,9 +4619,9 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
background-color: rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
|
||||
/* Intro walkthrough
|
||||
----------------------------------------------------- */
|
||||
|
||||
.curtain-darkness {
|
||||
pointer-events: all;
|
||||
fill-opacity: 0.7;
|
||||
|
||||
+37
-14
@@ -8,6 +8,7 @@ import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
|
||||
import { svgIcon } from '../svg';
|
||||
import { t, textDirection } from '../util/locale';
|
||||
import { tooltip } from '../util/tooltip';
|
||||
import { geoExtent } from '../geo';
|
||||
import { modeBrowse } from '../modes';
|
||||
import { uiBackground } from './background';
|
||||
import { uiDisclosure } from './disclosure';
|
||||
@@ -210,6 +211,7 @@ export function uiMapData(context) {
|
||||
// Beta feature - sample vector layers to support Detroit Mapping Challenge
|
||||
// https://github.com/osmus/detroit-mapping-challenge
|
||||
function drawVectorItems(selection) {
|
||||
var dataLayer = layers.layer('data');
|
||||
var vtData = [
|
||||
{
|
||||
name: 'Detroit Neighborhoods/Parks',
|
||||
@@ -229,24 +231,45 @@ export function uiMapData(context) {
|
||||
}
|
||||
];
|
||||
|
||||
var dataLayer = layers.layer('data');
|
||||
// Only show this if the map is around Detroit..
|
||||
var detroit = geoExtent([-83.5, 42.1], [-82.8, 42.5]);
|
||||
var showVectorItems = (context.map().zoom() > 9 && detroit.contains(context.map().center()));
|
||||
|
||||
var header = selection.selectAll('.layer-list-vectortile-header')
|
||||
.data([0]);
|
||||
var container = selection.selectAll('.vectortile-container')
|
||||
.data(showVectorItems ? [0] : []);
|
||||
|
||||
header.enter()
|
||||
container.exit()
|
||||
.remove();
|
||||
|
||||
var containerEnter = container.enter()
|
||||
.append('div')
|
||||
.attr('class', 'vectortile-container');
|
||||
|
||||
containerEnter
|
||||
.append('h4')
|
||||
.attr('class', 'layer-list-vectortile-header')
|
||||
.text('Vector Tiles (beta)');
|
||||
.attr('class', 'vectortile-header')
|
||||
.text('Detroit Vector Tiles (Beta)');
|
||||
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-vectortile')
|
||||
.data([0]);
|
||||
|
||||
ul = ul.enter()
|
||||
containerEnter
|
||||
.append('ul')
|
||||
.attr('class', 'layer-list layer-list-vectortile')
|
||||
.merge(ul);
|
||||
|
||||
containerEnter
|
||||
.append('div')
|
||||
.attr('class', 'vectortile-footer')
|
||||
.append('a')
|
||||
.attr('target', '_blank')
|
||||
.attr('tabindex', -1)
|
||||
.call(svgIcon('#iD-icon-out-link', 'inline'))
|
||||
.attr('href', 'https://github.com/osmus/detroit-mapping-challenge')
|
||||
.append('span')
|
||||
.text('About these layers');
|
||||
|
||||
container = container
|
||||
.merge(containerEnter);
|
||||
|
||||
|
||||
var ul = container.selectAll('.layer-list-vectortile');
|
||||
|
||||
var li = ul.selectAll('.list-item')
|
||||
.data(vtData);
|
||||
@@ -481,8 +504,8 @@ export function uiMapData(context) {
|
||||
_dataLayerContainer
|
||||
.call(drawOsmItems)
|
||||
.call(drawPhotoItems)
|
||||
.call(drawVectorItems) // beta - detroit mapping challenge
|
||||
.call(drawCustomDataItems);
|
||||
.call(drawCustomDataItems)
|
||||
.call(drawVectorItems); // Beta - Detroit mapping challenge
|
||||
|
||||
_fillList
|
||||
.call(drawListItems, fills, 'radio', 'area_fill', setFill, showsFill);
|
||||
|
||||
Reference in New Issue
Block a user