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">
This commit is contained in:
silverwind 2023-05-29 10:55:23 +02:00 committed by GitHub
parent 28077e66c0
commit 245f2c08db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 63 deletions

View file

@ -160,39 +160,3 @@
.feeds .news:last-of-type .divider { .feeds .news:last-of-type .divider {
display: none !important; display: none !important;
} }
.feeds .list ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.feeds .list ul li:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}
.feeds .list ul li .repo-list-link {
padding: 6px 1em;
display: block;
}
.feeds .list ul li .repo-list-link .svg {
color: var(--color-text-light-2);
}
.feeds .list ul li .repo-list-link .star-num {
font-size: 12px;
}
.feeds .list #privateFilterCheckbox .svg {
color: var(--color-grey);
margin-right: 0.25rem;
}
.feeds .list .repo-owner-name-list .item-name {
min-width: 0;
}
.feeds .list .repo-owner-name-list .item-name svg {
min-width: 16px;
}

View file

@ -86,11 +86,11 @@ Gitea's private styles use `g-` prefix.
.gt-float-left { float: left !important; } .gt-float-left { float: left !important; }
.gt-float-right { float: right !important; } .gt-float-right { float: right !important; }
.gt-font-light { font-weight: var(--font-weight-light) !important }; .gt-font-light { font-weight: var(--font-weight-light) !important; }
.gt-font-normal { font-weight: var(--font-weight-normal) !important }; .gt-font-normal { font-weight: var(--font-weight-normal) !important; }
.gt-font-medium { font-weight: var(--font-weight-medium) !important }; .gt-font-medium { font-weight: var(--font-weight-medium) !important; }
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important }; .gt-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.gt-font-bold { font-weight: var(--font-weight-bold) !important }; .gt-font-bold { font-weight: var(--font-weight-bold) !important; }
.gt-rounded { border-radius: var(--border-radius) !important; } .gt-rounded { border-radius: var(--border-radius) !important; }
.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }

View file

@ -10,7 +10,7 @@
{{ textMyRepos }} {{ textMyRepos }}
<span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span> <span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span>
</div> </div>
<a :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo"> <a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
<svg-icon name="octicon-plus"/> <svg-icon name="octicon-plus"/>
<span class="sr-only">{{ textNewRepo }}</span> <span class="sr-only">{{ textNewRepo }}</span>
</a> </a>
@ -70,18 +70,16 @@
</div> </div>
<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom"> <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li v-for="repo in repos" :key="repo.id"> <li class="gt-df gt-ac" v-for="repo in repos" :key="repo.id">
<a class="repo-list-link muted gt-df gt-ac gt-sb" :href="repo.link"> <a class="repo-list-link muted gt-df gt-ac gt-f1" :href="repo.link">
<div class="item-name gt-df gt-ac gt-f1"> <svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
<svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/> <div class="text truncate">{{ repo.full_name }}</div>
<div class="text gt-font-semibold truncate gt-ml-1">{{ repo.full_name }}</div> <div v-if="repo.archived">
<span v-if="repo.archived"> <svg-icon name="octicon-archive" :size="16"/>
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
</span>
</div> </div>
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
<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"/>
</a> </a>
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
<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"/>
</li> </li>
</ul> </ul>
<div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top"> <div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
@ -121,27 +119,27 @@
{{ textMyOrgs }} {{ textMyOrgs }}
<span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span> <span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span>
</div> </div>
<a v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> <a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
<svg-icon name="octicon-plus"/> <svg-icon name="octicon-plus"/>
<span class="sr-only">{{ textNewOrg }}</span> <span class="sr-only">{{ textNewOrg }}</span>
</a> </a>
</h4> </h4>
<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom"> <div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li v-for="org in organizations" :key="org.name"> <li class="gt-df gt-ac" v-for="org in organizations" :key="org.name">
<a class="repo-list-link gt-df gt-ac gt-sb" :href="subUrl + '/' + encodeURIComponent(org.name)"> <a class="repo-list-link muted gt-df gt-ac gt-f1" :href="subUrl + '/' + encodeURIComponent(org.name)">
<div class="text truncate item-name gt-f1"> <svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/>
<svg-icon name="octicon-organization" :size="16" class-name="gt-mr-2"/> <div class="text truncate">{{ org.name }}</div>
<strong>{{ org.name }}</strong> <div><!-- div to prevent underline of label on hover -->
<span class="ui tiny basic label gt-ml-3" v-if="org.org_visibility !== 'public'"> <span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
{{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }} {{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }}
</span> </span>
</div> </div>
<div class="text light grey gt-df gt-ac"> </a>
<div class="text light grey gt-df gt-ac gt-ml-3">
{{ org.num_repos }} {{ org.num_repos }}
<svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/> <svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/>
</div> </div>
</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -445,3 +443,41 @@ export function initDashboardRepoList() {
export default sfc; // activate the IDE's Vue plugin export default sfc; // activate the IDE's Vue plugin
</script> </script>
<style scoped>
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
ul li {
padding: 0 10px;
}
ul li:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}
.repo-list-link {
padding: 6px 0;
gap: 6px;
min-width: 0; /* for text truncation */
}
.repo-list-link .svg {
color: var(--color-text-light-2);
}
.repo-list-icon {
min-width: 16px;
margin-right: 2px;
}
/* octicon-mirror has no padding inside the SVG */
.repo-list-icon.octicon-mirror {
width: 14px;
min-width: 14px;
margin-left: 1px;
margin-right: 3px;
}
</style>