mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-11-23 10:56:35 +01:00
remove v-size directive
This commit is contained in:
syuilo
parent
9b595b93f8
commit
13677ff2b0
18 changed files with 19 additions and 489 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 }"
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue