bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Issues Pull requests Activity

ui: improve branch/tag dropdown selector consistency (#7187)

Browse source 
Improve consistency of these tag/branch selector menus between these areas: repo file/dir view, issue branch selection, compare page.

Improve the look slightly by aligning icons properly, adding consistent gap and ensuring consistent vertical gaps with no excessive space waste.

Preview:
https://codeberg.org/attachments/0740a811-d6bf-4c27-a16d-bdc7e2aa63eb

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7187
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-03-13 18:11:01 +00:00
parent d53dfcbccb
commit 3c014a8f0e
4 changed files with 36 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web_src/css/repo.css
View file

@ -1153,6 +1153,19 @@ td .commit-summary {
text-align: center;
}
.branch-tag-tab {
padding: 0 10px 10px;
}
.branch-tag-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 10px;
border: 1px solid transparent;
border-bottom: none;
}
.repository.compare.pull .comment.form .content::before,
.repository.compare.pull .comment.form .content::after {
right: 100%;

15
web_src/js/components/RepoBranchTagSelector.vue
View file

@ -265,10 +265,10 @@ export default sfc; // activate IDE's Vue plugin
</div>
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
<svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
<svg-icon name="octicon-git-branch" :size="16"/>{{ textBranches }}
</a>
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
<svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
<svg-icon name="octicon-tag" :size="16"/>{{ textTags }}
</a>
</div>
<div class="branch-tag-divider"/>
@ -316,17 +316,6 @@ export default sfc; // activate IDE's Vue plugin
</div>
</template>
<style scoped>
.branch-tag-tab {
padding: 0 10px;
}
.branch-tag-item {
display: inline-block;
padding: 10px;
border: 1px solid transparent;
border-bottom: none;
}
.branch-tag-item.active {
border-color: var(--color-secondary);
background: var(--color-menu);