na

Gemfile.lock

@@ -84,7 +84,7 @@ GEM
     benchmark (0.4.0)
     bigdecimal (3.1.9)
     bindex (0.8.1)
-    bootsnap (1.18.4)
+    bootsnap (1.18.5)
       msgpack (~> 1.2)
     builder (3.3.0)
     concurrent-ruby (1.3.5)
@@ -156,7 +156,7 @@ GEM
       benchmark
       logger
     mini_mime (1.1.5)
-    mini_portile2 (2.8.8)
+    mini_portile2 (2.8.9)
     minitest (5.25.5)
     mobility (1.3.2)
       i18n (>= 0.6.10, < 2)
@@ -205,7 +205,7 @@ GEM
       activesupport (>= 7.0.0)
       rack
       railties (>= 7.0.0)
-    psych (5.2.5)
+    psych (5.2.6)
       date
       stringio
     public_suffix (6.0.2)

app/assets/images/ikea-foundation-203x22.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 22">
+<path d="M54.15,22H0V0h54.15v22Z" style="fill:#0058a3;"/>
+<path d="M1.06,11c0,5.32,10.91,9.73,26.02,9.73s26.02-4.41,26.02-9.73S42.19,1.27,27.08,1.27,1.06,5.68,1.06,11Z" style="fill:#ffdb00;"/>
+<path d="M25.54,14.12c.16.24.34.46.57.69h-5.86c0-.23-.22-.7-.47-1.08-.25-.37-1.59-2.41-1.59-2.41v2.8c0,.23,0,.46.11.69h-4.88c.11-.23.11-.46.11-.69v-6.66c0-.23,0-.46-.11-.69h4.88c-.11.23-.11.46-.11.69v2.91s1.56-2.03,1.92-2.5c.27-.36.61-.86.61-1.09h5.09c-.35.23-.74.66-1.05,1.04-.28.34-1.87,2.27-1.87,2.27,0,0,2.35,3.58,2.65,4.04ZM27.08,7.46v6.66c0,.23,0,.46-.11.69h9.42v-2.23c-.23.11-.46.11-.69.11h-3.96v-1.06h3.81v-1.69h-3.81v-1.06h3.96c.23,0,.46,0,.69.11v-2.23h-9.42c.11.23.11.46.11.69ZM49.44,14.12c.09.23.18.46.38.69h-5.11c.03-.23-.06-.46-.15-.69,0,0-.08-.19-.18-.46,0-.02-.05-.12-.05-.12h-2.94l-.04.12s-.08.23-.17.46c-.08.23-.17.46-.13.69h-4.03c.2-.23.28-.46.36-.69.13-.37,2.23-6.14,2.42-6.66.08-.23.17-.46.13-.69h6.81c-.06.23.06.46.15.69.2.51,2.38,6.21,2.55,6.66ZM43.69,11.85c-.37-.97-.68-1.78-.71-1.86-.09-.23-.16-.53-.16-.53,0,0-.06.3-.14.53-.03.07-.32.89-.67,1.86h1.68ZM11.11,6.77h-5.31c.11.23.11.46.11.69v6.66c0,.23,0,.46-.11.69h5.31c-.11-.23-.11-.46-.11-.69v-6.66c0-.23,0-.46.11-.69ZM47.81,7.4c0-.61.44-1.06,1.06-1.06s1.06.44,1.06,1.06-.44,1.06-1.06,1.06-1.06-.44-1.06-1.06ZM48.02,7.4c0,.47.35.85.85.85.47,0,.85-.35.85-.85,0-.47-.35-.85-.85-.85s-.85.35-.85.85ZM48.65,8.04h-.19v-1.27h.48c.22,0,.4.19.4.41,0,.16-.09.31-.22.37l.27.49h-.21l-.25-.45h-.27v.45h0ZM48.65,7.4h.26c.13,0,.24-.09.24-.22s-.11-.22-.24-.22h-.26v.45Z" style="fill:#0058a3;"/>
+<path class="logo-text" d="M108.37,17.6V4.4h7.38v1.46h-5.71v4.68h5.36v1.46h-5.36v5.6h-1.66,0ZM121.58,17.78c-2.62,0-4.55-1.87-4.55-5.16s1.76-5.12,4.6-5.12c2.68,0,4.57,1.85,4.57,5.12s-1.79,5.16-4.62,5.16ZM121.62,16.44c2,0,2.9-1.46,2.9-3.81s-.91-3.75-2.92-3.75-2.88,1.4-2.88,3.75.89,3.81,2.9,3.81ZM136.59,17.6h-1.33l-.24-1.31h-.07c-.65,1.04-1.87,1.5-3.14,1.5-2.38,0-3.6-1.09-3.6-3.61v-6.49h1.65v6.38c0,1.59.7,2.37,2.2,2.37,2.2,0,2.92-1.28,2.92-3.59v-5.16h1.63v9.91h0ZM147.7,11.15v6.45h-1.61v-6.34c0-1.59-.7-2.39-2.22-2.39-2.2,0-2.9,1.28-2.9,3.59v5.14h-1.63V7.69h1.31l.24,1.35h.09c.65-1.04,1.87-1.53,3.12-1.53,2.37,0,3.59,1.09,3.59,3.64ZM150.06,12.66c0-3.4,1.63-5.16,4.08-5.16,1.54,0,2.46.65,3.07,1.46h.11c-.04-.31-.11-1.09-.11-1.46v-3.96h1.63v14.05h-1.31l-.24-1.33h-.07c-.59.85-1.53,1.52-3.09,1.52-2.46,0-4.07-1.72-4.07-5.12ZM157.23,12.98v-.3c0-2.46-.67-3.83-2.87-3.83-1.76,0-2.62,1.5-2.62,3.85s.87,3.73,2.64,3.73c2.09,0,2.85-1.15,2.85-3.46ZM169.13,10.85v6.75h-1.18l-.31-1.4h-.07c-.87,1.09-1.66,1.59-3.33,1.59-1.79,0-3.12-.92-3.12-2.94s1.52-3.07,4.75-3.16l1.68-.06v-.59c0-1.65-.76-2.2-2.05-2.2-1.04,0-1.98.37-2.79.76l-.5-1.22c.87-.46,2.09-.85,3.38-.85,2.4,0,3.55,1.02,3.55,3.33h0ZM166.06,12.81c-2.48.09-3.27.79-3.27,2.05,0,1.11.74,1.61,1.81,1.61,1.66,0,2.92-.91,2.92-2.83v-.89l-1.46.06ZM176.82,16.25v1.24c-.35.17-1.07.3-1.66.3-1.55,0-2.9-.67-2.9-3.07v-5.77h-1.4v-.78l1.42-.65.65-2.11h.96v2.27h2.86v1.26h-2.86v5.73c0,1.2.65,1.77,1.55,1.77.48,0,1.07-.09,1.39-.2ZM180.57,5.01c0,.7-.44,1.04-.94,1.04-.54,0-.96-.33-.96-1.04s.43-1.04.96-1.04c.5,0,.94.31.94,1.04ZM180.42,17.6h-1.63V7.69h1.63v9.91ZM187.25,17.78c-2.62,0-4.55-1.87-4.55-5.16s1.76-5.12,4.6-5.12c2.68,0,4.57,1.85,4.57,5.12s-1.79,5.16-4.62,5.16ZM187.29,16.44c2,0,2.9-1.46,2.9-3.81s-.9-3.75-2.92-3.75-2.88,1.4-2.88,3.75.89,3.81,2.9,3.81ZM202.56,11.15v6.45h-1.61v-6.34c0-1.59-.7-2.39-2.22-2.39-2.2,0-2.9,1.28-2.9,3.59v5.14h-1.63V7.69h1.31l.24,1.35h.09c.65-1.04,1.87-1.53,3.12-1.53,2.37,0,3.59,1.09,3.59,3.64ZM65.16,4.4h1.66v13.2h-1.66V4.4ZM78.12,17.6l-4.68-6.3-1.35,1.18v5.12h-1.66V4.4h1.66v6.51c.74-.83,1.52-1.66,2.27-2.51l3.57-3.99h1.94l-5.23,5.75,5.44,7.45h-1.96ZM81.87,17.6V4.4h7.38v1.46h-5.71v4.12h5.38v1.44h-5.38v4.71h5.71v1.46h-7.38ZM98.84,13.51h-5.23l-1.57,4.09h-1.68l5.16-13.26h1.5l5.14,13.26h-1.72l-1.59-4.09ZM96.86,8.04c-.11-.3-.5-1.52-.63-1.98-.18.76-.43,1.55-.57,1.98l-1.5,3.99h4.18l-1.48-3.99Z"/>
+</svg>

