chore: formatting

This commit is contained in:
ThatOneCalculator 2023-04-22 17:22:53 -07:00
parent 29818a067b
commit 591e44ccd6
No known key found for this signature in database
GPG key ID: 8703CACD01000000
6 changed files with 45 additions and 43 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "13.2.0-dev35", "version": "13.2.0-dev36",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

View file

@ -1,14 +1,14 @@
<template> <template>
<button <button
class="_button" class="_button"
:class="{showLess: modelValue, fade: !modelValue}" :class="{ showLess: modelValue, fade: !modelValue }"
@click.stop="toggle" @click.stop="toggle"
> >
<span>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }} <span
>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}
<span v-if="!modelValue">{{ label }}</span> <span v-if="!modelValue">{{ label }}</span>
</span> </span>
</button> </button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -51,14 +51,14 @@ const toggle = () => {
> span { > span {
background: var(--cwBg) !important; background: var(--cwBg) !important;
color: var(--cwFg); color: var(--cwFg);
transition: background .2s, color .2s; transition: background 0.2s, color 0.2s;
> span { > span {
font-weight: 500; font-weight: 500;
&::before { &::before {
content: "(" content: "(";
} }
&::after { &::after {
content: ")" content: ")";
} }
} }
} }

View file

@ -85,10 +85,7 @@
:parentId="appearNote.parentId" :parentId="appearNote.parentId"
@push="(e) => router.push(notePage(e))" @push="(e) => router.push(notePage(e))"
></MkSubNoteContent> ></MkSubNoteContent>
<div <div v-if="translating || translation" class="translation">
v-if="translating || translation"
class="translation"
>
<MkLoading v-if="translating" mini /> <MkLoading v-if="translating" mini />
<div v-else class="translated"> <div v-else class="translated">
<b <b
@ -117,10 +114,7 @@
</div> </div>
<div v-if="detailedView" class="info"> <div v-if="detailedView" class="info">
<MkA class="created-at" :to="notePage(appearNote)"> <MkA class="created-at" :to="notePage(appearNote)">
<MkTime <MkTime :time="appearNote.createdAt" mode="absolute" />
:time="appearNote.createdAt"
mode="absolute"
/>
</MkA> </MkA>
</div> </div>
<footer ref="el" class="footer" @click.stop> <footer ref="el" class="footer" @click.stop>
@ -670,7 +664,7 @@ function readPromo() {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
margin-top: .4em; margin-top: 0.4em;
> .button { > .button {
margin: 0; margin: 0;
padding: 8px; padding: 8px;

View file

@ -20,7 +20,7 @@
:note="appearNote.reply" :note="appearNote.reply"
class="reply-to" class="reply-to"
/> />
<div ref="noteEl" class="article" tabindex="-1"> <div ref="noteEl" class="article" tabindex="-1">
<MkNote <MkNote
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"

View file

@ -30,10 +30,11 @@
:custom-emojis="note.emojis" :custom-emojis="note.emojis"
/> />
</p> </p>
<div <div class="wrmlmaau">
class="wrmlmaau" <div
> class="content"
<div class="content" :class="{ collapsed, isLong, showContent: note.cw && !showContent }"> :class="{ collapsed, isLong, showContent: note.cw && !showContent }"
>
<div class="body"> <div class="body">
<span v-if="note.deletedAt" style="opacity: 0.5" <span v-if="note.deletedAt" style="opacity: 0.5"
>({{ i18n.ts.deleted }})</span >({{ i18n.ts.deleted }})</span
@ -68,13 +69,16 @@
:i="$i" :i="$i"
:custom-emojis="note.emojis" :custom-emojis="note.emojis"
/> />
<MkA v-if="!detailed && note.renoteId" class="rp" :to="`/notes/${note.renoteId}`" <MkA
v-if="!detailed && note.renoteId"
class="rp"
:to="`/notes/${note.renoteId}`"
>{{ i18n.ts.quoteAttached }}: ...</MkA >{{ i18n.ts.quoteAttached }}: ...</MkA
> >
<div v-if="note.files.length > 0" class="files"> <div v-if="note.files.length > 0" class="files">
<XMediaList :media-list="note.files" /> <XMediaList :media-list="note.files" />
</div> </div>
<XPoll v-if="note.poll" :note="note" class="poll"/> <XPoll v-if="note.poll" :note="note" class="poll" />
<template v-if="detailed"> <template v-if="detailed">
<MkUrlPreview <MkUrlPreview
v-for="url in urls" v-for="url in urls"
@ -84,8 +88,12 @@
:detail="false" :detail="false"
class="url-preview" class="url-preview"
/> />
<div v-if="note.renote" class="renote" @click.stop="emit('push', note.renote)"> <div
<XNoteSimple :note="note.renote"/> v-if="note.renote"
class="renote"
@click.stop="emit('push', note.renote)"
>
<XNoteSimple :note="note.renote" />
</div> </div>
</template> </template>
</div> </div>
@ -132,19 +140,17 @@ const emit = defineEmits<{
(ev: "push", v): void; (ev: "push", v): void;
}>(); }>();
const isLong =
const isLong = !props.detailedView && ( !props.detailedView &&
props.note.cw == null && props.note.cw == null &&
props.note.text != null && props.note.text != null &&
(props.note.text.split("\n").length > 9 || props.note.text.length > 500) (props.note.text.split("\n").length > 9 || props.note.text.length > 500);
);
const collapsed = $ref(props.note.cw == null && isLong); const collapsed = $ref(props.note.cw == null && isLong);
const urls = props.note.text const urls = props.note.text
? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5) ? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
: null; : null;
let showContent = $ref(false);
let showContent = $ref(false);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -155,7 +161,8 @@ let showContent = $ref(false);
margin-right: 0.2em; margin-right: 0.2em;
color: var(--accent); color: var(--accent);
transition: background 0.2s; transition: background 0.2s;
&:hover, &:focus { &:hover,
&:focus {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);
} }
} }
@ -174,7 +181,7 @@ let showContent = $ref(false);
.content { .content {
overflow-wrap: break-word; overflow-wrap: break-word;
> .body { > .body {
transition: filter .1s; transition: filter 0.1s;
> .rp { > .rp {
margin-left: 4px; margin-left: 4px;
font-style: oblique; font-style: oblique;
@ -199,7 +206,7 @@ let showContent = $ref(false);
> .url-preview { > .url-preview {
margin-top: 8px; margin-top: 8px;
} }
> .poll { > .poll {
font-size: 80%; font-size: 80%;
} }
@ -217,18 +224,19 @@ let showContent = $ref(false);
} }
} }
} }
} }
&.collapsed,
&.collapsed, &.showContent { &.showContent {
position: relative; position: relative;
max-height: calc(9em + 50px); max-height: calc(9em + 50px);
> .body { > .body {
max-height: inherit; max-height: inherit;
mask: linear-gradient(black calc(100% - 64px), transparent); mask: linear-gradient(black calc(100% - 64px), transparent);
-webkit-mask: linear-gradient(black calc(100% - 64px), transparent); -webkit-mask: linear-gradient(
black calc(100% - 64px),
transparent
);
padding-inline: 50px; padding-inline: 50px;
margin-inline: -50px; margin-inline: -50px;
margin-top: -50px; margin-top: -50px;
@ -262,7 +270,7 @@ let showContent = $ref(false);
> span { > span {
display: inline-block; display: inline-block;
background: var(--panel); background: var(--panel);
padding: .4em 1em; padding: 0.4em 1em;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);

View file

@ -96,7 +96,7 @@ export function uploadFile(
if (xhr.status === 413) { if (xhr.status === 413) {
alert({ alert({
type: 'error', type: "error",
title: i18n.ts.failedToUpload, title: i18n.ts.failedToUpload,
text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit, text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
}); });