From 04584b768dd5e41515782566cbbf7b9d49b6b33a Mon Sep 17 00:00:00 2001 From: Julian Kussman Date: Tue, 16 Mar 2021 20:32:29 -0500 Subject: [PATCH] Replace :hover with media query to prevent double taps on mobile https://css-tricks.com/annoying-mobile-double-tap-link-issue/ --- ui/src/app/modules/logs/logs.component.scss | 8 ++-- .../modules/plugins/plugins.component.scss | 10 +++-- .../app/modules/status/status.component.scss | 24 ++++++---- .../widget-add/widget-add.component.scss | 9 ++-- .../system-info-widget.component.scss | 6 ++- ui/src/scss/base/buttons.scss | 8 ++-- ui/src/scss/components/accessories.scss | 20 +++++---- ui/src/scss/themes/themes-dark.scss | 44 +++++++++++++------ ui/src/scss/themes/themes-light.scss | 20 ++++++--- 9 files changed, 97 insertions(+), 52 deletions(-) diff --git a/ui/src/app/modules/logs/logs.component.scss b/ui/src/app/modules/logs/logs.component.scss index 75ed1ff10..ed89a9cde 100644 --- a/ui/src/app/modules/logs/logs.component.scss +++ b/ui/src/app/modules/logs/logs.component.scss @@ -12,9 +12,11 @@ -o-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; - &:hover, - &:active { - opacity: 1; + @media (hover: hover) { + &:hover, + &:active { + opacity: 1; + } } } } diff --git a/ui/src/app/modules/plugins/plugins.component.scss b/ui/src/app/modules/plugins/plugins.component.scss index 7b3b52543..573a2e5f9 100644 --- a/ui/src/app/modules/plugins/plugins.component.scss +++ b/ui/src/app/modules/plugins/plugins.component.scss @@ -9,12 +9,14 @@ padding: 10px; margin-bottom: 15px; - &:focus, - &:hover { - border: 1px solid #000000; + + @media (hover: hover) { + &:hover { + border: 1px solid #000000; + } } - &:focus { + border: 1px solid #000000; box-shadow: 0 1px 0 0 #000000; } } diff --git a/ui/src/app/modules/status/status.component.scss b/ui/src/app/modules/status/status.component.scss index 66ebbeefd..5619ae956 100644 --- a/ui/src/app/modules/status/status.component.scss +++ b/ui/src/app/modules/status/status.component.scss @@ -1,8 +1,10 @@ ::ng-deep { a { &.grey-text { - &:hover { - text-decoration: underline; + @media (hover: hover) { + &:hover { + text-decoration: underline; + } } } } @@ -34,10 +36,12 @@ gridster { } .widget-item { - &:hover, - &:active { - .widget-control-button { - opacity: 1; + @media (hover: hover) { + &:hover, + &:active { + .widget-control-button { + opacity: 1; + } } } } @@ -55,9 +59,11 @@ gridster { -o-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; - &:hover, - &:active { - opacity: 1; + @media (hover: hover) { + &:hover, + &:active { + opacity: 1; + } } @media (max-width: 1023px) { diff --git a/ui/src/app/modules/status/widget-add/widget-add.component.scss b/ui/src/app/modules/status/widget-add/widget-add.component.scss index 5c996aad7..1bb152ac7 100644 --- a/ui/src/app/modules/status/widget-add/widget-add.component.scss +++ b/ui/src/app/modules/status/widget-add/widget-add.component.scss @@ -6,10 +6,11 @@ border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); padding: 15px; - - &:hover { - .add-widget-label { - font-weight: 500; + @media (hover: hover) { + &:hover { + .add-widget-label { + font-weight: 500; + } } } } diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.scss b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.scss index d305b28a4..a6576d527 100644 --- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.scss +++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.scss @@ -5,8 +5,10 @@ table.table-sm td { } .system-info-link { - &:hover { - text-decoration: underline; + @media (hover: hover) { + &:hover { + text-decoration: underline; + } } } diff --git a/ui/src/scss/base/buttons.scss b/ui/src/scss/base/buttons.scss index 25553e635..9eba0242a 100644 --- a/ui/src/scss/base/buttons.scss +++ b/ui/src/scss/base/buttons.scss @@ -23,9 +23,11 @@ width: 47px; height: 47px; - &:hover { - -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + @media (hover: hover) { + &:hover { + -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + } } } diff --git a/ui/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss index ffb387404..1a2e3c512 100644 --- a/ui/src/scss/components/accessories.scss +++ b/ui/src/scss/components/accessories.scss @@ -114,10 +114,12 @@ } } - &:hover, - &:active { - .manage-accessory-button { - opacity: 0.6; + @media (hover: hover) { + &:hover, + &:active { + .manage-accessory-button { + opacity: 0.6; + } } } @@ -128,10 +130,12 @@ margin-right: 15px; margin-top: 15px; - &:active, - &:hover { - opacity: 1; - transform: scale(1.2); + @media (hover: hover) { + &:active, + &:hover { + opacity: 1; + transform: scale(1.2); + } } } diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss index 040e678c0..49577a5f9 100644 --- a/ui/src/scss/themes/themes-dark.scss +++ b/ui/src/scss/themes/themes-dark.scss @@ -66,7 +66,11 @@ background-color: $darkModePrimary; border-color: $darkModePrimary; } - &:hover, + @media (hover: hover) { + &:hover { + border-color: $darkModePrimary !important; + } + } &:focus { border-color: $darkModePrimary !important; } @@ -80,8 +84,10 @@ a { color: $secondaryBackground; - &:hover { - text-decoration: underline; + @media (hover: hover) { + &:hover { + text-decoration: underline; + } } } } @@ -98,21 +104,29 @@ &.card-link { color: #9e9e9e; - &:hover { - color: $darkModePrimary !important; + @media (hover: hover) { + &:hover { + color: $darkModePrimary !important; + } } } color: $darkModePrimary; - &:hover { - text-decoration: underline; + + @media (hover: hover) { + &:hover { + text-decoration: underline; + } } } .icon-button { cursor: pointer; - &:hover { - color: $darkModePrimary !important; + + @media (hover: hover) { + &:hover { + color: $darkModePrimary !important; + } } } @@ -162,7 +176,9 @@ } .table-hover tbody tr:hover { - color: $darkModePrimary !important; + @media (hover: hover) { + color: $darkModePrimary !important; + } } .table-striped tbody tr:nth-of-type(odd) { @@ -201,12 +217,14 @@ color: #999999 !important; border-color: #242424 !important; - &:focus, - &:hover { - border: 1px solid #242424 !important; + @media (hover: hover) { + &:hover { + border: 1px solid #242424 !important; + } } &:focus { + border: 1px solid #242424 !important; box-shadow: inherit !important; color: $darkModePrimary !important; } diff --git a/ui/src/scss/themes/themes-light.scss b/ui/src/scss/themes/themes-light.scss index e81fb6d3b..24963055e 100644 --- a/ui/src/scss/themes/themes-light.scss +++ b/ui/src/scss/themes/themes-light.scss @@ -22,17 +22,21 @@ a { &.card-link { color: #000000; - - &:hover { - color: $primary !important; + + @media (hover: hover) { + &:hover { + color: $primary !important; + } } } } .icon-button { cursor: pointer; - &:hover { - color: $primary !important; + @media (hover: hover) { + &:hover { + color: $primary !important; + } } } @@ -44,7 +48,11 @@ background-color: $primary; border-color: $primary; } - &:hover, + @media (hover: hover) { + &:hover { + border-color: $primary !important; + } + } &:focus { border-color: $primary !important; }