Improve touch experience
This commit is contained in:
parent
9fd1606763
commit
465a9cb069
2 changed files with 10 additions and 6 deletions
|
@ -1,4 +1,4 @@
|
|||
$c-background: #212121;
|
||||
$c-background: #191919;
|
||||
$c-background-darker: darken($c-background, 2);
|
||||
$c-text: white;
|
||||
$c-primary: #C64647;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank">
|
||||
<a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank" @touchstart="onTouch">
|
||||
<div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
|
||||
<div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
|
||||
</div>
|
||||
|
@ -26,6 +26,14 @@
|
|||
return {
|
||||
simpleIcon: requireIcon(`./${this.name}.js`)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTouch(e) {
|
||||
if (document.activeElement !== this.$el) {
|
||||
e.preventDefault();
|
||||
this.$el.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -41,10 +49,6 @@
|
|||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: rgb(255, 169, 8) dashed 2px;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue