diff options
author | Giteabot <teabot@gitea.io> | 2024-05-06 15:45:04 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-05-06 07:45:04 +0000 |
commit | b22d7fd8cdbe207014bb0a74ed9e2b68a75d0e3d (patch) | |
tree | 442ce3a126a033fcc82fab0554909fbb27b0286a | |
parent | e2e326f154bed8f3f95f9b30a576b0d874179202 (diff) | |
download | gitea-b22d7fd8cdbe207014bb0a74ed9e2b68a75d0e3d.tar.gz gitea-b22d7fd8cdbe207014bb0a74ed9e2b68a75d0e3d.zip |
Fix some UI problems (dropdown/container) (#30849) (#30871)
Backport #30849 by wxiaoguang
Follow #30345
Follow #30547
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
-rw-r--r-- | templates/devtest/fomantic-dropdown.tmpl | 109 | ||||
-rw-r--r-- | templates/devtest/gitea-ui.tmpl | 88 | ||||
-rw-r--r-- | templates/repo/branch_dropdown.tmpl | 2 | ||||
-rw-r--r-- | templates/repo/header.tmpl | 174 | ||||
-rw-r--r-- | templates/repo/issue/branch_selector_field.tmpl | 2 | ||||
-rw-r--r-- | templates/repo/issue/view_content/reference_issue_dialog.tmpl | 2 | ||||
-rw-r--r-- | templates/repo/settings/options.tmpl | 2 | ||||
-rw-r--r-- | web_src/css/base.css | 22 | ||||
-rw-r--r-- | web_src/css/form.css | 4 | ||||
-rw-r--r-- | web_src/css/modules/container.css | 22 | ||||
-rw-r--r-- | web_src/css/repo.css | 6 | ||||
-rw-r--r-- | web_src/js/components/RepoBranchTagSelector.vue | 4 | ||||
-rw-r--r-- | web_src/js/features/repo-issue.js | 4 |
13 files changed, 241 insertions, 200 deletions
diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl new file mode 100644 index 0000000000..57a7c1313e --- /dev/null +++ b/templates/devtest/fomantic-dropdown.tmpl @@ -0,0 +1,109 @@ +{{template "base/head" .}} +<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> +<div class="page-content devtest ui container"> + <div> + <h2>Dropdown</h2> + <div> + <div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only"> + <span class="text">search-input & flex-item in menu</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + <div class="menu flex-items-menu"> + <div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div> + <div class="item"><input type="radio">item</div> + <div class="item"><input type="radio">item</div> + </div> + </div> + <div class="ui search selection dropdown"> + <span class="text">search ...</span> + <input name="value" class="search"> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui multiple selection dropdown"> + <input class="hidden" value="1"> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} + <div class="default text">empty multiple dropdown</div> + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui multiple clearable search selection dropdown"> + <input type="hidden" value="1"> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} + <div class="default text">clearable search dropdown</div> + <div class="menu"> + <div class="item" data-value="1">item</div> + </div> + </div> + <div class="ui buttons"> + <button class="ui button">Button with Dropdown</button> + <div class="ui dropdown button icon"> + {{svg "octicon-triangle-down"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + </div> + </div> + + <h2>Selection</h2> + <div> + {{/* the "selection" class is optional, it will be added by JS automatically */}} + <select class="ui dropdown selection ellipsis-items-nowrap"> + <option>a</option> + <option>abcdefuvwxyz</option> + <option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option> + </select> + <select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]"> + <option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option> + <option>abcdefuvwxyz</option> + <option>a</option> + </select> + </div> + <h2>Dropdown Button (demo only without menu)</h2> + <div> + <div class="ui dropdown mini button"> + <span class="text">mini dropdown</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + <div class="ui dropdown tiny button"> + <span class="text">tiny dropdown</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + <div class="ui button dropdown"> + <span class="text">button dropdown</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + </div> + + <div> + <div class="ui dropdown mini compact button"> + <span class="text">mini compact</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + <div class="ui dropdown tiny compact button"> + <span class="text">tiny compact</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + <div class="ui button compact dropdown"> + <span class="text">button compact</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + </div> + + <div> + <hr> + <div class="ui tiny button">Other button align with ...</div> + <div class="ui dropdown tiny button"> + <span class="text">... Dropdown Button</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + </div> + </div> + </div> +</div> +{{template "base/footer" .}} diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 3b13c13be8..ea293fd3b4 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -180,94 +180,6 @@ <input type="text" placeholder="place holder"> </div> </div> - - <h2>Dropdown with SVG</h2> - <div> - <div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only"> - <span class="text">search-input & flex-item in menu</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - <div class="menu flex-items-menu"> - <div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div> - <div class="item"><input type="radio">item</div> - <div class="item"><input type="radio">item</div> - </div> - </div> - <div class="ui search selection dropdown"> - <span class="text">search ...</span> - <input name="value" class="search"> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - {{svg "octicon-x" 14 "remove icon"}} - <div class="menu"> - <div class="item">item</div> - </div> - </div> - <div class="ui multiple selection dropdown"> - <input class="hidden" value="1"> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - {{svg "octicon-x" 14 "remove icon"}} - <div class="default text">empty multiple dropdown</div> - <div class="menu"> - <div class="item">item</div> - </div> - </div> - <div class="ui multiple clearable search selection dropdown"> - <input type="hidden" value="1"> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - {{svg "octicon-x" 14 "remove icon"}} - <div class="default text">clearable search dropdown</div> - <div class="menu"> - <div class="item" data-value="1">item</div> - </div> - </div> - <div class="ui buttons"> - <button class="ui button">Button with Dropdown</button> - <div class="ui dropdown button icon"> - {{svg "octicon-triangle-down"}} - <div class="menu"> - <div class="item">item</div> - </div> - </div> - </div> - </div> - - <div> - <div class="ui dropdown mini button"> - <span class="text">mini dropdown</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - <div class="ui dropdown tiny button"> - <span class="text">tiny dropdown</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - <div class="ui button dropdown"> - <span class="text">button dropdown</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - </div> - - <div> - <div class="ui dropdown mini compact button"> - <span class="text">mini compact</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - <div class="ui dropdown tiny compact button"> - <span class="text">tiny compact</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - <div class="ui button compact dropdown"> - <span class="text">button compact</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - </div> - - <div> - <hr> - <div class="ui tiny button">Button align with ...</div> - <div class="ui dropdown tiny button"> - <span class="text">... Dropdown Button</span> - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - </div> - </div> </div> <div> diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index 8f58826c6a..c4f73875f2 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -69,7 +69,7 @@ <div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}"> {{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}} - <div class="ui dropdown custom branch-selector-dropdown"> + <div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap"> <div class="ui button branch-dropdown-button"> <span class="flex-text-block gt-ellipsis"> {{if .release}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index c0d833a187..34f47b7d89 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -128,107 +128,109 @@ {{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}} </div> {{end}} - <overflow-menu class="ui container secondary pointing tabular top attached borderless menu tw-pt-0 tw-my-0"> - {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} - <div class="overflow-menu-items"> - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeCode}} - <a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}"> - {{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}} - </a> - {{end}} - - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeIssues}} - <a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoLink}}/issues"> - {{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues"}} - {{if .Repository.NumOpenIssues}} - <span class="ui small label">{{CountFmt .Repository.NumOpenIssues}}</span> - {{end}} + <div class="ui container"> + <overflow-menu class="ui secondary pointing menu"> + {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} + <div class="overflow-menu-items"> + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeCode}} + <a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}"> + {{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}} </a> - {{end}} + {{end}} - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalTracker}} - <a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoExternalIssuesLink}}" target="_blank" rel="noopener noreferrer"> - {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.issues"}} - </a> - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeIssues}} + <a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoLink}}/issues"> + {{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues"}} + {{if .Repository.NumOpenIssues}} + <span class="ui small label">{{CountFmt .Repository.NumOpenIssues}}</span> + {{end}} + </a> + {{end}} - {{if and .Repository.CanEnablePulls (.Permission.CanRead ctx.Consts.RepoUnitTypePullRequests)}} - <a class="{{if .PageIsPullList}}active {{end}}item" href="{{.RepoLink}}/pulls"> - {{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.pulls"}} - {{if .Repository.NumOpenPulls}} - <span class="ui small label">{{CountFmt .Repository.NumOpenPulls}}</span> - {{end}} - </a> - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalTracker}} + <a class="{{if .PageIsIssueList}}active {{end}}item" href="{{.RepoExternalIssuesLink}}" target="_blank" rel="noopener noreferrer"> + {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.issues"}} + </a> + {{end}} - {{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeActions)}} - <a class="{{if .PageIsActions}}active {{end}}item" href="{{.RepoLink}}/actions"> - {{svg "octicon-play"}} {{ctx.Locale.Tr "actions.actions"}} - {{if .Repository.NumOpenActionRuns}} - <span class="ui small label">{{CountFmt .Repository.NumOpenActionRuns}}</span> - {{end}} - </a> - {{end}} + {{if and .Repository.CanEnablePulls (.Permission.CanRead ctx.Consts.RepoUnitTypePullRequests)}} + <a class="{{if .PageIsPullList}}active {{end}}item" href="{{.RepoLink}}/pulls"> + {{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.pulls"}} + {{if .Repository.NumOpenPulls}} + <span class="ui small label">{{CountFmt .Repository.NumOpenPulls}}</span> + {{end}} + </a> + {{end}} - {{if .Permission.CanRead ctx.Consts.RepoUnitTypePackages}} - <a href="{{.RepoLink}}/packages" class="{{if .IsPackagesPage}}active {{end}}item"> - {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} - </a> - {{end}} + {{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeActions)}} + <a class="{{if .PageIsActions}}active {{end}}item" href="{{.RepoLink}}/actions"> + {{svg "octicon-play"}} {{ctx.Locale.Tr "actions.actions"}} + {{if .Repository.NumOpenActionRuns}} + <span class="ui small label">{{CountFmt .Repository.NumOpenActionRuns}}</span> + {{end}} + </a> + {{end}} - {{$projectsUnit := .Repository.MustGetUnit $.Context ctx.Consts.RepoUnitTypeProjects}} - {{if and (not .UnitProjectsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeProjects) ($projectsUnit.ProjectsConfig.IsProjectsAllowed "repo")}} - <a href="{{.RepoLink}}/projects" class="{{if .IsProjectsPage}}active {{end}}item"> - {{svg "octicon-project"}} {{ctx.Locale.Tr "repo.project_board"}} - {{if .Repository.NumOpenProjects}} - <span class="ui small label">{{CountFmt .Repository.NumOpenProjects}}</span> - {{end}} - </a> - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypePackages}} + <a href="{{.RepoLink}}/packages" class="{{if .IsPackagesPage}}active {{end}}item"> + {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} + </a> + {{end}} - {{if and (.Permission.CanRead ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} - <a class="{{if or .PageIsReleaseList .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/releases"> - {{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.releases"}} - {{if .NumReleases}} - <span class="ui small label">{{CountFmt .NumReleases}}</span> - {{end}} - </a> - {{end}} + {{$projectsUnit := .Repository.MustGetUnit $.Context ctx.Consts.RepoUnitTypeProjects}} + {{if and (not .UnitProjectsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeProjects) ($projectsUnit.ProjectsConfig.IsProjectsAllowed "repo")}} + <a href="{{.RepoLink}}/projects" class="{{if .IsProjectsPage}}active {{end}}item"> + {{svg "octicon-project"}} {{ctx.Locale.Tr "repo.project_board"}} + {{if .Repository.NumOpenProjects}} + <span class="ui small label">{{CountFmt .Repository.NumOpenProjects}}</span> + {{end}} + </a> + {{end}} - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}} - <a class="{{if .PageIsWiki}}active {{end}}item" href="{{.RepoLink}}/wiki"> - {{svg "octicon-book"}} {{ctx.Locale.Tr "repo.wiki"}} + {{if and (.Permission.CanRead ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} + <a class="{{if or .PageIsReleaseList .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/releases"> + {{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.releases"}} + {{if .NumReleases}} + <span class="ui small label">{{CountFmt .NumReleases}}</span> + {{end}} </a> - {{end}} + {{end}} - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalWiki}} - <a class="item" href="{{(.Repository.MustGetUnit $.Context ctx.Consts.RepoUnitTypeExternalWiki).ExternalWikiConfig.ExternalWikiURL}}" target="_blank" rel="noopener noreferrer"> - {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.wiki"}} - </a> - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}} + <a class="{{if .PageIsWiki}}active {{end}}item" href="{{.RepoLink}}/wiki"> + {{svg "octicon-book"}} {{ctx.Locale.Tr "repo.wiki"}} + </a> + {{end}} - {{if and (.Permission.CanReadAny ctx.Consts.RepoUnitTypePullRequests ctx.Consts.RepoUnitTypeIssues ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} - <a class="{{if .PageIsActivity}}active {{end}}item" href="{{.RepoLink}}/activity"> - {{svg "octicon-pulse"}} {{ctx.Locale.Tr "repo.activity"}} - </a> - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalWiki}} + <a class="item" href="{{(.Repository.MustGetUnit $.Context ctx.Consts.RepoUnitTypeExternalWiki).ExternalWikiConfig.ExternalWikiURL}}" target="_blank" rel="noopener noreferrer"> + {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.wiki"}} + </a> + {{end}} - {{template "custom/extra_tabs" .}} + {{if and (.Permission.CanReadAny ctx.Consts.RepoUnitTypePullRequests ctx.Consts.RepoUnitTypeIssues ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} + <a class="{{if .PageIsActivity}}active {{end}}item" href="{{.RepoLink}}/activity"> + {{svg "octicon-pulse"}} {{ctx.Locale.Tr "repo.activity"}} + </a> + {{end}} - {{if .Permission.IsAdmin}} - <span class="item-flex-space"></span> + {{template "custom/extra_tabs" .}} + + {{if .Permission.IsAdmin}} + <span class="item-flex-space"></span> + <a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings"> + {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} + </a> + {{end}} + </div> + {{else if .Permission.IsAdmin}} + <div class="overflow-menu-items"> <a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings"> {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} </a> - {{end}} - </div> - {{else if .Permission.IsAdmin}} - <div class="overflow-menu-items"> - <a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings"> - {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} - </a> - </div> - {{end}} - </overflow-menu> + </div> + {{end}} + </overflow-menu> + </div> <div class="ui tabs divider"></div> </div> diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index e9e5574cd7..cbf7929fdb 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -4,7 +4,7 @@ <form method="post" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref" id="update_issueref_form"> {{$.CsrfTokenHtml}} </form> -<div class="ui dropdown select-branch branch-selector-dropdown {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}" +<div class="ui dropdown select-branch branch-selector-dropdown ellipsis-items-nowrap {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}" data-no-results="{{ctx.Locale.Tr "no_results_found"}}" {{if not .Issue}}data-for-new-issue="true"{{end}} > diff --git a/templates/repo/issue/view_content/reference_issue_dialog.tmpl b/templates/repo/issue/view_content/reference_issue_dialog.tmpl index c7a471f55e..d6c9081001 100644 --- a/templates/repo/issue/view_content/reference_issue_dialog.tmpl +++ b/templates/repo/issue/view_content/reference_issue_dialog.tmpl @@ -7,7 +7,7 @@ {{.CsrfTokenHtml}} <div class="field"> <label><strong>{{ctx.Locale.Tr "repository"}}</strong></label> - <div class="ui search selection dropdown issue_reference_repository_search"> + <div class="ui search selection dropdown issue_reference_repository_search ellipsis-items-nowrap"> <div class="default text gt-ellipsis">{{.Repository.FullName}}</div> <div class="menu"></div> </div> diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 40617021d9..b94c202f16 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -345,7 +345,7 @@ <div class="inline field"> {{$unitInternalWiki := .Repository.MustGetUnit ctx ctx.Consts.RepoUnitTypeWiki}} <label>{{ctx.Locale.Tr "repo.settings.default_wiki_everyone_access"}}</label> - <select name="default_wiki_everyone_access" class="ui dropdown"> + <select name="default_wiki_everyone_access" class="ui selection dropdown"> {{/* everyone access mode is different from others, none means it is unset and won't be applied */}} <option value="none" {{Iif (eq $unitInternalWiki.EveryoneAccessMode 0) "selected"}}>{{ctx.Locale.Tr "settings.permission_not_set"}}</option> <option value="read" {{Iif (eq $unitInternalWiki.EveryoneAccessMode 1) "selected"}}>{{ctx.Locale.Tr "settings.permission_read"}}</option> diff --git a/web_src/css/base.css b/web_src/css/base.css index bf88adb453..aa00c88754 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -342,8 +342,6 @@ a.label, .ui.dropdown .menu > .item { color: var(--color-text); - overflow: hidden; - text-overflow: ellipsis; } .ui.dropdown .menu > .item:hover { @@ -374,7 +372,6 @@ a.label, .ui.selection.dropdown .menu > .item { border-color: var(--color-secondary); - white-space: nowrap; } .ui.selection.visible.dropdown > .text:not(.default) { @@ -1346,7 +1343,11 @@ table th[data-sortt-desc] .svg { align-items: center; gap: .25rem; vertical-align: middle; - min-width: 0; + min-width: 0; /* make ellipsis work */ +} + +.ui.ui.dropdown.selection { + min-width: 14em; /* match the default min width */ } .ui.dropdown .ui.label .svg { @@ -1373,3 +1374,16 @@ table th[data-sortt-desc] .svg { gap: .5rem; min-width: 0; } + +.ui.dropdown.ellipsis-items-nowrap > .text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.ellipsis-items-nowrap > .item, +.ui.dropdown.ellipsis-items-nowrap .menu > .item { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} diff --git a/web_src/css/form.css b/web_src/css/form.css index 7479af0c4e..66ead32762 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -448,6 +448,10 @@ textarea:focus, } } +.ui.form .field > .selection.dropdown { + min-width: 14em; /* matches the default min width */ +} + .new.webhook form .help { margin-left: 25px; } diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css index 9f67ceb8d5..c9df6ab3f5 100644 --- a/web_src/css/modules/container.css +++ b/web_src/css/modules/container.css @@ -2,26 +2,20 @@ unused rules here after refactoring, please remove them. */ .ui.container { - display: block; - max-width: 100%; -} - -.ui.fluid.container { - width: 100%; -} - -.ui[class*="center aligned"].container { - text-align: center; -} - -/* overwrite 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(100% - calc(2 * var(--page-margin-x))); margin-left: auto; margin-right: auto; } +.ui.fluid.container { + width: 100%; +} + .ui.container.fluid.padded { padding: 0 var(--page-margin-x); } + +.ui[class*="center aligned"].container { + text-align: center; +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 7695b632b4..f02b2b7578 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2860,6 +2860,10 @@ tbody.commit-list { margin-top: 4px; } +.ui.dropdown.branch-selector-dropdown .scrolling.menu { + max-width: min(400px, 90vw); +} + .branch-selector-dropdown .branch-dropdown-button { margin: 0; max-width: 340px; @@ -2909,6 +2913,8 @@ tbody.commit-list { } .branch-selector-dropdown .menu .item .rss-icon { + position: absolute; + right: 4px; visibility: hidden; /* only show RSS icon on hover */ } diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index 8a741b68da..87530225e3 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -246,7 +246,7 @@ export function initRepoBranchTagSelector(selector) { export default sfc; // activate IDE's Vue plugin </script> <template> - <div class="ui dropdown custom branch-selector-dropdown"> + <div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap"> <div class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> <span class="flex-text-block gt-ellipsis"> <template v-if="release">{{ textReleaseCompare }}</template> @@ -280,7 +280,7 @@ export default sfc; // activate IDE's Vue plugin <div class="ui label" v-if="item.name===repoDefaultBranch && mode === 'branches'"> {{ textDefaultBranchLabel }} </div> - <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon tw-float-right" :href="rssURLPrefix + item.url" target="_blank" @click.stop> + <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon" :href="rssURLPrefix + item.url" target="_blank" @click.stop> <!-- creating a lot of Vue component is pretty slow, so we use a static SVG here --> <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg> </a> diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index d10d4dab8d..8ee681aedc 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -124,8 +124,8 @@ export function initRepoIssueSidebarList() { return; } filteredResponse.results.push({ - name: `#${issue.number} ${htmlEscape(issue.title) - }<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`, + name: `<div class="gt-ellipsis">#${issue.number} ${htmlEscape(issue.title)}</div> +<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`, value: issue.id, }); }); |