Revert "use float instead of flex"

This reverts commit 4b72b73bc2.
master
Jing 4 years ago
parent 4b72b73bc2
commit 915228f62f

@ -103,13 +103,13 @@
height: 3rem; height: 3rem;
} }
.clear { .allZutaten {
clear:both; display: flex;
flex-wrap: wrap;
} }
.zutatenWrapper { .zutatenWrapper {
margin: 1em; flex-basis: 49%;
float: left;
} }
</style> </style>
<div class="section"> <div class="section">

@ -3,7 +3,6 @@
<script> <script>
window.addEventListener('load', function () { window.addEventListener('load', function () {
const zutatenNode = document.evaluate('//*[@id="zutaten"]', document).iterateNext() const zutatenNode = document.evaluate('//*[@id="zutaten"]', document).iterateNext()
const zubereitungNode = document.evaluate('//*[@id="zubereitung"]', document).iterateNext()
let nodeBlocks = [] let nodeBlocks = []
let nextNode = zutatenNode.nextElementSibling let nextNode = zutatenNode.nextElementSibling
@ -17,22 +16,23 @@ window.addEventListener('load', function () {
nextNode = nextNode.nextElementSibling nextNode = nextNode.nextElementSibling
} }
let clearDiv = document.createElement('div') let allIngredientsDiv = document.createElement('div')
clearDiv.classList.add('clear') allIngredientsDiv.id = "allZutaten"
allIngredientsDiv.classList.add('allZutaten')
let nodeBlockIndex = 0 let nodeBlockIndex = 0
nodeBlocks.forEach(function(nodeArray) { nodeBlocks.forEach(function(nodeArray) {
let outerDiv = document.createElement('div') let outerDiv = document.createElement('div')
outerDiv.id = `wrap${nodeBlockIndex}` outerDiv.id = `wrap${nodeBlockIndex}`
outerDiv.classList.add("zutatenWrapper") outerDiv.classList.add("zutatenWrapper")
zutatenNode.parentNode.insertBefore(outerDiv, zubereitungNode) allIngredientsDiv.appendChild(outerDiv)
for(elem of nodeArray) { for(elem of nodeArray) {
outerDiv.appendChild(elem) outerDiv.appendChild(elem)
} }
nodeBlockIndex += 1 nodeBlockIndex += 1
}) })
zutatenNode.parentNode.insertBefore(clearDiv, zubereitungNode) zutatenNode.parentNode.insertBefore(allIngredientsDiv, zutatenNode.nextSibling)
console.log("Finished fiddling") console.log("Finished fiddling")
}) })
</script> </script>

@ -1,4 +1,4 @@
li { li {
padding-bottom: .5em; padding-bottom: .5em;
font-size: 20px; font-size: 20px;
} }
Loading…
Cancel
Save