sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-07-04 09:50:03 +09:00
Code Issues Projects Releases Wiki Activity

remove v-size directive

Browse Source
This commit is contained in:
syuilo
2022-12-28 09:32:22 +09:00
parent 9b595b93f8
commit 13677ff2b0
18 changed files with 19 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkContainer.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
@ -233,7 +233,7 @@ export default defineComponent({
}
}
&.max-width_380px, &.thin {
&.thin {
> header {
> .title {
padding: 8px 10px;

10
packages/frontend/src/components/MkFolder.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [500] }" class="ssazuxis">
<div class="ssazuxis">
<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
@ -147,14 +147,6 @@ export default defineComponent({
padding: 12px 0 12px 16px;
}
}
&.max-width_500px {
> header {
> .title {
padding: 8px 10px 8px 0;
}
}
}
}
@container (max-width: 500px) {

1
packages/frontend/src/components/MkNote.vue
View File

@ -4,7 +4,6 @@
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="tkcbzcuz"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"

59
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -4,7 +4,6 @@
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="lxwezrsl _block"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
@ -543,64 +542,6 @@ if (appearNote.replyId) {
> .reply {
border-top: solid 0.5px var(--divider);
}
&.max-width_500px {
font-size: 0.9em;
}
&.max-width_450px {
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
padding: 16px;
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
}
}
&.max-width_350px {
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
}
}
&.max-width_300px {
font-size: 0.825em;
> .article {
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
}
}
@container (max-width: 500px) {

18
packages/frontend/src/components/MkNotePreview.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ min: [350, 500] }" class="fefdfafb">
<div class="fefdfafb">
<MkAvatar class="avatar" :user="$i"/>
<div class="main">
<div class="header">
@ -30,22 +30,6 @@ const props = defineProps<{
overflow: clip;
font-size: 0.95em;
&.min-width_350px {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
&.min-width_500px {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
> .avatar {
flex-shrink: 0;
display: block;

18
packages/frontend/src/components/MkNoteSimple.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ min: [350, 500] }" class="yohlumlk">
<div class="yohlumlk">
<MkAvatar class="avatar" :user="note.user"/>
<div class="main">
<XNoteHeader class="header" :note="note" :mini="true"/>
@ -39,22 +39,6 @@ const showContent = $ref(false);
overflow: clip;
font-size: 0.95em;
&.min-width_350px {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
&.min-width_500px {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
> .avatar {
flex-shrink: 0;
display: block;

10
packages/frontend/src/components/MkNoteSub.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="main">
<MkAvatar class="avatar" :user="note.user"/>
<div class="body">
@ -62,17 +62,9 @@ if (props.detail) {
padding: 16px 32px;
font-size: 0.9em;
&.max-width_450px {
padding: 14px 16px;
}
&.children {
padding: 10px 0 0 16px;
font-size: 1em;
&.max-width_450px {
padding: 10px 0 0 8px;
}
}
> .main {

12
packages/frontend/src/components/MkNotification.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
<div ref="elRef" class="qglefbjs" :class="notification.type">
<div class="head">
<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
@ -170,16 +170,6 @@ useTooltip(reactionRef, (showing) => {
display: flex;
contain: content;
&.max-width_600px {
padding: 16px;
font-size: 0.9em;
}
&.max-width_500px {
padding: 12px;
font-size: 0.85em;
}
> .head {
position: sticky;
top: 0;

55
packages/frontend/src/components/MkPostForm.vue
View File

@ -1,6 +1,6 @@
<template>
<div
v-size="{ max: [310, 500] }" class="gafaadew"
class="gafaadew"
:class="{ modal, _popup: modal }"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@ -936,59 +936,6 @@ onMounted(() => {
}
}
}
&.max-width_500px {
> header {
height: 50px;
> .cancel {
width: 50px;
line-height: 50px;
}
> .right {
> .text-count {
line-height: 50px;
}
> .submit {
margin: 8px;
}
}
}
> .form {
> .to-specified {
padding: 6px 16px;
}
> .cw,
> .hashtags,
> .text {
padding: 0 16px;
}
> .text {
min-height: 80px;
}
> footer {
padding: 0 8px 8px 8px;
}
}
}
&.max-width_310px {
> .form {
> footer {
> button {
font-size: 14px;
width: 44px;
height: 44px;
}
}
}
}
}
@container (max-width: 500px) {

10
packages/frontend/src/components/MkTab.vue
View File

@ -10,7 +10,7 @@ export default defineComponent({
render() {
const options = this.$slots.default();
return withDirectives(h('div', {
return h('div', {
class: 'pxhvhrfw',
}, options.map(option => withDirectives(h('button', {
class: ['_button', { active: this.modelValue === option.props.value }],
@ -21,9 +21,7 @@ export default defineComponent({
},
}, option.children), [
[resolveDirective('click-anime')],
]))), [
[resolveDirective('size'), { max: [500] }],
]);
])));
},
});
</script>
@ -61,8 +59,10 @@ export default defineComponent({
margin-right: 6px;
}
}
}
&.max-width_500px {
@container (max-width: 500px) {
.pxhvhrfw {
font-size: 80%;
> button {

65
packages/frontend/src/components/MkUrlPreview.vue
View File

@ -6,7 +6,7 @@
<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
</div>
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
<div v-else class="mk-url-preview">
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
@ -154,69 +154,6 @@ onUnmounted(() => {
}
.mk-url-preview {
&.max-width_400px {
> .link {
font-size: 12px;
> .thumbnail {
height: 80px;
}
> article {
padding: 12px;
}
}
}
&.max-width_350px {
> .link {
font-size: 10px;
> .thumbnail {
height: 70px;
}
> article {
padding: 8px;
> header {
margin-bottom: 4px;
}
> footer {
margin-top: 4px;
> img {
width: 12px;
height: 12px;
}
}
}
&.compact {
> .thumbnail {
position: absolute;
width: 56px;
height: 100%;
}
> article {
left: 56px;
width: calc(100% - 56px);
padding: 4px;
> header {
margin-bottom: 2px;
}
> footer {
margin-top: 2px;
}
}
}
}
}
> .link {
position: relative;
display: block;