From 72e956b79a3b2e055bb5d4d5e20e88eaa2eeec96 Mon Sep 17 00:00:00 2001 From: Hester Gong Date: Sat, 29 Apr 2023 18:44:52 +0800 Subject: Improve protected branch setting page (#24379) Main changes: 1. Change html structure of protected branch page, use [`grouped fields`](https://fomantic-ui.com/collections/form.html#grouped-fields) instead of `fields` for better margin, and wrap `grouped fields` around related `field`s, remove unnecessary `
` outer div 2. Changed some order of field to make them more categorized, used `ui dividing header` for categorization and fine tune css. Before: Screen Shot 2023-04-27 at 14 56 19 Screen Shot 2023-04-27 at 14 56 30 Screen Shot 2023-04-27 at 14 56 36 After: https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov 3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable Merge" radio checkbox, which are exclusive Before: Screen Shot 2023-04-28 at 13 08 29 After: Screen Shot 2023-04-28 at 13 09 28 4. Add a link to set default branch on branch list page (with reference to github) https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov 5. Removed dead codes. --------- Co-authored-by: wxiaoguang Co-authored-by: silverwind Co-authored-by: Giteabot --- web_src/css/base.css | 8 ++++---- web_src/css/helpers.css | 2 ++ web_src/css/repository.css | 33 ++++----------------------------- 3 files changed, 10 insertions(+), 33 deletions(-) (limited to 'web_src/css') diff --git a/web_src/css/base.css b/web_src/css/base.css index c7ea0e47c8..95f83ef00a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2533,12 +2533,12 @@ a.ui.basic.label:hover { right: 0.78571429rem; top: 0; bottom: 0; - height: 30px; - margin-top: auto; - margin-bottom: auto; + display: flex; + align-items: center; } -/* https://github.com/go-gitea/gitea/issues/10210 */ +/* if a .top.attached.header is followed by a .segment, add some margin */ +.ui.segments ~ .ui.top.attached.header, .ui.attached.segment ~ .ui.top.attached.header { margin-top: 1rem; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 22a284d43c..0b4b47f560 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -60,6 +60,8 @@ Gitea's private styles use `g-` prefix. text-overflow: ellipsis; } +.gt-max-width-24rem { max-width: 24rem !important; } + /* below class names match Tailwind CSS */ .gt-break-all { word-break: break-all !important; } .gt-content-center { align-content: center !important; } diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 8b25775bb4..af2dd2be24 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -2012,35 +2012,10 @@ margin-top: -3px; } -.repository.settings.branches .protected-branches .selection.dropdown { - width: 300px; -} - -.repository.settings.branches .protected-branches .item { - border: 1px solid var(--color-secondary); - padding: 10px 15px; -} - -.repository.settings.branches .protected-branches .item:not(:last-child) { - border-bottom: 0; -} - -.repository.settings.branches .branch-protection .help { - margin-left: 26px; - padding-top: 0; -} - -.repository.settings.branches .branch-protection .fields { - margin-left: 20px; - display: block; -} - -.repository.settings.branches .branch-protection .whitelist { - margin-left: 26px; -} - -.repository.settings.branches .branch-protection .whitelist .dropdown img { - display: inline-block; +/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */ +.repository.settings.branches .branch-protection .ui.checkbox .help, +.repository.settings.branches .branch-protection .checkbox-sub-item { + padding-left: 26px; } .repository.settings.webhook .events .column { -- cgit v1.2.3