summaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2019-07-08 04:36:06 +0900
committerGitHub <noreply@github.com>2019-07-08 04:36:06 +0900
commiteb783f827c0852440789a79975500bb73237244d (patch)
tree8435870f5e71699eab1bd1f760f570c05116ee11 /src/client
parent:art: (diff)
parentAdd semicolons (diff)
downloadsharkey-eb783f827c0852440789a79975500bb73237244d.tar.gz
sharkey-eb783f827c0852440789a79975500bb73237244d.tar.bz2
sharkey-eb783f827c0852440789a79975500bb73237244d.zip
Better display in narrow desktop and choosing client type; Fix #1442, Fix #2106, Resolve #4552 (#4549)
* fix #1442, fix #2106 * revert * wip * :v: * clean up * fix * https://github.com/syuilo/misskey/pull/4549#discussion_r287750004
Diffstat (limited to 'src/client')
-rw-r--r--src/client/app/boot.js9
-rw-r--r--src/client/app/common/views/components/settings/app-type.vue36
-rw-r--r--src/client/app/common/views/components/settings/settings.vue3
-rw-r--r--src/client/app/desktop/views/home/home.vue4
-rw-r--r--src/client/app/desktop/views/home/timeline.vue28
-rw-r--r--src/client/app/store.ts1
6 files changed, 64 insertions, 17 deletions
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 6cb1488e40..583cc4fc8b 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -84,7 +84,14 @@
// Detect the user agent
const ua = navigator.userAgent.toLowerCase();
- const isMobile = /mobile|iphone|ipad|android/.test(ua);
+ let isMobile = /mobile|iphone|ipad|android/.test(ua) || window.innerWidth < 576;
+ if (settings && settings.device.appTypeForce) {
+ if (settings.device.appTypeForce === 'mobile') {
+ isMobile = true;
+ } else if (settings.device.appTypeForce === 'desktop') {
+ isMobile = false;
+ }
+ }
// Get the <head> element
const head = document.getElementsByTagName('head')[0];
diff --git a/src/client/app/common/views/components/settings/app-type.vue b/src/client/app/common/views/components/settings/app-type.vue
new file mode 100644
index 0000000000..90ff28803b
--- /dev/null
+++ b/src/client/app/common/views/components/settings/app-type.vue
@@ -0,0 +1,36 @@
+<template>
+<ui-card>
+ <template #title><fa :icon="faMobileAlt"/> {{ $t('title') }}</template>
+
+ <section class="fit-top">
+ <p>{{ $t('intro') }}</p>
+ <ui-select v-model="appTypeForce" :placeholder="$t('intro')">
+ <option v-for="x in ['auto', 'desktop', 'mobile']" :value="x" :key="x">{{ $t(`choices.${x}`) }}</option>
+ </ui-select>
+ <ui-info warn>{{ $t('info') }}</ui-info>
+ </section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import { faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+
+export default Vue.extend({
+ i18n: i18n('common/views/components/settings/app-type.vue'),
+
+ data() {
+ return {
+ faMobileAlt
+ };
+ },
+
+ computed: {
+ appTypeForce: {
+ get() { return this.$store.state.device.appTypeForce; },
+ set(value) { this.$store.commit('device/set', { key: 'appTypeForce', value }); }
+ },
+ },
+});
+</script>
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
index 1254eb5e5e..5f370c8be7 100644
--- a/src/client/app/common/views/components/settings/settings.vue
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -163,6 +163,7 @@
</ui-card>
<x-language/>
+ <x-app-type/>
</template>
<template v-if="page == null || page == 'notification'">
@@ -271,6 +272,7 @@ import XPassword from './password.vue';
import XProfile from './profile.vue';
import XApi from './api.vue';
import XLanguage from './language.vue';
+import XAppType from './app-type.vue';
import XNotification from './notification.vue';
import { url, version } from '../../../../config';
@@ -291,6 +293,7 @@ export default Vue.extend({
XProfile,
XApi,
XLanguage,
+ XAppType,
XNotification,
},
props: {
diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
index 3d05bee48d..527c2d52ef 100644
--- a/src/client/app/desktop/views/home/home.vue
+++ b/src/client/app/desktop/views/home/home.vue
@@ -62,7 +62,7 @@
</div>
</template>
<template v-else>
- <div v-for="place in ['left', 'right']" :class="place">
+ <div v-for="place in ['left', 'right']" :class="place" :key="place">
<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="desktop"/>
</div>
<div class="main">
@@ -392,7 +392,7 @@ export default Vue.extend({
margin 0 auto
&:not(.side)
- @media (max-width 1200px)
+ @media (max-width 1100px)
> *:not(.main)
display none
diff --git a/src/client/app/desktop/views/home/timeline.vue b/src/client/app/desktop/views/home/timeline.vue
index d8da6e4e26..b870395c18 100644
--- a/src/client/app/desktop/views/home/timeline.vue
+++ b/src/client/app/desktop/views/home/timeline.vue
@@ -4,12 +4,12 @@
<div class="main">
<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
<header class="zahtxcqi">
- <span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
- <span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
- <span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
- <span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
- <span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
- <span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</span>
+ <div :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</div>
+ <div :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</div>
+ <div :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</div>
+ <div :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</div>
+ <div :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</div>
+ <div :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</div>
<div class="buttons">
<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="indicator" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="indicator" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
@@ -200,18 +200,19 @@ export default Vue.extend({
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
- .zahtxcqi
+ header.zahtxcqi
+ display flex
+ flex-wrap wrap
padding 0 8px
z-index 10
background var(--faceHeader)
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
+ > *
+ flex-shrink 0
+
> .buttons
- position absolute
- z-index 2
- top 0
- right 0
- padding-right 8px
+ margin-left auto
> button
padding 0 8px
@@ -244,8 +245,7 @@ export default Vue.extend({
height 2px
background var(--primary)
- > span
- display inline-block
+ > div:not(.buttons)
padding 0 10px
line-height 42px
font-size 12px
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index f5c89e24f6..252feb3982 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -61,6 +61,7 @@ const defaultDeviceSettings = {
soundVolume: 0.5,
mediaVolume: 0.5,
lang: null,
+ appTypeForce: 'auto',
debug: false,
lightmode: false,
loadRawImages: false,
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-03 20:58:26 +0000