krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed bug in desktop navigation causing dropdown menu to get stuck until moused over again.

Browse Source
This commit is contained in:
alexthomson1
2020-01-11 23:16:24 -07:00
parent 8fd7e1cd00
commit 8bd27b8313
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/client/src/assets/scss/dropdown.scss
View File

@@ -35,14 +35,16 @@
line-height: 1.71;
color: $gray-50;
cursor: pointer;
background-color: $purple-200;
&:focus {
outline: none;
background-color: inherit;
}
&:active, &:hover, &.active {
background-color: rgba(#d5c8ff, 0.32);
background-color: #6133B4;
color: $purple-200;
}
@@ -50,7 +52,7 @@
cursor: default;
&:active, &:hover, &.active {
background-color: inherit;
background-color: $purple-200;
color: inherit;
}
}

33
website/client/src/components/header/menu.vue
View File

@@ -58,8 +58,7 @@
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/inventory'),
'down': $route.path.startsWith('/inventory') && isDesktop()}"
'active': $route.path.startsWith('/inventory')}"
>
<div
class="chevron rotate"
@@ -102,8 +101,7 @@
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/shop'),
'down': $route.path.startsWith('/shop') && isDesktop()}"
'active': $route.path.startsWith('/shop')}"
>
<div
class="chevron rotate"
@@ -169,8 +167,7 @@
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/groups'),
'down': $route.path.startsWith('/groups') && isDesktop()}"
'active': $route.path.startsWith('/groups')}"
>
<div
class="chevron rotate"
@@ -212,8 +209,7 @@
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/group-plans'),
'down': $route.path.startsWith('/group-plans') && isDesktop()}"
'active': $route.path.startsWith('/group-plans')}"
>
<div
v-if="groupPlans.length > 0"
@@ -246,8 +242,7 @@
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/challenges'),
'down': $route.path.startsWith('/challenges') && isDesktop()}"
'active': $route.path.startsWith('/challenges')}"
>
<div
class="chevron rotate"
@@ -283,8 +278,7 @@
<li
class="topbar-item droppable"
:class="{
'active': $route.path.startsWith('/help'),
'down': $route.path.startsWith('/help') && isDesktop()}"
'active': $route.path.startsWith('/help')}"
>
<div
class="chevron rotate"
@@ -809,7 +803,11 @@ export default {
},
dropdownDesktop (hover) {
if (this.isDesktop() && hover.target.classList.contains('droppable')) {
this.dropdown(hover.target);
if (hover.type === 'mouseenter') {
this.openDropdown(hover.target);
} else {
this.closeDropdown(hover.target);
}
}
},
dropdownMobile (click) {
@@ -827,6 +825,15 @@ export default {
element.classList.toggle('down');
element.lastChild.style.maxHeight = element.classList.contains('down') ? `${element.lastChild.scrollHeight}px` : 0;
},
closeDropdown (element) {
element.classList.remove('down');
element.lastChild.style.maxHeight = 0;
},
openDropdown (element) {
element.classList.add('down');
element.lastChild.style.maxHeight = `${element.lastChild.scrollHeight}px`;
},
closeMenu () {
if (this.isMobile()) {
this.menuIsOpen = false;