Removing hover tags on mobile.

This commit is contained in:
Zoe Roux 2019-10-27 23:40:41 +01:00
parent 479d24248a
commit a94f22b127
8 changed files with 19 additions and 16 deletions

View File

@ -23,7 +23,7 @@
padding: 12px; padding: 12px;
color: rgba(255, 255, 255, 0.7) !important; color: rgba(255, 255, 255, 0.7) !important;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
color: white !important; color: white !important;
} }
@ -78,7 +78,7 @@ input::-webkit-search-cancel-button
display: inline-block; display: inline-block;
opacity: 0.7; opacity: 0.7;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;

View File

@ -39,6 +39,9 @@ export class AppComponent
break; break;
} }
}); });
if (!navigator.userAgent.match(/Mobi/))
document.body.classList.add("hoverEnabled");
} }
openSearch() openSearch()

View File

@ -89,7 +89,7 @@ button
} }
} }
&:hover &:host-context(.hoverEnabled) &:hover
{ {
cursor: pointer; cursor: pointer;
} }

View File

@ -1,6 +1,6 @@
<div class="root"> <div class="root">
<div class="episodes" #scrollView (scroll)="onScroll()"> <div class="episodes" #scrollView (scroll)="onScroll()">
<a class="episode" *ngFor="let episode of this.episodes" #episodeDom routerLink="/watch/{{episode.link}}" href="/watch/{{this.showSlug}}-s{{episode.seasonNumber}}e{{episode.episodeNumber}}"> <a class="episode" *ngFor="let episode of this.episodes" #episodeDom routerLink="/watch/{{episode.link}}" href="/watch/{{episode.link}}">
<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)"> <div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button> <button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
</div> </div>

View File

@ -6,7 +6,7 @@
{ {
position: relative; position: relative;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
.scrollBtn .scrollBtn
{ {
@ -36,7 +36,7 @@
background-color: #999; background-color: #999;
border-radius: 90px; border-radius: 90px;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
background-color: rgb(134, 127, 127); background-color: rgb(134, 127, 127);
} }
@ -127,7 +127,7 @@
overflow: hidden; overflow: hidden;
} }
&:hover &:host-context(.hoverEnabled) &:hover
{ {
.img .img
{ {

View File

@ -23,7 +23,7 @@
background-color: #999; background-color: #999;
border-radius: 90px; border-radius: 90px;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
background-color: rgb(134, 127, 127); background-color: rgb(134, 127, 127);
} }
@ -84,7 +84,7 @@
} }
} }
&:hover &:host-context(.hoverEnabled) &:hover
{ {
cursor: pointer; cursor: pointer;
@ -104,7 +104,7 @@
{ {
position: relative; position: relative;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
.scrollBtn .scrollBtn
{ {

View File

@ -194,7 +194,7 @@
} }
} }
&:hover, &.seeking .hoverEnabled &:hover, &.seeking
{ {
cursor: pointer; cursor: pointer;
@ -215,7 +215,7 @@
{ {
position: relative; position: relative;
&:hover .hoverEnabled &:hover
{ {
#next #next
{ {
@ -278,7 +278,7 @@
outline: none; outline: none;
} }
&:hover, &:focus-within .hoverEnabled &:hover, &:focus-within
{ {
> mat-slider > mat-slider
{ {

View File

@ -23,7 +23,7 @@
background-color: #999; background-color: #999;
border-radius: 90px; border-radius: 90px;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
background-color: rgb(134, 127, 127); background-color: rgb(134, 127, 127);
} }
@ -103,7 +103,7 @@
} }
} }
&:hover &:host-context(.hoverEnabled) &:hover
{ {
cursor: pointer; cursor: pointer;
} }
@ -113,7 +113,7 @@
{ {
position: relative; position: relative;
&:hover &:host-context(.hoverEnabled) &:hover
{ {
.scrollBtn .scrollBtn
{ {