Add tab navigation to get to item trade pages
This commit is contained in:
parent
4b9e11fc2a
commit
eb6f196b15
7 changed files with 116 additions and 44 deletions
|
|
@ -4,8 +4,9 @@ body.item_trades-index
|
|||
.item-header
|
||||
+item-header
|
||||
|
||||
.item-page-subtitle
|
||||
.item-subpage-title
|
||||
text-align: left
|
||||
margin-bottom: .5em
|
||||
|
||||
.trades-table
|
||||
text-align: left
|
||||
|
|
|
|||
|
|
@ -3,33 +3,77 @@
|
|||
=item-header
|
||||
border-bottom: 1px solid $module-border-color
|
||||
margin-bottom: 1em
|
||||
padding: 1em 0
|
||||
|
||||
display: grid
|
||||
grid-template-areas: "img gap1" "img name" "img links" "img gap2"
|
||||
align-items: center
|
||||
justify-content: center
|
||||
column-gap: 1em
|
||||
row-gap: .5em
|
||||
.item-header-main
|
||||
padding: 1em 0
|
||||
|
||||
#item-thumbnail
|
||||
grid-area: img
|
||||
display: grid
|
||||
grid-template-areas: "img gap1" "img name" "img links" "img gap2" "nav nav"
|
||||
align-items: center
|
||||
justify-content: center
|
||||
column-gap: 1em
|
||||
row-gap: .5em
|
||||
|
||||
border: 1px solid $module-border-color
|
||||
height: 80px
|
||||
width: 80px
|
||||
.item-thumbnail
|
||||
grid-area: img
|
||||
|
||||
#item-name
|
||||
grid-area: name
|
||||
border: 1px solid $module-border-color
|
||||
height: 80px
|
||||
width: 80px
|
||||
|
||||
text-align: left
|
||||
line-height: 100%
|
||||
margin-bottom: 0
|
||||
|
||||
#item-links
|
||||
grid-area: links
|
||||
.item-name
|
||||
grid-area: name
|
||||
|
||||
text-align: left
|
||||
line-height: 100%
|
||||
margin-bottom: 0
|
||||
|
||||
.item-links
|
||||
grid-area: links
|
||||
|
||||
text-align: left
|
||||
a
|
||||
font-size: 75%
|
||||
margin-left: 1em
|
||||
|
||||
.item-subpages-nav
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
|
||||
.preview-link
|
||||
margin-right: auto
|
||||
|
||||
.trades-section
|
||||
display: flex
|
||||
gap: .5em
|
||||
|
||||
header
|
||||
align-self: center
|
||||
font-weight: bold
|
||||
|
||||
&::after
|
||||
content: ":"
|
||||
|
||||
ul
|
||||
align-self: flex-end
|
||||
list-style: none
|
||||
display: flex
|
||||
gap: .5em
|
||||
|
||||
li
|
||||
display: block
|
||||
|
||||
text-align: left
|
||||
a
|
||||
font-size: 75%
|
||||
margin-left: 1em
|
||||
display: block
|
||||
border: 1px solid $module-border-color
|
||||
border-bottom: 0
|
||||
border-radius: .5em .5em 0 0
|
||||
padding: .5em 1em
|
||||
text-decoration: none
|
||||
|
||||
&:hover, &:focus
|
||||
text-decoration: underline
|
||||
|
||||
&[data-is-current=true]
|
||||
background: $module-bg-color
|
||||
font-weight: bold
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
- title t(".title.#{@type}")
|
||||
- hide_title_header
|
||||
|
||||
= render partial: "items/item_header", locals: {item: @item}
|
||||
= render partial: "items/item_header",
|
||||
locals: {item: @item, current_subpage: "trades_#{@type}"}
|
||||
|
||||
%h2.item-page-subtitle= t(".title.#{@type}")
|
||||
%h2.item-subpage-title= t(".title.#{@type}")
|
||||
|
||||
- if @trades.present?
|
||||
%table.trades-table
|
||||
|
|
|
|||
|
|
@ -1,17 +1,36 @@
|
|||
- raise ArgumentError unless defined? item
|
||||
- raise ArgumentError unless defined? current_subpage
|
||||
|
||||
%header.item-header
|
||||
= image_tag item.thumbnail_url, id: 'item-thumbnail'
|
||||
%h2#item-name= item.name
|
||||
%nav#item-links
|
||||
= nc_icon_for(item)
|
||||
- unless item.rarity.blank?
|
||||
== #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
|
||||
= link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
|
||||
- if item.nc_trade_value
|
||||
= link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),
|
||||
"https://www.neopets.com/~owls",
|
||||
title: nc_trade_value_updated_at_text(item.nc_trade_value)
|
||||
- unless item.nc?
|
||||
= link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item)
|
||||
= link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item)
|
||||
= link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
|
||||
= link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
|
||||
.item-header-main
|
||||
= image_tag item.thumbnail_url, class: 'item-thumbnail'
|
||||
%h2.item-name= item.name
|
||||
%nav.item-links
|
||||
= nc_icon_for(item)
|
||||
- unless item.rarity.blank?
|
||||
== #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
|
||||
= link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
|
||||
- if item.nc_trade_value
|
||||
= link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),
|
||||
"https://www.neopets.com/~owls",
|
||||
title: nc_trade_value_updated_at_text(item.nc_trade_value)
|
||||
- unless item.nc?
|
||||
= link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item)
|
||||
= link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item)
|
||||
= link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
|
||||
= link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
|
||||
|
||||
%nav.item-subpages-nav
|
||||
= link_to t('items.show.subpages_nav.preview'), item,
|
||||
class: ['preview-link'], 'data-is-current' => current_subpage == 'preview'
|
||||
.trades-section
|
||||
%header= t('items.show.subpages_nav.trades.header')
|
||||
%ul
|
||||
%li
|
||||
= link_to t('items.show.subpages_nav.trades.offering'),
|
||||
item_trades_path(item, type: 'offering'),
|
||||
'data-is-current' => current_subpage == 'trades_offering'
|
||||
%li
|
||||
= link_to t('items.show.subpages_nav.trades.seeking'),
|
||||
item_trades_path(item, type: 'seeking'),
|
||||
'data-is-current' => current_subpage == 'trades_seeking'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
- title @item.name
|
||||
- canonical_path @item
|
||||
|
||||
= render partial: "item_header", locals: {item: @item}
|
||||
= render partial: "item_header",
|
||||
locals: {item: @item, current_subpage: "preview"}
|
||||
|
||||
%section#item-info-section
|
||||
#item-info
|
||||
|
|
|
|||
|
|
@ -326,6 +326,12 @@ en:
|
|||
other: "%{count} users want this item:"
|
||||
show_more: more
|
||||
show_less: less
|
||||
subpages_nav:
|
||||
preview: Preview
|
||||
trades:
|
||||
header: Trades
|
||||
offering: Offering
|
||||
seeking: Seeking
|
||||
preview:
|
||||
header: Preview
|
||||
customize_more: Customize more
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ OpenneoImpressItems::Application.routes.draw do
|
|||
# Our customization data! Both the item pages, and JSON API endpoints.
|
||||
resources :items, :only => [:index, :show] do
|
||||
resources :trades, path: 'trades/:type', controller: 'item_trades',
|
||||
only: [:index], constraints: {type: ['offering', 'seeking']}
|
||||
only: [:index], constraints: {type: /offering|seeking/}
|
||||
|
||||
resources :appearances, controller: 'item_appearances', only: [:index]
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue