Update items page and viewer

app.vue

@@ -131,4 +131,28 @@ ul.dropdown-menu {
 .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>

nuxt.config.ts

@@ -36,6 +36,10 @@ export default defineNuxtConfig({
             "sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM",
           crossorigin: "anonymous",
         },
+        {
+          rel: "stylesheet",
+          href: "https://unpkg.com/treeflex/dist/css/treeflex.css"
+        },
         {
           rel: "icon",
           type: "image/png",

pages/items/[id].vue

@@ -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>

pages/items/index.vue

@@ -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">
-import useClient from '../../composables/useClient';
-import useLocale from '~/composables/useLocale';
-
 const { client } = useClient();
 const { currentLocale } = useLocale();
 const getItems = async () => await client.items.listAsync({ locale: currentLocale.value, version: "latest"});
@@ -54,3 +8,23 @@ watch(currentLocale, async () => {
     items.value = await getItems();
 });
 </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>

pages/items/overview/[id].vue

@@ -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>