diff --git a/packages/client/src/components/global/spacer.vue b/packages/client/src/components/global/spacer.vue index 417282ad12..45481a2c8d 100644 --- a/packages/client/src/components/global/spacer.vue +++ b/packages/client/src/components/global/spacer.vue @@ -7,7 +7,7 @@ </template> <script lang="ts"> -import { defineComponent, onMounted, onUnmounted, ref } from 'vue'; +import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue'; export default defineComponent({ props: { @@ -33,7 +33,13 @@ export default defineComponent({ const root = ref<HTMLElement>(); const content = ref<HTMLElement>(); const margin = ref(0); + const shouldSpacerMin = inject('shouldSpacerMin', false); const adjust = (rect: { width: number; height: number; }) => { + if (shouldSpacerMin) { + margin.value = props.marginMin; + return; + } + if (rect.width > props.contentMax || rect.width > 500) { margin.value = props.marginMax; } else { diff --git a/packages/client/src/components/poll-editor.vue b/packages/client/src/components/poll-editor.vue index c2f760acbd..70ffb35d42 100644 --- a/packages/client/src/components/poll-editor.vue +++ b/packages/client/src/components/poll-editor.vue @@ -206,8 +206,6 @@ export default defineComponent({ > .input { flex: 1; - margin-top: 16px; - margin-bottom: 0; } > button { diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index b0a02d17a1..494932c602 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -1,20 +1,22 @@ <template> -<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf"> - <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> - <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> +<MkSpacer :content-max="800"> + <div v-hotkey.global="keymap" class="cmuxhskf"> + <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> + <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> - <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> - <div class="tl _block"> - <XTimeline ref="tl" :key="src" - class="tl" - :src="src" - :sound="true" - @before="before()" - @after="after()" - @queue="queueUpdated" - /> + <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> + <div class="tl _block"> + <XTimeline ref="tl" :key="src" + class="tl" + :src="src" + :sound="true" + @before="before()" + @after="after()" + @queue="queueUpdated" + /> + </div> </div> -</div> +</MkSpacer> </template> <script lang="ts"> @@ -188,8 +190,6 @@ export default defineComponent({ <style lang="scss" scoped> .cmuxhskf { - padding: var(--margin); - > .new { position: sticky; top: calc(var(--stickyTop, 0px) + 16px); @@ -213,10 +213,5 @@ export default defineComponent({ border-radius: var(--radius); overflow: clip; } - - &.min-width_800px { - max-width: 800px; - margin: 0 auto; - } } </style> diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index fe533662d0..684a075c04 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -86,6 +86,7 @@ export default defineComponent({ provide() { return { shouldHeaderThin: this.showMenuOnTop, + shouldSpacerMin: true, }; }, diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 329716664e..4f1efb0a4c 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -49,11 +49,14 @@ export default defineComponent({ }, provide() { - return deckStore.state.navWindow ? { - navHook: (url) => { - os.pageWindow(url); - } - } : {}; + return { + shouldSpacerMin: true, + ...deckStore.state.navWindow ? { + navHook: (url) => { + os.pageWindow(url); + } + } : {} + }; }, data() {