Skip to content

Commit 245f2c0

Browse files
silverwindsilverwind
authored
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">
1 parent 28077e6 commit 245f2c0

File tree

3 files changed

+63
-63
lines changed

3 files changed

+63
-63
lines changed

‎web_src/css/dashboard.css

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -160,39 +160,3 @@
160160
.feeds .news:last-of-type .divider {
161161
display: none !important;
162162
}
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-
}

‎web_src/css/helpers.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,11 @@ Gitea's private styles use `g-` prefix.
8686
.gt-float-left { float: left !important; }
8787
.gt-float-right { float: right !important; }
8888

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; }
9494

9595
.gt-rounded { border-radius: var(--border-radius) !important; }
9696
.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }

‎web_src/js/components/DashboardRepoList.vue

Lines changed: 58 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{{ textMyRepos }}
1111
<span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span>
1212
</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">
1414
<svg-icon name="octicon-plus"/>
1515
<span class="sr-only">{{ textNewRepo }}</span>
1616
</a>
@@ -70,18 +70,16 @@
7070
</div>
7171
<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
7272
<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"/>
8179
</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"/>
8480
</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"/>
8583
</li>
8684
</ul>
8785
<div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
@@ -121,27 +119,27 @@
121119
{{ textMyOrgs }}
122120
<span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span>
123121
</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">
125123
<svg-icon name="octicon-plus"/>
126124
<span class="sr-only">{{ textNewOrg }}</span>
127125
</a>
128126
</h4>
129127
<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
130128
<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'">
137135
{{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }}
138136
</span>
139137
</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>
144138
</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>
145143
</li>
146144
</ul>
147145
</div>
@@ -445,3 +443,41 @@ export function initDashboardRepoList() {
445443
export default sfc; // activate the IDE's Vue plugin
446444
447445
</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>

0 commit comments

Comments
 (0)