puniko/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

mobile-newline (#226)

Browse source 
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: AkkomaGang/pleroma-fe#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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

9
src/components/status/status.scss
View file

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

28
src/components/status/status.vue
View file

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