fix small window sizes
This commit is contained in:
parent
f8d26e3e3d
commit
5c1ca3ac29
|
@ -649,10 +649,6 @@ onUnmounted(() => {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
margin-inline: -24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.max-width_450px {
|
&.max-width_450px {
|
||||||
|
|
||||||
> .reply-to-more:first-child {
|
> .reply-to-more:first-child {
|
||||||
|
@ -670,10 +666,6 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
margin-inline: -12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.max-width_350px {
|
&.max-width_350px {
|
||||||
> .article {
|
> .article {
|
||||||
> .main {
|
> .main {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
|
<div v-size="{ max: [450, 500] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
|
||||||
<div v-if="conversation && depth > 1" class="line"></div>
|
<div v-if="conversation && depth > 1" class="line"></div>
|
||||||
<div class="main" @click="router.push(notePage(note))">
|
<div class="main" @click="router.push(notePage(note))">
|
||||||
<div class="avatar-container">
|
<div class="avatar-container">
|
||||||
|
@ -269,22 +269,9 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.max-width_450px {
|
&.max-width_500px {
|
||||||
&.reply-to, &.reply-to-more {
|
:not(.reply) > & {
|
||||||
padding: 14px 16px;
|
.reply {
|
||||||
padding-top: 14px !important;
|
|
||||||
padding-bottom: 0 !important;
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
> .main > .avatar-container {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
padding: 14px 16px;
|
|
||||||
}
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
&.reply {
|
|
||||||
--avatarSize: 24px;
|
--avatarSize: 24px;
|
||||||
--indent: calc(var(--avatarSize) - 4px);
|
--indent: calc(var(--avatarSize) - 4px);
|
||||||
}
|
}
|
||||||
|
@ -299,4 +286,17 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.max-width_450px {
|
||||||
|
padding: 14px 16px;
|
||||||
|
&.reply-to, &.reply-to-more {
|
||||||
|
padding: 14px 16px;
|
||||||
|
padding-top: 14px !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
> .main > .avatar-container {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||||
<MkSpacer :content-max="800">
|
<MkSpacer :content-max="800">
|
||||||
<div class="fcuexfpr">
|
<div class="fcuexfpr" v-size="{ max: [500, 350] }">
|
||||||
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
||||||
<div v-if="note" class="note">
|
<div v-if="note" class="note">
|
||||||
<div v-if="showNext" class="_gap">
|
<div v-if="showNext" class="_gap">
|
||||||
|
@ -202,5 +202,11 @@ definePageMetadata(computed(() => note ? {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.max-width_500px > .note {
|
||||||
|
margin-inline: -24px;
|
||||||
|
}
|
||||||
|
&.max-width_350px > .note {
|
||||||
|
margin-inline: -12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue