Website - STAMPS OVERVIEW page - Tab header

[babalicious-io]

STAMPS OVERVIEW page

dev site

---

Styling of the tab header, filters, sorting and search

• Four tab selections to the left - ALL/POSH/CLASSIC/RECURSIVE - correlates to the NavBar STAMPS submenu and stamps section modules naming and content being used across the site
• To the right are buttons for sorting, filtering and search
• SORTING - asc/desc change on click
• FOR SALE - on click/active displays open dispensers - sorted asc pr default to show latest dispensers opened
• SALES - on click/active shows stamps sold - sorted asc pr default to show latest sales - if SALES is active FOR SALE cannot be (and vice versa)
• PIXEL - shows jpg/png/gif stamps
• VECTOR - shows svg/html stamps - both PIXEL and VECTOR are active when a user visits the page (unless coming form a link from one of the specific stamps section modules)
• SEARCH - on click it expands to the left so the user can type.
  On click of search icon again, or outside of the search box, or press of ESC it contracts to icon button state again.
  Would be cool if the rest of the site gets blurred a little when expanded - less distraction.

• EDITIONS and RANGE filtering in v2 - modal popup with selections (1/1 // <50 // <100 // <1000)

• No PIXEL or VECTOR filters for RECURSIVE view - can add TRAITS/SUPPLY filters (v2 - when the sorting of recursives is in place)

---

Any suggestions for better naming, preferably one worders ?
Other types of filtering ?

---

Issue created: stampchain-io/BTCStampsExplorer#76

[babalicious-io]

Inspiration

Search bar
https://codepen.io/k185/pen/PQajXE
https://lexingtonthemes.com/tutorials/how-to-create-an-exapandable-search-bar-with-tailwind-css/

[babalicious-io]

The search only works with STAMPS atm.
SRC20 and text (FAQ) search in v2.

[reinamora137]

note - Now that i have src-721 in as PNG - those won't filter as vector, only recursive after that. This may change some of our filter name options.

[reinamora137]

To Clarify:

Recursive = SRC-721 / R
Classic = +# Stamps, with the exclusion of SRC-20
Posh = named stamps
All = + AND - # Stamps, excluding SRC-20 ??

[reinamora137]

Maybe we go with 'SOLD' on the filter. instead of SALES -- SALES seems a little too close to FOR SALE.

[babalicious-io]

SOLD sounds much better !

[babalicious-io]

ALL depends on the context.

ALL in relation to STAMPS are:
Posh/Classic/Recursive

ALL in relation to SRC-20 are:
Deploy/Mint/transfer

[babalicious-io]

I realise that there are going to be at least 3 more filters in v2 and vaults coming as well.

So there will be +3 more buttons on the website tab header which will create a conflict with the tab menus (to the left), design/spacing issues and a whole lot of buttons.

There will probably be a couple of additional tab menus in future updates as well - GLYPHS/SRC-101

Instead of addressing this in v2 we may as well get it right from the beginning.

---

New layout

---

The idea with the MENU (filter) button is to have it expand out as described with the search button.

[babalicious-io]

New simplified tab header with just ALL and COLLECTIONS tabs.
Collections display Posh and Recursive stamps.

[babalicious-io]

Mobile version - width 360px

The filter open, expands right and down to better display the filters. it will make room for more filters in v2.
You can add a breakpoint at 420px where the filter opens horizontally right (and not down) - like the search bar.

[babalicious-io]

Search button moved right.

Filter open expands vertically down.

Search bar open.

[babalicious-io]

The tab design has been scraped and everything is now accessible in the filter menu.
The filter menu is changed to vertical dropdown.