From e8db9cf72990459394d01076e0eb80ea1c1c6ab4 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 18 Jan 2024 22:07:30 -0800
Subject: [PATCH] Use CSS grid for item page header

Just modernizing some stuff, hum dee dum
---
 app/assets/stylesheets/items/_show.sass | 38 +++++++++++++++----------
 app/views/items/show.html.haml          |  4 +--
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 9b36962b..0bbebdb3 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -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
-      
-    div
+
+    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%
       
-    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
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index 4cb64ce9..dea9d2eb 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -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})