switch from preset grid to preset list

issue #1225
This commit is contained in:
Ansis Brammanis
2013-04-26 12:17:16 -04:00
parent 6c6a312c62
commit 2355dc228d
2 changed files with 29 additions and 40 deletions
+25 -35
View File
@@ -685,7 +685,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
.grid-button-wrap {
padding: 0 10px 10px 0;
height: 120px;
height: 70px;
}
.grid-entry {
@@ -693,7 +693,6 @@ a:hover .icon.out-link { background-position: -500px -14px;}
height: 100%;
position: relative;
border: 1px solid #ccc;
overflow: hidden;
float: left;
}
@@ -707,16 +706,13 @@ a:hover .icon.out-link { background-position: -500px -14px;}
.preset-icon {
position: absolute;
top: 30px;
left: 0;
right: 0;
top: 18px;
left: 18px;
margin: auto;
}
.preset-icon-line {
top: 15px;
left: -10px;
right: -10px;
top: 0; left: 0;
}
.grid-entry .label {
@@ -724,23 +720,28 @@ a:hover .icon.out-link { background-position: -500px -14px;}
text-align: left;
position: absolute;
padding: 5px 10px;
height: 30px;
height: 100%;
bottom: 0;
left: 0; right: 0;
left: 60px;
right: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-top: 1px solid rgba(0, 0, 0, .1);
border-left: 1px solid rgba(0, 0, 0, .1);
line-height: 50px;
}
.grid-entry:hover .label {
background: none;
}
.grid-button-wrap button.tag-reference-button {
float: right;
position: static;
margin-top: -30px;
margin-right: 1px;
height: 29px;
border-left: 1px solid #CCC;
border-radius: 0 0 3px 0;
margin-top: -60px;
height: 100%;
border: 1px solid #CCC;
border-radius: 0 3px 3px 0;
}
.current .grid-entry,
@@ -752,15 +753,16 @@ a:hover .icon.out-link { background-position: -500px -14px;}
.category .grid-entry:before {
content: "";
position: absolute;
top: 7px;
left: 0; right: 0;
border-top: 1px solid #ccc;
border-radius: 6px;
top: -5px;
left: -1px; right: -1px;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 6px 6px 0 0;
height: 6px;
}
.category .grid-entry:before {
top: 3px;
top: -3px;
}
.preset-grid-search-wrap .icon {
@@ -807,21 +809,9 @@ a:hover .icon.out-link { background-position: -500px -14px;}
border-bottom-color: #CCC;
width: 0;
height: 0;
margin-left: 33.3333%;
margin-left: -webkit-calc(16.6666% - 10px);
margin-left: calc(16.6666% - 10px);
margin-top: -10px;
}
.subgrid.arrow-1 .arrow {
margin-left: 50%;
margin-left: -webkit-calc(50% - 10px);
margin-left: calc(50% - 10px);
}
.subgrid.arrow-2 .arrow {
margin-left: 280px;
margin-left: -webkit-calc(84.4444% - 10px);
margin-left: calc(84.4444% - 10px);
margin-top: -10px;
}
.show-more {
@@ -847,7 +837,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
width: 45px;
margin: auto;
position: absolute;
left: 0; right: 0; top: 19px;
left: 8px; top: 7px;
background:transparent url(img/sprite.svg) no-repeat -240px -80px;
}
+4 -5
View File
@@ -164,14 +164,13 @@ iD.ui.PresetGrid = function(context, entity) {
if (d === entity) index = i;
});
var insertIndex = index + 3 - index % 3;
if (insertIndex > shownIndex) insertIndex ++;
if (index > shownIndex) index++;
var elem = document.createElement('div');
grid.node().insertBefore(elem, grid.node().childNodes[insertIndex]);
grid.node().insertBefore(elem, grid.node().childNodes[index + 1]);
var newbox = d3.select(elem)
.attr('class', 'col12 box-insert ' + klass + ' arrow-' + (index % 3))
.attr('class', 'col12 box-insert ' + klass + ' arrow')
.datum(entity);
return newbox;
@@ -214,7 +213,7 @@ iD.ui.PresetGrid = function(context, entity) {
var entered = entries.enter()
.append('div')
.attr('class','grid-button-wrap col4 grid-entry-wrap')
.attr('class','grid-button-wrap col12 grid-entry-wrap')
.classed('category', function(d) { return !!d.members; })
.classed('current', function(d) { return d === preset; });