System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Created stock update

Browse source
This commit is contained in:
Clay Nicholson 2024-07-19 14:44:41 -04:00
parent c55086a506
commit 7c7ca2d728
2 changed files with 70 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
public/bin/selector/script.js
View file

@ -120,6 +120,30 @@ function addPartToPage(part) {
}
if(part.displayAmount && part.currentStockIncludingNonFulfilled < 6 && !part.outOfStock){
let stockDiv = document.createElement("div");
stockDiv.className = "amountRemaining";
let stockText = document.createElement("h1");
stockText.innerText = part.currentStockIncludingNonFulfilled + " left in stock";
stockText.className = "outOfStockText";
let stockInnerText = document.createElement("p");
stockInnerText.innerText = "Shipping times may be delayed";
stockInnerText.className = "outOfStockInnerText";
stockDiv.appendChild(stockText)
stockDiv.appendChild(stockInnerText)
selectorItem.appendChild(stockDiv)
console.log("display amunt" + part.displayAmount);
console.log("current stock" + part.currentStockIncludingNonFulfilled);
console.log("out of stock" + part.outOfStock);
}
selectorItem.addEventListener("click", () => {
let isSelected = selectorItem.className.includes("selected")
if (isSelected) {

58
public/bin/selector/style.css
View file

@ -59,20 +59,32 @@
cursor: pointer;
filter: grayscale(0) brightness(1);
transition: filter 300ms;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for a more polished look */
}
.new-tag {
position: absolute;
top: 10%;
right: -35%;
top: 17%;
right: -38%;
transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation angle as needed */
width: 60%;
height: auto;
}
.new-tag:hover{
transform: translate(-50%, -50%) rotate(30deg); /* Slight rotation on hover */
}
.selector-item:hover {
background-color: #bcbda7;}
background-color: #bcbda7;
transform: translate(0%, 0%) scale(1.05); /* Slight rotation on hover */
}
.selector-item.disabled {
@ -123,32 +135,54 @@
.outOfStock{
position: absolute;
background-color: rgb(228, 245, 37);
background-color: aliceblue;
top: 17%;
left: 23%;
transform: translate(-50%, -50%) rotate(-35deg); /* Adjust rotation angle as needed */
display: flex;
align-items: center;
display: table-column;
border-radius: 20px; /* Smooth corners */
background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%); /* Nice gradient color */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for a more polished look */
}
.outOfStock:hover {
transform: translate(-50%, -50%) rotate(-30deg); /* Slight rotation on hover */
}
.amountRemaining{
position: absolute;
background-color: aliceblue;
top: 17%;
left: 23%;
transform: translate(-50%, -50%) rotate(-35deg); /* Adjust rotation angle as needed */
display: flex;
display: table-column;
border-radius: 20px; /* Smooth corners */
background: linear-gradient(135deg, #f8cc08 0%, #df3d01 100%); /* Nice gradient color */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for a more polished look */
}
.amountRemaining:hover {
transform: translate(-50%, -50%) rotate(-30deg); /* Slight rotation on hover */
}
.outOfStockText {
width: 60%;
height: auto;
white-space: nowrap;
position: relative;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
}
.outOfStockInnerText {
width: 20%;
height: auto;
white-space: nowrap;
padding-bottom: 10px;
position: relative;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
padding-bottom: 10px;
}