natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/components/MkNoteDetailed.vue
View File

@ -648,13 +648,9 @@ onUnmounted(() => {
&.max-width_500px { &.max-width_500px {
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 {
padding-top: 14px; padding-top: 14px;
} }
@ -670,10 +666,6 @@ onUnmounted(() => {
} }
} }
@media (max-width: 400px) {
margin-inline: -12px;
}
&.max-width_350px { &.max-width_350px {
> .article { > .article {
> .main { > .main {

38
packages/client/src/components/MkNoteSub.vue
View File

@ -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,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 { &.max-width_450px {
padding: 14px 16px;
&.reply-to, &.reply-to-more { &.reply-to, &.reply-to-more {
padding: 14px 16px; padding: 14px 16px;
padding-top: 14px !important; padding-top: 14px !important;
@ -280,23 +298,5 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
margin-right: 10px; 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> </style>

8
packages/client/src/pages/note.vue
View File

@ -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>