Tweak client style
This commit is contained in:
parent
8661cd1ee7
commit
73ce1f61a8
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="note _block"
|
class="lxwezrsl _block"
|
||||||
v-if="!muted"
|
v-if="!muted"
|
||||||
v-show="!isDeleted"
|
v-show="!isDeleted"
|
||||||
:tabindex="!isDeleted ? '-1' : null"
|
:tabindex="!isDeleted ? '-1' : null"
|
||||||
|
@ -899,7 +899,7 @@ export default defineComponent({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.note {
|
.lxwezrsl {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: box-shadow 0.1s ease;
|
transition: box-shadow 0.1s ease;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<div>{{ $ts.noNotes }}</div>
|
<div>{{ $ts.noNotes }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="giivymft">
|
<div v-else class="giivymft" :class="{ noGap }">
|
||||||
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
|
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
|
||||||
<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
|
||||||
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
|
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
|
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
|
||||||
<XNote :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
|
<XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
|
||||||
</XList>
|
</XList>
|
||||||
|
|
||||||
<div v-show="more && !reversed" style="margin-top: var(--margin);">
|
<div v-show="more && !reversed" style="margin-top: var(--margin);">
|
||||||
|
@ -110,8 +110,19 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
.giivymft {
|
.giivymft {
|
||||||
|
&.noGap {
|
||||||
> .notes {
|
> .notes {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.noGap) {
|
||||||
|
> .notes {
|
||||||
|
.qtqtichx {
|
||||||
|
background: var(--panel);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
|
<transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
|
||||||
<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
|
<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
|
||||||
<slot :point="point"></slot>
|
<slot :point="point"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="vtaihdtm">
|
<div class="vtaihdtm">
|
||||||
|
<div class="body">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
|
<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
|
||||||
<template #prefix><i class="fas fa-search"></i></template>
|
<template #prefix><i class="fas fa-search"></i></template>
|
||||||
</MkInput>
|
</MkInput>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list">
|
||||||
<MkFolder>
|
<MkFolder>
|
||||||
<template #header>{{ $ts._docs.generalTopics }}</template>
|
<template #header>{{ $ts._docs.generalTopics }}</template>
|
||||||
<div class="docs">
|
<div class="docs">
|
||||||
|
@ -45,6 +47,8 @@
|
||||||
</MkA>
|
</MkA>
|
||||||
</div>
|
</div>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -97,15 +101,22 @@ export default defineComponent({
|
||||||
.vtaihdtm {
|
.vtaihdtm {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
|
|
||||||
|
> .body {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
> .search {
|
> .search {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .list {
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
.docs {
|
.docs {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
||||||
grid-gap: 12px;
|
grid-gap: 12px;
|
||||||
margin: 0 16px 16px 16px;
|
margin: 0 0 16px 0;
|
||||||
|
|
||||||
> .doc {
|
> .doc {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -135,5 +146,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_section">
|
<div class="jmelgwjh">
|
||||||
<XNotes class="_content" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
|
<div class="body">
|
||||||
|
<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -42,3 +44,16 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.jmelgwjh {
|
||||||
|
background: var(--bg);
|
||||||
|
|
||||||
|
> .body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -8,9 +8,9 @@
|
||||||
|
|
||||||
<div class="main _gap">
|
<div class="main _gap">
|
||||||
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
|
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
|
||||||
<div class="_content _gap">
|
<div class="note _gap">
|
||||||
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
|
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
|
||||||
<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
|
<XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="_content clips _gap" v-if="clips && clips.length > 0">
|
<div class="_content clips _gap" v-if="clips && clips.length > 0">
|
||||||
<div class="title">{{ $ts.clip }}</div>
|
<div class="title">{{ $ts.clip }}</div>
|
||||||
|
@ -108,6 +108,7 @@ export default defineComponent({
|
||||||
os.api('notes/show', {
|
os.api('notes/show', {
|
||||||
noteId: this.noteId
|
noteId: this.noteId
|
||||||
}).then(note => {
|
}).then(note => {
|
||||||
|
this.note = note;
|
||||||
Promise.all([
|
Promise.all([
|
||||||
os.api('notes/clips', {
|
os.api('notes/clips', {
|
||||||
noteId: note.id,
|
noteId: note.id,
|
||||||
|
@ -126,7 +127,6 @@ export default defineComponent({
|
||||||
this.clips = clips;
|
this.clips = clips;
|
||||||
this.hasPrev = prev.length !== 0;
|
this.hasPrev = prev.length !== 0;
|
||||||
this.hasNext = next.length !== 0;
|
this.hasNext = next.length !== 0;
|
||||||
this.note = note;
|
|
||||||
});
|
});
|
||||||
}).catch(e => {
|
}).catch(e => {
|
||||||
this.error = e;
|
this.error = e;
|
||||||
|
@ -147,6 +147,8 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
.fcuexfpr {
|
.fcuexfpr {
|
||||||
|
background: var(--bg);
|
||||||
|
|
||||||
> .note {
|
> .note {
|
||||||
> .main {
|
> .main {
|
||||||
> .load {
|
> .load {
|
||||||
|
@ -163,6 +165,13 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .note {
|
||||||
|
> .note {
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .clips {
|
> .clips {
|
||||||
> .title {
|
> .title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_root">
|
<div class="">
|
||||||
<XNotifications class="_content" @before="before" @after="after" page/>
|
<XNotifications class="_content" @before="before" @after="after" page/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="cmuxhskf _root" v-hotkey.global="keymap">
|
<div class="cmuxhskf" v-hotkey.global="keymap">
|
||||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
|
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
|
||||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
|
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
|
@ -260,10 +260,9 @@ export default defineComponent({
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: calc(100% - 16px);
|
width: 100%;
|
||||||
height: 4px;
|
height: 2px;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -330,6 +330,7 @@ hr {
|
||||||
contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
|
contain: layout; // ふき出しがボックスから飛び出て表示されるようなデザインをする場合もあるので paint は contain することができない
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: 廃止
|
||||||
._root {
|
._root {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: var(--root-margin, 32px) auto;
|
margin: var(--root-margin, 32px) auto;
|
||||||
|
|
|
@ -257,6 +257,10 @@ export default defineComponent({
|
||||||
//backdrop-filter: var(--blur, blur(4px));
|
//backdrop-filter: var(--blur, blur(4px));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .sidebar {
|
||||||
|
border-right: solid 0.5px var(--divider);
|
||||||
|
}
|
||||||
|
|
||||||
> .contents {
|
> .contents {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
Loading…
Reference in New Issue