heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

upd: make note footer wider on smaller screens 

3cc8320eb7

Co-authored-by: blueb <ihateblueb@proton.me>
This commit is contained in:
ShittyKopper 2024-01-06 19:28:38 +03:00
parent 1bc2da2bda
commit 3818e9531f
4 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/src/components/MkNote.vue
View File

@ -854,12 +854,13 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
.footer { .footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; max-width: 400px;
min-width: min-content;
max-width: fit-content;
} }
&:hover > .article > .main > .footer > .footerButton { &:hover > .article > .main > .footer > .footerButton {

7
packages/frontend/src/components/SkNote.vue
View File

@ -855,12 +855,13 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
.footer { .footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; max-width: 400px;
min-width: min-content;
max-width: fit-content;
} }
&:hover > .article > .main > .footer > .footerButton { &:hover > .article > .main > .footer > .footerButton {

9
packages/frontend/src/components/SkNoteDetailed.vue
View File

@ -112,7 +112,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
</div> </div>
<footer :class="$style.footer">
<div :class="$style.noteFooterInfo"> <div :class="$style.noteFooterInfo">
<div v-if="appearNote.updatedAt"> <div v-if="appearNote.updatedAt">
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/> {{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
@ -122,6 +121,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA> </MkA>
</div> </div>
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/> <MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<footer :class="$style.footer">
<button class="_button" :class="$style.noteFooterButton" @click="reply()"> <button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.repliesCount }}</p> <p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.repliesCount }}</p>
@ -836,12 +836,13 @@ onUnmounted(() => {
} }
.footer { .footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; max-width: 400px;
min-width: min-content;
max-width: fit-content;
} }
.replyTo { .replyTo {

13
packages/frontend/src/components/SkNoteSub.vue
View File

@ -27,8 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/> <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/>
</div> </div>
</div> </div>
<footer :class="$style.footer">
<MkReactionsViewer ref="reactionsViewer" :note="note"/> <MkReactionsViewer ref="reactionsViewer" :note="note"/>
<footer :class="$style.footer">
<button class="_button" :class="$style.noteFooterButton" @click="reply()"> <button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p> <p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
@ -460,12 +460,13 @@ if (props.detail) {
} }
.footer { .footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; max-width: 400px;
min-width: min-content;
max-width: fit-content;
} }
.main { .main {
@ -535,10 +536,6 @@ if (props.detail) {
padding-top: 10px; padding-top: 10px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--fgHighlighted);
} }