From b28255cafd481fe71f6d0172a3c5be86e82d7321 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 26 Sep 2024 18:39:32 -0700
Subject: [PATCH] WIP: Better styles for Rainbow Pool pet type page

---
 app/assets/stylesheets/pet_types/show.sass | 26 ++++++++++++++++++++++
 app/views/pet_states/_pet_state.html.haml  |  3 +--
 app/views/pet_types/show.html.haml         |  5 +++--
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/stylesheets/pet_types/show.sass

diff --git a/app/assets/stylesheets/pet_types/show.sass b/app/assets/stylesheets/pet_types/show.sass
new file mode 100644
index 00000000..613fde4a
--- /dev/null
+++ b/app/assets/stylesheets/pet_types/show.sass
@@ -0,0 +1,26 @@
+@import "../partials/clean/constants"
+
+.pet-states
+    list-style-type: none
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    gap: .5em
+
+    > li
+        width: 200px
+        max-width: calc(50% - .25em)
+        min-width: 150px
+        padding: .5em
+        box-sizing: border-box
+        text-align: center
+
+    outfit-viewer
+        width: 100%
+        height: auto
+        aspect-ratio: 1 / 1
+        z-index: -1
+        margin-bottom: -1em
+
+    .name
+        background: white
diff --git a/app/views/pet_states/_pet_state.html.haml b/app/views/pet_states/_pet_state.html.haml
index 71af1c2e..7a6a5e5d 100644
--- a/app/views/pet_states/_pet_state.html.haml
+++ b/app/views/pet_states/_pet_state.html.haml
@@ -1,6 +1,5 @@
 %li
 	= outfit_viewer pet_state:
-	= pose_name pet_state.pose
-	(#{pet_state.id})
+	%span.name= pose_name pet_state.pose
 	- if pet_state.glitched?
 		👾
diff --git a/app/views/pet_types/show.html.haml b/app/views/pet_types/show.html.haml
index d04ef993..15d56129 100644
--- a/app/views/pet_types/show.html.haml
+++ b/app/views/pet_types/show.html.haml
@@ -1,18 +1,19 @@
 - title "#{@pet_type.human_name}"
 - use_responsive_design
 
-%ul
+%ul.pet-states
 	= render @pet_states[:canonical]
 
 - if @pet_states[:other].present?
 	%details
 		%summary Other
-		%ul
+		%ul.pet-states
 			= render @pet_states[:other]
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/hanger-spinner"
 	= stylesheet_link_tag "application/outfit-viewer"
+	= stylesheet_link_tag "pet_types/show"
 
 - content_for :javascripts do
 	= javascript_include_tag "outfit-viewer", async: true