yequari
/
yeet.marigold.town
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add placeholders for toy entries

This commit is contained in:
yequari 2023-09-30 14:53:08 -07:00
parent 1aacf5c6fe
commit aad36ee953
3 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/style.css
View File

@ -53,3 +53,28 @@ shop-counter {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
toy-shelf ul {
position: absolute;
z-index: 3;
margin: 0;
padding: 0;
list-style-type: none;
vertical-align: bottom;
}
toy-shelf li {
display: inline-block;
width: 70px;
height: 70px;
margin: 5px 8px;
padding: 5px;
background-color: black;
color: red;
font-size: 10px;
vertical-align: bottom;
position: relative;
top: 5px;
left: 2px;
text-align: center;
}

16
index.html
View File

@ -18,14 +18,14 @@
<div class="shelf-group"> <div class="shelf-group">
<h2>Featured</h2> <h2>Featured</h2>
<toy-shelf> <toy-shelf>
<ul> <ul slot="toy-list">
<li>Armada Megatron</li> <li slot="toy-item">Armada Megatron</li>
<li>Leo Prime</li> <li slot="toy-item">Leo Prime</li>
<li>Coronation Starscream</li> <li slot="toy-item">Coronation Starscream</li>
</ul> </ul>
</toy-shelf> </toy-shelf>
<toy-shelf> <toy-shelf>
<ul> <ul slot="toy-list">
<li>Armada Starscream</li> <li>Armada Starscream</li>
<li>Leo Nemesis Prime</li> <li>Leo Nemesis Prime</li>
<li>Optimus Prime</li> <li>Optimus Prime</li>
@ -37,14 +37,14 @@
<div class="shelf-group"> <div class="shelf-group">
<h2>New Arrivals</h2> <h2>New Arrivals</h2>
<toy-shelf> <toy-shelf>
<ul> <ul slot="toy-list">
<li>Armada Megatron</li> <li>Armada Megatron</li>
<li>Leo Prime</li> <li>Leo Prime</li>
<li>Coronation Starscream</li> <li>Coronation Starscream</li>
</ul> </ul>
</toy-shelf> </toy-shelf>
<toy-shelf> <toy-shelf>
<ul> <ul slot="toy-list">
<li>Armada Starscream</li> <li>Armada Starscream</li>
<li>Leo Nemesis Prime</li> <li>Leo Nemesis Prime</li>
<li>Optimus Prime</li> <li>Optimus Prime</li>

22
js/elements.js
View File

@ -128,18 +128,22 @@ class ToyShelf extends Rect {
this.height = 100; this.height = 100;
this.depth = 100; this.depth = 100;
let style = document.createElement("style");
/* style.textContent = `
.rect {
transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
}
`*/
const rect = this.createRect(); const rect = this.createRect();
shadow.innerHTML = `
<div id="toy-list"><slot name="toy-list"></slot></div>
`
// TODO: change slot items to render on shelf
shadow.firstElementChild.addEventListener('slotchange', e => {
let slot = e.target;
if (slot.name == 'toy-list') {
this.items = slot.assignedElements().map(elem => elem.textContent);
console.log("Items: " + this.items);
}
});
shadow.appendChild(rect); shadow.appendChild(rect);
shadow.appendChild(style);
} }
} }