Use CSS grid for item page header

Just modernizing some stuff, hum dee dum
This commit is contained in:
Emi Matchu 2024-01-18 22:07:30 -08:00
parent 0be9dee6fc
commit e8db9cf729
2 changed files with 25 additions and 17 deletions

View file

@ -4,25 +4,33 @@
body.items-show
#item-header
border-bottom: 1px solid $module-border-color
display: block
margin-bottom: 1em
padding: 1em 0
div, img
+inline-block
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
div
#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%
a
font-size: 75%
margin-left: 1em
#item-thumbnail
border: 1px solid $module-border-color
height: 80px
margin-right: .5em
width: 80px
#item-links
grid-area: links
text-align: left
a
font-size: 75%
margin-left: 1em
#item-name
margin-bottom: 0

View file

@ -3,8 +3,8 @@
%header#item-header
= 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)
- unless @item.rarity.blank?
== #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity})