forked from OpenNeo/impress
Use CSS grid for item page header
Just modernizing some stuff, hum dee dum
This commit is contained in:
parent
0be9dee6fc
commit
e8db9cf729
2 changed files with 25 additions and 17 deletions
|
@ -4,25 +4,33 @@
|
||||||
body.items-show
|
body.items-show
|
||||||
#item-header
|
#item-header
|
||||||
border-bottom: 1px solid $module-border-color
|
border-bottom: 1px solid $module-border-color
|
||||||
display: block
|
|
||||||
margin-bottom: 1em
|
margin-bottom: 1em
|
||||||
padding: 1em 0
|
padding: 1em 0
|
||||||
|
|
||||||
div, img
|
display: grid
|
||||||
+inline-block
|
grid-template-areas: "img gap1" "img name" "img links" "img gap2"
|
||||||
|
align-items: center
|
||||||
div
|
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
|
text-align: left
|
||||||
|
line-height: 100%
|
||||||
|
|
||||||
a
|
#item-links
|
||||||
font-size: 75%
|
grid-area: links
|
||||||
margin-left: 1em
|
text-align: left
|
||||||
|
a
|
||||||
#item-thumbnail
|
font-size: 75%
|
||||||
border: 1px solid $module-border-color
|
margin-left: 1em
|
||||||
height: 80px
|
|
||||||
margin-right: .5em
|
|
||||||
width: 80px
|
|
||||||
|
|
||||||
#item-name
|
#item-name
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
|
|
||||||
%header#item-header
|
%header#item-header
|
||||||
= image_tag @item.thumbnail_url, :id => 'item-thumbnail'
|
= image_tag @item.thumbnail_url, :id => 'item-thumbnail'
|
||||||
%div
|
%h2#item-name= @item.name
|
||||||
%h2#item-name= @item.name
|
%nav#item-links
|
||||||
= nc_icon_for(@item)
|
= nc_icon_for(@item)
|
||||||
- unless @item.rarity.blank?
|
- unless @item.rarity.blank?
|
||||||
== #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity})
|
== #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity})
|
||||||
|
|
Loading…
Reference in a new issue