app/assets/stylesheets/application.css

@@ -128,11 +128,24 @@ header {
   flex-grow: 0;  
 
   & svg {
-    width: 70px;
+    width: 203px;
     height: auto;
+    max-width: 60vw;
   }
 }
 
+path.logo-text {
+  fill: var(--clr-black);
+}
+
+:has(main .background-container) {
+  & header path.logo-text {
+    fill: var(--clr-white);
+  }
+  & footer {
+    color: var(--clr-white);
+  }  
+}
 
 footer {
   position: fixed;
@@ -480,9 +493,7 @@ label {
     top: 2rem;
     left: 3rem;
     
-    & svg {
-      width: 80px;
-    }
+    
   }
 
   main {

app/controllers/questions_controller.rb

@@ -7,6 +7,7 @@ class QuestionsController < ApplicationController
     not_found unless question
 
     @answer = Answer.new(player_id: current_player.id, node_id: question.id)
+
   end
 
 

app/helpers/questions_helper.rb

@@ -1,2 +1,87 @@
 module QuestionsHelper
+
+  def image_orientation(file_attachment)
+    return nil unless file_attachment&.attached?
+
+    metadata = file_attachment.blob.metadata
+    width = metadata[:width] || 0
+    height = metadata[:height] || 0
+
+    if width > height
+      :landscape
+    elsif height > width
+      :portrait
+    else
+      :square
+    end
+  end
+
+  def responsive_picture_tag_for_question(question)
+    # assets = question.assets.includes(file_attachment: :blob).to_a
+    assets = question.assets.includes(file_attachment: :blob).select{ |asset| asset.file.image? }.to_a
+
+    # Find one landscape and one portrait image
+    landscape_asset = assets.find { |asset| image_orientation(asset.file) == :landscape }
+    portrait_asset = assets.find { |asset| image_orientation(asset.file) == :portrait }
+
+    # Fall back to any image if specific orientation not found
+    landscape_asset ||= portrait_asset
+    portrait_asset ||= landscape_asset
+
+    # If we have at least one image
+    if landscape_asset || portrait_asset
+      primary_asset = landscape_asset || portrait_asset
+
+      # If we have both orientations, create a responsive picture tag
+      if landscape_asset && portrait_asset && landscape_asset != portrait_asset
+        render_responsive_picture(landscape_asset, portrait_asset)
+      else
+        # Just one orientation available, create a simple picture tag
+        render_simple_picture(primary_asset)
+      end
+    else
+      # No images available
+
+      content_tag(:div, "No images available", class: "no-images")
+    end
+  end
+
+private
+
+  def render_responsive_picture(landscape_asset, portrait_asset)
+    content_tag(:picture) do
+      concat(
+        content_tag(:source, "",
+          media: "(orientation: portrait)",
+          srcset: rails_storage_proxy_path(portrait_asset.file.variant(resize_to_limit: [800, nil])) + " 800w, " +
+                  rails_storage_proxy_path(portrait_asset.file.variant(resize_to_limit: [1600, nil])) + " 1600w, " +
+                  rails_storage_proxy_path(portrait_asset.file.variant(resize_to_limit: [2400, nil])) + " 2400w",
+          sizes: "100vw"
+        )
+      )
+
+      concat(
+        image_tag(
+          rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [800, nil])),
+          srcset: rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [800, nil])) + " 800w, " +
+                  rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [1600, nil])) + " 1600w, " +
+                  rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [2400, nil])) + " 2400w",
+          sizes: "100vw"
+        )
+      )
+    end
+  end
+
+  def render_simple_picture(asset)
+    content_tag(:picture) do
+      image_tag(
+        rails_storage_proxy_path(asset.file.variant(resize_to_limit: [800, nil])),
+        srcset: rails_storage_proxy_path(asset.file.variant(resize_to_limit: [800, nil])) + " 800w, " +
+                rails_storage_proxy_path(asset.file.variant(resize_to_limit: [1600, nil])) + " 1600w, " +
+                rails_storage_proxy_path(asset.file.variant(resize_to_limit: [2400, nil])) + " 2400w",
+        sizes: "100vw"
+      )
+    end
+  end
+
 end

