Permalink
Browse files

top nav shrink to icons

  • Loading branch information...
Manuel-777 committed Jan 22, 2019
1 parent 7568acf commit c1dd5efebdef1bb1b9cc161ad06624246f16a256
Binary file not shown.
BIN +3.52 KB images/tab_economy.png
Binary file not shown.
BIN +3.8 KB images/tab_events.png
Binary file not shown.
BIN +3.91 KB images/tab_explore.png
Binary file not shown.
BIN +3.81 KB images/tab_history.png
Binary file not shown.
BIN +3.29 KB images/tab_home.png
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -271,20 +271,66 @@ span i {
align-items: stretch;
}

.top_nav_icon {
display: none;
opacity: 0;
position: absolute;
left: calc(50% - 16px);
top: 16px;
margin: auto 0;
width: 32px;
height: 32px;
-webkit-transition: all .5s ease-in-out;
}

.top_nav_icon:hover {
opacity: 1;
}

.icon_0 {
background: url(../images/tab_tourneys.png);
}

.icon_1 {
background: url(../images/tab_my_decks.png);
}

.icon_2 {
background: url(../images/tab_history.png);
}

.icon_3 {
background: url(../images/tab_events.png);
}

.icon_4 {
background: url(../images/tab_explore.png);
}

.icon_5 {
background: url(../images/tab_economy.png);
}

.icon_6 {
background: url(../images/tab_collection.png);
}

.top_nav_info {
flex-grow: 1;
display: flex;
flex-basis: auto;
}

span.top_nav_item_text {
text-align: center;
font-family: "belerenbold";
font-size: 16px;
line-height: 64px;
white-space: nowrap;
text-align: center;
overflow: hidden;
display: inline-block;
-webkit-transition: all .5s ease-in-out;
}

.top_nav_item {
@@ -298,32 +344,33 @@ span.top_nav_item_text {
white-space: nowrap;
text-align: center;
color: #FAE5D2;
opacity: 0.5;
background-position-y: 64px;
background-repeat: no-repeat;
background-image: url(file:///C:/Users/Manuh/Desktop/MTG%20Arena%20Tool/MTG-Arena-Tool/window_main/../images/nav_hover.png);
-webkit-transition: all .2s ease-in-out;
border-bottom: solid 1px rgba(210, 231, 250, 0);
opacity: 0.5;
overflow: hidden;
flex-grow: 2;
width: auto;
position: relative;
display: inline-grid;
}

.top_nav_item:hover {
background-position-y: 4px;
opacity: 1;
}

.ith_icon {
width: 32px;
height: 32px;
opacity: 0.5;
opacity: 1;
margin: 16px auto;
background-repeat: no-repeat;
background-image: url(../images/cup.png);
}

.top_nav_item:hover {
background-position-y: 4px;
opacity: 1;
}

.sidebar_separator {
height: 16px;
}
@@ -41,12 +41,12 @@
<div class="top_nav_icons">
<div class="top_nav_separator"></div>
<div class="top_nav_item ith" style="width: 60px;"><div class="ith_icon"></div></div>
<div class="top_nav_item item_selected it0"><span class="top_nav_item_text">MY DECKS</span></div>
<div class="top_nav_item it1"><span class="top_nav_item_text">HISTORY</span></div>
<div class="top_nav_item it2"><span class="top_nav_item_text">EVENTS</span></div>
<div class="top_nav_item it3"><span class="top_nav_item_text">EXPLORE</span></div>
<div class="top_nav_item it4"><span class="top_nav_item_text">ECONOMY</span></div>
<div class="top_nav_item it5"><span class="top_nav_item_text">COLLECTION</span></div>
<div class="top_nav_item item_selected it0"><span class="top_nav_item_text">MY DECKS</span><div class="top_nav_icon icon_1"></div></div>
<div class="top_nav_item it1"><span class="top_nav_item_text">HISTORY</span><div class="top_nav_icon icon_2"></div></div>
<div class="top_nav_item it2"><span class="top_nav_item_text">EVENTS</span><div class="top_nav_icon icon_3"></div></div>
<div class="top_nav_item it3"><span class="top_nav_item_text">EXPLORE</span><div class="top_nav_icon icon_4"></div></div>
<div class="top_nav_item it4"><span class="top_nav_item_text">ECONOMY</span><div class="top_nav_icon icon_5"></div></div>
<div class="top_nav_item it5"><span class="top_nav_item_text">COLLECTION</span><div class="top_nav_icon icon_6"></div></div>
</div>
<div class="top_nav_info">
<div class="flex_item" style="margin-left: auto;">
@@ -704,7 +704,29 @@ function force_open_about() {
open_settings(5);
}

let top_compact = false;
$(document).ready(function() {
$(window).on('resize', () => {
if ($('.top_nav_icons').width() < 500) {
if (!top_compact) {
$('span.top_nav_item_text').css("opacity", 0);
$('.top_nav_icon').css("display", "block");
$('.top_nav_icon').css("opacity", 1);
top_compact = true;
}
}
else {
if (top_compact) {
$('span.top_nav_item_text').css("opacity", 1);
$('.top_nav_icon').css("opacity", 0);
window.setTimeout(() => {
$('.top_nav_icon').css("display", false);
}, 500);
top_compact = false;
}
}
});

//document.getElementById("rememberme").checked = false;
$(".signup_link").click(function() {
shell.openExternal('https://mtgatool.com/signup/');

0 comments on commit c1dd5ef

Please sign in to comment.