client: tweak ui

This commit is contained in:
syuilo 2021-12-03 13:52:57 +09:00
parent c722225c80
commit 5fe2e8a59a
5 changed files with 32 additions and 29 deletions

View File

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

View File

@ -206,8 +206,6 @@ export default defineComponent({
> .input {
flex: 1;
margin-top: 16px;
margin-bottom: 0;
}
> button {

View File

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

View File

@ -86,6 +86,7 @@ export default defineComponent({
provide() {
return {
shouldHeaderThin: this.showMenuOnTop,
shouldSpacerMin: true,
};
},

View File

@ -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() {