Compare commits
No commits in common. "54daa904be455559db212476af736fd5d06e1307" and "88969111adb09b078f254fbadbbdfed9fcd5e5dd" have entirely different histories.
54daa904be
...
88969111ad
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
--surface-0: #ccd0da;
|
||||
--base: #eff1f5;
|
||||
--base-0: #fcfdfe;
|
||||
--base-extra: #f5f6f7;
|
||||
--mantle: #e6e9ef;
|
||||
--crust: #dce0e8;
|
||||
|
||||
|
|
@ -58,7 +58,6 @@
|
|||
|
||||
--lavender: #7287fd;
|
||||
--accent: var(--lavender);
|
||||
--accent-0: color-mix(in srgb, var(--accent), var(--text) 50%);
|
||||
--lavender-transparent: color-mix(in srgb, var(--lavender), transparent 80%);
|
||||
--accent-transparent-80: color-mix(in srgb, var(--accent), transparent 80%);
|
||||
--accent-transparent-50: color-mix(in srgb, var(--accent), transparent 50%);
|
||||
|
|
@ -85,19 +84,18 @@
|
|||
--sapphire: #7dc4e4;
|
||||
--blue: #8aadf4;
|
||||
--lavender: #b7bdf8;
|
||||
--text: #dad3d5;
|
||||
--subtext-1: #bec0c0;
|
||||
--subtext-0: #abada5;
|
||||
--overlay-2: #9a9a9a;
|
||||
--overlay-1: #8b8b8b;
|
||||
--overlay-0: #717171;
|
||||
--surface-2: #575757;
|
||||
--surface-1: #3f3f3f;
|
||||
--surface-0: #2f2f2f;
|
||||
--base: #181818;
|
||||
--base-0: #242424;
|
||||
--mantle: #121212;
|
||||
--crust: #0f0f0f;
|
||||
--text: #cad3f5;
|
||||
--subtext-1: #b8c0e0;
|
||||
--subtext-0: #a5adcb;
|
||||
--overlay-2: #939ab7;
|
||||
--overlay-1: #8087a2;
|
||||
--overlay-0: #6e738d;
|
||||
--surface-2: #5b6078;
|
||||
--surface-1: #494d64;
|
||||
--surface-0: #363a4f;
|
||||
--base: #24273a;
|
||||
--mantle: #1e2030;
|
||||
--crust: #181926;
|
||||
--destructive: var(--red);
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ button {
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--text);
|
||||
background-color: var(--base-0);
|
||||
border: 1px solid var(--surface-0);
|
||||
background-color: var(--crust);
|
||||
border: none;
|
||||
padding: 6px 20px;
|
||||
line-height: 1.6;
|
||||
border-radius: 4px;
|
||||
|
|
@ -46,10 +46,6 @@ button {
|
|||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
button.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.icon-end {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -57,7 +53,6 @@ button.icon-end {
|
|||
button.icon {
|
||||
background-color: transparent;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.icon:hover {
|
||||
|
|
@ -99,7 +94,6 @@ button:hover {
|
|||
button.accent {
|
||||
background-color: var(--accent);
|
||||
color: var(--base);
|
||||
border-color: var(--accent-0);
|
||||
/*text-transform: uppercase;*/
|
||||
}
|
||||
|
||||
|
|
@ -254,11 +248,6 @@ textarea {
|
|||
resize: vertical;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
box-shadow: 1px 1px 8px var(--surface-0);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -292,7 +281,7 @@ hr {
|
|||
}
|
||||
|
||||
[role="menu"], [role="listbox"] {
|
||||
background-color: var(--base-0);
|
||||
background-color: var(--base);
|
||||
border: 1px solid var(--overlay-0);
|
||||
border-radius: 4px;
|
||||
padding: 4px 0 4px 0;
|
||||
|
|
@ -310,10 +299,9 @@ hr {
|
|||
}
|
||||
|
||||
[role="menu"] button {
|
||||
background-color: var(--base-0);
|
||||
background-color: var(--base);
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
[role="menu"] button.destructive {
|
||||
|
|
@ -347,7 +335,7 @@ hr {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background-color: var(--base-0);
|
||||
background-color: var(--base);
|
||||
z-index: 10;
|
||||
animation: smooth-appear 0.2s ease;
|
||||
}
|
||||
|
|
@ -375,49 +363,3 @@ div.banner.info {
|
|||
background-color: var(--lavender-transparent);
|
||||
color: var(--lavender);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-left: 1px solid var(--surface-0);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 0.5rem 1rem;
|
||||
border-top: 1px solid var(--surface-0);
|
||||
border-bottom: 1px solid var(--surface-0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
border-right: 1px solid var(--surface-0);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--surface-0);
|
||||
background-color: var(--base-0);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
border-left: 1px solid var(--surface-0);
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: 1px solid var(--surface-0);
|
||||
}
|
||||
|
||||
tr:last-child > td:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
tr:last-child > td:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ const scheduleStore = useScheduleStore();
|
|||
const model = defineModel<number[]>({ required: true });
|
||||
|
||||
const selectedTime = defineModel("selectedTime");
|
||||
const selectedIndex = defineModel("selectedIndex");
|
||||
|
||||
const hoveredIndex = defineModel("hoveredIndex");
|
||||
|
||||
|
|
@ -143,20 +142,11 @@ function onSlotMouseUp(_: MouseEvent) {
|
|||
}
|
||||
|
||||
function onSlotClick(dayIndex: number, hour: number) {
|
||||
let index = dayIndex * 24 + hour;
|
||||
|
||||
if (isEditing.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedIndex.value == index) {
|
||||
selectedIndex.value = -1;
|
||||
selectedTime.value = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
selectedTime.value = getTimeAtCell(dayIndex, hour);
|
||||
selectedIndex.value = index;
|
||||
scheduleStore.selectIndex(24 * dayIndex + hour);
|
||||
}
|
||||
|
||||
|
|
@ -245,7 +235,6 @@ function getHour(offset: number, tz?: string) {
|
|||
:class="{
|
||||
'time-slot': true,
|
||||
'height-24px': true,
|
||||
'selected': selectedIndex == 24 * dayIndex + hour,
|
||||
}"
|
||||
:selection="
|
||||
selectionInside(dayIndex, hour) ? selectionValue
|
||||
|
|
@ -326,34 +315,9 @@ function getHour(offset: number, tz?: string) {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.time-slot:hover, .time-slot.selected {
|
||||
outline: 2px inset var(--subtext-0);
|
||||
}
|
||||
|
||||
.time-slot.selected {
|
||||
outline-style: solid;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.time-slot.selected:hover {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
outline-color: var(--overlay-0);
|
||||
}
|
||||
50% {
|
||||
outline-color: var(--text);
|
||||
}
|
||||
100% {
|
||||
outline-color: var(--overlay-0);
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot:hover {
|
||||
background-color: var(--crust);
|
||||
outline-style: dashed;
|
||||
outline: 2px inset var(--subtext-0);
|
||||
}
|
||||
|
||||
.time-slot:nth-child(2n):not(:last-child) {
|
||||
|
|
|
|||
|
|
@ -109,8 +109,7 @@ h3 {
|
|||
.event-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--base-0);
|
||||
border-radius: 8px;
|
||||
/*background-color: white;*/
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +139,7 @@ h3 {
|
|||
|
||||
.details {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--surface-0);
|
||||
border: 1px solid var(--text);
|
||||
border-radius: 0 8px 8px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -113,12 +113,11 @@ const selectedOption = computed({
|
|||
<style scoped>
|
||||
.event-confirm-button {
|
||||
display: flex;
|
||||
gap: 0px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.left {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
|
|
@ -129,10 +128,5 @@ const selectedOption = computed({
|
|||
.confirmed button.recolor {
|
||||
background-color: var(--text);
|
||||
color: var(--base);
|
||||
border-color: var(--text);
|
||||
}
|
||||
|
||||
.confirmed .left.recolor {
|
||||
border-right: 1px solid var(--surface-0);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import type { EventWithPlayerSchema, TeamSchema } from "@/client";
|
||||
import EventCard from "./EventCard.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useTeamDetails } from "@/composables/team-details";
|
||||
import { useTeamsStore } from "@/stores/teams";
|
||||
import { useTeamsEventsStore } from "@/stores/teams/events";
|
||||
import LoaderContainer from "./LoaderContainer.vue";
|
||||
import { computed } from "@vue/reactivity";
|
||||
|
||||
const { teamId, team } = useTeamDetails();
|
||||
|
||||
const teamsStore = useTeamsStore();
|
||||
const teamsEventsStore = useTeamsEventsStore();
|
||||
const isLoading = ref(false);
|
||||
const events = computed(() => teamsEventsStore.teamEvents[teamId.value]);
|
||||
|
||||
onMounted(() => {
|
||||
isLoading.value = true;
|
||||
teamsStore.fetchTeam(teamId.value)
|
||||
.then(() => {
|
||||
teamsEventsStore.fetchTeamEvents(teamId.value)
|
||||
.finally(() => isLoading.value = false);
|
||||
});
|
||||
});
|
||||
const props = defineProps<{
|
||||
events: EventWithPlayerSchema[];
|
||||
teamContext: TeamSchema;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LoaderContainer v-if="isLoading" height="160">
|
||||
<rect x="0" y="0" rx="4" ry="4" width="100%" height="160" />
|
||||
</LoaderContainer>
|
||||
<div class="events-list" v-else-if="events?.length > 0">
|
||||
<EventCard v-for="event in events" :key="event.event.id" :event="event" />
|
||||
<div class="events-list" v-if="props.events?.length > 0">
|
||||
<EventCard v-for="event in props.events" :key="event.event.id" :event="event" />
|
||||
</div>
|
||||
<div class="events-list" v-else>
|
||||
<em class="subtext">
|
||||
|
|
@ -39,7 +19,7 @@ onMounted(() => {
|
|||
:to="{
|
||||
name: 'schedule',
|
||||
query: {
|
||||
teamId,
|
||||
teamId: props.teamContext.id
|
||||
}
|
||||
}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -42,16 +42,14 @@ function revokeInvite() {
|
|||
<td>
|
||||
{{ createdAt }}
|
||||
</td>
|
||||
<td>
|
||||
<div class="buttons">
|
||||
<button @click="copyLink">
|
||||
<i class="bi bi-link margin" />
|
||||
Copy Link
|
||||
</button>
|
||||
<button class="icon" @click="revokeInvite">
|
||||
<i class="bi bi-trash" />
|
||||
</button>
|
||||
</div>
|
||||
<td class="buttons">
|
||||
<button @click="copyLink">
|
||||
<i class="bi bi-link margin" />
|
||||
Copy Link
|
||||
</button>
|
||||
<button class="destructive" @click="revokeInvite">
|
||||
<i class="bi bi-trash" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ContentLoader } from "vue-content-loader";
|
||||
|
||||
const props = defineProps<{
|
||||
width?: string;
|
||||
height?: string;
|
||||
speed?: number;
|
||||
}>();
|
||||
|
||||
// get primary color from var(--overlay-0) and secondary from var(--overlay-1)
|
||||
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue("--surface-0");
|
||||
|
||||
const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue("--overlay-0");
|
||||
import Loader from './Loader.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--ContentLoader :width="width" :height="height" :speed="speed">
|
||||
</ContentLoader-->
|
||||
<component :is="ContentLoader" v-bind="{ ...props, primaryColor, secondaryColor }">
|
||||
<slot></slot>
|
||||
</component>
|
||||
<div class="loader-container">
|
||||
<Loader />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -65,8 +65,7 @@ const props = defineProps<{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--surface-0);
|
||||
background-color: var(--base-0);
|
||||
border: 1px solid var(--text);
|
||||
border-radius: 8px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { useTeamsStore } from "../stores/teams";
|
||||
import { useRoute, useRouter, RouterLink } from "vue-router";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computed } from "vue";
|
||||
import { useTeamDetails } from "../composables/team-details";
|
||||
import PlayerTeamCard from "../components/PlayerTeamCard.vue";
|
||||
import LoaderContainer from "./LoaderContainer.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
|
@ -16,13 +15,16 @@ const {
|
|||
availableMembersNextHour,
|
||||
teamMembers,
|
||||
} = useTeamDetails();
|
||||
const isLoading = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
isLoading.value = true;
|
||||
teamsStore.fetchTeamMembers(team.value.id)
|
||||
.finally(() => isLoading.value = false);
|
||||
});
|
||||
function leaveTeam() {
|
||||
teamsStore.leaveTeam(team.value.id)
|
||||
.then(() => {
|
||||
teamsStore.fetchTeams()
|
||||
.then(() => {
|
||||
router.push("/");
|
||||
})
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -37,21 +39,7 @@ onMounted(() => {
|
|||
<div class="team-details-button-group">
|
||||
</div>
|
||||
</div>
|
||||
<LoaderContainer v-if="isLoading">
|
||||
<rect x="0" y="10" rx="3" ry="3" width="100%" height="10" />
|
||||
<rect x="0" y="30" rx="3" ry="3" width="100%" height="10" />
|
||||
<rect x="0" y="50" rx="3" ry="3" width="100%" height="10" />
|
||||
<rect x="0" y="70" rx="3" ry="3" width="100%" height="10" />
|
||||
</LoaderContainer>
|
||||
<table class="member-table" v-else>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Roles</th>
|
||||
<th>Playtime</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table class="member-table">
|
||||
<tbody>
|
||||
<PlayerTeamCard
|
||||
v-for="member in teamMembers"
|
||||
|
|
@ -79,6 +67,12 @@ table.member-table {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
table.member-table th {
|
||||
text-align: left;
|
||||
padding-left: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.team-details-button-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -82,14 +82,14 @@ const playtime = computed(() => {
|
|||
|
||||
<style scoped>
|
||||
.player-card {
|
||||
background-color: var(--base-0);
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
border-radius: 8px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
border: 2px solid var(--surface-0);
|
||||
border: 2px solid white;
|
||||
box-shadow: 1px 1px 8px var(--surface-0);
|
||||
}
|
||||
|
||||
|
|
@ -122,13 +122,13 @@ const playtime = computed(() => {
|
|||
}
|
||||
|
||||
.player-card.no-player {
|
||||
border: 2px dashed var(--overlay-0);
|
||||
border: 2px solid var(--overlay-0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.player-card.no-player.selected {
|
||||
background-color: var(--accent-transparent);
|
||||
border: 2px dashed var(--accent);
|
||||
border: 2px solid var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ const rightIndicator = computed(() => {
|
|||
No roles
|
||||
</span>
|
||||
<div class="edit-group">
|
||||
<button v-if="!isEditing" class="icon" @click="isEditing = true">
|
||||
<button v-if="!isEditing" @click="isEditing = true">
|
||||
<i class="bi bi-pencil-fill edit-icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -197,10 +197,10 @@ const rightIndicator = computed(() => {
|
|||
<td>
|
||||
<div class="edit-group">
|
||||
<template v-if="isEditing">
|
||||
<button class="editing icon" @click="cancelEdit()">
|
||||
<button class="editing" @click="cancelEdit()">
|
||||
<i class="bi bi-x-lg" />
|
||||
</button>
|
||||
<button class="editing icon" @click="updateRoles()">
|
||||
<button class="editing" @click="updateRoles()">
|
||||
<i class="bi bi-check-lg" />
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -314,6 +314,10 @@ a.player-name:hover {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.edit-group > button.editing {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.player-card > td {
|
||||
padding: 0.5em 0em;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function logout() {
|
|||
|
||||
<template>
|
||||
<DropdownMenuRoot>
|
||||
<DropdownMenuTrigger className="profile-button no-border">
|
||||
<DropdownMenuTrigger className="profile-button">
|
||||
{{ authStore.username }}
|
||||
<i class="bi bi-chevron-down" />
|
||||
</DropdownMenuTrigger>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ function toggle(isMain: boolean) {
|
|||
</div>
|
||||
<button
|
||||
:class="{
|
||||
'no-border': true,
|
||||
'center': true,
|
||||
'selected': roleObject?.isMain
|
||||
}"
|
||||
|
|
@ -57,7 +56,6 @@ function toggle(isMain: boolean) {
|
|||
</button>
|
||||
<button
|
||||
:class="{
|
||||
'no-border': true,
|
||||
'right': true,
|
||||
'selected': !(roleObject?.isMain ?? true)
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { RouterLink } from "vue-router";
|
|||
import { useAuthStore } from "@/stores/auth";
|
||||
import InviteKeyDialog from "./InviteKeyDialog.vue";
|
||||
import { ContentLoader } from "vue-content-loader";
|
||||
import LoaderContainer from "./LoaderContainer.vue";
|
||||
|
||||
const teams = useTeamsStore();
|
||||
const isLoading = ref(false);
|
||||
|
|
@ -44,13 +43,17 @@ onMounted(() => {
|
|||
<div v-if="!authStore.isLoggedIn">
|
||||
Log in to view your teams.
|
||||
</div>
|
||||
<div v-else-if="isLoading">
|
||||
<LoaderContainer>
|
||||
<rect x="0" y="15" rx="5" ry="5" width="220" height="10" />
|
||||
<rect x="0" y="45" rx="5" ry="5" width="220" height="10" />
|
||||
<rect x="0" y="75" rx="5" ry="5" width="220" height="10" />
|
||||
<rect x="0" y="105" rx="5" ry="5" width="220" height="10" />
|
||||
</LoaderContainer>
|
||||
<div v-else-if="isLoading || true">
|
||||
<ContentLoader :speed="1">
|
||||
<circle cx="10" cy="20" r="8" />
|
||||
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
|
||||
<circle cx="10" cy="50" r="8" />
|
||||
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
|
||||
<circle cx="10" cy="80" r="8" />
|
||||
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
|
||||
<circle cx="10" cy="110" r="8" />
|
||||
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
|
||||
</ContentLoader>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="teams.teamsWithRole"
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@ function incrementDate(delta: number) {
|
|||
|
||||
<template>
|
||||
<div class="scroll-box">
|
||||
<button class="transparent icon" @click="incrementDate(-1)" :disabled="isDisabled">
|
||||
<button class="transparent eq" @click="incrementDate(-1)" :disabled="isDisabled">
|
||||
<i class="bi bi-caret-left-fill"></i>
|
||||
</button>
|
||||
<span class="date-range">{{ dateStart }} – {{ dateEnd }}</span>
|
||||
<button class="transparent icon" @click="incrementDate(1)" :disabled="isDisabled">
|
||||
<button class="transparent eq" @click="incrementDate(1)" :disabled="isDisabled">
|
||||
<i class="bi bi-caret-right-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -189,6 +189,7 @@ main {
|
|||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
button.radio {
|
||||
|
|
@ -206,7 +207,6 @@ button.radio.selected {
|
|||
|
||||
button.left {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
button.radio.left.selected {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { useTeamsEventsStore } from "@/stores/teams/events";
|
|||
import MatchCard from "@/components/MatchCard.vue";
|
||||
import { useMatchesStore } from "@/stores/matches";
|
||||
import { ContentLoader } from "vue-content-loader";
|
||||
import LoaderContainer from "@/components/LoaderContainer.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const teamsStore = useTeamsStore();
|
||||
|
|
@ -37,8 +36,8 @@ onMounted(() => {
|
|||
let doFetchTeam = () => {
|
||||
teamsStore.fetchTeam(teamId.value)
|
||||
.then(() => {
|
||||
//teamsStore.fetchTeamMembers(teamId.value);
|
||||
//teamsEventsStore.fetchTeamEvents(teamId.value);
|
||||
teamsStore.fetchTeamMembers(teamId.value);
|
||||
teamsEventsStore.fetchTeamEvents(teamId.value);
|
||||
matchesStore.fetchRecentMatchesForTeam(teamId.value, 5);
|
||||
isLoading.value = false;
|
||||
});
|
||||
|
|
@ -60,10 +59,10 @@ onMounted(() => {
|
|||
<div class="left">
|
||||
<center class="margin">
|
||||
<h1>
|
||||
<template v-if="isLoading">
|
||||
<LoaderContainer view-box="0 0 250 10">
|
||||
<template v-if="isLoading || true">
|
||||
<content-loader view-box="0 0 250 10">
|
||||
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
|
||||
</LoaderContainer>
|
||||
</content-loader>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ team.teamName }}
|
||||
|
|
@ -89,7 +88,7 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="right">
|
||||
<h2>Upcoming Events</h2>
|
||||
<EventList />
|
||||
<EventList :events="events" :team-context="team" />
|
||||
<h2 id="recent-matches-header">
|
||||
Recent Matches
|
||||
<RouterLink class="button" :to="{ name: 'team-settings/matches' }">
|
||||
|
|
@ -98,15 +97,15 @@ onMounted(() => {
|
|||
</button>
|
||||
</RouterLink>
|
||||
</h2>
|
||||
<em class="subtext" v-if="!matches">
|
||||
No recent matches.
|
||||
</em>
|
||||
<MatchCard
|
||||
v-if="matches?.length > 0"
|
||||
v-else
|
||||
v-for="match in matches"
|
||||
:team-match="match"
|
||||
:team="team"
|
||||
/>
|
||||
<em class="subtext" v-else>
|
||||
No recent matches.
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -123,7 +122,6 @@ onMounted(() => {
|
|||
.content-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.content-container > div.left {
|
||||
|
|
@ -165,7 +163,6 @@ onMounted(() => {
|
|||
@media (max-width: 1024px) {
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
gap: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { onMounted, ref } from "vue";
|
|||
import { useTeamsStore } from "@/stores/teams";
|
||||
import { useTeamDetails } from "@/composables/team-details";
|
||||
import { computed } from "@vue/reactivity";
|
||||
import LoaderContainer from "@/components/LoaderContainer.vue";
|
||||
|
||||
const {
|
||||
teamName,
|
||||
|
|
@ -52,20 +51,20 @@ const hasChangedTimeDetails = computed(() => {
|
|||
);
|
||||
});
|
||||
|
||||
const isLoading = ref(false);
|
||||
const isLoaded = ref(false);
|
||||
|
||||
const teamsStore = useTeamsStore();
|
||||
|
||||
const team = computed(() => teamsStore.teams[teamId.value]);
|
||||
|
||||
onMounted(() => {
|
||||
isLoading.value = true;
|
||||
isLoaded.value = true;
|
||||
teamsStore.fetchTeam(teamId.value)
|
||||
.then((response) => {
|
||||
teamName.value = response.team.teamName;
|
||||
timezone.value = response.team.tzTimezone;
|
||||
minuteOffset.value = response.team.minuteOffset;
|
||||
isLoading.value = false;
|
||||
isLoaded.value = false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
@ -73,15 +72,7 @@ onMounted(() => {
|
|||
<template>
|
||||
<div class="team-general-settings">
|
||||
<h2>Overview</h2>
|
||||
<LoaderContainer v-if="isLoading">
|
||||
<rect x="0" y="10" rx="5" width="40" height="10" />
|
||||
<rect x="0" y="30" rx="5" width="100%" height="10" />
|
||||
<rect x="0" y="50" rx="5" width="80" height="10" />
|
||||
<rect x="250" y="50" rx="5" width="40" height="10" />
|
||||
<rect x="0" y="70" rx="5" width="240" height="10" />
|
||||
<rect x="250" y="70" rx="5" width="100" height="10" />
|
||||
</LoaderContainer>
|
||||
<div v-else>
|
||||
<div>
|
||||
<div class="form-group margin">
|
||||
<h3 class="closer">Team Name</h3>
|
||||
<input v-model="teamName" />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useTeamDetails } from "@/composables/team-details";
|
|||
import { useTeamsStore } from "@/stores/teams";
|
||||
import { useIntegrationsStore } from "@/stores/teams/integrations";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { ContentLoader } from "vue-content-loader";
|
||||
|
||||
const teamsStore = useTeamsStore();
|
||||
const integrationsStore = useIntegrationsStore();
|
||||
|
|
@ -32,14 +33,14 @@ onMounted(() => {
|
|||
<template>
|
||||
<div class="team-integrations">
|
||||
<div v-if="isLoading">
|
||||
<LoaderContainer>
|
||||
<rect x="0" y="0" rx="5" ry="5" width="250" height="10" />
|
||||
<rect x="20" y="20" rx="5" ry="5" width="220" height="10" />
|
||||
<rect x="20" y="40" rx="5" ry="5" width="170" height="10" />
|
||||
<rect x="0" y="60" rx="5" ry="5" width="250" height="10" />
|
||||
<rect x="20" y="80" rx="5" ry="5" width="200" height="10" />
|
||||
<rect x="20" y="100" rx="5" ry="5" width="80" height="10" />
|
||||
</LoaderContainer>
|
||||
<ContentLoader>
|
||||
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
|
||||
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
|
||||
<rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
|
||||
<rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
|
||||
<rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
|
||||
<rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
|
||||
</ContentLoader>
|
||||
</div>
|
||||
<template v-else>
|
||||
<DiscordIntegrationForm v-model="integrationsStore.discordIntegration" />
|
||||
|
|
|
|||
|
|
@ -27,16 +27,6 @@ onMounted(() => {
|
|||
<template>
|
||||
<div class="invites" v-if="team">
|
||||
<h2>Invites</h2>
|
||||
<p class="small aside">
|
||||
Invite players to your team by creating an invite link.
|
||||
All invites are usable only once.
|
||||
</p>
|
||||
<div class="create-invite-group">
|
||||
<button class="accent" @click="createInvite">
|
||||
<i class="bi bi-person-fill-add margin" />
|
||||
Create Invite
|
||||
</button>
|
||||
</div>
|
||||
<table id="invite-table" v-if="invites?.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -46,8 +36,6 @@ onMounted(() => {
|
|||
<th>
|
||||
Creation time
|
||||
</th>
|
||||
<th>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -57,12 +45,22 @@ onMounted(() => {
|
|||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="create-invite-group">
|
||||
<button class="accent" @click="createInvite">
|
||||
<i class="bi bi-person-fill-add margin" />
|
||||
Create Invite
|
||||
</button>
|
||||
<span class="small aside">
|
||||
Invites are usable once and expire after 24 hours.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#invite-table {
|
||||
width: 100%;
|
||||
border: 1px solid var(--overlay-0);
|
||||
border-radius: 8px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
|
@ -77,6 +75,5 @@ onMounted(() => {
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ onMounted(() => {
|
|||
<i class="bi bi-trophy-fill margin"></i>
|
||||
Matches
|
||||
</h2>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<AddMatchDialog />
|
||||
<div class="button-group">
|
||||
<AddMatchDialog />
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -71,4 +71,9 @@ onMounted(() => {
|
|||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 800;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ onMounted(() => {
|
|||
Matches
|
||||
</RouterLink>
|
||||
<hr>
|
||||
<button class="destructive-on-hover icon-end no-border" @click="leaveTeam">
|
||||
<button class="destructive-on-hover icon-end" @click="leaveTeam">
|
||||
Leave team
|
||||
<i class="bi bi-box-arrow-left" />
|
||||
</button>
|
||||
|
|
@ -122,9 +122,4 @@ nav.sidebar button:hover {
|
|||
background-color: var(--crust);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
nav.sidebar button.destructive-on-hover:hover {
|
||||
background-color: var(--destructive);
|
||||
color: var(--base);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue