Dashboard search tweaks (#14008)

- Fix color of inactive pagination parts caused by overreaching CSS
selector.
- Slightly reduce horizontal padding on list items
- Add spacing around pagination and move it outside of <ul>
This commit is contained in:
silverwind 2020-12-17 20:58:21 +01:00 committed by GitHub
parent 8af9df0036
commit 3260e15668
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 34 deletions

View file

@ -119,7 +119,7 @@
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
<a class="df ac sb" :href="suburl + '/' + repo.full_name">
<a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name">
<div class="f1">
<component v-bind:is="repoIcon(repo)" size="16"></component>
<strong class="text truncate item-name">${repo.full_name}</strong>
@ -129,34 +129,32 @@
</div>
<div class="text light grey df ac">
${repo.stars_count}
{{svg "octicon-star" 16 "rear ml-2"}}
{{svg "octicon-star" 16 "ml-2"}}
</div>
</a>
</li>
<li v-if="showMoreReposLink">
<div class="center">
<div class="ui borderless pagination menu narrow">
<a class="item navigation" :class="{'disabled': page === 1}"
@click="changePage(1)" title="{{$.i18n.Tr "admin.first_page"}}">
{{svg "gitea-double-chevron-left" 16 "mr-2"}}
</a>
<a class="item navigation" :class="{'disabled': page === 1}"
@click="changePage(page - 1)" title="{{$.i18n.Tr "repo.issues.previous"}}">
{{svg "octicon-chevron-left" 16 "mr-2"}}
</a>
<a class="active item">${page}</a>
<a class="item navigation" :class="{'disabled': page === finalPage}"
@click="changePage(page + 1)" title="{{$.i18n.Tr "repo.issues.next"}}">
{{svg "octicon-chevron-right" 16 "ml-2"}}
</a>
<a class="item navigation" :class="{'disabled': page === finalPage}"
@click="changePage(finalPage)" title="{{$.i18n.Tr "admin.last_page"}}">
{{svg "gitea-double-chevron-right" 16 "ml-2"}}
</a>
</div>
</div>
</li>
</ul>
<div v-if="showMoreReposLink" class="center py-3 border-secondary-top">
<div class="ui borderless pagination menu narrow">
<a class="item navigation py-2" :class="{'disabled': page === 1}"
@click="changePage(1)" title="{{$.i18n.Tr "admin.first_page"}}">
{{svg "gitea-double-chevron-left" 16 "mr-2"}}
</a>
<a class="item navigation py-2" :class="{'disabled': page === 1}"
@click="changePage(page - 1)" title="{{$.i18n.Tr "repo.issues.previous"}}">
{{svg "octicon-chevron-left" 16 "mr-2"}}
</a>
<a class="active item py-2">${page}</a>
<a class="item navigation" :class="{'disabled': page === finalPage}"
@click="changePage(page + 1)" title="{{$.i18n.Tr "repo.issues.next"}}">
{{svg "octicon-chevron-right" 16 "ml-2"}}
</a>
<a class="item navigation py-2" :class="{'disabled': page === finalPage}"
@click="changePage(finalPage)" title="{{$.i18n.Tr "admin.last_page"}}">
{{svg "gitea-double-chevron-right" 16 "ml-2"}}
</a>
</div>
</div>
</div>
</div>
<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
@ -173,14 +171,14 @@
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="org in organizations">
<a class="df ac sb" :href="suburl + '/' + org.name">
<a class="repo-list-link df ac sb" :href="suburl + '/' + org.name">
<div class="f1">
{{svg "octicon-organization" 16 "mr-2"}}
<strong class="text truncate item-name">${org.name}</strong>
</div>
<div class="text light grey df ac">
${org.num_repos}
{{svg "octicon-repo" 16 "rear ml-2 mt-1"}}
{{svg "octicon-repo" 16 "ml-2 mt-1"}}
</div>
</a>
</li>

View file

@ -156,16 +156,12 @@
background-color: #fcf8e9;
}
a {
padding: 6px 1.2em;
.repo-list-link {
padding: 6px 1em;
display: block;
.svg {
color: var(--color-secondary-dark-6);
&.rear {
font-size: 15px;
}
color: var(--color-text-light-2);
}
.star-num {

View file

@ -32,6 +32,12 @@
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
.border-secondary { border: 1px solid var(--color-secondary) !important; }
.border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
.border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
.border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
.border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
.no-transition { transition: none !important; }
.bg-red { background: var(--color-red) !important; }