Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make download/follower displays consistent (#746)

Browse Source 
Closes #602
This commit is contained in:
triphora 2022-11-17 22:05:52 -05:00 committed by GitHub
parent 074695b50c
commit 1738f92ce2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/styles/components.scss
View File

@ -1271,3 +1271,23 @@ button {
color: var(--color-button-text-active);
}
}
.primary-stat {
align-items: center;
display: flex;
margin-bottom: 0.6rem;
.primary-stat__icon {
height: 1rem;
width: 1rem;
}
.primary-stat__text {
margin-left: 0.4rem;
}
.primary-stat__counter {
font-size: var(--font-size-lg);
font-weight: bold;
}
}

49
pages/_type/_id.vue
View File

@ -84,15 +84,23 @@
class="categories"
/>
<hr class="card-divider" />
<div class="stats">
<span class="stat">{{ $formatNumber(project.downloads) }}</span>
<span class="label"
>download<span v-if="project.downloads !== 1">s</span></span
>
<span class="stat">{{ $formatNumber(project.followers) }}</span>
<span class="label"
>follower<span v-if="project.followers !== 1">s</span></span
>
<div class="primary-stat">
<DownloadIcon class="primary-stat__icon" aria-hidden="true" />
<div class="primary-stat__text">
<span class="primary-stat__counter">
{{ $formatNumber(project.downloads) }}
</span>
download<span v-if="project.downloads !== 1">s</span>
</div>
</div>
<div class="primary-stat">
<HeartIcon class="primary-stat__icon" aria-hidden="true" />
<div class="primary-stat__text">
<span class="primary-stat__counter">
{{ $formatNumber(project.followers) }}
</span>
follower<span v-if="project.followers !== 1">s</span>
</div>
</div>
<div class="dates">
<div
@ -141,7 +149,7 @@
class="iconified-button"
@click="$store.dispatch('user/unfollowProject', project)"
>
<FollowIcon fill="currentColor" aria-hidden="true" />
<HeartIcon fill="currentColor" aria-hidden="true" />
Unfollow
</button>
</template>
@ -151,7 +159,7 @@
Report
</a>
<a class="iconified-button" :href="authUrl">
<FollowIcon fill="currentColor" aria-hidden="true" />
<HeartIcon fill="currentColor" aria-hidden="true" />
Follow
</a>
</template>
@ -331,7 +339,7 @@
v-else-if="donation.id === 'open-collective'"
aria-hidden="true"
/>
<FollowIcon v-else-if="donation.id === 'github'" />
<HeartIcon v-else-if="donation.id === 'github'" />
<UnknownIcon v-else />
<span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
<span v-else-if="donation.id === 'patreon'">Patreon</span>
@ -666,7 +674,7 @@
v-else-if="donation.id === 'open-collective'"
aria-hidden="true"
/>
<FollowIcon v-else-if="donation.id === 'github'" />
<HeartIcon v-else-if="donation.id === 'github'" />
<UnknownIcon v-else />
<span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
<span v-else-if="donation.id === 'patreon'">Patreon</span>
@ -837,7 +845,7 @@ import DownloadIcon from '~/assets/images/utils/download.svg?inline'
import UpdateIcon from '~/assets/images/utils/updated.svg?inline'
import CodeIcon from '~/assets/images/sidebar/mod.svg?inline'
import ReportIcon from '~/assets/images/utils/report.svg?inline'
import FollowIcon from '~/assets/images/utils/heart.svg?inline'
import HeartIcon from '~/assets/images/utils/heart.svg?inline'
import InfoIcon from '~/assets/images/utils/info.svg?inline'
import IssuesIcon from '~/assets/images/utils/issues.svg?inline'
import WikiIcon from '~/assets/images/utils/wiki.svg?inline'
@ -873,7 +881,7 @@ export default {
UpdateIcon,
CodeIcon,
ReportIcon,
FollowIcon,
HeartIcon,
InfoIcon,
WikiIcon,
DiscordIcon,
@ -1192,17 +1200,6 @@ export default {
font-size: var(--font-size-nm);
}
.stats {
.stat {
font-size: var(--font-size-lg);
font-weight: bold;
}
.label {
margin-right: 0.125rem;
}
}
.dates {
margin: 0.75rem 0;

24
pages/user/_id.vue
View File

@ -108,14 +108,14 @@
<DownloadIcon class="primary-stat__icon" aria-hidden="true" />
<div class="primary-stat__text">
<span class="primary-stat__counter">{{ sumDownloads() }}</span>
<span class="primary-stat__label">downloads</span>
downloads
</div>
</div>
<div class="primary-stat">
<HeartIcon class="primary-stat__icon" aria-hidden="true" />
<div class="primary-stat__text">
<span class="primary-stat__counter">{{ sumFollows() }}</span>
<span class="primary-stat__label">followers of projects</span>
followers of projects
</div>
</div>
<div class="stats-block__item secondary-stat">
@ -566,26 +566,6 @@ export default {
gap: 0.5rem;
}
.primary-stat {
align-items: center;
display: flex;
margin-bottom: 0.6rem;
}
.primary-stat__icon {
height: 1rem;
width: 1rem;
}
.primary-stat__text {
margin-left: 0.4rem;
}
.primary-stat__counter {
font-size: var(--font-size-md);
font-weight: bold;
}
.date {
cursor: default;
}