search

RaphaelDDL / e7db-ui

EpicSevenDB.com UI for game information, such as Heroes, Artifacts, Gear, Skills and anything else necessary to present the DB. Made with NUXT.js (Vue.js, Express, SASS)
https://epicsevendb.com
Other
10 stars 5 forks source link

Create component for Item tooltip #15

Closed RaphaelDDL closed 5 years ago

RaphaelDDL commented 5 years ago

Awakening, Skill ups, etc, all require items. We need some way of presenting it better, currently name and quantity, as Gold x15000, Molagora x1.

Create a list component (and list item) which receives an array as props and present a list of items. It will also have a tooltip component where on either hover or click, open said tooltip with the item name, type, description (maybe) and acquirable locations (dynamic height since some items have multiple locations).

Small wire of the idea:

image

where the list item component would look like the in-game Inventory->Other image

And the click/hover would be like the game's tooltip, with extra locations. OR a link to the page created by #8 for locations so doesn't bloat too much. image

RaphaelDDL commented 5 years ago

updated in-game menu image with better quality;

component work started

RaphaelDDL commented 5 years ago

Released on 0.8.0

Need to update this repo to link the commit :D

RaphaelDDL commented 5 years ago

How it looks:

image

2

image

willhausman commented 5 years ago

That looks awesome! Is it on click or hover? I'm specifically wondering how it behaves on mobile.

RaphaelDDL commented 5 years ago

@willhausman It's on both click and tap. Works on mobile too, same way as desktop :) The only thing is that popover will be a smaller (but scrolling inside works too).

I'm using v-tooltip vue plugin

RaphaelDDL commented 5 years ago

Repo updated to 0.8.0 @ 4499c11e49dc9dba94db4b03a5fc8da94b9753fd