Skip to content

Commit

Permalink
Discover page progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prospector
Prospector committed Nov 11, 2024
1 parent cbe98d4 commit b411e42
Show file tree
Hide file tree
Showing 11 changed files with 752 additions and 294 deletions.
58 changes: 37 additions & 21 deletions apps/app-frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,28 +405,32 @@ async function checkUpdates() {
</div>
<div class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid overflow-auto" :class="{ 'has-plus': hasPlus }">
<div class="app-sidebar-scrollable flex-grow shrink overflow-y-auto relative" :class="{ 'pb-12': !hasPlus }">
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
<h3 class="text-base m-0">Playing as</h3>
<suspense>
<AccountsCard ref="accounts" mode="small" />
</suspense>
<div id="sidebar-teleport-target" class="sidebar-teleport-content">
</div>
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
<h3 class="text-base m-0">Friends</h3>
<p class="m-0">you have no friends :c</p>
<p class="m-0">what's up with that?</p>
</div>
<div class="pt-4 flex flex-col">
<h3 class="px-4 text-base m-0">News</h3>
<template v-for="(item, index) in news" :key="`news-${index}`">
<a :class="`flex flex-col outline-offset-[-4px] hover:bg-[--brand-gradient-border] focus:bg-[--brand-gradient-border] px-4 transition-colors ${index === 0 ? 'pt-2 pb-4' : 'py-4'}`" :href="item.link" target="_blank" rel="external">
<img :src="item.thumbnail" alt="News thumbnail" aria-hidden="true" class="w-full aspect-[3/1] object-cover rounded-2xl"/>
<h4 class="mt-2 mb-0 text-sm leading-none text-contrast font-semibold">{{item.title}}</h4>
<p class="my-1 text-sm text-secondary leading-tight">{{item.summary}}</p>
<p class="text-right text-sm text-secondary opacity-60 leading-tight m-0"> {{ dayjs(item.date).fromNow() }}</p>
</a>
<hr v-if="index !== news.length - 1" class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"/>
</template>
<div class="sidebar-default-content">
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
<h3 class="text-base m-0">Playing as</h3>
<suspense>
<AccountsCard ref="accounts" mode="small" />
</suspense>
</div>
<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
<h3 class="text-base m-0">Friends</h3>
<p class="m-0">you have no friends :c</p>
<p class="m-0">what's up with that?</p>
</div>
<div class="pt-4 flex flex-col">
<h3 class="px-4 text-base m-0">News</h3>
<template v-for="(item, index) in news" :key="`news-${index}`">
<a :class="`flex flex-col outline-offset-[-4px] hover:bg-[--brand-gradient-border] focus:bg-[--brand-gradient-border] px-4 transition-colors ${index === 0 ? 'pt-2 pb-4' : 'py-4'}`" :href="item.link" target="_blank" rel="external">
<img :src="item.thumbnail" alt="News thumbnail" aria-hidden="true" class="w-full aspect-[3/1] object-cover rounded-2xl"/>
<h4 class="mt-2 mb-0 text-sm leading-none text-contrast font-semibold">{{item.title}}</h4>
<p class="my-1 text-sm text-secondary leading-tight">{{item.summary}}</p>
<p class="text-right text-sm text-secondary opacity-60 leading-tight m-0"> {{ dayjs(item.date).fromNow() }}</p>
</a>
<hr v-if="index !== news.length - 1" class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"/>
</template>
</div>
</div>
</div>
<template v-if="!hasPlus">
Expand Down Expand Up @@ -814,6 +818,18 @@ async function checkUpdates() {
.app-sidebar {
background: var(--brand-gradient-bg);
}
.sidebar-teleport-content {
display: contents;
}
.sidebar-default-content {
display: none;
}
.sidebar-teleport-content:empty + .sidebar-default-content {
display: contents;
}
</style>
<style>
.mac {
Expand Down
104 changes: 52 additions & 52 deletions apps/app-frontend/src/components/GridDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
SearchIcon,
XIcon,
} from '@modrinth/assets'
import { Button, Card, DropdownSelect } from '@modrinth/ui'
import { Button, DropdownSelect } from '@modrinth/ui'
import { formatCategoryHeader } from '@modrinth/utils'
import ContextMenu from '@/components/ui/ContextMenu.vue'
import dayjs from 'dayjs'
Expand Down Expand Up @@ -121,7 +121,7 @@ const handleOptionsClick = async (args) => {
const search = ref('')
const group = ref('Category')
const filters = ref('All profiles')
const filters = ref('All')
const sortBy = ref('Name')
const filteredResults = computed(() => {
Expand Down Expand Up @@ -159,11 +159,11 @@ const filteredResults = computed(() => {
})
}
if (filters.value === 'Custom instances') {
if (filters.value === 'Custom') {
instances = instances.filter((instance) => {
return !instance.linked_data
})
} else if (filters.value === 'Downloaded modpacks') {
} else if (filters.value === 'Downloaded') {
instances = instances.filter((instance) => {
return instance.linked_data
})
Expand Down Expand Up @@ -229,53 +229,46 @@ const filteredResults = computed(() => {
})
</script>
<template>
<ConfirmModalWrapper
ref="confirmModal"
title="Are you sure you want to delete this instance?"
description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
:has-to-type="false"
proceed-label="Delete"
@proceed="deleteProfile"
/>
<Card class="header">
<div class="iconified-input">
<SearchIcon />
<input v-model="search" type="text" placeholder="Search" class="search-input" />
<Button class="r-btn" @click="() => (search = '')">
<XIcon />
</Button>
</div>
<div class="labeled_button">
<span>Sort by</span>
<DropdownSelect
v-model="sortBy"
class="sort-dropdown"
name="Sort Dropdown"
:options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
placeholder="Select..."
/>
</div>
<div class="labeled_button">
<span>Filter by</span>
<DropdownSelect
v-model="filters"
class="filter-dropdown"
name="Filter Dropdown"
:options="['All profiles', 'Custom instances', 'Downloaded modpacks']"
placeholder="Select..."
/>
</div>
<div class="labeled_button">
<span>Group by</span>
<DropdownSelect
v-model="group"
class="group-dropdown"
name="Group Dropdown"
:options="['Category', 'Loader', 'Game version', 'None']"
placeholder="Select..."
/>
</div>
</Card>
<div class="iconified-input">
<SearchIcon />
<input v-model="search" type="text" placeholder="Search" class="search-input" />
<Button class="r-btn" @click="() => (search = '')">
<XIcon />
</Button>
</div>
<div class="flex gap-2">
<DropdownSelect
v-slot="{ selected }"
v-model="sortBy"
name="Sort Dropdown"
:options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
placeholder="Select..."
>
<span class="font-semibold text-primary">Sort by: </span>
<span class="font-semibold text-secondary">{{ selected }}</span>
</DropdownSelect>
<!-- TODO: Make this NavTabs -->
<DropdownSelect
v-slot="{ selected }"
v-model="filters"
name="Filter Dropdown"
:options="['All', 'Custom', 'Downloaded']"
placeholder="Select..."
>
<span class="font-semibold text-primary">Filter by: </span>
<span class="font-semibold text-secondary">{{ selected }}</span>
</DropdownSelect>
<DropdownSelect
v-slot="{ selected }"
v-model="group"
name="Group Dropdown"
:options="['Category', 'Loader', 'Game version', 'None']"
placeholder="Select..."
>
<span class="font-semibold text-primary">Group by: </span>
<span class="font-semibold text-secondary">{{ selected }}</span>
</DropdownSelect>
</div>
<div
v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
key,
Expand All @@ -298,6 +291,14 @@ const filteredResults = computed(() => {
/>
</section>
</div>
<ConfirmModalWrapper
ref="confirmModal"
title="Are you sure you want to delete this instance?"
description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
:has-to-type="false"
proceed-label="Delete"
@proceed="deleteProfile"
/>
<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
<template #play> <PlayIcon /> Play </template>
<template #stop> <StopCircleIcon /> Stop </template>
Expand All @@ -315,7 +316,6 @@ const filteredResults = computed(() => {
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 1rem;
.divider {
display: flex;
Expand Down
11 changes: 5 additions & 6 deletions apps/app-frontend/src/components/RowDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,6 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
width: 100%;
padding: 1rem;
gap: 1rem;
-ms-overflow-style: none;
Expand Down Expand Up @@ -294,16 +293,16 @@ onUnmounted(() => {
a {
margin: 0;
font-size: var(--font-size-lg);
font-size: var(--font-size-md);
font-weight: bolder;
white-space: nowrap;
color: var(--color-contrast);
color: var(--color-base);
}
svg {
height: 1.5rem;
width: 1.5rem;
color: var(--color-contrast);
height: 1.25rem;
width: 1.25rem;
color: var(--color-base);
}
}
Expand Down
2 changes: 1 addition & 1 deletion apps/app-frontend/src/components/ui/NavTabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function pickLink() {
index = i
break
} else if (
route.path.includes(link.href) ||
route.path === link.href ||
(link.subpages &&
link.subpages.some((subpage) => route.path.includes(subpage)))
) {
Expand Down
Loading

0 comments on commit b411e42

Please sign in to comment.