mobile-newline (#226)

Allows the handle of users to drop down onto the next line if there isn't enough room in order to improve useability on mobile

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/226
Co-authored-by: Beefox <bee@beefox.xyz>
Co-committed-by: Beefox <bee@beefox.xyz>
This commit is contained in:
Beefox 2022-11-21 16:49:18 +00:00 committed by floatingghost
parent f8a796b234
commit 684894aee3
3 changed files with 25 additions and 13 deletions

1
.gitignore vendored
View file

@ -9,3 +9,4 @@ selenium-debug.log
config/local.json
config/local.*.json
docs/site/
.vscode/

View file

@ -130,6 +130,13 @@
.heading-left {
display: flex;
min-width: 0;
flex-wrap: wrap;
img {
aspect-ratio: 1 / 1;
}
.nowrap{
white-space: nowrap;
}
}
.heading-right {
@ -140,6 +147,8 @@
padding: 5px;
margin: -5px;
height: min-content;
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);

View file

@ -166,19 +166,21 @@
>
{{ status.user.name }}
</h4>
<router-link
class="account-name"
:title="status.user.screen_name_ui"
:to="userProfileLink"
>
{{ status.user.screen_name_ui }}
</router-link>
<img
v-if="!!(status.user && status.user.favicon)"
class="status-favicon"
:src="status.user.favicon"
:title="faviconAlt(status)"
>
<span class="nowrap">
<router-link
class="account-name"
:title="status.user.screen_name_ui"
:to="userProfileLink"
>
@{{ status.user.screen_name_ui }}
</router-link>
<img
v-if="!!(status.user && status.user.favicon)"
class="status-favicon"
:src="status.user.favicon"
:title="faviconAlt(status)"
>
</span>
</div>
<span class="heading-right">