Absolute position to not take up space

This commit is contained in:
Lukas Martinelli 2017-01-11 19:50:18 +01:00
parent df94d9c842
commit 9ca8760564
2 changed files with 5 additions and 8 deletions
src
components/layers
styles

View file

@ -24,7 +24,6 @@ function layerPrefix(name) {
} }
function findClosestCommonPrefix(layers, idx) { function findClosestCommonPrefix(layers, idx) {
console.log('find prefix', idx, layers)
const currentLayerPrefix = layerPrefix(layers[idx].id) const currentLayerPrefix = layerPrefix(layers[idx].id)
let closestIdx = idx let closestIdx = idx
for (let i = idx; i > 0; i--) { for (let i = idx; i > 0; i--) {
@ -118,14 +117,12 @@ class LayerListContainer extends React.Component {
} else { } else {
newGroups[lookupKey] = true newGroups[lookupKey] = true
} }
console.log(newGroups)
this.setState({ this.setState({
collapsedGroups: newGroups collapsedGroups: newGroups
}) })
} }
isCollapsed(groupPrefix, idx) { isCollapsed(groupPrefix, idx) {
console.log('is collapsed', groupPrefix, idx)
const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')] const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
return collapsed === undefined ? false : collapsed return collapsed === undefined ? false : collapsed
} }
@ -151,7 +148,7 @@ class LayerListContainer extends React.Component {
const listItem = <LayerListItem const listItem = <LayerListItem
className={classnames({ className={classnames({
'maputnik-layer-list-item-collapsed': this.isCollapsed(groupPrefix, groupIdx), 'maputnik-layer-list-item-collapsed': this.isCollapsed(groupPrefix, groupIdx),
'maputnik-layer-list-item-collapsed-last': idxInGroup == layers.length - 1 && layers.length > 1 'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
})} })}
index={idx} index={idx}
key={layer.id} key={layer.id}

View file

@ -67,15 +67,15 @@
} }
&-item-collapsed { &-item-collapsed {
max-height: 0; position: absolute;
max-height: 0px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0px;
transition: max-height 0.1s ease-out; transition: max-height 0.1s ease-out;
transition: padding 0.1s ease-out; transition: padding 0.1s ease-out;
} }
&-item-collapsed-last { &-item-group-last {
border-bottom: 2px solid $color-gray; border-bottom: 2px solid $color-gray;
} }