From eb6f196b15b2fdcebf8089585107b9c3888e55af Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sun, 21 Jan 2024 04:40:25 -0800 Subject: [PATCH] Add tab navigation to get to item trade pages --- .../stylesheets/item_trades/_index.sass | 3 +- .../stylesheets/partials/_item_header.sass | 90 ++++++++++++++----- app/views/item_trades/index.html.haml | 5 +- app/views/items/_item_header.haml | 51 +++++++---- app/views/items/show.html.haml | 3 +- config/locales/en.yml | 6 ++ config/routes.rb | 2 +- 7 files changed, 116 insertions(+), 44 deletions(-) diff --git a/app/assets/stylesheets/item_trades/_index.sass b/app/assets/stylesheets/item_trades/_index.sass index bdf61c69..007c5a05 100644 --- a/app/assets/stylesheets/item_trades/_index.sass +++ b/app/assets/stylesheets/item_trades/_index.sass @@ -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 diff --git a/app/assets/stylesheets/partials/_item_header.sass b/app/assets/stylesheets/partials/_item_header.sass index 07beb780..c48ef7b0 100644 --- a/app/assets/stylesheets/partials/_item_header.sass +++ b/app/assets/stylesheets/partials/_item_header.sass @@ -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 \ No newline at end of file + 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 \ No newline at end of file diff --git a/app/views/item_trades/index.html.haml b/app/views/item_trades/index.html.haml index 853caa99..0c7d8a2e 100644 --- a/app/views/item_trades/index.html.haml +++ b/app/views/item_trades/index.html.haml @@ -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 diff --git a/app/views/items/_item_header.haml b/app/views/items/_item_header.haml index 4fd7f5fd..d93fccb1 100644 --- a/app/views/items/_item_header.haml +++ b/app/views/items/_item_header.haml @@ -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' diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index 07880e18..2c23282a 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -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 diff --git a/config/locales/en.yml b/config/locales/en.yml index ab35761f..dd90ef76 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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 diff --git a/config/routes.rb b/config/routes.rb index 927f178e..a4ddd281 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -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]