Fix org view on mobile for members (#3949)

The row of buttons on the org view is pretty bad on mobile, as it doesn't leave enough space for the org name. My recent PR 3642 made it worse. I added a mitigation to allow buttons to go to an other row, so that the layout is usable on mobile. It is still non-ideal as it will continue going out of bounds on small screens, but is much better.

## Preview

[Old preview](/attachments/1e280a77-533c-41b5-954d-b336f1b72186)

![](/attachments/4a2c45e2-7da8-4d87-afb7-7c281e14c756)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3949
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
This commit is contained in:
0ko 2024-06-04 04:08:54 +00:00
parent c2f1d55c0e
commit 6672cf0812
2 changed files with 18 additions and 5 deletions

View file

@ -2,11 +2,13 @@
{{ctx.AvatarUtils.Avatar .Org 100 "org-avatar"}} {{ctx.AvatarUtils.Avatar .Org 100 "org-avatar"}}
<div id="org-info" class="tw-flex tw-flex-col"> <div id="org-info" class="tw-flex tw-flex-col">
<div class="ui header"> <div class="ui header">
{{.Org.DisplayName}} <div class="org-title">
<span class="org-visibility"> {{.Org.DisplayName}}
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}} <span class="org-visibility">
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}} {{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
</span> {{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span>
</div>
<span class="tw-flex tw-items-center top-right-buttons tw-ml-auto tw-text-16 tw-whitespace-nowrap"> <span class="tw-flex tw-items-center top-right-buttons tw-ml-auto tw-text-16 tw-whitespace-nowrap">
{{if .EnableFeed}} {{if .EnableFeed}}
<a class="ui basic label button tw-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}"> <a class="ui basic label button tw-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">

View file

@ -106,6 +106,17 @@
margin-bottom: 0; margin-bottom: 0;
} }
@media (max-width: 767.98px) {
.page-content.organization #org-info .ui.header {
flex-direction: column;
margin-bottom: 1rem;
}
.page-content.organization #org-info .org-title {
width: 100%;
margin-bottom: 0.5rem;
}
}
.page-content.organization #org-info .desc { .page-content.organization #org-info .desc {
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;