limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-29 05:17:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

client: tweak ui

Browse source
This commit is contained in:
syuilo 2021-12-03 13:52:57 +09:00
parent be52b087e0
commit c593c160d6
5 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/client/src/components/global/spacer.vue
View file

@ -7,7 +7,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'; import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -33,7 +33,13 @@ export default defineComponent({
const root = ref<HTMLElement>(); const root = ref<HTMLElement>();
const content = ref<HTMLElement>(); const content = ref<HTMLElement>();
const margin = ref(0); const margin = ref(0);
const shouldSpacerMin = inject('shouldSpacerMin', false);
const adjust = (rect: { width: number; height: number; }) => { const adjust = (rect: { width: number; height: number; }) => {
if (shouldSpacerMin) {
margin.value = props.marginMin;
return;
}
if (rect.width > props.contentMax || rect.width > 500) { if (rect.width > props.contentMax || rect.width > 500) {
margin.value = props.marginMax; margin.value = props.marginMax;
} else { } else {

2
packages/client/src/components/poll-editor.vue
View file

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

37
packages/client/src/pages/timeline.vue
View file

@ -1,20 +1,22 @@
<template> <template>
<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf"> <MkSpacer :content-max="800">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> <div v-hotkey.global="keymap" class="cmuxhskf">
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> <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 v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block"> <div class="tl _block">
<XTimeline ref="tl" :key="src" <XTimeline ref="tl" :key="src"
class="tl" class="tl"
:src="src" :src="src"
:sound="true" :sound="true"
@before="before()" @before="before()"
@after="after()" @after="after()"
@queue="queueUpdated" @queue="queueUpdated"
/> />
</div>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -188,8 +190,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.cmuxhskf { .cmuxhskf {
padding: var(--margin);
> .new { > .new {
position: sticky; position: sticky;
top: calc(var(--stickyTop, 0px) + 16px); top: calc(var(--stickyTop, 0px) + 16px);
@ -213,10 +213,5 @@ export default defineComponent({
border-radius: var(--radius); border-radius: var(--radius);
overflow: clip; overflow: clip;
} }
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
} }
</style> </style>

1
packages/client/src/ui/classic.vue
View file

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

13
packages/client/src/ui/deck.vue
View file

@ -49,11 +49,14 @@ export default defineComponent({
}, },
provide() { provide() {
return deckStore.state.navWindow ? { return {
navHook: (url) => { shouldSpacerMin: true,
os.pageWindow(url); ...deckStore.state.navWindow ? {
} navHook: (url) => {
} : {}; os.pageWindow(url);
}
} : {}
};
}, },
data() { data() {