app/views/languages/index.html.erb

@@ -1,15 +1,10 @@
 <%- content_for :title, t('project_name') %>
 
-<% Array(@node.assets.select{ |asset| asset.file.image? }.first).each do |asset| %>
+
 <div class="background-container">
-  <%= image_tag rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg)),
-                srcset: "#{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg))} 800w,
-                #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [1600,nil], format: :jpg))} 1600w,
-                #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [2400,nil], format: :jpg))} 2400w",
-                sizes: "100vw"
-                 %>
+  <%= responsive_picture_tag_for_question(@node) %> 
 </div>
-<% end %>
+
 
 
 <div class="intro-container">

app/views/layouts/application.html.erb

@@ -25,7 +25,7 @@
   </head>
   <body>
     <header>
-      <%= link_to svg('ikea-foundation-logo'), root_url %>      
+      <%= link_to svg('ikea-foundation-203x22'), root_url %>      
     </header>
 
     <main>

app/views/questions/show.html.erb

@@ -3,16 +3,17 @@
   content_for :meta_description, question.page_description
 %>
 
-<% Array(question.assets.select{ |asset| asset.file.image? }.first).each do |asset| %>
+<%# Array(question.assets.select{ |asset| asset.file.image? }.first).each do |asset| %>
 <div class="background-container">
-  <%= image_tag rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg)),
+  <%# image_tag rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg)),
                 srcset: "#{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [800,nil], format: :jpg))} 800w,
                 #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [1600,nil], format: :jpg))} 1600w,
                 #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [2400,nil], format: :jpg))} 2400w",
                 sizes: "100vw"
-                 %>
+                %>
+  <%= responsive_picture_tag_for_question(question) %>              
 </div>
-<% end %>
+<%# end %>
 
 <%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create') do |form| %>
   

config/importmap.rb

@@ -10,7 +10,7 @@ pin "stimulus-use" # @0.52.3
 pin "@rails/request.js", to: "@rails--request.js.js" # @0.0.12
 pin "@rails/activestorage", to: "@rails--activestorage.js" # @8.0.200
 pin "tom-select", to: "tom-select--dist--js--tom-select.base.min.js.js" # @2.4.3
-pin "trix" # @2.1.14
+pin "trix" # @2.1.15
 
 # site_helper
 pin "application", preload: false