mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
Merge pull request #1198 from aaronw-dev/main
Added mobile responsiveness!
This commit is contained in:
Max Wofford
GitHub
commit
eb61014a5f
5 changed files with 188 additions and 16 deletions
|
|
@ -54,7 +54,7 @@ async function fetchParts() {
|
|||
data = removeItemByAttribute(data, "type", "Microprocessor");
|
||||
console.log(data)
|
||||
return data
|
||||
}
|
||||
}/*
|
||||
async function preloadImage(item) {
|
||||
let response = await fetch(item.imageUrl);
|
||||
let blob = response.blob();
|
||||
|
|
@ -64,7 +64,7 @@ async function saveImageToCache(item) {
|
|||
const image = await preloadImage(item)
|
||||
const blob = URL.createObjectURL(image)
|
||||
localStorage.setItem(item.wokwiName, blob);
|
||||
}
|
||||
}*/
|
||||
function removeItemByAttribute(arr, attr, value) {
|
||||
return arr.filter(item => item[attr] !== value);
|
||||
}
|
||||
|
|
@ -95,6 +95,9 @@ function addComponentsToPage(data) {
|
|||
let spinnerItem = document.createElement("div")
|
||||
spinnerItem.className = "spinner-item"
|
||||
|
||||
let spinnerInfo = document.createElement("div")
|
||||
spinnerInfo.className = "spinner-info"
|
||||
|
||||
let spinnerImage = document.createElement("img")
|
||||
spinnerImage.src = "https://imgk.timesnownews.com/story/raccoon_GettyImages-914090712.jpg"
|
||||
spinnerImage.className = "spinner-item-image"
|
||||
|
|
@ -108,8 +111,9 @@ function addComponentsToPage(data) {
|
|||
p.innerText = component.flavorText;
|
||||
|
||||
spinnerItem.appendChild(spinnerImage);
|
||||
spinnerItem.appendChild(h1);
|
||||
spinnerItem.appendChild(p);
|
||||
spinnerInfo.appendChild(h1);
|
||||
spinnerInfo.appendChild(p);
|
||||
spinnerItem.appendChild(spinnerInfo);
|
||||
element.appendChild(spinnerItem)
|
||||
})
|
||||
}
|
||||
|
|
@ -146,10 +150,10 @@ function rollParts() {
|
|||
let thisPart = chosenParts[key]
|
||||
//console.log(`Hydrating part ${key} with ${thisPart.name}`)
|
||||
let spinnerImage = element.childNodes[2].childNodes[0]
|
||||
let partTitle = element.childNodes[2].childNodes[1]
|
||||
let flavorText = element.childNodes[2].childNodes[2]
|
||||
//spinnerImage.src = (thisPart.imageUrl == "" || thisPart.imageUrl == undefined) ? "https://awdev.codes/images/ww.gif" : thisPart.imageUrl
|
||||
spinnerImage.src = (thisPart.imageUrl == "" || thisPart.imageUrl == undefined) ? localStorage.getItem("wokwi-pedro") : localStorage.getItem(thisPart.wokwiName)
|
||||
let partTitle = element.childNodes[2].childNodes[1].childNodes[0]
|
||||
let flavorText = element.childNodes[2].childNodes[1].childNodes[1]
|
||||
spinnerImage.src = (thisPart.imageUrl == "" || thisPart.imageUrl == undefined) ? "https://awdev.codes/images/ww.gif" : thisPart.imageUrl
|
||||
//spinnerImage.src = (thisPart.imageUrl == "" || thisPart.imageUrl == undefined) ? localStorage.getItem("wokwi-pedro") : localStorage.getItem(thisPart.wokwiName)
|
||||
partTitle.innerText = thisPart.name;
|
||||
flavorText.innerText = thisPart.flavorText;
|
||||
chosenPartNames.push(thisPart.wokwiName)
|
||||
|
|
@ -194,13 +198,13 @@ async function generateBuildLink(e) {
|
|||
window.addEventListener("load", (e) => {
|
||||
fetchParts().then(parts => {
|
||||
fetchedParts = parts;
|
||||
fetchedParts.forEach(part => {
|
||||
/*fetchedParts.forEach(part => {
|
||||
if (!(part.imageUrl == undefined)) {
|
||||
console.log(part.wokwiName)
|
||||
saveImageToCache(part);
|
||||
}
|
||||
})
|
||||
saveImageToCache({ wokwiName: "wokwi-pedro", imageUrl: "https://awdev.codes/images/ww.gif" })
|
||||
})*/
|
||||
//saveImageToCache({ wokwiName: "wokwi-pedro", imageUrl: "https://awdev.codes/images/ww.gif" })
|
||||
});
|
||||
})
|
||||
|
||||
|
|
|
|||
BIN
public/bin/landing-new/image.png
Normal file
BIN
public/bin/landing-new/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 858 KiB |
|
|
@ -134,7 +134,7 @@
|
|||
.gambling-spinner {
|
||||
flex-basis: 20vw;
|
||||
aspect-ratio: 1;
|
||||
background-color: #ee9f9f;
|
||||
background-color: #c4c4c4;
|
||||
border-radius: 30px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -258,6 +258,12 @@
|
|||
|
||||
.gambling-build {
|
||||
background-color: #9FEEB5;
|
||||
filter: saturate(1) brightness(1);
|
||||
transition: filter 500ms;
|
||||
}
|
||||
|
||||
.gambling-build.disabled {
|
||||
filter: saturate(0.4) brightness(0.6);
|
||||
}
|
||||
|
||||
.gambling-placeholder {
|
||||
|
|
@ -337,6 +343,103 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (hover: none) and (pointer: coarse) {
|
||||
|
||||
#floaty,
|
||||
#floaty-left,
|
||||
.floaty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.landing-header {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.landing-tagline {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.gambling-header {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.gambling-header-text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gambling-header-rummage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gambling-section {
|
||||
padding: 30px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gambling-title {
|
||||
font-size: 65px;
|
||||
}
|
||||
|
||||
.gambling-subheader {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.spinner-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gambling-ui {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gambling-spinner {
|
||||
aspect-ratio: unset;
|
||||
width: 100%;
|
||||
flex-basis: 40vw;
|
||||
padding: 10px;
|
||||
/*background: conic-gradient(red 51.4deg, orange 102.8deg, yellow 154.2deg,
|
||||
green 205.6deg, blue 257deg, purple 308.4deg, red 360deg);*/
|
||||
}
|
||||
|
||||
.gambling-controls {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.gambling-controls button {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.spinner-item {
|
||||
flex-direction: row;
|
||||
border-radius: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.spinner-item-name,
|
||||
.spinner-item-description {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.spinner-info {
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: wrap;
|
||||
flex-basis: 200px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spinner-item-name {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.spinner-item-image {
|
||||
height: auto;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS from https://codepen.io/quadbaup/details/rKOKQv */
|
||||
.thought {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,18 @@
|
|||
<title>The Bin - Selector</title>
|
||||
<link rel="stylesheet" href="../style/common.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="../style/footer.css">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.hackclub.com/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.hackclub.com/favicons/favicon-16x16.png">
|
||||
<script src="https://awdev.codes/utils/smoothScroll.js"></script>
|
||||
<script src="https://awdev.codes/utils/hackclub/orph.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="selector-container">
|
||||
<div class="selector-header">
|
||||
<h1 class="selector-title">The Bin</h1>
|
||||
<button class="selector-continue">Let's Build!<img src="../icons/arrow.svg"></button>
|
||||
<button class="selector-continue">Continue<img src="../icons/arrow.svg"></button>
|
||||
</div>
|
||||
<div class="selector-main"></div>
|
||||
<span class="selector-number"></span>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
padding: 40px;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
}
|
||||
|
||||
.selector-main {
|
||||
display: flex;
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
justify-content: space-around;
|
||||
grid-template-columns: repeat(4, 1.5fr);
|
||||
}
|
||||
|
||||
.selector-item {
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 300px;
|
||||
width: calc(100vw / 4.5);
|
||||
aspect-ratio: 1;
|
||||
background-color: #D9D9D9;
|
||||
padding: 20px;
|
||||
|
|
@ -121,4 +122,63 @@
|
|||
.flex-lb {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (hover: none) and (pointer: coarse) {
|
||||
.selector-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selector-continue {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.selector-continue img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selector-number {
|
||||
left: 50%;
|
||||
text-wrap: nowrap;
|
||||
transform: translateX(-50%);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.selector-item {
|
||||
width: 40vw;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selector-main {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
justify-content: space-around;
|
||||
grid-template-columns: repeat(2, 1.5fr);
|
||||
}
|
||||
|
||||
.selector-item-name {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-item-description {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.selector-image {
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.selector-container {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue