chore: formatting

This commit is contained in:
Kainoa Kanter 2023-05-19 15:41:59 -07:00
parent 65d5b279fa
commit 897a8919ef
13 changed files with 82 additions and 68 deletions

View file

@ -193,7 +193,7 @@ function onMousedown(evt: MouseEvent): void {
&.mini {
padding: 4px 8px;
font-size: .9em;
font-size: 0.9em;
border-radius: 100px;
}

View file

@ -34,7 +34,8 @@ const props = defineProps<{
position: relative;
height: 200px;
&:hover, &:focus {
&:hover,
&:focus {
text-decoration: none;
color: var(--accent);

View file

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

View file

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

View file

@ -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,8 +73,10 @@
: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'"
v-for="note in directQuotes"
@ -89,27 +87,26 @@
:detailedView="true"
/>
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
<!-- <MkPagination
v-if="tab === 'renotes'"
v-slot="{ items }"
ref="pagingComponent"
:pagination="pagination"
> -->
<MkUserCardMini
v-if="tab === 'renotes' && renotes"
v-for="item in renotes"
:key="item.user.id"
:user="item.user"
:with-chart="false"
/>
<MkUserCardMini
v-if="tab === 'renotes' && renotes"
v-for="item in renotes"
:key="item.user.id"
:user="item.user"
: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);
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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);
}

View file

@ -99,7 +99,6 @@ function popout() {
function nav(ev: MouseEvent) {
if (!ev.ctrlKey && props.behavior !== "browser") {
ev.preventDefault();
if (props.behavior) {

View file

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