loading up the forgejo repo on tangled to test page performance
Improve the branch selector tab UI (#26631)
authored by
wxiaoguang
and committed by
GitHub
42cbe600
5bd63f83
+39
-22
+2
-2
web_src/css/repo.css
+2
-2
web_src/css/repo.css
···
1255
1255
color: var(--color-text-light-2);
1256
1256
}
1257
1257
1258
-
.repository .filter.dropdown .menu {
1259
-
margin-top: 1px !important;
1258
+
.repository .ui.dropdown.filter > .menu {
1259
+
margin-top: 1px;
1260
1260
}
1261
1261
1262
1262
.repository.branches .commit-divergence .bar-group {
+37
-20
web_src/js/components/RepoBranchTagSelector.vue
+37
-20
web_src/js/components/RepoBranchTagSelector.vue
···
16
16
<i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
17
17
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
18
18
</div>
19
-
<template v-if="showBranchesInDropdown">
20
-
<div class="header branch-tag-choice">
21
-
<div class="ui grid">
22
-
<div class="two column row">
23
-
<a class="reference column" href="#" @click="handleTabSwitch('branches')">
24
-
<span class="text" :class="{black: mode === 'branches'}">
25
-
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
26
-
</span>
27
-
</a>
28
-
<template v-if="!noTag">
29
-
<a class="reference column" href="#" @click="handleTabSwitch('tags')">
30
-
<span class="text" :class="{black: mode === 'tags'}">
31
-
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
32
-
</span>
33
-
</a>
34
-
</template>
35
-
</div>
36
-
</div>
37
-
</div>
38
-
</template>
19
+
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
20
+
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
21
+
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
22
+
</a>
23
+
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
24
+
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
25
+
</a>
26
+
</div>
27
+
<div class="branch-tag-divider"/>
39
28
<div class="scrolling menu" ref="scrollContainer">
40
29
<svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
41
30
<div class="loading-indicator is-loading" v-if="isLoading"/>
···
327
316
</script>
328
317
329
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
+
.branch-tag-item.active {
331
+
border-color: var(--color-secondary);
332
+
background: var(--color-menu);
333
+
border-top-left-radius: var(--border-radius);
334
+
border-top-right-radius: var(--border-radius);
335
+
}
336
+
337
+
.branch-tag-divider {
338
+
margin-top: -1px !important;
339
+
border-top: 1px solid var(--color-secondary);
340
+
}
341
+
342
+
.scrolling.menu {
343
+
border-top: none !important;
344
+
}
345
+
330
346
.menu .item .rss-icon {
331
347
display: none; /* only show RSS icon on hover */
332
348
}
349
+
333
350
.menu .item:hover .rss-icon {
334
351
display: inline-block;
335
352
}