44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve touch like hover on devices without mouse

Browse Source 
This commit improves mobile support. `:hover` CSS selector is not mobile
friendly because there is typically no mouse support on mobile. This
commit make hover behavior to become active during touch on mobile.

`:hover` selector is emulated on mobile devices. But this emulated
behavior is not desired. When emulated, the CSS style gets attached when
starting touching but does not get removed after stopping touching. This
sticky behavior is undesired.

This commit solve this issue by using Saas mixing that uses `:active`
selector instead of `:hover` when `:hover` is not really supported but
emulated.
This commit is contained in:
undergroundwires
2022-03-12 10:59:28 +01:00
parent b210aaddf2
commit 99e24b4134
12 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/presentation/assets/styles/_globals.scss
View File

@@ -4,7 +4,7 @@
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/fonts" as *;
@use "@/presentation/assets/styles/mixins" as *;
* {
box-sizing: border-box;
@@ -14,7 +14,7 @@ a {
color:inherit;
text-decoration: underline;
cursor: pointer;
&:hover {
@include hover-or-touch {
color: $color-primary;
}
}

16
src/presentation/assets/styles/_mixins.scss Normal file
View File

@@ -0,0 +1,16 @@
@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
@media (hover: hover) {
/* We only do this if hover is truly supported; otherwise the emulator in mobile
keeps hovered style in-place even after touching, making it sticky. */
#{$selector-prefix}:hover #{$selector-suffix} {
@content;
}
}
@media (hover: none) {
/* We only do this if hover is not supported,otherwise the desktop behavior is not
as desired; it does not get activated on hover but only during click/touch. */
#{$selector-prefix}:active #{$selector-suffix} {
@content;
}
}
}

1
src/presentation/assets/styles/main.scss
View File

@@ -4,6 +4,7 @@
@forward "./media";
@forward "./colors";
@forward "./globals";
@forward "./mixins";
@forward "./components/card";

4
src/presentation/assets/styles/third-party-extensions/_tree.scss
View File

@@ -1,5 +1,6 @@
// Overrides base styling for LiquorTree
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/mixins" as *;
$color-tree-bg : $color-primary-darker;
$color-node-arrow : $color-on-primary;
@@ -23,9 +24,10 @@ $color-node-checkbox-tick-checked : $color-on-secondary;
text-transform: uppercase;
font-size: 1.5em;
}
&:hover {
@include hover-or-touch {
background: $color-node-hover-bg !important;
}
background: $color-tree-bg !important; // If not styled, it gets white background on mobile.
}
&.selected { // When using keyboard navigation it highlights current item and its child items
background: $color-node-keyboard-bg;

4
src/presentation/components/Code/CodeButtons/Code.vue
View File

@@ -43,8 +43,8 @@ export default class Code extends Vue {
.copy-button {
margin-left: 1rem;
cursor: pointer;
&:hover {
color: $color-primary;
@include hover-or-touch {
color: $color-primary;
}
}
code {

9
src/presentation/components/Code/CodeButtons/IconButton.vue
View File

@@ -45,14 +45,14 @@ export default class IconButton extends Vue {
cursor: pointer;
width: 10%;
min-width: 90px;
&:hover {
@include hover-or-touch {
background: $color-surface;
box-shadow: 0px 2px 10px 5px $color-secondary;
}
&:hover>&__text {
@include hover-or-touch('>&__text') {
display: block;
}
&:hover>&__icon {
@include hover-or-touch('>&__icon') {
display: none;
}
&__text {
@@ -62,6 +62,9 @@ export default class IconButton extends Vue {
color: $color-primary;
font-weight: 500;
line-height: 1.1;
@include hover-or-touch {
display: block;
}
}
}
</style>

4
src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
View File

@@ -29,8 +29,8 @@ export default class MenuOptionListItem extends Vue {
@use "@/presentation/assets/styles/main" as *;
.enabled {
cursor: pointer;
&:hover {
cursor: pointer;
@include hover-or-touch {
font-weight:bold;
text-decoration:underline;
}

2
src/presentation/components/Scripts/Slider/Handle.vue
View File

@@ -56,7 +56,7 @@ $color-hover : $color-primary;
display: flex;
flex-direction: column;
align-items: center;
&:hover {
@include hover-or-touch {
.line {
background: $color-hover;
}

8
src/presentation/components/Scripts/View/Cards/CardListItem.vue
View File

@@ -144,7 +144,7 @@ $card-horizontal-gap : $card-gap;
flex-direction: column;
justify-content: center;
&:hover {
@include hover-or-touch {
background-color: $color-secondary;
color: $color-on-secondary;
transform: scale(1.05);
@@ -189,7 +189,7 @@ $card-horizontal-gap : $card-gap;
margin-right: 0.25em;
cursor: pointer;
color: $color-primary-light;
&:hover {
@include hover-or-touch {
color: $color-primary;
}
}
@@ -236,7 +236,7 @@ $card-horizontal-gap : $card-gap;
opacity: 1;
}
&:hover {
@include hover-or-touch {
.card__inner {
transform: scale(1);
}
@@ -251,7 +251,7 @@ $card-horizontal-gap : $card-gap;
transform: scale(0.95);
}
&:hover {
@include hover-or-touch {
.card__inner {
background-color: $color-primary;
transform: scale(1);

2
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
View File

@@ -35,7 +35,7 @@ export default class DocumentationUrls extends Vue {
color: $color-primary;
cursor: pointer;
vertical-align: middle;
&:hover {
@include hover-or-touch {
color: $color-primary-darker;
}
&:not(:first-child) {

2
src/presentation/components/Scripts/View/TheScriptsView.vue
View File

@@ -140,7 +140,7 @@ $margin-inner: 4px;
cursor: pointer;
font-size: 1.25em;
margin-left: 0.25rem;
&:hover {
@include hover-or-touch {
color: $color-primary-dark;
}
}

2
src/presentation/components/Shared/Dialog.vue
View File

@@ -53,7 +53,7 @@ export default class Dialog extends Vue {
margin-right: 0.25em;
align-self: flex-start;
cursor: pointer;
&:hover {
@include hover-or-touch {
color: $color-primary;
}
}