slight mobile changes
This commit is contained in:
parent
b92aae251b
commit
25a3718d91
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="neko">
|
||||
<div id="neko" :class="[side ? 'expanded' : '']">
|
||||
<template v-if="!$client.supported">
|
||||
<neko-unsupported />
|
||||
</template>
|
||||
@ -41,10 +41,13 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
||||
.neko-main {
|
||||
min-width: 360px;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
@ -104,6 +107,29 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#neko {
|
||||
&.expanded {
|
||||
.neko-main {
|
||||
transform: translateX(-$side-width);
|
||||
}
|
||||
.neko-menu {
|
||||
transform: translateX(-$side-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
#neko {
|
||||
.neko-main {
|
||||
.room-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<li v-if="!isTouch">
|
||||
<i
|
||||
:class="[
|
||||
hosted && !hosting ? 'disabled' : '',
|
||||
@ -114,6 +114,13 @@
|
||||
|
||||
@Component({ name: 'neko-controls' })
|
||||
export default class extends Vue {
|
||||
get isTouch() {
|
||||
return (
|
||||
(typeof navigator.maxTouchPoints !== 'undefined' ? navigator.maxTouchPoints < 0 : false) ||
|
||||
'ontouchstart' in document.documentElement
|
||||
)
|
||||
}
|
||||
|
||||
get hosted() {
|
||||
return this.$accessor.remote.hosted
|
||||
}
|
||||
|
Reference in New Issue
Block a user