forked from didirus/AstralRinth
bfe8b40f44
* launcher base gui initial * Bootstraps router, Omorphia, and prettier. * Adds pages. Adds Vuex. SideBar nav contains user section and pages section. * Adds Instance markup. Instances added to Home page. * Adds News to home page. * Adds settings to nav. Other touches. * Polishing initial base GUI. * Moves some styling to assets. Changes px values to rem. * Removes pointless border-radius CSS. * Implements Omorphia vars. * Adds trending mods section. * Updates home page. * Swaps Vuex implementation for Pinia. * Fixes invalid CSS on instance list item hover. * Adds @ path resolve for imports. * Fix some styling of row display * Gridview on library page * Cleaning up styles and markup. * Fixes overall layout issues. * Cleans up more styling. Modifies AppBar coloring. * instance routing * Allows pagination arrows to conditionally appear in RowDisplay. * Adds paging behavior in RowDisplay. * Initial modlist layout * Updates nav and settings button styling. * Brings in Knossos style for trending mods. Polishes News CSS. * Page redesign * More tweaks * Base library pages * Remove errant css * Update play.svg * Addressed issues --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Zachary Baird <zdb1994@yahoo.com> Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>
132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<script setup>
|
|
import {ChevronLeftIcon, ChevronRightIcon} from 'omorphia'
|
|
import Instance from '@/components/ui/Instance.vue'
|
|
import News from '@/components/ui/News.vue'
|
|
import {onMounted, onUnmounted, ref} from 'vue'
|
|
|
|
const props = defineProps({
|
|
instances: Array,
|
|
news: Array,
|
|
label: String,
|
|
canPaginate: Boolean,
|
|
})
|
|
const allowPagination = ref(false)
|
|
const modsRow = ref(null)
|
|
const newsRow = ref(null)
|
|
// Remove after state is populated with real data
|
|
const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
|
|
const shouldRenderNews = props.news && props.news?.length !== 0
|
|
onUnmounted(() => {
|
|
if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
|
|
})
|
|
const handleLeftPage = () => {
|
|
if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
|
|
else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
|
|
}
|
|
const handleRightPage = () => {
|
|
if (shouldRenderNormalInstances) modsRow.value.scrollLeft += 170
|
|
else if (shouldRenderNews) newsRow.value.scrollLeft += 170
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="row">
|
|
<div class="header">
|
|
<p>{{ props.label }}</p>
|
|
<hr>
|
|
<div v-if="allowPagination" class="pagination">
|
|
<ChevronLeftIcon @click="handleLeftPage"/>
|
|
<ChevronRightIcon @click="handleRightPage"/>
|
|
</div>
|
|
</div>
|
|
<section ref="modsRow" class="instances">
|
|
<Instance
|
|
v-for="instance in props.instances"
|
|
:key="instance.id"
|
|
display="card"
|
|
:instance="instance"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: inherit;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
gap: 1rem;
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
white-space: nowrap;
|
|
color: var(--color-contrast);
|
|
}
|
|
|
|
hr {
|
|
background-color: var(--color-gray);
|
|
height: 1px;
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.pagination {
|
|
display: inherit;
|
|
align-items: inherit;
|
|
|
|
svg {
|
|
background: var(--color-raised-bg);
|
|
border-radius: var(--radius-lg);
|
|
width: 1.3rem;
|
|
height: 1.2rem;
|
|
cursor: pointer;
|
|
margin-right: 0.5rem;
|
|
transition: all ease-in-out 0.1s;
|
|
|
|
&:hover {
|
|
filter: brightness(150%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
align-items: inherit;
|
|
transition: all ease-in-out 0.4s;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.instances {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
|
width: 100%;
|
|
gap: 1rem;
|
|
margin-right: auto;
|
|
margin-top: 0.8rem;
|
|
scroll-behavior: smooth;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark-mode {
|
|
.row {
|
|
&:nth-child(odd) {
|
|
background-color: rgb(30, 31, 34);
|
|
}
|
|
}
|
|
}
|
|
</style> |