1
0
Fork 0

Improve touch experience

This commit is contained in:
Moritz Ruth 2019-08-16 22:01:25 +02:00
parent 9fd1606763
commit 465a9cb069
2 changed files with 10 additions and 6 deletions

View file

@ -1,4 +1,4 @@
$c-background: #212121;
$c-background: #191919;
$c-background-darker: darken($c-background, 2);
$c-text: white;
$c-primary: #C64647;

View file

@ -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;