danstewart/vikunja-frontend
1
0
Fork 0
forked from vikunja/frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: stop revealing elements on hover if hover is not supported (#3191)

Browse Source 
Resolves #3162

Co-authored-by: Dan Stewart <git@mail.danstewart.dev>
Reviewed-on: vikunja/frontend#3191
Reviewed-by: konrad <k@knt.li>
Co-authored-by: danstewart <danstewart@noreply.kolaente.de>
Co-committed-by: danstewart <danstewart@noreply.kolaente.de>
This commit is contained in:
danstewart 2023-03-04 16:13:31 +00:00 committed by konrad
parent ad0029789d
commit 7b6f76d1b4
3 changed files with 53 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/home/navigation.vue
View File

@ -342,15 +342,22 @@ $vikunja-nav-selected-width: 0.4rem;
} }
.menu-list-dropdown { .menu-list-dropdown {
opacity: 0; opacity: 1;
transition: $transition; transition: $transition;
} }
@media(hover: hover) and (pointer: fine) {
.menu-list-dropdown {
opacity: 0;
}
&:hover .menu-list-dropdown { &:hover .menu-list-dropdown {
opacity: 1; opacity: 1;
} }
} }
}
.menu-item-icon { .menu-item-icon {
color: var(--grey-400); color: var(--grey-400);
} }
@ -418,7 +425,6 @@ $vikunja-nav-selected-width: 0.4rem;
opacity: 1; opacity: 1;
} }
} }
&:not(.dragging-disabled) .handle { &:not(.dragging-disabled) .handle {
cursor: grab; cursor: grab;
} }
@ -482,18 +488,25 @@ $vikunja-nav-selected-width: 0.4rem;
.favorite { .favorite {
margin-left: .25rem; margin-left: .25rem;
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
opacity: 0; opacity: 1;
&:hover,
&.is-favorite { &.is-favorite {
color: var(--warning); color: var(--warning);
opacity: 1;
} }
} }
.favorite.is-favorite,
.list-menu:hover .favorite { @media(hover: hover) and (pointer: fine) {
.list-menu .favorite {
opacity: 0;
}
.list-menu:hover .favorite,
.favorite.is-favorite {
opacity: 1; opacity: 1;
} }
}
.list-menu-title { .list-menu-title {
overflow: hidden; overflow: hidden;

8
src/components/list/partials/ListCard.vue
View File

@ -147,7 +147,7 @@ const listStore = useListStore()
top: var(--list-card-padding); top: var(--list-card-padding);
right: var(--list-card-padding); right: var(--list-card-padding);
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
opacity: 0; opacity: 1;
&:hover { &:hover {
color: var(--warning); color: var(--warning);
@ -160,9 +160,15 @@ const listStore = useListStore()
} }
} }
@media(hover: hover) and (pointer: fine) {
.list-card .favorite {
opacity: 0;
}
.list-card:hover .favorite { .list-card:hover .favorite {
opacity: 1; opacity: 1;
} }
}
.background-fade-in { .background-fade-in {
opacity: 0; opacity: 0;

17
src/components/tasks/partials/singleTaskInList.vue
View File

@ -339,7 +339,7 @@ function hideDeferDueDatePopup(e) {
} }
.favorite { .favorite {
opacity: 0; opacity: 1;
text-align: center; text-align: center;
width: 27px; width: 27px;
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
@ -354,20 +354,25 @@ function hideDeferDueDatePopup(e) {
} }
} }
&:hover .favorite {
opacity: 1;
}
.handle { .handle {
opacity: 0; opacity: 1;
transition: opacity $transition; transition: opacity $transition;
margin-right: .25rem; margin-right: .25rem;
cursor: grab; cursor: grab;
} }
@media(hover: hover) and (pointer: fine) {
& .favorite,
& .handle {
opacity: 0;
}
&:hover .favorite,
&:hover .handle { &:hover .handle {
opacity: 1; opacity: 1;
} }
}
:deep(.fancycheckbox) { :deep(.fancycheckbox) {
height: 18px; height: 18px;