fix small window sizes

This commit is contained in:
Freeplay 2023-02-25 21:22:23 -05:00
parent f8d26e3e3d
commit 5c1ca3ac29
3 changed files with 28 additions and 30 deletions

View File

@ -649,10 +649,6 @@ onUnmounted(() => {
font-size: 0.9em;
}
@media (max-width: 500px) {
margin-inline: -24px;
}
&.max-width_450px {
> .reply-to-more:first-child {
@ -670,10 +666,6 @@ onUnmounted(() => {
}
}
@media (max-width: 400px) {
margin-inline: -12px;
}
&.max-width_350px {
> .article {
> .main {

View File

@ -1,5 +1,5 @@
<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 class="main" @click="router.push(notePage(note))">
<div class="avatar-container">
@ -269,7 +269,25 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
}
}
&.max-width_500px {
:not(.reply) > & {
.reply {
--avatarSize: 24px;
--indent: calc(var(--avatarSize) - 4px);
}
&.firstColumn {
> .main, > .line, > .children:not(.single) > .line {
--avatarSize: 35px;
--indent: 35px;
}
> .children:not(.single) {
padding-left: 28px !important;
}
}
}
}
&.max-width_450px {
padding: 14px 16px;
&.reply-to, &.reply-to-more {
padding: 14px 16px;
padding-top: 14px !important;
@ -280,23 +298,5 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
margin-right: 10px;
}
}
@media (max-width: 450px) {
padding: 14px 16px;
}
@media (max-width: 500px) {
&.reply {
--avatarSize: 24px;
--indent: calc(var(--avatarSize) - 4px);
}
&.firstColumn {
> .main, > .line, > .children:not(.single) > .line {
--avatarSize: 35px;
--indent: 35px;
}
> .children:not(.single) {
padding-left: 28px !important;
}
}
}
}
</style>

View File

@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<div class="fcuexfpr">
<div class="fcuexfpr" v-size="{ max: [500, 350] }">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note">
<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>