1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Turn off radiobutton focus on Mobile

This commit is contained in:
Dmitry Lyzo 2020-03-12 20:45:27 +03:00
parent 17d1dc3559
commit a2ccaa29c3
3 changed files with 14 additions and 8 deletions

View file

@ -53,7 +53,7 @@
cursor: auto;
}
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
color: #00a4dc;
}
@ -80,7 +80,7 @@
color: rgba(0, 0, 0, 0.26);
}
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
color: #00a4dc;
}
@ -103,7 +103,7 @@
transform: scale(0);
}
.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
-webkit-transform: scale(1.75);
transform: scale(1.75);
}

View file

@ -1,4 +1,4 @@
define(['css!./emby-radio', 'registerElement'], function () {
define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
'use strict';
var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
@ -23,6 +23,7 @@ define(['css!./emby-radio', 'registerElement'], function () {
}
EmbyRadioPrototype.attachedCallback = function () {
var showFocus = !layoutManager.mobile;
if (this.getAttribute('data-radio') === 'true') {
return;
@ -37,6 +38,9 @@ define(['css!./emby-radio', 'registerElement'], function () {
labelElement.classList.add('mdl-radio');
labelElement.classList.add('mdl-js-radio');
labelElement.classList.add('mdl-js-ripple-effect');
if (showFocus) {
labelElement.classList.add('show-focus');
}
var labelTextElement = labelElement.querySelector('span');
@ -57,7 +61,9 @@ define(['css!./emby-radio', 'registerElement'], function () {
html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
html += '</svg>';
html += '<div class="mdl-radio__focus-circle"></div>';
if (showFocus) {
html += '<div class="mdl-radio__focus-circle"></div>';
}
html += '</div>';