STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions 1 Packages Projects Releases 3 Wiki Activity

cleanup

Browse Source
This commit is contained in:
James Collins
2023-02-20 16:17:37 +10:00
parent 7b2e88d089
commit dad736b0d9
1 changed files with 90 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
resources/js/views/dashboard/Dashboard.vue
View File

@@ -1,54 +1,56 @@
<template>
<SMPage class="dashboard mx-auto">
<h1>Dashboard</h1>
<div class="boxes">
<router-link to="/dashboard/details" class="box">
<ion-icon name="location-outline" />
<h2>My Details</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/posts')"
to="/dashboard/posts"
class="box">
<ion-icon name="newspaper-outline" />
<h2>Posts</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/users')"
:to="{ name: 'user-list' }"
class="box">
<ion-icon name="people-outline" />
<h2>Users</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/events')"
to="/dashboard/events"
class="box">
<ion-icon name="calendar-outline" />
<h2>Events</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/courses')"
to="/dashboard/courses"
class="box">
<ion-icon name="school-outline" />
<h2>{{ courseBoxTitle }}</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/media')"
to="/dashboard/media"
class="box">
<ion-icon name="film-outline" />
<h2>Media</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('logs/discord')"
:to="{ name: 'discord-bot-logs' }"
class="box">
<ion-icon name="logo-discord" />
<h2>Discord Bot Logs</h2>
</router-link>
</div>
<SMPage class="sm-dashboard">
<template #container>
<h1>Dashboard</h1>
<div class="boxes">
<router-link to="/dashboard/details" class="box">
<ion-icon name="location-outline" />
<h2>My Details</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/posts')"
to="/dashboard/posts"
class="box">
<ion-icon name="newspaper-outline" />
<h2>Posts</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/users')"
:to="{ name: 'user-list' }"
class="box">
<ion-icon name="people-outline" />
<h2>Users</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/events')"
to="/dashboard/events"
class="box">
<ion-icon name="calendar-outline" />
<h2>Events</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/courses')"
to="/dashboard/courses"
class="box">
<ion-icon name="school-outline" />
<h2>{{ courseBoxTitle }}</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('admin/media')"
to="/dashboard/media"
class="box">
<ion-icon name="film-outline" />
<h2>Media</h2>
</router-link>
<router-link
v-if="userStore.permissions.includes('logs/discord')"
:to="{ name: 'discord-bot-logs' }"
class="box">
<ion-icon name="logo-discord" />
<h2>Discord Bot Logs</h2>
</router-link>
</div>
</template>
</SMPage>
</template>
@@ -69,45 +71,49 @@ const courseBoxTitle = computed(() => {
</script>
<style lang="scss">
.dashboard {
max-width: 1000px;
}
.sm-dashboard {
background-color: #f8f8f8;
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -#{map-get($spacer, 3)};
.box {
.boxes {
display: flex;
flex-basis: map-get($spacer, 5) * 4.5;
flex-direction: column;
background-color: #eee;
border: 3px solid #eee;
border-radius: 12px;
padding: map-get($spacer, 5) map-get($spacer, 4);
margin: map-get($spacer, 3);
font-size: map-get($spacer, 3);
color: $font-color;
transition: background-color 0.3s, border 0.3s;
align-items: center;
text-align: center;
flex-wrap: wrap;
justify-content: center;
margin: -#{map-get($spacer, 3)};
h2 {
margin-top: map-get($spacer, 2);
margin-bottom: 0;
}
ion-icon {
font-size: map-get($spacer, 5);
}
&:hover {
border: 3px solid $font-color;
text-decoration: none;
.box {
display: flex;
flex-basis: map-get($spacer, 5) * 4.5;
flex-direction: column;
border: 1px solid $border-color;
border-radius: 12px;
border: 2px solid $font-color;
background-color: #fff;
padding: map-get($spacer, 5) map-get($spacer, 4);
margin: map-get($spacer, 3);
font-size: map-get($spacer, 3);
color: $font-color;
color: $font-color !important;
margin-bottom: map-get($spacer, 5);
transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
align-items: center;
text-align: center;
h2 {
margin-top: map-get($spacer, 2);
margin-bottom: 0;
}
ion-icon {
font-size: map-get($spacer, 5);
}
&:hover {
text-decoration: none;
// background-color: $secondary-color;
color: $font-color;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
transform: scale(1.01);
}
}
}
}