Deck (#6504)
* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip
This commit is contained in:
syuilo
GitHub
parent
5b28d7bf90
commit
cf3fc97202
56 changed files with 2695 additions and 907 deletions
|
|
@ -19,7 +19,7 @@
|
|||
<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
|
||||
|
||||
<x-post-form class="post-form _panel" fixed v-if="$store.state.device.showFixedPostForm"/>
|
||||
<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
|
||||
<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list ? list.id : null" :antenna="antenna ? antenna.id : null" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,14 +15,15 @@
|
|||
|
||||
<mk-remote-caution v-if="note.user.host != null" :href="note.url || note.uri" style="margin-bottom: var(--margin)"/>
|
||||
<x-note :note="note" :key="note.id" :detail="true"/>
|
||||
<div v-if="error">
|
||||
<mk-error @retry="fetch()"/>
|
||||
</div>
|
||||
|
||||
<button class="_panel _button" v-if="hasPrev && !showPrev" @click="showPrev = true" style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></button>
|
||||
<hr v-if="showPrev"/>
|
||||
<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
|
||||
</div>
|
||||
|
||||
<div v-if="error">
|
||||
<mk-error @retry="fetch()"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,20 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_card">
|
||||
<div class="_title"><fa :icon="faColumns"/> {{ $t('deck') }}</div>
|
||||
<div class="_content">
|
||||
<mk-switch v-model="deckAlwaysShowMainColumn">
|
||||
{{ $t('_deck.alwaysShowMainColumn') }}
|
||||
</mk-switch>
|
||||
</div>
|
||||
<div class="_content">
|
||||
<div>{{ $t('_deck.columnAlign') }}</div>
|
||||
<mk-radio v-model="deckColumnAlign" value="left">{{ $t('left') }}</mk-radio>
|
||||
<mk-radio v-model="deckColumnAlign" value="center">{{ $t('center') }}</mk-radio>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="_card">
|
||||
<div class="_title"><fa :icon="faCog"/> {{ $t('accessibility') }}</div>
|
||||
<div class="_content">
|
||||
|
|
@ -93,7 +107,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute, faColumns } from '@fortawesome/free-solid-svg-icons';
|
||||
import MkButton from '../../components/ui/button.vue';
|
||||
import MkSwitch from '../../components/ui/switch.vue';
|
||||
import MkSelect from '../../components/ui/select.vue';
|
||||
|
|
@ -145,7 +159,7 @@ export default Vue.extend({
|
|||
lang: localStorage.getItem('lang'),
|
||||
fontSize: localStorage.getItem('fontSize'),
|
||||
sounds,
|
||||
faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute
|
||||
faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute, faColumns
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -195,6 +209,16 @@ export default Vue.extend({
|
|||
set(value) { this.$store.commit('device/set', { key: 'fixedWidgetsPosition', value }); }
|
||||
},
|
||||
|
||||
deckAlwaysShowMainColumn: {
|
||||
get() { return this.$store.state.device.deckAlwaysShowMainColumn; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'deckAlwaysShowMainColumn', value }); }
|
||||
},
|
||||
|
||||
deckColumnAlign: {
|
||||
get() { return this.$store.state.device.deckColumnAlign; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
|
||||
},
|
||||
|
||||
sfxVolume: {
|
||||
get() { return this.$store.state.device.sfxVolume; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value: parseFloat(value, 10) }); }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="kjeftjfm">
|
||||
<div class="kjeftjfm" v-size="[{ max: 500 }]">
|
||||
<div class="with">
|
||||
<button class="_button" @click="with_ = null" :class="{ active: with_ === null }">{{ $t('notes') }}</button>
|
||||
<button class="_button" @click="with_ = 'replies'" :class="{ active: with_ === 'replies' }">{{ $t('notesAndReplies') }}</button>
|
||||
|
|
@ -60,10 +60,6 @@ export default Vue.extend({
|
|||
display: flex;
|
||||
margin-bottom: var(--margin);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
> button {
|
||||
flex: 1;
|
||||
padding: 11px 8px 8px 8px;
|
||||
|
|
@ -75,5 +71,11 @@ export default Vue.extend({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
> .with {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-user-page" v-if="user">
|
||||
<div class="mk-user-page" v-if="user" v-size="[{ max: 500 }]">
|
||||
<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
|
||||
<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
|
||||
|
||||
|
|
@ -118,6 +118,7 @@ import MkContainer from '../../components/ui/container.vue';
|
|||
import MkRemoteCaution from '../../components/remote-caution.vue';
|
||||
import Progress from '../../scripts/loading';
|
||||
import parseAcct from '../../../misc/acct/parse';
|
||||
import { getScrollPosition } from '../../scripts/scroll';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
|
|
@ -168,12 +169,8 @@ export default Vue.extend({
|
|||
|
||||
mounted() {
|
||||
window.requestAnimationFrame(this.parallaxLoop);
|
||||
window.addEventListener('scroll', this.parallax, { passive: true });
|
||||
document.addEventListener('touchmove', this.parallax, { passive: true });
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
window.cancelAnimationFrame(this.parallaxAnimationId);
|
||||
window.removeEventListener('scroll', this.parallax);
|
||||
document.removeEventListener('touchmove', this.parallax);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -205,7 +202,7 @@ export default Vue.extend({
|
|||
const banner = this.$refs.banner as any;
|
||||
if (banner == null) return;
|
||||
|
||||
const top = window.scrollY;
|
||||
const top = getScrollPosition(this.$el);
|
||||
|
||||
if (top < 0) return;
|
||||
|
||||
|
|
@ -219,7 +216,6 @@ export default Vue.extend({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.mk-user-page {
|
||||
|
||||
> .punished {
|
||||
font-size: 0.8em;
|
||||
padding: 16px;
|
||||
|
|
@ -237,10 +233,6 @@ export default Vue.extend({
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
> .banner {
|
||||
height: 100%;
|
||||
background-color: #4c5e6d;
|
||||
|
|
@ -257,10 +249,6 @@ export default Vue.extend({
|
|||
width: 100%;
|
||||
height: 78px;
|
||||
background: linear-gradient(transparent, rgba(#000, 0.7));
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .followed {
|
||||
|
|
@ -308,10 +296,6 @@ export default Vue.extend({
|
|||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .name {
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
|
@ -343,10 +327,6 @@ export default Vue.extend({
|
|||
font-weight: bold;
|
||||
border-bottom: solid 1px var(--divider);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .bottom {
|
||||
> * {
|
||||
display: inline-block;
|
||||
|
|
@ -365,26 +345,12 @@ export default Vue.extend({
|
|||
width: 120px;
|
||||
height: 120px;
|
||||
box-shadow: 1px 1px 3px rgba(#000, 0.2);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
top: 90px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .description {
|
||||
padding: 24px 24px 24px 154px;
|
||||
font-size: 0.95em;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .empty {
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
|
|
@ -396,10 +362,6 @@ export default Vue.extend({
|
|||
font-size: 0.9em;
|
||||
border-top: solid 1px var(--divider);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
> .field {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
|
|
@ -436,10 +398,6 @@ export default Vue.extend({
|
|||
padding: 24px;
|
||||
border-top: solid 1px var(--divider);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
> a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
|
@ -473,5 +431,47 @@ export default Vue.extend({
|
|||
> .content {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
> .profile {
|
||||
> .banner-container {
|
||||
height: 140px;
|
||||
|
||||
> .fade {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
top: 90px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
> .description {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .fields {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
> .status {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue