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

cleanup

Browse Source
This commit is contained in:
James Collins
2023-04-17 22:57:35 +10:00
parent b725bc2b5b
commit 40a9cc424e
1 changed files with 97 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,70 +1,67 @@
<template> <template>
<SMPage class="sm-page-dashboard"> <SMMastHead title="Dashboard" />
<template #container> <div class="boxes">
<h1>Dashboard</h1> <router-link to="/dashboard/details" class="box">
<div class="boxes"> <ion-icon name="location-outline" />
<router-link to="/dashboard/details" class="box"> <h2>My Details</h2>
<ion-icon name="location-outline" /> </router-link>
<h2>My Details</h2> <router-link
</router-link> v-if="userStore.permissions.includes('admin/posts')"
<router-link :to="{ name: 'dashboard-post-list' }"
v-if="userStore.permissions.includes('admin/posts')" class="box">
:to="{ name: 'dashboard-post-list' }" <ion-icon name="newspaper-outline" />
class="box"> <h2>Posts</h2>
<ion-icon name="newspaper-outline" /> </router-link>
<h2>Posts</h2> <router-link
</router-link> v-if="userStore.permissions.includes('admin/users')"
<router-link :to="{ name: 'dashboard-user-list' }"
v-if="userStore.permissions.includes('admin/users')" class="box">
:to="{ name: 'dashboard-user-list' }" <ion-icon name="people-outline" />
class="box"> <h2>Users</h2>
<ion-icon name="people-outline" /> </router-link>
<h2>Users</h2> <router-link
</router-link> v-if="userStore.permissions.includes('admin/events')"
<router-link :to="{ name: 'dashboard-event-list' }"
v-if="userStore.permissions.includes('admin/events')" class="box">
:to="{ name: 'dashboard-event-list' }" <ion-icon name="calendar-outline" />
class="box"> <h2>Events</h2>
<ion-icon name="calendar-outline" /> </router-link>
<h2>Events</h2> <router-link
</router-link> v-if="userStore.permissions.includes('admin/courses')"
<router-link :to="{ name: 'dashboard-event-list' }"
v-if="userStore.permissions.includes('admin/courses')" class="box">
:to="{ name: 'dashboard-event-list' }" <ion-icon name="school-outline" />
class="box"> <h2>{{ courseBoxTitle }}</h2>
<ion-icon name="school-outline" /> </router-link>
<h2>{{ courseBoxTitle }}</h2> <router-link
</router-link> v-if="userStore.permissions.includes('admin/media')"
<router-link :to="{ name: 'dashboard-media-list' }"
v-if="userStore.permissions.includes('admin/media')" class="box">
:to="{ name: 'dashboard-media-list' }" <ion-icon name="film-outline" />
class="box"> <h2>Media</h2>
<ion-icon name="film-outline" /> </router-link>
<h2>Media</h2> <router-link
</router-link> v-if="userStore.permissions.includes('admin/media')"
<router-link :to="{ name: 'dashboard-media-list' }"
v-if="userStore.permissions.includes('admin/media')" class="box"
:to="{ name: 'dashboard-media-list' }" style="background-image: url('/img/minecraft.png')">
class="box" <img src="/img/minecraft-grass-block.png" />
style="background-image: url('/img/minecraft.png')"> <h2>Minecraft</h2>
<img src="/img/minecraft-grass-block.png" /> </router-link>
<h2>Minecraft</h2> <router-link
</router-link> v-if="userStore.permissions.includes('logs/discord')"
<router-link :to="{ name: 'dashboard-discord-bot-logs' }"
v-if="userStore.permissions.includes('logs/discord')" class="box">
:to="{ name: 'dashboard-discord-bot-logs' }" <ion-icon name="logo-discord" />
class="box"> <h2>Discord Bot Logs</h2>
<ion-icon name="logo-discord" /> </router-link>
<h2>Discord Bot Logs</h2> </div>
</router-link>
</div>
</template>
</SMPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useUserStore } from "../../store/UserStore"; import { useUserStore } from "../../store/UserStore";
import SMMastHead from "../../components/SMMastHead.vue";
const userStore = useUserStore(); const userStore = useUserStore();
@@ -78,55 +75,51 @@ const courseBoxTitle = computed(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
.sm-page-dashboard { .boxes {
background-color: $secondary-background-color; display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -#{map-get($spacer, 3)};
.boxes { .box {
display: flex; display: flex;
flex-wrap: wrap; flex-basis: map-get($spacer, 5) * 4.5;
justify-content: center; flex-direction: column;
margin: -#{map-get($spacer, 3)}; border-radius: 12px;
border: 2px solid $primary-color-dark;
background-color: #f8f8f8;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: map-get($spacer, 5) map-get($spacer, 4);
margin: map-get($spacer, 3);
font-size: map-get($spacer, 3);
color: $primary-color-dark !important;
margin-bottom: map-get($spacer, 5);
transition: all 0.2s ease-in-out;
align-items: center;
text-align: center;
.box { h2 {
display: flex; margin-top: map-get($spacer, 2);
flex-basis: map-get($spacer, 5) * 4.5; margin-bottom: 0;
flex-direction: column; }
border-radius: 12px;
border: 2px solid $primary-color-dark;
background-color: #f8f8f8;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: map-get($spacer, 5) map-get($spacer, 4);
margin: map-get($spacer, 3);
font-size: map-get($spacer, 3);
color: $primary-color-dark !important;
margin-bottom: map-get($spacer, 5);
transition: all 0.2s ease-in-out;
align-items: center;
text-align: center;
h2 { ion-icon {
margin-top: map-get($spacer, 2); font-size: map-get($spacer, 5);
margin-bottom: 0; }
}
ion-icon { img {
font-size: map-get($spacer, 5); height: map-get($spacer, 5);
} }
img { &:hover {
height: map-get($spacer, 5); text-decoration: none;
} background-color: $primary-color-lighter;
border-color: $primary-color-darker;
&:hover { color: $primary-color-darker !important;
text-decoration: none; box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
background-color: $primary-color-lighter; transform: scale(1.01);
border-color: $primary-color-darker;
color: $primary-color-darker !important;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
transform: scale(1.01);
}
} }
} }
} }