forked from FoundKeyGang/FoundKey
client: tweak ui
This commit is contained in:
parent
c722225c80
commit
5fe2e8a59a
5 changed files with 32 additions and 29 deletions
|
@ -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 {
|
||||||
|
|
|
@ -206,8 +206,6 @@ export default defineComponent({
|
||||||
|
|
||||||
> .input {
|
> .input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> button {
|
> button {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf">
|
<MkSpacer :content-max="800">
|
||||||
|
<div v-hotkey.global="keymap" class="cmuxhskf">
|
||||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
||||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
||||||
|
|
||||||
|
@ -15,6 +16,7 @@
|
||||||
/>
|
/>
|
||||||
</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>
|
||||||
|
|
|
@ -86,6 +86,7 @@ export default defineComponent({
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
shouldHeaderThin: this.showMenuOnTop,
|
shouldHeaderThin: this.showMenuOnTop,
|
||||||
|
shouldSpacerMin: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -49,11 +49,14 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
provide() {
|
provide() {
|
||||||
return deckStore.state.navWindow ? {
|
return {
|
||||||
|
shouldSpacerMin: true,
|
||||||
|
...deckStore.state.navWindow ? {
|
||||||
navHook: (url) => {
|
navHook: (url) => {
|
||||||
os.pageWindow(url);
|
os.pageWindow(url);
|
||||||
}
|
}
|
||||||
} : {};
|
} : {}
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
Loading…
Reference in a new issue