diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index 6d4d5be2bc..5ac95fba07 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -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; diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index 02863f0d2e..c762033f69 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -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) { diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index a4100e1f2c..65e3161c7f 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -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 }" diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 7ce8e039d9..c7b7f49b20 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -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) { diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue index 0c81059091..44d609561c 100644 --- a/packages/frontend/src/components/MkNotePreview.vue +++ b/packages/frontend/src/components/MkNotePreview.vue @@ -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; diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue index 96d29831d2..354de1a614 100644 --- a/packages/frontend/src/components/MkNoteSimple.vue +++ b/packages/frontend/src/components/MkNoteSimple.vue @@ -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; diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue index d03ce7c434..0dbaae59e4 100644 --- a/packages/frontend/src/components/MkNoteSub.vue +++ b/packages/frontend/src/components/MkNoteSub.vue @@ -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 { diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index 8b8d3f452d..cb2f384553 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -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; diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index f79e5a32cd..94ba7dfd80 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -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) { diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue index 669e9e2e11..81cbde0ac7 100644 --- a/packages/frontend/src/components/MkTab.vue +++ b/packages/frontend/src/components/MkTab.vue @@ -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 { diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index b2d16ddb01..4635537f9a 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -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}&hideCard=false&hideThread=false&lang=en&theme=${$store.state.darkMode ? 'dark' : 'light'}&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; diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts index 401a917cba..93d1b4f43d 100644 --- a/packages/frontend/src/directives/index.ts +++ b/packages/frontend/src/directives/index.ts @@ -1,7 +1,6 @@ import { App } from 'vue'; import userPreview from './user-preview'; -import size from './size'; import getSize from './get-size'; import ripple from './ripple'; import tooltip from './tooltip'; @@ -15,7 +14,6 @@ import adaptiveBorder from './adaptive-border'; export default function(app: App) { app.directive('userPreview', userPreview); app.directive('user-preview', userPreview); - app.directive('size', size); app.directive('get-size', getSize); app.directive('ripple', ripple); app.directive('tooltip', tooltip); diff --git a/packages/frontend/src/directives/size.ts b/packages/frontend/src/directives/size.ts deleted file mode 100644 index da8bd78ea1..0000000000 --- a/packages/frontend/src/directives/size.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { Directive } from 'vue'; - -type Value = { max?: number[]; min?: number[]; }; - -//const observers = new Map<Element, ResizeObserver>(); -const mountings = new Map<Element, { - value: Value; - resize: ResizeObserver; - intersection?: IntersectionObserver; - previousWidth: number; - twoPreviousWidth: number; -}>(); - -type ClassOrder = { - add: string[]; - remove: string[]; -}; - -const isContainerQueriesSupported = ('container' in document.documentElement.style); - -const cache = new Map<string, ClassOrder>(); - -function getClassOrder(width: number, queue: Value): ClassOrder { - const getMaxClass = (v: number) => `max-width_${v}px`; - const getMinClass = (v: number) => `min-width_${v}px`; - - return { - add: [ - ...(queue.max ? queue.max.filter(v => width <= v).map(getMaxClass) : []), - ...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []), - ], - remove: [ - ...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []), - ...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []), - ], - }; -} - -function applyClassOrder(el: Element, order: ClassOrder) { - el.classList.add(...order.add); - el.classList.remove(...order.remove); -} - -function getOrderName(width: number, queue: Value): string { - return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`; -} - -function calc(el: Element) { - const info = mountings.get(el); - const width = el.clientWidth; - - if (!info || info.previousWidth === width) return; - - // アクティベート前などでsrcが描画されていない場合 - if (!width) { - // IntersectionObserverで表示検出する - if (!info.intersection) { - info.intersection = new IntersectionObserver(entries => { - if (entries.some(entry => entry.isIntersecting)) calc(el); - }); - } - info.intersection.observe(el); - return; - } - if (info.intersection) { - info.intersection.disconnect(); - delete info.intersection; - } - - mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }}); - - // Prevent infinite resizing - // https://github.com/misskey-dev/misskey/issues/9076 - if (info.twoPreviousWidth === width) { - return; - } - - const cached = cache.get(getOrderName(width, info.value)); - if (cached) { - applyClassOrder(el, cached); - } else { - const order = getClassOrder(width, info.value); - cache.set(getOrderName(width, info.value), order); - applyClassOrder(el, order); - } -} - -export default { - mounted(src, binding, vn) { - if (isContainerQueriesSupported) return; - - const resize = new ResizeObserver((entries, observer) => { - calc(src); - }); - - mountings.set(src, { - value: binding.value, - resize, - previousWidth: 0, - twoPreviousWidth: 0, - }); - - calc(src); - resize.observe(src); - }, - - updated(src, binding, vn) { - if (isContainerQueriesSupported) return; - - mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value })); - calc(src); - }, - - unmounted(src, binding, vn) { - if (isContainerQueriesSupported) return; - - const info = mountings.get(src); - if (!info) return; - info.resize.disconnect(); - if (info.intersection) info.intersection.disconnect(); - mountings.delete(src); - }, -} as Directive<Element, Value>; diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue index 0b2c284c99..1d5c3aa1d3 100644 --- a/packages/frontend/src/pages/antenna-timeline.vue +++ b/packages/frontend/src/pages/antenna-timeline.vue @@ -1,7 +1,7 @@ <template> <MkStickyContainer> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> - <div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks"> + <div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks"> <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> <div class="tl _block"> <XTimeline @@ -112,11 +112,6 @@ definePageMetadata(computed(() => antenna ? { border-radius: var(--radius); overflow: clip; } - - &.min-width_800px { - max-width: 800px; - margin: 0 auto; - } } @container (min-width: 800px) { diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue index 0d30998330..3fb5047a04 100644 --- a/packages/frontend/src/pages/messaging/index.vue +++ b/packages/frontend/src/pages/messaging/index.vue @@ -2,7 +2,7 @@ <MkStickyContainer> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :content-max="800"> - <div v-size="{ max: [400] }" class="yweeujhr"> + <div class="yweeujhr"> <MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton> <div v-if="messages.length > 0" class="history"> @@ -277,28 +277,6 @@ definePageMetadata({ } } } - - &.max-width_400px { - > .history { - > .message { - &:not(.isMe):not(.isRead) { - > div { - background-image: none; - border-left: solid 4px #3aa2dc; - } - } - - > div { - padding: 16px; - font-size: 0.9em; - - > .avatar { - margin: 0 12px 0 0; - } - } - } - } - } } @container (max-width: 400px) { diff --git a/packages/frontend/src/pages/messaging/messaging-room.message.vue b/packages/frontend/src/pages/messaging/messaging-room.message.vue index dbf0e37b73..072b85d083 100644 --- a/packages/frontend/src/pages/messaging/messaging-room.message.vue +++ b/packages/frontend/src/pages/messaging/messaging-room.message.vue @@ -1,5 +1,5 @@ <template> -<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }"> +<div class="thvuemwp" :class="{ isMe }"> <MkAvatar class="avatar" :user="message.user" :show-indicator="true"/> <div class="content"> <div class="balloon" :class="{ noText: message.text == null }"> @@ -301,35 +301,6 @@ function del(): void { } } } - - &.max-width_400px { - > .avatar { - width: 48px; - height: 48px; - } - - > .content { - > .balloon { - > .content { - > .text { - font-size: 0.9em; - } - } - } - } - } - - &.max-width_500px { - > .content { - > .balloon { - > .content { - > .text { - padding: 8px 16px; - } - } - } - } - } } @container (max-width: 400px) { diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue index fdb3167375..a223dee319 100644 --- a/packages/frontend/src/pages/user-list-timeline.vue +++ b/packages/frontend/src/pages/user-list-timeline.vue @@ -1,7 +1,7 @@ <template> <MkStickyContainer> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> - <div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj"> + <div ref="rootEl" class="eqqrhokj"> <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div class="tl _block"> <XTimeline @@ -105,11 +105,6 @@ definePageMetadata(computed(() => list ? { border-radius: var(--radius); overflow: clip; } - - &.min-width_800px { - max-width: 800px; - margin: 0 auto; - } } @container (min-width: 800px) { diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 43c1b37e1d..a9da05811a 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -1,6 +1,6 @@ <template> <MkSpacer :content-max="narrow ? 800 : 1100"> - <div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }"> + <div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }"> <div class="main"> <!-- TODO --> <!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> --> @@ -409,56 +409,6 @@ onUnmounted(() => { } } - &.max-width_500px { - > .main { - > .profile > .main { - > .banner-container { - height: 140px; - - > .fade { - display: none; - } - - > .title { - display: none; - } - } - - > .title { - display: block; - } - - > .avatar { - top: 90px; - left: 0; - right: 0; - width: 92px; - height: 92px; - margin: auto; - } - - > .description { - padding: 16px; - text-align: center; - } - - > .fields { - padding: 16px; - } - - > .status { - padding: 16px; - } - } - - > .contents { - > .nav { - font-size: 80%; - } - } - } - } - &.wide { display: flex; width: 100%;