Add basic styles to trades page
Still not accessible via links, just exists!
This commit is contained in:
parent
402e3d4afb
commit
c6927c2ce8
7 changed files with 86 additions and 55 deletions
|
|
@ -17,6 +17,7 @@
|
|||
@import items
|
||||
@import items/index
|
||||
@import items/show
|
||||
@import item_trades/index
|
||||
@import outfits/index
|
||||
@import outfits/new
|
||||
@import pets/bulk
|
||||
|
|
|
|||
25
app/assets/stylesheets/item_trades/_index.sass
Normal file
25
app/assets/stylesheets/item_trades/_index.sass
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@import "../partials/item_header"
|
||||
|
||||
body.item_trades-index
|
||||
.item-header
|
||||
+item-header
|
||||
|
||||
.item-page-subtitle
|
||||
text-align: left
|
||||
|
||||
.trades-table
|
||||
text-align: left
|
||||
width: 100%
|
||||
table-layout: fixed
|
||||
|
||||
th:nth-child(1), th:nth-child(2)
|
||||
width: 15ch
|
||||
|
||||
.trade-list-names
|
||||
list-style: none
|
||||
|
||||
li
|
||||
display: inline
|
||||
|
||||
&:not(:last-child)::after
|
||||
content: ", "
|
||||
|
|
@ -1,42 +1,10 @@
|
|||
@import "../partials/clean/constants"
|
||||
@import "../partials/clean/mixins"
|
||||
@import "../partials/item_header"
|
||||
|
||||
body.items-show
|
||||
#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-thumbnail
|
||||
grid-area: img
|
||||
|
||||
border: 1px solid $module-border-color
|
||||
height: 80px
|
||||
width: 80px
|
||||
|
||||
#item-name
|
||||
grid-area: name
|
||||
|
||||
text-align: left
|
||||
line-height: 100%
|
||||
|
||||
#item-links
|
||||
grid-area: links
|
||||
|
||||
text-align: left
|
||||
a
|
||||
font-size: 75%
|
||||
margin-left: 1em
|
||||
|
||||
#item-name
|
||||
margin-bottom: 0
|
||||
.item-header
|
||||
+item-header
|
||||
|
||||
#item-info-section
|
||||
display: grid
|
||||
|
|
|
|||
33
app/assets/stylesheets/partials/_item_header.sass
Normal file
33
app/assets/stylesheets/partials/_item_header.sass
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
=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-thumbnail
|
||||
grid-area: img
|
||||
|
||||
border: 1px solid $module-border-color
|
||||
height: 80px
|
||||
width: 80px
|
||||
|
||||
#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
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
- title t(".title.#{@type}")
|
||||
- hide_title_header
|
||||
|
||||
= render partial: "items/item_header", locals: {item: @item}
|
||||
|
||||
%h2.item-page-subtitle= t(".title.#{@type}")
|
||||
|
||||
- if @trades.present?
|
||||
%table
|
||||
%table.trades-table
|
||||
%thead
|
||||
%tr
|
||||
%th= t(".table.headings.last_active")
|
||||
|
|
@ -21,9 +23,10 @@
|
|||
%td= trade.user.name
|
||||
%td
|
||||
- if trade.lists.present?
|
||||
%ul
|
||||
%ul.trade-list-names
|
||||
- trade.lists.each do |list|
|
||||
%li= list.name
|
||||
%li= link_to list.name, user_closet_hangers_path(trade.user,
|
||||
anchor: "closet-list-#{list.id}")
|
||||
- else
|
||||
%span.not-in-a-list= t(".table.not_in_a_list")
|
||||
- else
|
||||
|
|
|
|||
17
app/views/items/_item_header.haml
Normal file
17
app/views/items/_item_header.haml
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
%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)
|
||||
|
|
@ -1,23 +1,7 @@
|
|||
- title @item.name
|
||||
- canonical_path @item
|
||||
|
||||
%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 '.rarity'}: #{@item.rarity_index} (#{@item.rarity})
|
||||
= link_to t('.resources.jn_items'), jn_items_url_for(@item)
|
||||
- if @item.nc_trade_value
|
||||
= link_to t('.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('.resources.shop_wizard'), shop_wizard_url_for(@item)
|
||||
= link_to t('.resources.super_shop_wizard'), super_shop_wizard_url_for(@item)
|
||||
= link_to t('.resources.trading_post'), trading_post_url_for(@item)
|
||||
= link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
|
||||
= render partial: "item_header", locals: {item: @item}
|
||||
|
||||
%section#item-info-section
|
||||
#item-info
|
||||
|
|
|
|||
Loading…
Reference in a new issue