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
|
||||||
@import items/index
|
@import items/index
|
||||||
@import items/show
|
@import items/show
|
||||||
|
@import item_trades/index
|
||||||
@import outfits/index
|
@import outfits/index
|
||||||
@import outfits/new
|
@import outfits/new
|
||||||
@import pets/bulk
|
@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/constants"
|
||||||
@import "../partials/clean/mixins"
|
@import "../partials/clean/mixins"
|
||||||
|
@import "../partials/item_header"
|
||||||
|
|
||||||
body.items-show
|
body.items-show
|
||||||
#item-header
|
.item-header
|
||||||
border-bottom: 1px solid $module-border-color
|
+item-header
|
||||||
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-info-section
|
#item-info-section
|
||||||
display: grid
|
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}")
|
- title t(".title.#{@type}")
|
||||||
- hide_title_header
|
- hide_title_header
|
||||||
|
|
||||||
|
= render partial: "items/item_header", locals: {item: @item}
|
||||||
|
|
||||||
%h2.item-page-subtitle= t(".title.#{@type}")
|
%h2.item-page-subtitle= t(".title.#{@type}")
|
||||||
|
|
||||||
- if @trades.present?
|
- if @trades.present?
|
||||||
%table
|
%table.trades-table
|
||||||
%thead
|
%thead
|
||||||
%tr
|
%tr
|
||||||
%th= t(".table.headings.last_active")
|
%th= t(".table.headings.last_active")
|
||||||
|
@ -21,9 +23,10 @@
|
||||||
%td= trade.user.name
|
%td= trade.user.name
|
||||||
%td
|
%td
|
||||||
- if trade.lists.present?
|
- if trade.lists.present?
|
||||||
%ul
|
%ul.trade-list-names
|
||||||
- trade.lists.each do |list|
|
- 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
|
- else
|
||||||
%span.not-in-a-list= t(".table.not_in_a_list")
|
%span.not-in-a-list= t(".table.not_in_a_list")
|
||||||
- else
|
- 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
|
- title @item.name
|
||||||
- canonical_path @item
|
- canonical_path @item
|
||||||
|
|
||||||
%header#item-header
|
= render partial: "item_header", locals: {item: @item}
|
||||||
= 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)
|
|
||||||
|
|
||||||
%section#item-info-section
|
%section#item-info-section
|
||||||
#item-info
|
#item-info
|
||||||
|
|
Loading…
Reference in a new issue