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

Merge pull request #11708 from alexthomson1/issue-11615

Browse Source 
stop dropdown menu getting stuck on hover - fixes #11615
This commit is contained in:
Matteo Pagliazzi
2020-02-01 11:23:29 +01:00
committed by GitHub
parent 0e8fb62887 ab4009bd32
commit f45fdfbe0d
2 changed files with 32 additions and 23 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; line-height: 1.71;
color: $gray-50; color: $gray-50;
cursor: pointer; cursor: pointer;
background-color: $purple-200;
&:focus { &:focus {
outline: none; outline: none;
background-color: inherit; background-color: inherit;
} }
&:active, &:hover, &.active { &:active, &:hover, &.active {
background-color: rgba(#d5c8ff, 0.32); background-color: #6133B4;
color: $purple-200; color: $purple-200;
} }
@@ -50,7 +52,7 @@
cursor: default; cursor: default;
&:active, &:hover, &.active { &:active, &:hover, &.active {
background-color: inherit; background-color: $purple-200;
color: inherit; color: inherit;
} }
} }

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

@@ -57,8 +57,7 @@
<li <li
class="topbar-item droppable" class="topbar-item droppable"
:class="{ :class="{
'active': $route.path.startsWith('/inventory'), 'active': $route.path.startsWith('/inventory')}"
'down': $route.path.startsWith('/inventory') && isDesktop()}"
> >
<div <div
class="chevron rotate" class="chevron rotate"
@@ -101,8 +100,7 @@
<li <li
class="topbar-item droppable" class="topbar-item droppable"
:class="{ :class="{
'active': $route.path.startsWith('/shop'), 'active': $route.path.startsWith('/shop')}"
'down': $route.path.startsWith('/shop') && isDesktop()}"
> >
<div <div
class="chevron rotate" class="chevron rotate"
@@ -168,8 +166,7 @@
<li <li
class="topbar-item droppable" class="topbar-item droppable"
:class="{ :class="{
'active': $route.path.startsWith('/groups'), 'active': $route.path.startsWith('/groups')}"
'down': $route.path.startsWith('/groups') && isDesktop()}"
> >
<div <div
class="chevron rotate" class="chevron rotate"
@@ -211,8 +208,7 @@
<li <li
class="topbar-item droppable" class="topbar-item droppable"
:class="{ :class="{
'active': $route.path.startsWith('/group-plans'), 'active': $route.path.startsWith('/group-plans')}"
'down': $route.path.startsWith('/group-plans') && isDesktop()}"
> >
<div <div
v-if="groupPlans.length > 0" v-if="groupPlans.length > 0"
@@ -245,8 +241,7 @@
<li <li
class="topbar-item droppable" class="topbar-item droppable"
:class="{ :class="{
'active': $route.path.startsWith('/challenges'), 'active': $route.path.startsWith('/challenges')}"
'down': $route.path.startsWith('/challenges') && isDesktop()}"
> >
<div <div
class="chevron rotate" class="chevron rotate"
@@ -282,8 +277,7 @@
<li <li
class="topbar-item droppable" class="topbar-item droppable"
:class="{ :class="{
'active': $route.path.startsWith('/help'), 'active': $route.path.startsWith('/help')}"
'down': $route.path.startsWith('/help') && isDesktop()}"
> >
<div <div
class="chevron rotate" class="chevron rotate"
@@ -807,13 +801,15 @@ export default {
}, },
dropdownDesktop (hover) { dropdownDesktop (hover) {
if (this.isDesktop() && hover.target.classList.contains('droppable')) { 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) { dropdownMobile (click) {
this.dropdown(click.currentTarget.parentElement); const element = click.currentTarget.parentElement;
},
dropdown (element) {
const droppedElement = document.getElementsByClassName('down')[0]; const droppedElement = document.getElementsByClassName('down')[0];
if (droppedElement && droppedElement !== element) { if (droppedElement && droppedElement !== element) {
droppedElement.classList.remove('down'); droppedElement.classList.remove('down');
@@ -821,10 +817,21 @@ export default {
droppedElement.lastChild.style.maxHeight = 0; droppedElement.lastChild.style.maxHeight = 0;
} }
} }
if (element.classList.contains('down')) {
element.classList.toggle('down'); this.closeDropdown(element);
element.lastChild.style.maxHeight = element.classList.contains('down') ? `${element.lastChild.scrollHeight}px` : 0; } else {
this.openDropdown(element);
}
}, },
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 () { closeMenu () {
if (this.isMobile()) { if (this.isMobile()) {
this.menuIsOpen = false; this.menuIsOpen = false;