tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Partial Mobile Support (#156)

Browse Source 
* Add partial mobile support

* Remove file used for seperate PR

* Add mobile support for cookie consent, make dropdown close on page change
This commit is contained in:
Geometrically
2021-04-10 22:51:10 -07:00
committed by GitHub
parent 7d3ad5a639
commit c06c3d48d2
17 changed files with 638 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
components/ui/ProjectCard.vue
View File

@@ -1,103 +1,105 @@
<template>
<article class="project-card">
<div class="icon">
<nuxt-link v-if="isModrinth" :to="'/mod/' + id">
<img
:src="
iconUrl
? iconUrl
: 'https://cdn.modrinth.com/placeholder.svg?inline'
"
:alt="name"
/>
</nuxt-link>
</div>
<div class="info">
<div class="top">
<h2 class="title">
<nuxt-link v-if="isModrinth" :to="'/mod/' + id">{{ name }}</nuxt-link>
<a v-else :href="pageUrl">{{ name }}</a>
</h2>
<p v-if="author" class="author">
by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
</p>
<div class="columns">
<div class="icon">
<nuxt-link v-if="isModrinth" :to="'/mod/' + id">
<img
:src="iconUrl || 'https://cdn.modrinth.com/placeholder.svg?inline'"
:alt="name"
/>
</nuxt-link>
</div>
<p class="description">
{{ description }}
</p>
<div :class="{ vertical: editMode }" class="bottom">
<div class="stats">
<div v-if="status !== null" class="stat">
<div class="info">
<h4>Status</h4>
<span v-if="status === 'approved'" class="badge green">
Approved
</span>
<span v-if="status === 'rejected'" class="badge red">
Rejected
</span>
<span v-if="status === 'draft'" class="badge yellow">Draft</span>
<span v-if="status === 'processing'" class="badge yellow">
Processing
</span>
<span v-if="status === 'unlisted'" class="badge gray">
Unlisted
</span>
<span v-if="status === 'unknown'" class="badge gray">
Unknown
</span>
</div>
</div>
<div class="stat">
<DownloadIcon aria-hidden="true" />
<div class="info">
<h4>Downloads</h4>
<p class="value">{{ formatNumber(downloads) }}</p>
</div>
</div>
<div class="stat">
<CalendarIcon aria-hidden="true" />
<div class="info">
<h4>Created</h4>
<p
v-tooltip="
$dayjs(createdAt).format(
'[Created on] YYYY-MM-DD [at] HH:mm A'
)
"
class="value"
>
{{ $dayjs(createdAt).fromNow() }}
</p>
</div>
</div>
<div class="stat">
<EditIcon aria-hidden="true" />
<div class="info">
<h4>Updated</h4>
<p
v-tooltip="
$dayjs(updatedAt).format(
'[Updated on] YYYY-MM-DD [at] HH:mm A'
)
"
class="value"
>
{{ $dayjs(updatedAt).fromNow() }}
</p>
</div>
</div>
<div v-if="latestVersion" class="stat">
<TagIcon aria-hidden="true" />
<div class="info">
<h4>Available For</h4>
<p class="value">
{{ latestVersion }}
</p>
</div>
</div>
<div class="info">
<div class="top">
<h2 class="title">
<nuxt-link v-if="isModrinth" :to="'/mod/' + id">{{
name
}}</nuxt-link>
<a v-else :href="pageUrl">{{ name }}</a>
</h2>
<p v-if="author" class="author">
by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
</p>
</div>
<p class="description">
{{ description }}
</p>
<div :class="{ vertical: editMode }" class="bottom">
<div class="stats">
<div v-if="status !== null" class="stat">
<div class="info">
<h4>Status</h4>
<span v-if="status === 'approved'" class="badge green">
Approved
</span>
<span v-if="status === 'rejected'" class="badge red">
Rejected
</span>
<span v-if="status === 'draft'" class="badge yellow"
>Draft</span
>
<span v-if="status === 'processing'" class="badge yellow">
Processing
</span>
<span v-if="status === 'unlisted'" class="badge gray">
Unlisted
</span>
<span v-if="status === 'unknown'" class="badge gray">
Unknown
</span>
</div>
</div>
<div class="stat">
<DownloadIcon aria-hidden="true" />
<div class="info">
<h4>Downloads</h4>
<p class="value">{{ formatNumber(downloads) }}</p>
</div>
</div>
<div class="stat">
<CalendarIcon aria-hidden="true" />
<div class="info">
<h4>Created</h4>
<p
v-tooltip="
$dayjs(createdAt).format(
'[Created on] YYYY-MM-DD [at] HH:mm A'
)
"
class="value"
>
{{ $dayjs(createdAt).fromNow() }}
</p>
</div>
</div>
<div class="stat">
<EditIcon aria-hidden="true" />
<div class="info">
<h4>Updated</h4>
<p
v-tooltip="
$dayjs(updatedAt).format(
'[Updated on] YYYY-MM-DD [at] HH:mm A'
)
"
class="value"
>
{{ $dayjs(updatedAt).fromNow() }}
</p>
</div>
</div>
<div v-if="latestVersion" class="stat">
<TagIcon aria-hidden="true" />
<div class="info">
<h4>Available For</h4>
<p class="value">
{{ latestVersion }}
</p>
</div>
</div>
</div>
<Categories :categories="categories" />
</div>
<Categories :categories="categories" />
</div>
</div>
<div v-if="editMode" class="buttons">
@@ -182,10 +184,6 @@ export default {
type: String,
default: null,
},
role: {
type: String,
default: null,
},
isModrinth: {
type: Boolean,
default: false,
@@ -204,6 +202,12 @@ export default {
@extend %row;
@extend %card-spaced-b;
width: 100%;
flex-direction: column;
@media screen and (min-width: 1024px) {
flex-direction: row;
}
.icon {
margin: auto 0;
img {
@@ -277,6 +281,11 @@ export default {
}
.buttons {
@extend %column;
margin-bottom: 1rem;
@media screen and (min-width: 1024px) {
margin-bottom: 0;
}
}
}
</style>