natty
/
calckey
1
0
Fork 0
Code Issues 1 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

8
packages/client/src/components/MkNoteDetailed.vue
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 {

34
packages/client/src/components/MkNoteSub.vue
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,22 +269,9 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
}
}
&.max-width_450px {
&.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;
}
}
@media (max-width: 450px) {
padding: 14px 16px;
}
@media (max-width: 500px) {
&.reply {
&.max-width_500px {
:not(.reply) > & {
.reply {
--avatarSize: 24px;
--indent: calc(var(--avatarSize) - 4px);
}
@ -298,5 +285,18 @@ 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>

8
packages/client/src/pages/note.vue
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>