diff options
author | KN4CK3R <admin@oldschoolhack.me> | 2024-02-01 18:10:16 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-02-01 17:10:16 +0000 |
commit | c3e462921ee31536e59b37e654ed20e92a37ffe6 (patch) | |
tree | e4576da296cccc84ae622e2def52f69f80393f4a /web_src | |
parent | 3a667621306216b1724ba1a9b23d61a4f7aff50d (diff) | |
download | gitea-c3e462921ee31536e59b37e654ed20e92a37ffe6.tar.gz gitea-c3e462921ee31536e59b37e654ed20e92a37ffe6.zip |
Improve user search display name (#29002)
I tripped over this strange method and I don't think we need that
workaround to fix the value.
old:
![grafik](https://github.com/go-gitea/gitea/assets/1666336/c8b6797b-eb45-4dec-99db-1b0649a34ec5)
new:
![grafik](https://github.com/go-gitea/gitea/assets/1666336/ab1a65ae-de5b-4ce4-9813-3b8b39c7922e)
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Diffstat (limited to 'web_src')
-rw-r--r-- | web_src/css/base.css | 4 | ||||
-rw-r--r-- | web_src/css/repo.css | 8 | ||||
-rw-r--r-- | web_src/js/features/comp/SearchUserBox.js | 9 | ||||
-rw-r--r-- | web_src/js/features/repo-settings.js | 4 |
4 files changed, 15 insertions, 10 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index cc1f6a8397..198e87c0e2 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -196,10 +196,14 @@ a.label, .ui.search > .results { background: var(--color-body); border-color: var(--color-secondary); + overflow-wrap: anywhere; /* allow text to wrap as fomantic limits this to 18em width */ } .ui.search > .results .result { background: var(--color-body); + border-color: var(--color-secondary); + display: flex; + align-items: center; } .ui.search > .results .result .title { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index dfe0d6c77f..55c6ec4817 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2128,14 +2128,16 @@ } #search-user-box .results .result .image { - float: left; - margin-right: 8px; + order: 0; + margin-right: 12px; width: 2em; height: 2em; + min-width: 2em; + min-height: 2em; } #search-user-box .results .result .content { - margin: 6px 0; /* this trick is used to align with the sibling avatar image */ + margin: 0; /* remove margin reserved for avatar because we move it to left via `order: 0` */ } .ui.menu .item > img:not(.ui) { diff --git a/web_src/js/features/comp/SearchUserBox.js b/web_src/js/features/comp/SearchUserBox.js index 960b787fea..992d4ef020 100644 --- a/web_src/js/features/comp/SearchUserBox.js +++ b/web_src/js/features/comp/SearchUserBox.js @@ -17,14 +17,13 @@ export function initCompSearchUserBox() { const searchQuery = $searchUserBox.find('input').val(); const searchQueryUppercase = searchQuery.toUpperCase(); $.each(response.data, (_i, item) => { - let title = item.login; - if (item.full_name && item.full_name.length > 0) { - title += ` (${htmlEscape(item.full_name)})`; - } const resultItem = { - title, + title: item.login, image: item.avatar_url }; + if (item.full_name) { + resultItem.description = htmlEscape(item.full_name); + } if (searchQueryUppercase === item.login.toUpperCase()) { items.unshift(resultItem); } else { diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js index 04974200bb..75e624a6a7 100644 --- a/web_src/js/features/repo-settings.js +++ b/web_src/js/features/repo-settings.js @@ -52,9 +52,9 @@ export function initRepoSettingSearchTeamBox() { onResponse(response) { const items = []; $.each(response.data, (_i, item) => { - const title = `${item.name} (${item.permission} access)`; items.push({ - title, + title: item.name, + description: `${item.permission} access` // TODO: translate this string }); }); |