mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-23 00:29:50 +02:00
reworked layout for inspector.
This commit is contained in:
Saman Bemel-Benrud
+133
-126
@@ -585,18 +585,34 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
|
||||
------------------------------------------------------- */
|
||||
|
||||
.inspector-wrap {
|
||||
opacity:0;
|
||||
display:none;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
border-radius: 0 0 0 4px;
|
||||
background:rgba(0,0,0,.8);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.inspector-body {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 480px;
|
||||
min-height: 330px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 90px;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.inspector-actions {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.inspector-actions button {
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.inspector-inner {
|
||||
@@ -627,6 +643,12 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.inspector-actions .minor-buttons {
|
||||
padding-left: 10px;
|
||||
line-height: 40px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.inspector-toggle {
|
||||
color:#fff;
|
||||
width: 100%;
|
||||
@@ -640,6 +662,90 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
|
||||
|
||||
/* Preset grid */
|
||||
|
||||
.preset-grid {
|
||||
margin-top: 60px;
|
||||
padding: 20px 10px 20px 20px;
|
||||
}
|
||||
.grid-button-wrap {
|
||||
padding: 0 10px 10px 0;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.grid-entry {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-inner {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.preset-grid.filtered .grid-button-wrap:first-child .grid-entry {
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.grid-entry:hover .preset-help {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.grid-entry .preset-help {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.grid-entry .preset-help:hover {
|
||||
background: rgba(0,0,0,.9);
|
||||
}
|
||||
|
||||
.preset-inspect {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-entry .preset-icon-fill.area {
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-entry > .icon {
|
||||
position: absolute;
|
||||
top: 30px;left: 0; right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.inspector-body-line .grid-entry .icon {
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.grid-entry .label {
|
||||
font-weight: bold;
|
||||
background: #f6f6f6;
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
bottom: 0;
|
||||
left: 0; right: 0;
|
||||
margin: auto;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
|
||||
.preset-grid-search-wrap {
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
@@ -673,6 +779,29 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* Preset icon colors */
|
||||
|
||||
.preset-icon-fill.tag-shop,
|
||||
.preset-icon-fill.tag-building {
|
||||
background-color: #e06e5f;
|
||||
}
|
||||
|
||||
.preset-icon-fill.tag-natural-water {
|
||||
background-color: #77d3de;
|
||||
}
|
||||
|
||||
.preset-icon-fill.tag-landuse,
|
||||
.preset-icon-fill.tag-natural-wood,
|
||||
.preset-icon-fill.tag-natural-tree,
|
||||
.preset-icon-fill.tag-natural-grassland,
|
||||
.preset-icon-fill.tag-leisure-park {
|
||||
background-color: #8cd05f;
|
||||
}
|
||||
|
||||
.preset-icon-fill.tag-amenity-parking {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
/* preset form basics */
|
||||
|
||||
.inspector-preset {
|
||||
@@ -1028,21 +1157,6 @@ div.combobox {
|
||||
right: -12.5%;
|
||||
}
|
||||
|
||||
.inspector-actions {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.inspector-actions button {
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.inspector-actions .minor-buttons {
|
||||
padding-left: 10px;
|
||||
line-height: 40px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.inspector-inner .add-tag {
|
||||
width: 20%;
|
||||
height: 30px;
|
||||
@@ -1059,113 +1173,6 @@ div.combobox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Preset grid */
|
||||
|
||||
.preset-grid {
|
||||
padding: 20px 10px 20px 20px;
|
||||
}
|
||||
.grid-button-wrap {
|
||||
padding: 0 10px 10px 0;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.grid-entry {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-inner {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.preset-grid.filtered .grid-button-wrap:first-child .grid-entry {
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.grid-entry:hover .preset-help {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.grid-entry .preset-help {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.grid-entry .preset-help:hover {
|
||||
background: rgba(0,0,0,.9);
|
||||
}
|
||||
|
||||
.preset-inspect {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-entry .preset-icon-fill.area {
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-entry > .icon {
|
||||
position: absolute;
|
||||
top: 30px;left: 0; right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.inspector-body-line .grid-entry .icon {
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.grid-entry .label {
|
||||
font-weight: bold;
|
||||
background: #f6f6f6;
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
bottom: 0;
|
||||
left: 0; right: 0;
|
||||
margin: auto;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
/* Preset icon colors */
|
||||
|
||||
.preset-icon-fill.tag-shop,
|
||||
.preset-icon-fill.tag-building {
|
||||
background-color: #e06e5f;
|
||||
}
|
||||
|
||||
.preset-icon-fill.tag-natural-water {
|
||||
background-color: #77d3de;
|
||||
}
|
||||
|
||||
.preset-icon-fill.tag-landuse,
|
||||
.preset-icon-fill.tag-natural-wood,
|
||||
.preset-icon-fill.tag-natural-tree,
|
||||
.preset-icon-fill.tag-natural-grassland,
|
||||
.preset-icon-fill.tag-leisure-park {
|
||||
background-color: #8cd05f;
|
||||
}
|
||||
|
||||
.preset-icon-fill.tag-amenity-parking {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
/* Map Controls */
|
||||
|
||||
.map-control {
|
||||
|
||||
+1
-1
@@ -70,7 +70,7 @@ iD.ui = function(context) {
|
||||
|
||||
container.append('div')
|
||||
.style('display', 'none')
|
||||
.attr('class', 'inspector-wrap fr content col5');
|
||||
.attr('class', 'inspector-wrap fr content col4');
|
||||
|
||||
var about = container.append('div')
|
||||
.attr('class','col12 about-block fillD');
|
||||
|
||||
@@ -95,7 +95,7 @@ iD.ui.PresetGrid = function(context) {
|
||||
|
||||
var entered = entries.enter()
|
||||
.append('div')
|
||||
.attr('class','grid-button-wrap col3')
|
||||
.attr('class','grid-button-wrap col4')
|
||||
.append('button')
|
||||
.attr('class', 'grid-entry')
|
||||
.on('click', choose);
|
||||
@@ -142,7 +142,7 @@ iD.ui.PresetGrid = function(context) {
|
||||
if (this === entry) index = i;
|
||||
});
|
||||
|
||||
var selector = '.grid-button-wrap:nth-child(' + (Math.floor(index/4) * 4 + 5 ) + ')';
|
||||
var selector = '.grid-button-wrap:nth-child(' + (Math.floor(index/3) * 3 + 4 ) + ')';
|
||||
|
||||
presetinspect = selection.insert('div', selector)
|
||||
.attr('class', 'preset-inspect col12')
|
||||
|
||||
@@ -54,7 +54,7 @@ iD.ui.TagEditor = function(context) {
|
||||
var headerwrap = editorwrap.append('div').attr('class','col12 head');
|
||||
|
||||
var typebutton = headerwrap.append('div')
|
||||
.attr('class','grid-button-wrap col3')
|
||||
.attr('class','grid-button-wrap col4')
|
||||
.append('div')
|
||||
.attr('class','col12 grid-entry fillL');
|
||||
|
||||
@@ -64,7 +64,7 @@ iD.ui.TagEditor = function(context) {
|
||||
typebutton.node().focus();
|
||||
|
||||
var namewrap = headerwrap.append('div')
|
||||
.attr('class', 'name fillL inspector-inner col9');
|
||||
.attr('class', 'name fillL inspector-inner col8');
|
||||
|
||||
typebutton.append('span')
|
||||
.attr('class','label')
|
||||
|
||||
Reference in New Issue
Block a user