OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Add tab navigation to get to item trade pages

Browse source
This commit is contained in:
Emi Matchu 2024-01-21 04:40:25 -08:00
parent 4b9e11fc2a
commit eb6f196b15
7 changed files with 116 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/item_trades/_index.sass
View file

@ -4,8 +4,9 @@ body.item_trades-index
.item-header .item-header
+item-header +item-header
.item-page-subtitle .item-subpage-title
text-align: left text-align: left
margin-bottom: .5em
.trades-table .trades-table
text-align: left text-align: left

90
app/assets/stylesheets/partials/_item_header.sass
View file

@ -3,33 +3,77 @@
=item-header =item-header
border-bottom: 1px solid $module-border-color border-bottom: 1px solid $module-border-color
margin-bottom: 1em margin-bottom: 1em
padding: 1em 0
display: grid .item-header-main
grid-template-areas: "img gap1" "img name" "img links" "img gap2" padding: 1em 0
align-items: center
justify-content: center
column-gap: 1em
row-gap: .5em
#item-thumbnail display: grid
grid-area: img 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 .item-thumbnail
height: 80px grid-area: img
width: 80px
#item-name border: 1px solid $module-border-color
grid-area: name height: 80px
width: 80px
text-align: left .item-name
line-height: 100% grid-area: name
margin-bottom: 0
text-align: left
#item-links line-height: 100%
grid-area: links 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 a
font-size: 75% display: block
margin-left: 1em 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

5
app/views/item_trades/index.html.haml
View file

@ -1,9 +1,10 @@
- title t(".title.#{@type}") - title t(".title.#{@type}")
- hide_title_header - 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? - if @trades.present?
%table.trades-table %table.trades-table

51
app/views/items/_item_header.haml
View file

@ -1,17 +1,36 @@
- raise ArgumentError unless defined? item
- raise ArgumentError unless defined? current_subpage
%header.item-header %header.item-header
= image_tag item.thumbnail_url, id: 'item-thumbnail' .item-header-main
%h2#item-name= item.name = image_tag item.thumbnail_url, class: 'item-thumbnail'
%nav#item-links %h2.item-name= item.name
= nc_icon_for(item) %nav.item-links
- unless item.rarity.blank? = nc_icon_for(item)
== #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity}) - unless item.rarity.blank?
= link_to t('items.show.resources.jn_items'), jn_items_url_for(item) == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
- if item.nc_trade_value = link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
= link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text), - if item.nc_trade_value
"https://www.neopets.com/~owls", = link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),
title: nc_trade_value_updated_at_text(item.nc_trade_value) "https://www.neopets.com/~owls",
- unless item.nc? title: nc_trade_value_updated_at_text(item.nc_trade_value)
= link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item) - unless item.nc?
= link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item) = link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item)
= link_to t('items.show.resources.trading_post'), trading_post_url_for(item) = link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item)
= link_to t('items.show.resources.auction_genie'), auction_genie_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'

3
app/views/items/show.html.haml
View file

@ -1,7 +1,8 @@
- title @item.name - title @item.name
- canonical_path @item - canonical_path @item
= render partial: "item_header", locals: {item: @item} = render partial: "item_header",
locals: {item: @item, current_subpage: "preview"}
%section#item-info-section %section#item-info-section
#item-info #item-info

6
config/locales/en.yml
View file

@ -326,6 +326,12 @@ en:
other: "%{count} users want this item:" other: "%{count} users want this item:"
show_more: more show_more: more
show_less: less show_less: less
subpages_nav:
preview: Preview
trades:
header: Trades
offering: Offering
seeking: Seeking
preview: preview:
header: Preview header: Preview
customize_more: Customize more customize_more: Customize more

2
config/routes.rb
View file

@ -19,7 +19,7 @@ OpenneoImpressItems::Application.routes.draw do
# Our customization data! Both the item pages, and JSON API endpoints. # Our customization data! Both the item pages, and JSON API endpoints.
resources :items, :only => [:index, :show] do resources :items, :only => [:index, :show] do
resources :trades, path: 'trades/:type', controller: 'item_trades', 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] resources :appearances, controller: 'item_appearances', only: [:index]