mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-08 22:03:09 +02:00
upd: make note footer wider on smaller screens
3cc8320eb7
Co-authored-by: blueb <ihateblueb@proton.me>
This commit is contained in:
parent
1bc2da2bda
commit
3818e9531f
4 changed files with 26 additions and 26 deletions
|
@ -854,12 +854,13 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.4em;
|
||||
width: max-content;
|
||||
min-width: min-content;
|
||||
max-width: fit-content;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&:hover > .article > .main > .footer > .footerButton {
|
||||
|
|
|
@ -855,12 +855,13 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.4em;
|
||||
width: max-content;
|
||||
min-width: min-content;
|
||||
max-width: fit-content;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&:hover > .article > .main > .footer > .footerButton {
|
||||
|
|
|
@ -112,7 +112,6 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</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>
|
||||
</div>
|
||||
<footer :class="$style.footer">
|
||||
<div :class="$style.noteFooterInfo">
|
||||
<div v-if="appearNote.updatedAt">
|
||||
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
|
||||
|
@ -122,6 +121,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
</div>
|
||||
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
|
||||
<footer :class="$style.footer">
|
||||
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.repliesCount }}</p>
|
||||
|
@ -836,12 +836,13 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.4em;
|
||||
width: max-content;
|
||||
min-width: min-content;
|
||||
max-width: fit-content;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.replyTo {
|
||||
|
|
|
@ -27,8 +27,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/>
|
||||
</div>
|
||||
</div>
|
||||
<footer :class="$style.footer">
|
||||
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
|
||||
<footer :class="$style.footer">
|
||||
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
|
||||
|
@ -460,12 +460,13 @@ if (props.detail) {
|
|||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 0.4em;
|
||||
width: max-content;
|
||||
min-width: min-content;
|
||||
max-width: fit-content;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
@ -535,10 +536,6 @@ if (props.detail) {
|
|||
padding-top: 10px;
|
||||
opacity: 0.7;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue