chore: formatting

This commit is contained in:
Kainoa Kanter 2023-05-19 15:41:59 -07:00
parent 4bf3501668
commit 6d3a5d63cc
13 changed files with 82 additions and 68 deletions

View File

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

View File

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

View File

@ -168,11 +168,11 @@ onMounted(() => {
addEventListener("popstate", close); 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. // 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.pswp.element.focus();
}) });
lightbox.on("close", () => { lightbox.on("close", () => {
removeEventListener("popstate", close); removeEventListener("popstate", close);
history.back(); history.back();
}) });
lightbox.init(); lightbox.init();

View File

@ -130,7 +130,9 @@
@click="reply()" @click="reply()"
> >
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <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> <p class="count">{{ appearNote.repliesCount }}</p>
</template> </template>
</button> </button>
@ -672,7 +674,7 @@ defineExpose({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: .7em; gap: 0.7em;
margin-top: 16px; margin-top: 16px;
opacity: 0.7; opacity: 0.7;
font-size: 0.9em; font-size: 0.9em;

View File

@ -33,11 +33,7 @@
detailedView detailedView
></MkNote> ></MkNote>
<MkTab <MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
v-model="tab"
:style="'chips'"
@update:modelValue="loadTab"
>
<option value="replies"> <option value="replies">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0"> <template v-if="appearNote.repliesCount > 0">
@ -77,7 +73,9 @@
:conversation="replies" :conversation="replies"
:detailedView="true" :detailedView="true"
/> />
<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" /> <MkLoading
v-else-if="tab === 'replies' && appearNote.repliesCount > 0"
/>
<MkNoteSub <MkNoteSub
v-if="directQuotes && tab === 'quotes'" v-if="directQuotes && tab === 'quotes'"
@ -104,12 +102,11 @@
:with-chart="false" :with-chart="false"
/> />
<!-- </MkPagination> --> <!-- </MkPagination> -->
<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" /> <MkLoading
v-else-if="tab === 'renotes' && appearNote.renoteCount > 0"
/>
<div <div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
v-if="tab === 'clips' && clips.length > 0"
class="_content clips"
>
<MkA <MkA
v-for="item in clips" v-for="item in clips"
:key="item.id" :key="item.id"
@ -117,10 +114,7 @@
class="item _panel" class="item _panel"
> >
<b>{{ item.name }}</b> <b>{{ item.name }}</b>
<div <div v-if="item.description" class="description">
v-if="item.description"
class="description"
>
{{ item.description }} {{ item.description }}
</div> </div>
<div class="user"> <div class="user">
@ -129,10 +123,7 @@
class="avatar" class="avatar"
:show-indicator="true" :show-indicator="true"
/> />
<MkUserName <MkUserName :user="item.user" :nowrap="false" />
:user="item.user"
:nowrap="false"
/>
</div> </div>
</MkA> </MkA>
</div> </div>
@ -358,16 +349,9 @@ os.api("notes/children", {
}).then((res) => { }).then((res) => {
replies.value = res; replies.value = res;
directReplies = res directReplies = res
.filter( .filter((note) => note.replyId === appearNote.id)
(note) =>
note.replyId === appearNote.id
)
.reverse(); .reverse();
directQuotes = res directQuotes = res.filter((note) => note.renoteId === appearNote.id);
.filter(
(note) =>
note.renoteId === appearNote.id
);
}); });
conversation = null; conversation = null;
@ -404,7 +388,7 @@ function loadTab() {
limit: 100, limit: 100,
}).then((res) => { }).then((res) => {
renotes = res; renotes = res;
}) });
} }
} }
@ -627,7 +611,9 @@ onUnmounted(() => {
padding-left: 10px; padding-left: 10px;
} }
} }
> .clips, > .chips, > :deep(.user-card-mini) { > .clips,
> .chips,
> :deep(.user-card-mini) {
padding-inline: 16px !important; padding-inline: 16px !important;
} }
} }
@ -643,7 +629,8 @@ onUnmounted(() => {
opacity: 0.7; opacity: 0.7;
} }
.clips { // want to redesign at some point .clips {
// want to redesign at some point
padding: 24px 32px; padding: 24px 32px;
padding-top: 0; padding-top: 0;
> .item { > .item {
@ -652,8 +639,9 @@ onUnmounted(() => {
// background: var(--buttonBg); // background: var(--buttonBg);
border: 1px solid var(--divider); border: 1px solid var(--divider);
margin-bottom: var(--margin); margin-bottom: var(--margin);
transition: background .2s; transition: background 0.2s;
&:hover, &:focus-within { &:hover,
&:focus-within {
background: var(--panelHighlight); background: var(--panelHighlight);
} }

View File

@ -135,7 +135,7 @@
:key="reply.id" :key="reply.id"
:note="reply" :note="reply"
class="reply" class="reply"
:class="{single: replies.length == 1}" :class="{ single: replies.length == 1 }"
:conversation="conversation" :conversation="conversation"
:depth="replies.lenght == 1 ? depth : depth + 1" :depth="replies.lenght == 1 ? depth : depth + 1"
:replyLevel="replyLevel + 1" :replyLevel="replyLevel + 1"

View File

@ -1,5 +1,10 @@
<template> <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> <span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
</button> </button>
</template> </template>

View File

@ -125,16 +125,26 @@
</div> </div>
</template> </template>
<div <div
v-if="note.cw && !showContent || showMoreButton && collapsed" v-if="
(note.cw && !showContent) ||
(showMoreButton && collapsed)
"
tabindex="0" tabindex="0"
v-on:focus="cwButton?.focus(); showMoreButton?.focus()" v-on:focus="
cwButton?.focus();
showMoreButton?.focus();
"
></div> ></div>
</div> </div>
<XShowMoreButton <XShowMoreButton
v-if="isLong && !collapsed" v-if="isLong && !collapsed"
v-model="collapsed" v-model="collapsed"
></XShowMoreButton> ></XShowMoreButton>
<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" /> <XCwButton
v-if="note.cw && showContent"
v-model="showContent"
:note="note"
/>
</div> </div>
<MkButton <MkButton
v-if="hasMfm && defaultStore.state.animatedMfm" v-if="hasMfm && defaultStore.state.animatedMfm"

View File

@ -16,10 +16,7 @@ export default defineComponent({
return h( return h(
"div", "div",
{ {
class: [ class: ["pxhvhrfw", { chips: this.style === "chips" }],
"pxhvhrfw",
{ chips: this.style === "chips" },
],
role: "tablist", role: "tablist",
}, },
options.map((option) => options.map((option) =>
@ -30,7 +27,10 @@ export default defineComponent({
class: "_button", class: "_button",
role: "tab", role: "tab",
key: option.key, key: option.key,
'aria-selected': this.modelValue === option.props?.value ? "true" : "false", "aria-selected":
this.modelValue === option.props?.value
? "true"
: "false",
onClick: () => { onClick: () => {
this.$emit( this.$emit(
"update:modelValue", "update:modelValue",
@ -87,7 +87,7 @@ export default defineComponent({
&.chips { &.chips {
padding: 12px 32px; padding: 12px 32px;
font-size: .85em; font-size: 0.85em;
overflow-x: auto; overflow-x: auto;
> button { > button {
display: flex; display: flex;
@ -96,11 +96,11 @@ export default defineComponent({
flex: unset; flex: unset;
margin: 0; margin: 0;
margin-right: 8px; margin-right: 8px;
padding: .5em 1em; padding: 0.5em 1em;
border-radius: 100px; border-radius: 100px;
background: var(--buttonBg); background: var(--buttonBg);
> i { > i {
margin-top: -.1em; margin-top: -0.1em;
} }
} }
} }

View File

@ -103,7 +103,10 @@
</template> </template>
</I18n> </I18n>
<br /> <br />
<XPostForm class="post-form _block" :show-mfm-cheat-sheet="false"/> <XPostForm
class="post-form _block"
:show-mfm-cheat-sheet="false"
/>
</section> </section>
<section <section
v-else-if="tutorial === 4" v-else-if="tutorial === 4"

View File

@ -29,7 +29,8 @@ import MkMiniChart from "@/components/MkMiniChart.vue";
import * as os from "@/os"; import * as os from "@/os";
import { acct, userPage } from "@/filters/user"; import { acct, userPage } from "@/filters/user";
const props = withDefaults(defineProps<{ const props = withDefaults(
defineProps<{
user: misskey.entities.User; user: misskey.entities.User;
withChart?: boolean; withChart?: boolean;
}>(), }>(),
@ -63,7 +64,7 @@ if (props.withChart) {
padding: 16px; padding: 16px;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: 8px;
transition: background .2s; transition: background 0.2s;
> :global(.avatar) { > :global(.avatar) {
display: block; display: block;
@ -104,7 +105,8 @@ if (props.withChart) {
height: 30px; height: 30px;
} }
&:hover, &:focus { &:hover,
&:focus {
background: var(--panelHighlight); background: var(--panelHighlight);
} }

View File

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

View File

@ -27,7 +27,9 @@
v-if="!showNext && hasNext" v-if="!showNext && hasNext"
class="load next" class="load next"
@click="showNext = true" @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 ><i class="ph-caret-up ph-bold ph-lg"></i
></MkButton> ></MkButton>
<div class="note _gap"> <div class="note _gap">
@ -45,7 +47,9 @@
v-if="!showPrev && hasPrev" v-if="!showPrev && hasPrev"
class="load prev" class="load prev"
@click="showPrev = true" @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 ><i class="ph-caret-down ph-bold ph-lg"></i
></MkButton> ></MkButton>
</div> </div>