From 6dd8e585a357566185bd26126fbbd3c3493fccc2 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 5 Sep 2024 16:18:48 -0700
Subject: [PATCH] Add responsive layout for item page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!
---
 app/assets/stylesheets/_items.sass                | 12 +++++++++---
 app/assets/stylesheets/_responsive.sass           | 12 ++++++++++++
 app/assets/stylesheets/application.css.sass       |  1 +
 app/assets/stylesheets/partials/_item_header.sass |  4 +++-
 app/helpers/application_helper.rb                 | 11 ++++++++++-
 app/views/items/show.html.haml                    |  1 +
 app/views/layouts/application.html.haml           |  2 ++
 app/views/layouts/items.html.haml                 |  2 +-
 8 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/stylesheets/_responsive.sass

diff --git a/app/assets/stylesheets/_items.sass b/app/assets/stylesheets/_items.sass
index 1083a4db..56a5987b 100644
--- a/app/assets/stylesheets/_items.sass
+++ b/app/assets/stylesheets/_items.sass
@@ -5,9 +5,15 @@ body.items-index, body.items-show, body.items-needed, body.item_trades
 
   text-align: center
 
-  input[type=text]
-    font-size: 125%
-    width: 15em
+  .item-search-form
+    display: flex
+    gap: .5em
+    justify-content: center
+
+    input[type=text]
+      font-size: 125%
+      width: 15em
+      flex: 0 1 auto
 
   h1
     margin-bottom: 1em
diff --git a/app/assets/stylesheets/_responsive.sass b/app/assets/stylesheets/_responsive.sass
new file mode 100644
index 00000000..5d8e7c57
--- /dev/null
+++ b/app/assets/stylesheets/_responsive.sass
@@ -0,0 +1,12 @@
+body.use-responsive-design
+    #container
+        max-width: 100%
+        padding-inline: 1rem
+        box-sizing: border-box
+
+    #home-link
+        margin-left: 1rem
+        padding-inline: 0
+
+    #userbar
+        margin-right: 1rem
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 8a724ef8..f2bf8540 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -4,6 +4,7 @@
 @import partials/clean/mixins
 
 @import layout
+@import responsive
 
 @import partials/jquery.jgrowl
 
diff --git a/app/assets/stylesheets/partials/_item_header.sass b/app/assets/stylesheets/partials/_item_header.sass
index 47fad34a..93901115 100644
--- a/app/assets/stylesheets/partials/_item_header.sass
+++ b/app/assets/stylesheets/partials/_item_header.sass
@@ -35,6 +35,7 @@
       text-align: left
       display: flex
       align-items: center
+      flex-wrap: wrap
       gap: 1em
 
       abbr
@@ -127,6 +128,7 @@
   .item-subpages-nav
     display: flex
     align-items: flex-end
+    gap: 1em
 
     .preview-link
       margin-right: auto
@@ -167,4 +169,4 @@
         background: $background-color
         padding-bottom: calc(.5em + 1px)
         font-weight: bold
-        margin-bottom: -1px
\ No newline at end of file
+        margin-bottom: -1px
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3ec615ff..e931b81a 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,6 +1,6 @@
 module ApplicationHelper
   include FragmentLocalization
-  
+
   def absolute_url(path_or_url)
     if path_or_url.include?('://') # already an absolute URL
       path_or_url
@@ -231,6 +231,15 @@ module ApplicationHelper
     @hide_title_header = true
   end
 
+  def use_responsive_design
+    @use_responsive_design = true
+    add_body_class "use-responsive-design"
+  end
+
+  def use_responsive_design?
+    @use_responsive_design || false
+  end
+
   def signed_in_meta_tag
     %(<meta name="user-signed-in" content="#{user_signed_in?}">).html_safe
   end
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index 2326289b..41453820 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -1,5 +1,6 @@
 - title @item.name
 - canonical_path @item
+- use_responsive_design
 
 = render partial: "item_header",
   locals: {item: @item, trades: @trades, current_subpage: "preview",
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index ab53ffd2..8dcf55e3 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -13,6 +13,8 @@
     %link{href: image_path('favicon.png'), rel: 'icon'}
     = yield :stylesheets
     = stylesheet_link_tag "application"
+    - if use_responsive_design?
+      %meta{name: "viewport", content: "width=device-width, initial-scale=1"}
     = yield :meta
     = open_graph_tags
     = csrf_meta_tag
diff --git a/app/views/layouts/items.html.haml b/app/views/layouts/items.html.haml
index 151b226e..0a8ea5cd 100644
--- a/app/views/layouts/items.html.haml
+++ b/app/views/layouts/items.html.haml
@@ -7,7 +7,7 @@
       = image_tag 'https://images.neopets.com/items/mall_floatingneggfaerie.gif'
       %span= t 'infinite_closet'
 - content_for :content do
-  = form_tag items_path, :method => :get do
+  = form_tag items_path, method: :get, class: "item-search-form" do
     = text_field_tag :q, @query.to_s
     = submit_tag t('.search'), :name => nil
   = yield