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

Added illustration & mezssage when a page doe not contain any mod / projects (#133)

Browse Source 
* Added new messages with illustration displaying that this page does not contain any elements
Fixed 404 error after deleting mod

* Fixed typo
This commit is contained in:
Redblueflame
2021-03-30 17:41:20 +02:00
committed by GitHub
parent 1e0d118930
commit e58963410e
8 changed files with 521 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
pages/dashboard/notifications.vue
View File

@@ -3,54 +3,62 @@
<div class="section-header columns">
<h3 class="column-grow-1">My notifications</h3>
</div>
<div
v-for="notification in notifications"
:key="notification.id"
class="notification columns"
>
<div class="text">
<nuxt-link :to="'/' + notification.link" class="top-wrapper">
<h3 class="title">
{{ notification.title }}
</h3>
<p
v-tooltip="
$dayjs(notification.created).format(
'[Created at] YYYY-MM-DD [at] HH:mm A'
)
"
class="date"
>
Notified {{ $dayjs(notification.created).fromNow() }}
<div v-if="notifications.length !== 0">
<div
v-for="notification in notifications"
:key="notification.id"
class="notification columns"
>
<div class="text">
<nuxt-link :to="'/' + notification.link" class="top-wrapper">
<h3 class="title">
{{ notification.title }}
</h3>
<p
v-tooltip="
$dayjs(notification.created).format(
'[Created at] YYYY-MM-DD [at] HH:mm A'
)
"
class="date"
>
Notified {{ $dayjs(notification.created).fromNow() }}
</p>
</nuxt-link>
<p class="description">
{{ notification.text }}
</p>
</nuxt-link>
<p class="description">
{{ notification.text }}
</p>
</div>
<div v-if="notification.actions.length > 0" class="actions">
<button
v-for="(action, index) in notification.actions"
:key="index"
@click="performAction(notification, index)"
>
{{ action.title }}
</button>
</div>
<div v-else class="actions">
<button @click="performAction(notification, null)">Dismiss</button>
</div>
<div v-if="notification.actions.length > 0" class="actions">
<button
v-for="(action, index) in notification.actions"
:key="index"
@click="performAction(notification, index)"
>
{{ action.title }}
</button>
</div>
<div v-else class="actions">
<button @click="performAction(notification, null)">Dismiss</button>
</div>
</div>
</div>
<div v-else class="error">
<UpToDate class="icon"></UpToDate><br />
<span class="text">You are up-to-date!</span>
</div>
</DashboardPage>
</template>
<script>
import axios from 'axios'
import DashboardPage from '@/components/DashboardPage'
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
export default {
components: {
DashboardPage,
UpToDate,
},
async asyncData(data) {
const notifications = (
@@ -127,4 +135,26 @@ export default {
margin: 0;
}
}
.error {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
.icon {
width: 8rem;
height: 8rem;
margin: 1.5rem 0;
}
.text {
margin-bottom: 2rem;
font-size: 1.25rem;
}
.link {
text-decoration: underline;
}
}
</style>