Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 39 commits into from
Apr 26, 2023
Merged

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

Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
5630a83
fix some mobile layout
HesterG Apr 23, 2023
566863b
Merge branch 'go-gitea:main' into css-fine-tue
HesterG Apr 23, 2023
fe0b8a7
runner table auto overflow
HesterG Apr 23, 2023
720b39b
Merge branch 'go-gitea:main' into css-fine-tue
HesterG Apr 23, 2023
6691476
Merge branch 'go-gitea:main' into css-fine-tue
HesterG Apr 24, 2023
f5f446e
Merge branch 'go-gitea:main' into css-fine-tue
HesterG Apr 24, 2023
33b2df7
use stackable grid and fix some css
HesterG Apr 24, 2023
b5d8817
fix margin-left
HesterG Apr 24, 2023
52080d1
save runners changes
HesterG Apr 24, 2023
74dcc08
share table css with admin tables
HesterG Apr 24, 2023
315824e
Merge branch 'go-gitea:main' into css-fine-tue
HesterG Apr 24, 2023
a208165
fix label difference
HesterG Apr 24, 2023
c0b6b60
revert change
HesterG Apr 25, 2023
5fe819f
Merge branch 'go-gitea:main' into css-fine-tue
HesterG Apr 25, 2023
8ed9562
add comment
HesterG Apr 25, 2023
cfaed33
collaboration mobile column
HesterG Apr 25, 2023
b1a5166
revert
HesterG Apr 25, 2023
dd166a2
comment
HesterG Apr 25, 2023
b4edd18
add common class to layout_head and use em for font
HesterG Apr 25, 2023
3378b99
Merge branch 'main' into css-fine-tue
HesterG Apr 25, 2023
629f483
rename
HesterG Apr 25, 2023
4d37e18
rename
HesterG Apr 25, 2023
6dda871
Merge branch 'main' into css-fine-tue
HesterG Apr 26, 2023
0dbeabe
Merge branch 'main' into css-fine-tue
HesterG Apr 26, 2023
2381abc
fix rule to exclude ui container inside top navbar
HesterG Apr 26, 2023
7848d0c
Merge branch 'main' into css-fine-tue
HesterG Apr 26, 2023
4fcbad8
update for mobile
HesterG Apr 26, 2023
4715e77
use same viewport size as others
HesterG Apr 26, 2023
3abc95a
update comment
HesterG Apr 26, 2023
4f85f34
Merge branch 'main' into css-fine-tue
HesterG Apr 26, 2023
03f301b
fix
wxiaoguang Apr 26, 2023
65a2d9e
Merge branch 'main' into css-fine-tue
wxiaoguang Apr 26, 2023
11f3f0c
fix table ellipsis
wxiaoguang Apr 26, 2023
df2db9b
fix lables page
wxiaoguang Apr 26, 2023
ea0f79a
fix incorrect merge
wxiaoguang Apr 26, 2023
41f7d44
fix 500
wxiaoguang Apr 26, 2023
cbe8a46
no need to use g-grid-setting-right
wxiaoguang Apr 26, 2023
a0ce6cb
Merge branch 'main' into css-fine-tue
GiteaBot Apr 26, 2023
52a729f
Merge branch 'main' into css-fine-tue
GiteaBot Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/admin/layout_head.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
<div class="ui container stackable grid">
{{template "admin/navbar" .ctxData}}
<div class="twelve wide column">
<div class="twelve wide column g-grid-setting-right">
{{template "base/alert" .ctxData}}
{{/* block: admin-setting-content */}}

Expand Down
2 changes: 1 addition & 1 deletion templates/org/settings/layout_head.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{{template "org/header" .ctxData}}
<div class="ui container stackable grid">
{{template "org/settings/navbar" .ctxData}}
<div class="twelve wide column">
<div class="twelve wide column g-grid-setting-right">
{{template "base/alert" .ctxData}}
{{/* block: org-setting-content */}}

Expand Down
6 changes: 3 additions & 3 deletions templates/org/settings/runners.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings runners")}}
<div class="org-setting-content">
{{template "shared/actions/runner_list" .}}
</div>
<div class="org-setting-content">
{{template "shared/actions/runner_list" .}}
</div>
{{template "org/settings/layout_footer" .}}
2 changes: 1 addition & 1 deletion templates/org/team/members.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" .}}
Expand Down
2 changes: 1 addition & 1 deletion templates/org/team/repositories.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" .}}
Expand Down
2 changes: 1 addition & 1 deletion templates/org/team/teams.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/actions/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/settings/collaboration.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/settings/layout_head.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{{template "repo/header" .ctxData}}
<div class="ui container stackable grid">
{{template "repo/settings/navbar" .ctxData}}
<div class="twelve wide column">
<div class="twelve wide column g-grid-setting-right">
{{template "base/alert" .ctxData}}
{{/* block: repo-setting-content */}}

Expand Down
2 changes: 1 addition & 1 deletion templates/repo/settings/tags.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion templates/user/settings/layout_head.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
<div class="ui container stackable grid">
{{template "user/settings/navbar" .ctxData}}
<div class="twelve wide column">
<div class="twelve wide column g-grid-setting-right">
{{template "base/alert" .ctxData}}
{{/* block: user-setting-content */}}

Expand Down
24 changes: 0 additions & 24 deletions web_src/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,6 @@
margin: 12px -1rem -1rem;
}

.admin .table.segment {
padding: 0;
font-size: 13px;
overflow-x: auto;
Copy link
Contributor Author

@HesterG HesterG Apr 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

overflow-x is needed, might need to open another PR to fix this:

Screen Shot 2023-04-27 at 09 01 24

Screen Shot 2023-04-27 at 09 09 54

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, luckily we only need one overflow-x now. Maybe we need to write a comment about how to test such style (I just forgot ...)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix admin table layout #24370

}

.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;
Expand Down
13 changes: 13 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1183,13 +1183,26 @@ 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) {
width: calc(100vw - 64px);
}
}

@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;
Expand Down
1 change: 1 addition & 0 deletions web_src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "./animations.css";
@import "./shared/issuelist.css";
@import "./shared/repoorg.css";
@import "./shared/settingstable.css";
@import "./features/dropzone.css";
@import "./features/gitgraph.css";
@import "./features/heatmap.css";
Expand Down
11 changes: 6 additions & 5 deletions web_src/css/organization.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 changes: 6 additions & 0 deletions web_src/css/shared/repoorg.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
24 changes: 24 additions & 0 deletions web_src/css/shared/settingstable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* This css is for table elements inside all levels settings pages */
.g-grid-setting-right .table.segment {
padding: 0;
font-size: 0.9em;
overflow-x: auto;
}

.g-grid-setting-right .table.segment:not(.striped) thead th:last-child {
padding-right: 5px !important;
}

.g-grid-setting-right .table.segment th {
padding-top: 5px;
padding-bottom: 5px;
}

.g-grid-setting-right .table.segment:not(.select) th:first-of-type,
.g-grid-setting-right .table.segment:not(.select) td:first-of-type {
padding-left: 15px !important;
}

.g-grid-setting-right .table.segment form tbody button[type="submit"] {
padding: 5px 8px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this? There are also other <button> elements in forms

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is copied from the old code, which is table related.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am pretty sure that we do not need them ... will do more fine tunes

}