loading up the forgejo repo on tangled to test page performance
Repo list improvements, fix bold helper classes (#24935)
- Fix bold helper classes that were broken because of CSS syntax error
- Refined the repo list CSS and layout
- Removing bold
- Downsize the mirror icon to fit
- Fix icon positions
- Adapted the org list to match
- Center the '+' icon and mute it
<img width="385" alt="Screenshot 2023-05-25 at 18 38 31"
src="https://github.com/go-gitea/gitea/assets/115237/ac8d6efb-5751-4845-a4ab-db1ddaf36ec3">
<img width="384" alt="Screenshot 2023-05-25 at 18 30 29"
src="https://github.com/go-gitea/gitea/assets/115237/bbd39ae7-da9d-4c6f-bfe3-42f28b7a74c3">
authored by
silverwind
and committed by
GitHub
245f2c08
28077e66
+63
-63
-36
web_src/css/dashboard.css
-36
web_src/css/dashboard.css
···
160
160
.feeds .news:last-of-type .divider {
161
161
display: none !important;
162
162
}
163
-
164
-
.feeds .list ul {
165
-
list-style: none;
166
-
margin: 0;
167
-
padding-left: 0;
168
-
}
169
-
170
-
.feeds .list ul li:not(:last-child) {
171
-
border-bottom: 1px solid var(--color-secondary);
172
-
}
173
-
174
-
.feeds .list ul li .repo-list-link {
175
-
padding: 6px 1em;
176
-
display: block;
177
-
}
178
-
179
-
.feeds .list ul li .repo-list-link .svg {
180
-
color: var(--color-text-light-2);
181
-
}
182
-
183
-
.feeds .list ul li .repo-list-link .star-num {
184
-
font-size: 12px;
185
-
}
186
-
187
-
.feeds .list #privateFilterCheckbox .svg {
188
-
color: var(--color-grey);
189
-
margin-right: 0.25rem;
190
-
}
191
-
192
-
.feeds .list .repo-owner-name-list .item-name {
193
-
min-width: 0;
194
-
}
195
-
196
-
.feeds .list .repo-owner-name-list .item-name svg {
197
-
min-width: 16px;
198
-
}
+5
-5
web_src/css/helpers.css
+5
-5
web_src/css/helpers.css
···
86
86
.gt-float-left { float: left !important; }
87
87
.gt-float-right { float: right !important; }
88
88
89
-
.gt-font-light { font-weight: var(--font-weight-light) !important };
90
-
.gt-font-normal { font-weight: var(--font-weight-normal) !important };
91
-
.gt-font-medium { font-weight: var(--font-weight-medium) !important };
92
-
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
93
-
.gt-font-bold { font-weight: var(--font-weight-bold) !important };
89
+
.gt-font-light { font-weight: var(--font-weight-light) !important; }
90
+
.gt-font-normal { font-weight: var(--font-weight-normal) !important; }
91
+
.gt-font-medium { font-weight: var(--font-weight-medium) !important; }
92
+
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important; }
93
+
.gt-font-bold { font-weight: var(--font-weight-bold) !important; }
94
94
95
95
.gt-rounded { border-radius: var(--border-radius) !important; }
96
96
.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
+58
-22
web_src/js/components/DashboardRepoList.vue
+58
-22
web_src/js/components/DashboardRepoList.vue
···
10
10
{{ textMyRepos }}
11
11
<span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span>
12
12
</div>
13
-
<a :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
13
+
<a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
14
14
<svg-icon name="octicon-plus"/>
15
15
<span class="sr-only">{{ textNewRepo }}</span>
16
16
</a>
···
70
70
</div>
71
71
<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
72
72
<ul class="repo-owner-name-list">
73
-
<li v-for="repo in repos" :key="repo.id">
74
-
<a class="repo-list-link muted gt-df gt-ac gt-sb" :href="repo.link">
75
-
<div class="item-name gt-df gt-ac gt-f1">
76
-
<svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
77
-
<div class="text gt-font-semibold truncate gt-ml-1">{{ repo.full_name }}</div>
78
-
<span v-if="repo.archived">
79
-
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
80
-
</span>
73
+
<li class="gt-df gt-ac" v-for="repo in repos" :key="repo.id">
74
+
<a class="repo-list-link muted gt-df gt-ac gt-f1" :href="repo.link">
75
+
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
76
+
<div class="text truncate">{{ repo.full_name }}</div>
77
+
<div v-if="repo.archived">
78
+
<svg-icon name="octicon-archive" :size="16"/>
81
79
</div>
82
-
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
83
-
<svg-icon v-if="repo.latest_commit_status_state" :name="statusIcon(repo.latest_commit_status_state)" :class-name="'commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
84
80
</a>
81
+
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
82
+
<svg-icon v-if="repo.latest_commit_status_state" :name="statusIcon(repo.latest_commit_status_state)" :class-name="'gt-ml-3 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
85
83
</li>
86
84
</ul>
87
85
<div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
···
121
119
{{ textMyOrgs }}
122
120
<span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span>
123
121
</div>
124
-
<a v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
122
+
<a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
125
123
<svg-icon name="octicon-plus"/>
126
124
<span class="sr-only">{{ textNewOrg }}</span>
127
125
</a>
128
126
</h4>
129
127
<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
130
128
<ul class="repo-owner-name-list">
131
-
<li v-for="org in organizations" :key="org.name">
132
-
<a class="repo-list-link gt-df gt-ac gt-sb" :href="subUrl + '/' + encodeURIComponent(org.name)">
133
-
<div class="text truncate item-name gt-f1">
134
-
<svg-icon name="octicon-organization" :size="16" class-name="gt-mr-2"/>
135
-
<strong>{{ org.name }}</strong>
136
-
<span class="ui tiny basic label gt-ml-3" v-if="org.org_visibility !== 'public'">
129
+
<li class="gt-df gt-ac" v-for="org in organizations" :key="org.name">
130
+
<a class="repo-list-link muted gt-df gt-ac gt-f1" :href="subUrl + '/' + encodeURIComponent(org.name)">
131
+
<svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/>
132
+
<div class="text truncate">{{ org.name }}</div>
133
+
<div><!-- div to prevent underline of label on hover -->
134
+
<span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
137
135
{{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }}
138
136
</span>
139
137
</div>
140
-
<div class="text light grey gt-df gt-ac">
141
-
{{ org.num_repos }}
142
-
<svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/>
143
-
</div>
144
138
</a>
139
+
<div class="text light grey gt-df gt-ac gt-ml-3">
140
+
{{ org.num_repos }}
141
+
<svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/>
142
+
</div>
145
143
</li>
146
144
</ul>
147
145
</div>
···
445
443
export default sfc; // activate the IDE's Vue plugin
446
444
447
445
</script>
446
+
<style scoped>
447
+
ul {
448
+
list-style: none;
449
+
margin: 0;
450
+
padding-left: 0;
451
+
}
452
+
453
+
ul li {
454
+
padding: 0 10px;
455
+
}
456
+
457
+
ul li:not(:last-child) {
458
+
border-bottom: 1px solid var(--color-secondary);
459
+
}
460
+
461
+
.repo-list-link {
462
+
padding: 6px 0;
463
+
gap: 6px;
464
+
min-width: 0; /* for text truncation */
465
+
}
466
+
467
+
.repo-list-link .svg {
468
+
color: var(--color-text-light-2);
469
+
}
470
+
471
+
.repo-list-icon {
472
+
min-width: 16px;
473
+
margin-right: 2px;
474
+
}
475
+
476
+
/* octicon-mirror has no padding inside the SVG */
477
+
.repo-list-icon.octicon-mirror {
478
+
width: 14px;
479
+
min-width: 14px;
480
+
margin-left: 1px;
481
+
margin-right: 3px;
482
+
}
483
+
</style>