forks/forgejo
1
0
Fork 0
Code Releases Activity

Modify width of ui container, fine tune css for settings pages and org header (#24315)

Browse source 
Close #24302 
Part of #24229, Follows #24246
This PR focused on CSS style fine-tune, main changes:

1. Give `.ui.ui.ui.container` a width of `1280px` with a max-width of
`calc(100vw - 64px)`, so the main contents looks better on large
devices.

2. Share styles for table elements in all levels settings pages to fix
overflow of runners table on mobile and for consistency (The headers on
mobile can be further improved, but haven't found a proper way yet).

3. Use [stackable
grid](https://fomantic-ui.com/collections/grid.html#stackable) and
[device column width](https://fomantic-ui.com/examples/responsive.html)
for responsiveness for some pages (repo/org collaborators settings
pages, org teams related page)

4. Fixed #24302 by sharing label related CSS in reporg.css

5. Fine tune repo tags settings page

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Hester Gong 2023-04-26 23:59:08 +08:00 committed by GitHub
parent 58caf422e6
commit f1a4330306
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 122 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
templates/admin/dashboard.tmpl
View file

@ -19,55 +19,55 @@
<form method="post" action="{{AppSubUrl}}/admin">
{{.CsrfTokenHtml}}
<div class="ui attached table segment">
<table class="ui very basic table">
<table class="ui very basic table gt-px-4">
<tbody>
<tr>
<td>{{.locale.Tr "admin.dashboard.delete_inactive_accounts"}}</td>
<td><button type="submit" class="ui green button" name="op" value="delete_inactive_accounts">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="delete_inactive_accounts">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.delete_repo_archives"}}</td>
<td><button type="submit" class="ui green button" name="op" value="delete_repo_archives">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="delete_repo_archives">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.delete_missing_repos"}}</td>
<td><button type="submit" class="ui green button" name="op" value="delete_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="delete_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.git_gc_repos"}}</td>
<td><button type="submit" class="ui green button" name="op" value="git_gc_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="git_gc_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
{{if and (not .SSH.Disabled) (not .SSH.StartBuiltinServer)}}
<tr>
<td>{{.locale.Tr "admin.dashboard.resync_all_sshkeys"}}<br>
{{.locale.Tr "admin.dashboard.resync_all_sshkeys.desc"}}</td>
<td><button type="submit" class="ui green button" name="op" value="resync_all_sshkeys">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="resync_all_sshkeys">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.resync_all_sshprincipals"}}<br>
{{.locale.Tr "admin.dashboard.resync_all_sshprincipals.desc"}}</td>
<td><button type="submit" class="ui green button" name="op" value="resync_all_sshprincipals">{{svg "octicon-play" 16}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="resync_all_sshprincipals">{{svg "octicon-play" 16}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
{{end}}
<tr>
<td>{{.locale.Tr "admin.dashboard.resync_all_hooks"}}</td>
<td><button type="submit" class="ui green button" name="op" value="resync_all_hooks">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="resync_all_hooks">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.reinit_missing_repos"}}</td>
<td><button type="submit" class="ui green button" name="op" value="reinit_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="reinit_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.sync_external_users"}}</td>
<td><button type="submit" class="ui green button" name="op" value="sync_external_users">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="sync_external_users">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.repo_health_check"}}</td>
<td><button type="submit" class="ui green button" name="op" value="repo_health_check">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="repo_health_check">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
<tr>
<td>{{.locale.Tr "admin.dashboard.delete_generated_repository_avatars"}}</td>
<td><button type="submit" class="ui green button" name="op" value="delete_generated_repository_avatars">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
<td><button type="submit" class="ui green button right" name="op" value="delete_generated_repository_avatars">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
</tr>
</tbody>
</table>

21
templates/admin/notice.tmpl
View file

@ -3,36 +3,31 @@
<h4 class="ui top attached header">
{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
</h4>
<div class="ui attached table segment">
<table id="notice-table" class="ui very basic select selectable table unstackable">
<table class="ui attached basic select selectable table unstackable g-table-auto-ellipsis">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>{{.locale.Tr "admin.notices.type"}}</th>
<th>{{.locale.Tr "admin.notices.desc"}}</th>
<th width="100px">{{.locale.Tr "admin.users.created"}}</th>
<th>{{.locale.Tr "admin.users.created"}}</th>
<th>{{.locale.Tr "admin.notices.op"}}</th>
</tr>
</thead>
<tbody>
{{range .Notices}}
<tr>
<td class="collapsing">
<div class="ui fitted checkbox" data-id="{{.ID}}">
<input type="checkbox">
</div>
</td>
<td><div class="ui checkbox gt-db" data-id="{{.ID}}"><input type="checkbox"></div></td>
<td>{{.ID}}</td>
<td>{{$.locale.Tr .TrStr}}</td>
<td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
<td>{{DateTime "short" .CreatedUnix}}</td>
<td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td>
<td class="view-detail auto-ellipsis" style="width: 80%;"><span class="notice-description">{{.Description}}</span></td>
<td nowrap>{{DateTime "short" .CreatedUnix}}</td>
<td class="view-detail"><a href="#">{{svg "octicon-note" 16}}</a></td>
</tr>
{{end}}
</tbody>
{{if .Notices}}
<tfoot class="full-width">
<tfoot>
<tr>
<th></th>
<th colspan="5">
@ -62,8 +57,6 @@
</tfoot>
{{end}}
</table>
</div>
{{template "base/paginate" .}}
</div>

2
templates/org/team/members.tmpl
View file

@ -3,7 +3,7 @@
{{template "org/header" .}}
<div class="ui container">
{{template "base/alert" .}}
<div class="ui grid">
<div class="ui stackable grid">
{{template "org/team/sidebar" .}}
<div class="ui ten wide column">
{{template "org/team/navbar" .}}

2
templates/org/team/repositories.tmpl
View file

@ -3,7 +3,7 @@
{{template "org/header" .}}
<div class="ui container">
{{template "base/alert" .}}
<div class="ui grid">
<div class="ui stackable grid">
{{template "org/team/sidebar" .}}
<div class="ui ten wide column">
{{template "org/team/navbar" .}}

2
templates/org/team/teams.tmpl
View file

@ -10,7 +10,7 @@
<div class="ui divider"></div>
{{end}}
<div class="ui two column grid">
<div class="ui two column stackable grid">
{{range .Teams}}
<div class="column">
<div class="ui top attached header">

2
templates/repo/actions/list.tmpl
View file

@ -3,7 +3,7 @@
{{template "repo/header" .}}
<div class="ui container">
<div class="ui grid">
<div class="ui stackable grid">
<div class="four wide column">
<div class="ui fluid vertical menu">
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="{{$.Link}}">{{.locale.Tr "actions.runs.all_workflows"}}</a>

4
templates/repo/issue/labels/label_list.tmpl
View file

@ -30,11 +30,11 @@
{{range .Labels}}
<li class="item">
<div class="ui grid middle aligned">
<div class="nine wide column">
<div class="eight wide column">
{{RenderLabel $.Context .}}
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
</div>
<div class="four wide column">
<div class="five wide column">
{{if $.PageIsOrgSettingsLabels}}
<a class="ui left open-issues" href="{{AppSubUrl}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
{{else}}

4
templates/repo/settings/collaboration.tmpl
View file

@ -13,7 +13,7 @@
{{.DisplayName}}
</a>
</div>
<div class="ui eight wide column">
<div class="ui eight wide computer five wide mobile column">
{{svg "octicon-shield-lock"}}
<div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}">
<div class="text">{{if eq .Collaboration.Mode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
@ -62,7 +62,7 @@
{{.Name}}
</a>
</div>
<div class="ui eight wide column" data-tooltip-content="{{$.locale.Tr "repo.settings.change_team_permission_tip"}}">
<div class="ui eight wide computer five wide mobile column" data-tooltip-content="{{$.locale.Tr "repo.settings.change_team_permission_tip"}}">
{{svg "octicon-shield-lock"}}
<div class="ui inline dropdown">
<div class="text">{{if eq .AccessMode 1}}{{$.locale.Tr "repo.settings.collaboration.read"}}{{else if eq .AccessMode 2}}{{$.locale.Tr "repo.settings.collaboration.write"}}{{else if eq .AccessMode 3}}{{$.locale.Tr "repo.settings.collaboration.admin"}}{{else if eq .AccessMode 4}}{{$.locale.Tr "repo.settings.collaboration.owner"}}{{else}}{{$.locale.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>

2
templates/repo/settings/deploy_keys.tmpl
View file

@ -60,7 +60,7 @@
{{.Fingerprint}}
</div>
<div class="activity meta">
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} - <span>{{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}</span></i>
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}} - <span>{{$.locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{$.locale.Tr "settings.can_write_info"}} {{end}}</span></i>
</div>
</div>
</div>

2
templates/repo/settings/tags.tmpl
View file

@ -11,7 +11,7 @@
<div class="ui attached segment">
<div class="ui grid">
<div class="eight wide column">
<div class="sixteen wide column">
<div class="ui segment">
<form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}

2
templates/user/settings/applications.tmpl
View file

@ -27,7 +27,7 @@
</ul>
</details>
<div class="activity meta">
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i>
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
</div>

2
templates/user/settings/keys_principal.tmpl
View file

@ -25,7 +25,7 @@
<div class="content">
<strong>{{.Name}}</strong>
<div class="activity meta">
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i>
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info" 16}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
</div>

2
templates/user/settings/keys_ssh.tmpl
View file

@ -59,7 +59,7 @@
{{.Fingerprint}}
</div>
<div class="activity meta">
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix.FormatLong .UpdatedUnix.FormatShort}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i>
<i>{{$.locale.Tr "settings.add_on"}} <span>{{DateTime "short" .CreatedUnix}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateTime "short" .UpdatedUnix}}</span>{{else}}{{$.locale.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
</div>

2
templates/user/settings/repos.tmpl
View file

@ -46,7 +46,7 @@
{{$.CsrfTokenHtml}}
<input type="hidden" name="id" value="{{$dir}}">
<input type="hidden" name="action" value="adopt">
{{template "base/modal_actions_confirm" .}}
{{template "base/modal_actions_confirm" $}}
</form>
</div>
{{end}}

50
web_src/css/admin.css
View file

@ -4,30 +4,6 @@
margin: 12px -1rem -1rem;
}
.admin .table.segment {
padding: 0;
font-size: 13px;
overflow-x: auto;
}
.admin .table.segment:not(.striped) thead th:last-child {
padding-right: 5px !important;
}
.admin .table.segment th {
padding-top: 5px;
padding-bottom: 5px;
}
.admin .table.segment:not(.select) th:first-of-type,
.admin .table.segment:not(.select) td:first-of-type {
padding-left: 15px !important;
}
.admin .table.segment form tbody button[type="submit"] {
padding: 5px 8px;
}
.admin .settings .button.adopt,
.admin .settings .button.delete {
margin-top: -15px;
@ -44,7 +20,7 @@
}
.admin dl.admin-dl-horizontal {
padding: 20px;
padding: 1em;
margin: 0;
}
@ -84,27 +60,3 @@
white-space: pre-wrap;
word-wrap: break-word;
}
@media (max-width: 767px) {
.admin #notice-table .notice-description {
max-width: 80vw;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.admin #notice-table .notice-description {
max-width: 360px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.admin #notice-table .notice-description {
max-width: 510px;
}
}
@media (min-width: 1201px) {
.admin #notice-table .notice-description {
max-width: 640px;
}
}

17
web_src/css/base.css
View file

@ -1183,6 +1183,12 @@ img.ui.avatar,
padding-bottom: 80px;
}
/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
.page-content .ui.ui.ui.container:not(.fluid) {
width: 1280px;
max-width: calc(100vw - 64px);
}
/* enable fluid page widths for medium size viewports */
@media (min-width: 768px) and (max-width: 1200px) {
.ui.ui.ui.container:not(.fluid) {
@ -1190,6 +1196,13 @@ img.ui.avatar,
}
}
@media only screen and (max-width: 767px) {
.page-content .ui.ui.ui.container:not(.fluid) {
width: auto; /* copied from semantic css */
max-width: 100%;
}
}
.following.bar {
z-index: 900;
left: 0;
@ -2638,10 +2651,6 @@ table th[data-sortt-desc] .svg {
}
.labelspage .item {
margin-top: 0;
margin-right: -14px;
margin-left: -14px;
padding: 10px;
border-bottom: 1px solid var(--color-secondary);
border-top: none;
}

18
web_src/css/helpers.css
View file

@ -2,6 +2,7 @@
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
Gitea's private styles use `g-` prefix.
*/
.gt-db { display: block !important; }
.gt-df { display: flex !important; }
.gt-di { display: inline !important; }
.gt-dif { display: inline-flex !important; }
@ -42,6 +43,23 @@ Gitea's private styles use `g-` prefix.
text-overflow: ellipsis !important;
}
.g-table-auto-ellipsis td.auto-ellipsis {
position: relative;
}
.g-table-auto-ellipsis td.auto-ellipsis span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* below class names match Tailwind CSS */
.gt-break-all { word-break: break-all !important; }
.gt-content-center { align-content: center !important; }

11
web_src/css/organization.css
View file

@ -40,11 +40,6 @@
}
}
.organization .head .ui.header .org-visibility .label {
margin-left: 5px;
margin-top: 5px;
}
.organization .head .ui.header .ui.right {
margin-top: 5px;
}
@ -232,6 +227,12 @@
height: 60px;
}
@media (max-width: 767px) {
.organization.teams #repo-top-segment {
height: 100px;
}
}
.org-team-navbar .active.item {
background: var(--color-box-body) !important;
}

6
web_src/css/shared/repoorg.css
View file

@ -17,3 +17,9 @@
margin-top: 14px;
margin-bottom: 0;
}
.repository .head .ui.header .org-visibility .label,
.organization .head .ui.header .org-visibility .label {
margin-left: 5px;
margin-top: 5px;
}