loading up the forgejo repo on tangled to test page performance
ui: improve branch/tag dropdown selector consistency (#7187)
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>
+36
-58
+14
-30
templates/repo/diff/compare.tmpl
+14
-30
templates/repo/diff/compare.tmpl
···
39
39
<i class="icon">{{svg "octicon-filter" 16}}</i>
40
40
<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
41
41
</div>
42
-
<div class="header">
43
-
<div class="ui grid">
44
-
<div class="two column row">
45
-
<a class="reference column" href="#" data-target=".base-branch-list">
46
-
<span class="text black">
47
-
{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
48
-
</span>
49
-
</a>
50
-
<a class="reference column" href="#" data-target=".base-tag-list">
51
-
<span class="text black">
52
-
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
53
-
</span>
54
-
</a>
55
-
</div>
56
-
</div>
42
+
<div class="branch-tag-tab">
43
+
<a class="branch-tag-item muted" href="#" data-target=".base-branch-list">
44
+
{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
45
+
</a>
46
+
<a class="branch-tag-item muted" href="#" data-target=".base-tag-list">
47
+
{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
48
+
</a>
57
49
</div>
58
50
<div class="scrolling menu reference-list-menu base-branch-list">
59
51
{{range .Branches}}
···
108
100
<i class="icon">{{svg "octicon-filter" 16}}</i>
109
101
<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
110
102
</div>
111
-
<div class="header">
112
-
<div class="ui grid">
113
-
<div class="two column row">
114
-
<a class="reference column" href="#" data-target=".head-branch-list">
115
-
<span class="text black">
116
-
{{svg "octicon-git-branch" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.branches"}}
117
-
</span>
118
-
</a>
119
-
<a class="reference column" href="#" data-target=".head-tag-list">
120
-
<span class="text black">
121
-
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.tags"}}
122
-
</span>
123
-
</a>
124
-
</div>
125
-
</div>
103
+
<div class="branch-tag-tab">
104
+
<a class="branch-tag-item muted" href="#" data-target=".head-branch-list">
105
+
{{svg "octicon-git-branch"}}{{ctx.Locale.Tr "repo.branches"}}
106
+
</a>
107
+
<a class="branch-tag-item muted" href="#" data-target=".head-tag-list">
108
+
{{svg "octicon-tag"}}{{ctx.Locale.Tr "repo.tags"}}
109
+
</a>
126
110
</div>
127
111
<div class="scrolling menu reference-list-menu head-branch-list">
128
112
{{range .HeadBranches}}
+13
web_src/css/repo.css
+13
web_src/css/repo.css
···
1153
1153
text-align: center;
1154
1154
}
1155
1155
1156
+
.branch-tag-tab {
1157
+
padding: 0 10px 10px;
1158
+
}
1159
+
1160
+
.branch-tag-item {
1161
+
display: inline-flex;
1162
+
align-items: center;
1163
+
gap: 0.5rem;
1164
+
padding: 0 10px;
1165
+
border: 1px solid transparent;
1166
+
border-bottom: none;
1167
+
}
1168
+
1156
1169
.repository.compare.pull .comment.form .content::before,
1157
1170
.repository.compare.pull .comment.form .content::after {
1158
1171
right: 100%;
+2
-13
web_src/js/components/RepoBranchTagSelector.vue
+2
-13
web_src/js/components/RepoBranchTagSelector.vue
···
265
265
</div>
266
266
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
267
267
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
268
-
<svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
268
+
<svg-icon name="octicon-git-branch" :size="16"/>{{ textBranches }}
269
269
</a>
270
270
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
271
-
<svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
271
+
<svg-icon name="octicon-tag" :size="16"/>{{ textTags }}
272
272
</a>
273
273
</div>
274
274
<div class="branch-tag-divider"/>
···
316
316
</div>
317
317
</template>
318
318
<style scoped>
319
-
.branch-tag-tab {
320
-
padding: 0 10px;
321
-
}
322
-
323
-
.branch-tag-item {
324
-
display: inline-block;
325
-
padding: 10px;
326
-
border: 1px solid transparent;
327
-
border-bottom: none;
328
-
}
329
-
330
319
.branch-tag-item.active {
331
320
border-color: var(--color-secondary);
332
321
background: var(--color-menu);