chore: formatting
This commit is contained in:
Kainoa Kanter
parent
4bf3501668
commit
6d3a5d63cc
|
|
@ -193,7 +193,7 @@ function onMousedown(evt: MouseEvent): void {
|
|||
|
||||
&.mini {
|
||||
padding: 4px 8px;
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@ const props = defineProps<{
|
|||
position: relative;
|
||||
height: 200px;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
|
||||
|
|
|
|||
|
|
@ -168,11 +168,11 @@ onMounted(() => {
|
|||
addEventListener("popstate", close);
|
||||
// This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine.
|
||||
lightbox.pswp.element.focus();
|
||||
})
|
||||
});
|
||||
lightbox.on("close", () => {
|
||||
removeEventListener("popstate", close);
|
||||
history.back();
|
||||
})
|
||||
});
|
||||
|
||||
lightbox.init();
|
||||
|
||||
|
|
|
|||
|
|
@ -130,7 +130,9 @@
|
|||
@click="reply()"
|
||||
>
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0 && !detailedView">
|
||||
<template
|
||||
v-if="appearNote.repliesCount > 0 && !detailedView"
|
||||
>
|
||||
<p class="count">{{ appearNote.repliesCount }}</p>
|
||||
</template>
|
||||
</button>
|
||||
|
|
@ -672,7 +674,7 @@ defineExpose({
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: .7em;
|
||||
gap: 0.7em;
|
||||
margin-top: 16px;
|
||||
opacity: 0.7;
|
||||
font-size: 0.9em;
|
||||
|
|
|
|||
|
|
@ -33,11 +33,7 @@
|
|||
detailedView
|
||||
></MkNote>
|
||||
|
||||
<MkTab
|
||||
v-model="tab"
|
||||
:style="'chips'"
|
||||
@update:modelValue="loadTab"
|
||||
>
|
||||
<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
|
||||
<option value="replies">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
|
|
@ -77,7 +73,9 @@
|
|||
:conversation="replies"
|
||||
:detailedView="true"
|
||||
/>
|
||||
<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" />
|
||||
<MkLoading
|
||||
v-else-if="tab === 'replies' && appearNote.repliesCount > 0"
|
||||
/>
|
||||
|
||||
<MkNoteSub
|
||||
v-if="directQuotes && tab === 'quotes'"
|
||||
|
|
@ -104,12 +102,11 @@
|
|||
:with-chart="false"
|
||||
/>
|
||||
<!-- </MkPagination> -->
|
||||
<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
|
||||
<MkLoading
|
||||
v-else-if="tab === 'renotes' && appearNote.renoteCount > 0"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="tab === 'clips' && clips.length > 0"
|
||||
class="_content clips"
|
||||
>
|
||||
<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
|
||||
<MkA
|
||||
v-for="item in clips"
|
||||
:key="item.id"
|
||||
|
|
@ -117,10 +114,7 @@
|
|||
class="item _panel"
|
||||
>
|
||||
<b>{{ item.name }}</b>
|
||||
<div
|
||||
v-if="item.description"
|
||||
class="description"
|
||||
>
|
||||
<div v-if="item.description" class="description">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="user">
|
||||
|
|
@ -129,10 +123,7 @@
|
|||
class="avatar"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<MkUserName
|
||||
:user="item.user"
|
||||
:nowrap="false"
|
||||
/>
|
||||
<MkUserName :user="item.user" :nowrap="false" />
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
|
|
@ -358,16 +349,9 @@ os.api("notes/children", {
|
|||
}).then((res) => {
|
||||
replies.value = res;
|
||||
directReplies = res
|
||||
.filter(
|
||||
(note) =>
|
||||
note.replyId === appearNote.id
|
||||
)
|
||||
.filter((note) => note.replyId === appearNote.id)
|
||||
.reverse();
|
||||
directQuotes = res
|
||||
.filter(
|
||||
(note) =>
|
||||
note.renoteId === appearNote.id
|
||||
);
|
||||
directQuotes = res.filter((note) => note.renoteId === appearNote.id);
|
||||
});
|
||||
|
||||
conversation = null;
|
||||
|
|
@ -404,7 +388,7 @@ function loadTab() {
|
|||
limit: 100,
|
||||
}).then((res) => {
|
||||
renotes = res;
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -627,7 +611,9 @@ onUnmounted(() => {
|
|||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
> .clips, > .chips, > :deep(.user-card-mini) {
|
||||
> .clips,
|
||||
> .chips,
|
||||
> :deep(.user-card-mini) {
|
||||
padding-inline: 16px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -643,7 +629,8 @@ onUnmounted(() => {
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.clips { // want to redesign at some point
|
||||
.clips {
|
||||
// want to redesign at some point
|
||||
padding: 24px 32px;
|
||||
padding-top: 0;
|
||||
> .item {
|
||||
|
|
@ -652,8 +639,9 @@ onUnmounted(() => {
|
|||
// background: var(--buttonBg);
|
||||
border: 1px solid var(--divider);
|
||||
margin-bottom: var(--margin);
|
||||
transition: background .2s;
|
||||
&:hover, &:focus-within {
|
||||
transition: background 0.2s;
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
:key="reply.id"
|
||||
:note="reply"
|
||||
class="reply"
|
||||
:class="{single: replies.length == 1}"
|
||||
:class="{ single: replies.length == 1 }"
|
||||
:conversation="conversation"
|
||||
:depth="replies.lenght == 1 ? depth : depth + 1"
|
||||
:replyLevel="replyLevel + 1"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<button ref="el" class="_button" :class="{ fade: modelValue, showLess: !modelValue }" @click.stop="toggle">
|
||||
<button
|
||||
ref="el"
|
||||
class="_button"
|
||||
:class="{ fade: modelValue, showLess: !modelValue }"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -125,16 +125,26 @@
|
|||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="note.cw && !showContent || showMoreButton && collapsed"
|
||||
v-if="
|
||||
(note.cw && !showContent) ||
|
||||
(showMoreButton && collapsed)
|
||||
"
|
||||
tabindex="0"
|
||||
v-on:focus="cwButton?.focus(); showMoreButton?.focus()"
|
||||
v-on:focus="
|
||||
cwButton?.focus();
|
||||
showMoreButton?.focus();
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<XShowMoreButton
|
||||
v-if="isLong && !collapsed"
|
||||
v-model="collapsed"
|
||||
></XShowMoreButton>
|
||||
<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
|
||||
<XCwButton
|
||||
v-if="note.cw && showContent"
|
||||
v-model="showContent"
|
||||
:note="note"
|
||||
/>
|
||||
</div>
|
||||
<MkButton
|
||||
v-if="hasMfm && defaultStore.state.animatedMfm"
|
||||
|
|
|
|||
|
|
@ -16,10 +16,7 @@ export default defineComponent({
|
|||
return h(
|
||||
"div",
|
||||
{
|
||||
class: [
|
||||
"pxhvhrfw",
|
||||
{ chips: this.style === "chips" },
|
||||
],
|
||||
class: ["pxhvhrfw", { chips: this.style === "chips" }],
|
||||
role: "tablist",
|
||||
},
|
||||
options.map((option) =>
|
||||
|
|
@ -30,7 +27,10 @@ export default defineComponent({
|
|||
class: "_button",
|
||||
role: "tab",
|
||||
key: option.key,
|
||||
'aria-selected': this.modelValue === option.props?.value ? "true" : "false",
|
||||
"aria-selected":
|
||||
this.modelValue === option.props?.value
|
||||
? "true"
|
||||
: "false",
|
||||
onClick: () => {
|
||||
this.$emit(
|
||||
"update:modelValue",
|
||||
|
|
@ -87,7 +87,7 @@ export default defineComponent({
|
|||
|
||||
&.chips {
|
||||
padding: 12px 32px;
|
||||
font-size: .85em;
|
||||
font-size: 0.85em;
|
||||
overflow-x: auto;
|
||||
> button {
|
||||
display: flex;
|
||||
|
|
@ -96,11 +96,11 @@ export default defineComponent({
|
|||
flex: unset;
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 100px;
|
||||
background: var(--buttonBg);
|
||||
> i {
|
||||
margin-top: -.1em;
|
||||
margin-top: -0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,7 +103,10 @@
|
|||
</template>
|
||||
</I18n>
|
||||
<br />
|
||||
<XPostForm class="post-form _block" :show-mfm-cheat-sheet="false"/>
|
||||
<XPostForm
|
||||
class="post-form _block"
|
||||
:show-mfm-cheat-sheet="false"
|
||||
/>
|
||||
</section>
|
||||
<section
|
||||
v-else-if="tutorial === 4"
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ import MkMiniChart from "@/components/MkMiniChart.vue";
|
|||
import * as os from "@/os";
|
||||
import { acct, userPage } from "@/filters/user";
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
user: misskey.entities.User;
|
||||
withChart?: boolean;
|
||||
}>(),
|
||||
|
|
@ -63,7 +64,7 @@ if (props.withChart) {
|
|||
padding: 16px;
|
||||
background: var(--panel);
|
||||
border-radius: 8px;
|
||||
transition: background .2s;
|
||||
transition: background 0.2s;
|
||||
|
||||
> :global(.avatar) {
|
||||
display: block;
|
||||
|
|
@ -104,7 +105,8 @@ if (props.withChart) {
|
|||
height: 30px;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,6 @@ function popout() {
|
|||
|
||||
function nav(ev: MouseEvent) {
|
||||
if (!ev.ctrlKey && props.behavior !== "browser") {
|
||||
|
||||
ev.preventDefault();
|
||||
|
||||
if (props.behavior) {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@
|
|||
v-if="!showNext && hasNext"
|
||||
class="load next"
|
||||
@click="showNext = true"
|
||||
v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.newer})`"
|
||||
v-tooltip="
|
||||
`${i18n.ts.loadMore} (${i18n.ts.newer})`
|
||||
"
|
||||
><i class="ph-caret-up ph-bold ph-lg"></i
|
||||
></MkButton>
|
||||
<div class="note _gap">
|
||||
|
|
@ -45,7 +47,9 @@
|
|||
v-if="!showPrev && hasPrev"
|
||||
class="load prev"
|
||||
@click="showPrev = true"
|
||||
v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.older})`"
|
||||
v-tooltip="
|
||||
`${i18n.ts.loadMore} (${i18n.ts.older})`
|
||||
"
|
||||
><i class="ph-caret-down ph-bold ph-lg"></i
|
||||
></MkButton>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue