feat: "no servers found" impl
This commit is contained in:
Calum H.
parent
ab48d4b144
commit
475ee69cfb
@ -0,0 +1,56 @@
|
|||||||
|
<svg viewBox="0 0 592 384" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M0 3C0 1.34315 1.34315 0 3 0H93C94.6569 0 96 1.34315 96 3V93C96 94.6569 94.6569 96 93 96H3C1.34315 96 0 94.6569 0 93V3Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M120 18C120 16.8954 120.895 16 122 16H590C591.105 16 592 16.8954 592 18V38C592 39.1046 591.105 40 590 40H122C120.895 40 120 39.1046 120 38V18Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M120 62C120 60.8954 120.895 60 122 60H142C143.105 60 144 60.8954 144 62V82C144 83.1046 143.105 84 142 84H122C120.895 84 120 83.1046 120 82V62Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M160 62C160 60.8954 160.895 60 162 60H298C299.105 60 300 60.8954 300 62V82C300 83.1046 299.105 84 298 84H162C160.895 84 160 83.1046 160 82V62Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M324 62C324 60.8954 324.895 60 326 60H346C347.105 60 348 60.8954 348 62V82C348 83.1046 347.105 84 346 84H326C324.895 84 324 83.1046 324 82V62Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M364 62C364 60.8954 364.895 60 366 60H466C467.105 60 468 60.8954 468 62V82C468 83.1046 467.105 84 466 84H366C364.895 84 364 83.1046 364 82V62Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M0 147C0 145.343 1.34315 144 3 144H93C94.6569 144 96 145.343 96 147V237C96 238.657 94.6569 240 93 240H3C1.34315 240 0 238.657 0 237V147Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M120 162C120 160.895 120.895 160 122 160H590C591.105 160 592 160.895 592 162V182C592 183.105 591.105 184 590 184H122C120.895 184 120 183.105 120 182V162Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M120 206C120 204.895 120.895 204 122 204H142C143.105 204 144 204.895 144 206V226C144 227.105 143.105 228 142 228H122C120.895 228 120 227.105 120 226V206Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M160 206C160 204.895 160.895 204 162 204H298C299.105 204 300 204.895 300 206V226C300 227.105 299.105 228 298 228H162C160.895 228 160 227.105 160 226V206Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M324 206C324 204.895 324.895 204 326 204H346C347.105 204 348 204.895 348 206V226C348 227.105 347.105 228 346 228H326C324.895 228 324 227.105 324 226V206Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M364 206C364 204.895 364.895 204 366 204H466C467.105 204 468 204.895 468 206V226C468 227.105 467.105 228 466 228H366C364.895 228 364 227.105 364 226V206Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M0 291C0 289.343 1.34315 288 3 288H93C94.6569 288 96 289.343 96 291V381C96 382.657 94.6569 384 93 384H3C1.34315 384 0 382.657 0 381V291Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M120 306C120 304.895 120.895 304 122 304H590C591.105 304 592 304.895 592 306V326C592 327.105 591.105 328 590 328H122C120.895 328 120 327.105 120 326V306Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M120 350C120 348.895 120.895 348 122 348H142C143.105 348 144 348.895 144 350V370C144 371.105 143.105 372 142 372H122C120.895 372 120 371.105 120 370V350Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M160 350C160 348.895 160.895 348 162 348H298C299.105 348 300 348.895 300 350V370C300 371.105 299.105 372 298 372H162C160.895 372 160 371.105 160 370V350Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M324 350C324 348.895 324.895 348 326 348H346C347.105 348 348 348.895 348 350V370C348 371.105 347.105 372 346 372H326C324.895 372 324 371.105 324 370V350Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
<path
|
||||||
|
d="M364 350C364 348.895 364.895 348 366 348H466C467.105 348 468 348.895 468 350V370C468 371.105 467.105 372 466 372H366C364.895 372 364 371.105 364 370V350Z"
|
||||||
|
fill="#F3F4F6" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
@ -12,6 +12,7 @@ import './omorphia.scss'
|
|||||||
import _ModrinthIcon from './branding/logo.svg?component'
|
import _ModrinthIcon from './branding/logo.svg?component'
|
||||||
import _FourOhFourNotFound from './branding/404.svg?component'
|
import _FourOhFourNotFound from './branding/404.svg?component'
|
||||||
import _ModrinthPlusIcon from './branding/modrinth-plus.svg?component'
|
import _ModrinthPlusIcon from './branding/modrinth-plus.svg?component'
|
||||||
|
import _ServersManageIllustration from './branding/illustrations/servers-background.svg?component'
|
||||||
import _AngryRinthbot from './branding/rinthbot/angry.webp'
|
import _AngryRinthbot from './branding/rinthbot/angry.webp'
|
||||||
import _AnnoyedRinthbot from './branding/rinthbot/annoyed.webp'
|
import _AnnoyedRinthbot from './branding/rinthbot/annoyed.webp'
|
||||||
import _ConfusedRinthbot from './branding/rinthbot/confused.webp'
|
import _ConfusedRinthbot from './branding/rinthbot/confused.webp'
|
||||||
@ -50,6 +51,7 @@ import _YouTubeIcon from './external/youtube.svg?component'
|
|||||||
export const ModrinthIcon = _ModrinthIcon
|
export const ModrinthIcon = _ModrinthIcon
|
||||||
export const FourOhFourNotFound = _FourOhFourNotFound
|
export const FourOhFourNotFound = _FourOhFourNotFound
|
||||||
export const ModrinthPlusIcon = _ModrinthPlusIcon
|
export const ModrinthPlusIcon = _ModrinthPlusIcon
|
||||||
|
export const ServersManageIllustration = _ServersManageIllustration
|
||||||
export const AngryRinthbot = _AngryRinthbot
|
export const AngryRinthbot = _AngryRinthbot
|
||||||
export const AnnoyedRinthbot = _AnnoyedRinthbot
|
export const AnnoyedRinthbot = _AnnoyedRinthbot
|
||||||
export const ConfusedRinthbot = _ConfusedRinthbot
|
export const ConfusedRinthbot = _ConfusedRinthbot
|
||||||
|
|||||||
@ -1,7 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col sm:flex-row gap-4 sm:gap-0 my-4">
|
<div v-if="servers.length + sharedServers.length === 0" class="text-center py-24 relative">
|
||||||
|
<ServersManageIllustration class="servers-manage-illustration" />
|
||||||
|
<ServerIcon class="size-24 mx-auto text-contrast mb-4" />
|
||||||
|
<h3 class="text-3xl font-medium text-contrast mb-2">No servers found</h3>
|
||||||
|
<p class="text-gray-500 mb-6 px-4">Get started by creating your first server</p>
|
||||||
|
<ButtonStyled color="green" size="large" type="outlined">
|
||||||
|
<button class="flex items-center justify-center gap-2 mx-auto">
|
||||||
|
<PlusIcon class="size-4" /> New server
|
||||||
|
</button>
|
||||||
|
</ButtonStyled>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="flex flex-col sm:flex-row gap-4 sm:gap-0 my-4">
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<span class="text-2xl sm:text-3xl text-contrast font-bold">Servers</span>
|
<span class="text-3xl text-contrast font-bold">Servers</span>
|
||||||
<span class="text-sm sm:text-base text-secondary">View and manage all your servers</span>
|
<span class="text-sm sm:text-base text-secondary">View and manage all your servers</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:ml-auto">
|
<div class="sm:ml-auto">
|
||||||
@ -14,63 +26,67 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="text-md sm:text-lg text-contrast font-bold mb-4 flex flex-row gap-2">
|
<template v-if="servers.length > 0">
|
||||||
Your servers
|
<span class="text-xl text-contrast font-bold mb-4 flex flex-row gap-2"> Your servers </span>
|
||||||
</span>
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 gap-y-2">
|
||||||
|
<ServerCard
|
||||||
|
v-for="server in servers"
|
||||||
|
:id="server.id"
|
||||||
|
:key="server.id"
|
||||||
|
:server_name="server.server_name"
|
||||||
|
:server_created="server.server_created"
|
||||||
|
:server_plan="server.server_plan"
|
||||||
|
:server_status="server.server_status"
|
||||||
|
:players_online="server.players_online"
|
||||||
|
:max_players_online="server.max_players_online"
|
||||||
|
:world_name="server.world_name"
|
||||||
|
:ip="server.ip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
<template v-if="sharedServers.length > 0">
|
||||||
<ServerCard
|
<span class="text-xl text-contrast font-bold mb-4 flex flex-row gap-2"> Shared servers </span>
|
||||||
v-for="server in servers"
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 gap-y-2">
|
||||||
:key="server.id"
|
<ServerCard
|
||||||
:server_name="server.server_name"
|
v-for="server in sharedServers"
|
||||||
:server_created="server.server_created"
|
:id="server.id"
|
||||||
:server_plan="server.server_plan"
|
:key="server.id"
|
||||||
:server_status="server.server_status"
|
:server_name="server.server_name"
|
||||||
:players_online="server.players_online"
|
:server_created="server.server_created"
|
||||||
:max_players_online="server.max_players_online"
|
:server_plan="server.server_plan"
|
||||||
:world_name="server.world_name"
|
:server_status="server.server_status"
|
||||||
:ip="server.ip"
|
:players_online="server.players_online"
|
||||||
:id="server.id"
|
:max_players_online="server.max_players_online"
|
||||||
/>
|
:world_name="server.world_name"
|
||||||
</div>
|
:ip="server.ip"
|
||||||
|
/>
|
||||||
<span class="text-md sm:text-lg text-contrast font-bold mb-4 flex flex-row gap-2">
|
</div>
|
||||||
Servers shared with you
|
</template>
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
||||||
<ServerCard
|
|
||||||
v-for="server in servers"
|
|
||||||
:key="server.id"
|
|
||||||
:server_name="server.server_name"
|
|
||||||
:server_created="server.server_created"
|
|
||||||
:server_plan="server.server_plan"
|
|
||||||
:server_status="server.server_status"
|
|
||||||
:players_online="server.players_online"
|
|
||||||
:max_players_online="server.max_players_online"
|
|
||||||
:world_name="server.world_name"
|
|
||||||
:ip="server.ip"
|
|
||||||
:id="server.id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="servers.length === 0" class="text-center py-12">
|
|
||||||
<ServerIcon class="size-12 mx-auto text-gray-400 mb-4" />
|
|
||||||
<h3 class="text-lg font-medium text-gray-900 mb-2">No servers found</h3>
|
|
||||||
<p class="text-gray-500 mb-6 px-4">Get started by creating your first server</p>
|
|
||||||
<ButtonStyled color="green" class="w-full sm:w-auto">
|
|
||||||
<button class="flex items-center justify-center gap-2">
|
|
||||||
<PlusIcon class="size-4" /> Create your first server
|
|
||||||
</button>
|
|
||||||
</ButtonStyled>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { ButtonStyled, RaisedBadge } from '@modrinth/ui'
|
import { ButtonStyled } from '@modrinth/ui'
|
||||||
import ServerCard from '../components/management/ServerCard.vue'
|
import ServerCard from '../components/management/ServerCard.vue'
|
||||||
import { PlusIcon, ServerIcon } from '@modrinth/assets'
|
import { PlusIcon, ServerIcon, ServersManageIllustration } from '@modrinth/assets'
|
||||||
|
|
||||||
|
const sharedServers = ref([
|
||||||
|
{
|
||||||
|
id: 'server-1',
|
||||||
|
server_name: 'Rinth SMP',
|
||||||
|
server_created: new Date('2023-10-01T12:00:00Z'),
|
||||||
|
server_plan: 'Large',
|
||||||
|
server_status: 'online',
|
||||||
|
players_online: 5,
|
||||||
|
max_players_online: 20,
|
||||||
|
world_name: 'Example World',
|
||||||
|
ip: 'valiant-apple.modrinth.gg',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// const sharedServers = ref([])
|
||||||
|
// const servers = ref([])
|
||||||
|
|
||||||
const servers = ref([
|
const servers = ref([
|
||||||
{
|
{
|
||||||
@ -95,27 +111,20 @@ const servers = ref([
|
|||||||
world_name: 'Example World',
|
world_name: 'Example World',
|
||||||
ip: 'valiant-apple.modrinth.gg',
|
ip: 'valiant-apple.modrinth.gg',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'server-1',
|
|
||||||
server_name: 'Rinth SMP',
|
|
||||||
server_created: new Date('2023-10-01T12:00:00Z'),
|
|
||||||
server_plan: 'Large',
|
|
||||||
server_status: 'online',
|
|
||||||
players_online: 5,
|
|
||||||
max_players_online: 20,
|
|
||||||
world_name: 'Example World',
|
|
||||||
ip: 'valiant-apple.modrinth.gg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'server-1',
|
|
||||||
server_name: 'Rinth SMP',
|
|
||||||
server_created: new Date('2023-10-01T12:00:00Z'),
|
|
||||||
server_plan: 'Large',
|
|
||||||
server_status: 'online',
|
|
||||||
players_online: 5,
|
|
||||||
max_players_online: 20,
|
|
||||||
world_name: 'Example World',
|
|
||||||
ip: 'valiant-apple.modrinth.gg',
|
|
||||||
},
|
|
||||||
])
|
])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.servers-manage-illustration {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: -1;
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
opacity: 0.05;
|
||||||
|
mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user