thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fix org view on mobile for members (#3949)

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
templates/org/header.tmpl
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"}}">

11
web_src/css/org.css
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;