Skip to content
Permalink
Browse files

Add quantity indicator on hover

  • Loading branch information...
Manuel-777 committed Mar 10, 2019
1 parent e5f1a12 commit 780764a266ace03ad2d192bc29027cbcb06a9792
Showing with 35 additions and 0 deletions.
  1. +13 −0 shared/shared.css
  2. +21 −0 shared/util.js
  3. +1 −0 window_main/index.html
@@ -488,6 +488,19 @@ label {
background-image: url(../images/icon_back_light.png);
}

.hover_card_quantity {
display: flex;
position: relative;
left: 210px;
top: -32px;
width: 180px;
height: 32px;
justify-content: center;
align-items: center;
border-radius: 12px 12px 0px 0px;
background-color: rgba(0, 0, 0, 0.5);
}

.main_hover_container {
pointer-events: none;
display: flex;
@@ -904,10 +904,31 @@ function addCardHover(div, _card) {

$(".main_hover").on("load", function() {
$(".loader").css("opacity", 0);
if (renderer == 0) {
let hoverCardQuantity = $('.hover_card_quantity');
hoverCardQuantity.html("");
hoverCardQuantity.css("opacity", 1);
for (let i = 0; i < 4; i++) {
if (cardsNew[_card.id] != undefined && i < cardsNew[_card.id]) {
$(
'<div class="inventory_card_quantity_orange"></div>'
).appendTo(hoverCardQuantity);
} else if (i < cards[_card.id]) {
$(
'<div class="inventory_card_quantity_green"></div>'
).appendTo(hoverCardQuantity);
} else {
$(
'<div class="inventory_card_quantity_gray"></div>'
).appendTo(hoverCardQuantity);
}
}
}
});
});

div.addEventListener("mouseleave", () => {
$('.hover_card_quantity').css("opacity", 0);
$(".main_hover").css("opacity", 0);
$(".main_hover_dfc").css("opacity", 0);
$(".loader").css("opacity", 0);
@@ -78,6 +78,7 @@


<div class="main_hover_container">
<div class="hover_card_quantity"></div>
<img class="main_hover">
<img class="main_hover_dfc">
</div>

0 comments on commit 780764a

Please sign in to comment.
You can’t perform that action at this time.