mirror of
https://github.com/BlossomiShymae/clean-cuts.git
synced 2025-12-06 10:10:47 +01:00
Update items page and viewer
This commit is contained in:
BlossomiShymae
24
app.vue
24
app.vue
@@ -131,4 +131,28 @@ ul.dropdown-menu {
|
|||||||
.z-index-10 {
|
.z-index-10 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tf-custom .tf-nc {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tf-custom .tf-nc:before,
|
||||||
|
.tf-custom .tf-nc:after {
|
||||||
|
border-left-color: #FBDCFB;
|
||||||
|
border-left-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tf-custom li li:before {
|
||||||
|
border-top-color: #FBDCFB;
|
||||||
|
border-top-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tf-ancestor-tree { position: relative; }
|
||||||
|
.tf-ancestor-tree > ul { transform: rotateX(180deg); }
|
||||||
|
.tf-ancestor-tree li ul { margin-bottom: 1em; }
|
||||||
|
|
||||||
|
.node-text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -36,6 +36,10 @@ export default defineNuxtConfig({
|
|||||||
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM",
|
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM",
|
||||||
crossorigin: "anonymous",
|
crossorigin: "anonymous",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
rel: "stylesheet",
|
||||||
|
href: "https://unpkg.com/treeflex/dist/css/treeflex.css"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
rel: "icon",
|
rel: "icon",
|
||||||
type: "image/png",
|
type: "image/png",
|
||||||
|
|||||||
64
pages/items/[id].vue
Normal file
64
pages/items/[id].vue
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Item } from '~/core/models';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const id = route.params.id as unknown;
|
||||||
|
|
||||||
|
const { client } = useClient();
|
||||||
|
const { currentLocale } = useLocale();
|
||||||
|
const getItems = async () => await client.items.listAsync({locale: currentLocale.value, version: "latest"});
|
||||||
|
|
||||||
|
const items = ref(await getItems());
|
||||||
|
const _default = new Item({});
|
||||||
|
|
||||||
|
const item = computed(() => items.value.find((x) => x.id == id) || _default);
|
||||||
|
const components = computed(() => item.value.from.map((id) => items.value.find((x) => x.id == id) || _default));
|
||||||
|
const composites = computed(() => item.value.to.map((id) => items.value.find((x) => x.id == id) || _default));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Card class="d-flex flex-row flex-wrap gap-2" data-aos="fade-right" data-aos-duration="1000">
|
||||||
|
<div class="pb-3">
|
||||||
|
<h1 class="display-4 mb-0"> {{ item.name }}</h1>
|
||||||
|
<p class="text-muted" v-html="item.description"></p>
|
||||||
|
<div class="d-flex flex-wrap gap-3">
|
||||||
|
<Badge label="ID">{{ item.id }}</Badge>
|
||||||
|
<Badge label="Price">{{ item.priceTotal }}</Badge>
|
||||||
|
<Badge label="Sell">{{ item.price }}</Badge>
|
||||||
|
<Badge label="" v-if="item.active">Active</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column justify-content-center align-items-center flex-grow-1">
|
||||||
|
<div class="tf-tree tf-custom">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="tf-nc">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<img class="border rounded border-dark" :src="item.getIcon('latest')"/>
|
||||||
|
<div class="text-center w-100">
|
||||||
|
{{ item.priceTotal }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<ul>
|
||||||
|
<li v-for="component in components" class="p-0">
|
||||||
|
<span class="tf-nc">
|
||||||
|
<NuxtLink class="text-decoration-none" :to="`/items/${component.id}`" :key="component.id">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<img class="border rounded" :src="component.getIcon('latest')"/>
|
||||||
|
<div class="text-center w-100">
|
||||||
|
{{ component.priceTotal }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NuxtLink>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -1,50 +1,4 @@
|
|||||||
<template>
|
|
||||||
<div class="d-flex flex-column gap-2">
|
|
||||||
<h1>Items</h1>
|
|
||||||
|
|
||||||
<div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
|
|
||||||
<table class="sortable table table-borderless">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">Id</th>
|
|
||||||
<th scope="col">Icon</th>
|
|
||||||
<th scope="col">Name</th>
|
|
||||||
<th scope="col">Price</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="item in items" :key="item.id" style="position: relative;">
|
|
||||||
<th scope="row">
|
|
||||||
<NuxtLink class="text-decoration-none text-light stretched-link" :to="`/items/overview/${item.id}`">
|
|
||||||
{{ item.id }}
|
|
||||||
</NuxtLink>
|
|
||||||
</th>
|
|
||||||
<td>
|
|
||||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
|
||||||
<img class="rounded" :src="item.getIcon('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src = '/clean-cuts/img/error.png'"/>
|
|
||||||
</NuxtLink>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
|
||||||
<span v-html="item.name"></span>
|
|
||||||
</NuxtLink>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
|
||||||
{{ item.priceTotal }}
|
|
||||||
</NuxtLink>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import useClient from '../../composables/useClient';
|
|
||||||
import useLocale from '~/composables/useLocale';
|
|
||||||
|
|
||||||
const { client } = useClient();
|
const { client } = useClient();
|
||||||
const { currentLocale } = useLocale();
|
const { currentLocale } = useLocale();
|
||||||
const getItems = async () => await client.items.listAsync({ locale: currentLocale.value, version: "latest"});
|
const getItems = async () => await client.items.listAsync({ locale: currentLocale.value, version: "latest"});
|
||||||
@@ -53,4 +7,24 @@ const items = ref(await getItems());
|
|||||||
watch(currentLocale, async () => {
|
watch(currentLocale, async () => {
|
||||||
items.value = await getItems();
|
items.value = await getItems();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="d-flex flex-row flex-wrap gap-2 justify-content-center">
|
||||||
|
<div v-for="item in items" :id="`${item.id}`"
|
||||||
|
style="width: 64px;"
|
||||||
|
data-aos="zoom-out"
|
||||||
|
data-aos-duration="500">
|
||||||
|
<NuxtLink :to="`/items/${item.id}`">
|
||||||
|
<div class="ratio ratio-1x1 position-relative">
|
||||||
|
<img class="rounded" :src="item.getIcon('latest')" loading="lazy"/>
|
||||||
|
<div class="position-absolute z-1 d-flex flex-column justify-content-end">
|
||||||
|
<div class="d-inline-flex justify-content-end align-items-center">
|
||||||
|
<span class="fw-bold bg-dark-subtle rounded m-1" style="font-size: 8pt; padding: 1px;">{{ item.id }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 col-sm-12">
|
|
||||||
<h1 class="display-4 mb-0"> {{ item.name }}</h1>
|
|
||||||
<p class="text-muted" v-html="item.description"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
|
|
||||||
<img class="border rounded border-dark" :src="item.getIcon('latest')"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="d-flex flex-wrap gap-3">
|
|
||||||
<Badge name="identifier">{{ item.id }}</Badge>
|
|
||||||
<Badge name="hand-coin">{{ item.priceTotal }}</Badge>
|
|
||||||
<Badge name="hand-coin-outline">{{ item.price }}</Badge>
|
|
||||||
<Badge name="keyboard-variant" v-if="item.active">Active</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mt-4">
|
|
||||||
<div class="col-md-6 col-sm-12 border-start border-light border-opacity-25 border-4"
|
|
||||||
v-if="components.length > 0">
|
|
||||||
<h4 class="fw-light">Component</h4>
|
|
||||||
<div class="d-flex justify-content-around align-items-center gap-2 flex-wrap">
|
|
||||||
<NuxtLink v-for="component in components" :to="`/items/overview/${component.id}`" :key="component.id">
|
|
||||||
<img class="border rounded border-dark" :src="component.getIcon('latest')"/>
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 col-sm-12 border-start border-light border-opacity-25 border-4"
|
|
||||||
v-if="composites.length > 0">
|
|
||||||
<h4 class="fw-light">Composite</h4>
|
|
||||||
<div class="d-flex justify-content-around align-items-center gap-2 flex-wrap">
|
|
||||||
<NuxtLink v-for="composite in composites" :to="`/items/overview/${composite.id}`" :key="composite.id">
|
|
||||||
<img class="border rounded border-dark" :src="composite.getIcon('latest')"/>
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useRoute } from 'vue-router';
|
|
||||||
import useClient from '../../../composables/useClient';
|
|
||||||
import useLocale from '~/composables/useLocale';
|
|
||||||
import { Item } from '~/core/models';
|
|
||||||
import Badge from '~/components/Badge.vue';
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const id = route.params.id as unknown;
|
|
||||||
|
|
||||||
const { client } = useClient();
|
|
||||||
const { currentLocale } = useLocale();
|
|
||||||
const getItems = async () => await client.items.listAsync({locale: currentLocale.value, version: "latest"});
|
|
||||||
|
|
||||||
const items = ref(await getItems());
|
|
||||||
const _default = new Item({});
|
|
||||||
|
|
||||||
const item = computed(() => items.value.find((x) => x.id == id) || _default);
|
|
||||||
const components = computed(() => item.value.from.map((id) => items.value.find((x) => x.id == id) || _default));
|
|
||||||
const composites = computed(() => item.value.to.map((id) => items.value.find((x) => x.id == id) || _default));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user