Mattias Bodlund 7 months ago
parent
commit
2613673f9e
10 changed files with 123 additions and 24 deletions
  1. +3
    -3
      Gemfile.lock
  2. +6
    -0
      app/assets/images/ikea-foundation-203x22.svg
  3. +15
    -4
      app/assets/stylesheets/application.css
  4. +1
    -0
      app/controllers/questions_controller.rb
  5. +85
    -0
      app/helpers/questions_helper.rb
  6. +3
    -8
      app/views/languages/index.html.erb
  7. +1
    -1
      app/views/layouts/application.html.erb
  8. +5
    -4
      app/views/questions/show.html.erb
  9. +1
    -1
      config/importmap.rb
  10. +3
    -3
      vendor/javascript/trix.js

+ 3
- 3
Gemfile.lock View File

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


+ 6
- 0
app/assets/images/ikea-foundation-203x22.svg View File

@ -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>

+ 15
- 4
app/assets/stylesheets/application.css View File

@ -128,11 +128,24 @@ header {
flex-grow: 0; flex-grow: 0;
& svg { & svg {
width: 70px;
width: 203px;
height: auto; 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 { footer {
position: fixed; position: fixed;
@ -480,9 +493,7 @@ label {
top: 2rem; top: 2rem;
left: 3rem; left: 3rem;
& svg {
width: 80px;
}
} }
main { main {


+ 1
- 0
app/controllers/questions_controller.rb View File

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


+ 85
- 0
app/helpers/questions_helper.rb View File

@ -1,2 +1,87 @@
module QuestionsHelper 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 end

+ 3
- 8
app/views/languages/index.html.erb View File

@ -1,15 +1,10 @@
<%- content_for :title, t('project_name') %> <%- content_for :title, t('project_name') %>
<% Array(@node.assets.select{ |asset| asset.file.image? }.first).each do |asset| %>
<div class="background-container"> <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> </div>
<% end %>
<div class="intro-container"> <div class="intro-container">


+ 1
- 1
app/views/layouts/application.html.erb View File

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


+ 5
- 4
app/views/questions/show.html.erb View File

@ -3,16 +3,17 @@
content_for :meta_description, question.page_description 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"> <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, 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: [1600,nil], format: :jpg))} 1600w,
#{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [2400,nil], format: :jpg))} 2400w", #{rails_storage_proxy_path(asset.file.representation(resize_to_limit: [2400,nil], format: :jpg))} 2400w",
sizes: "100vw" sizes: "100vw"
%>
%>
<%= responsive_picture_tag_for_question(question) %>
</div> </div>
<% end %>
<%# end %>
<%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create') do |form| %> <%= form_with model: @answer, url: url_for(controller: 'answers', action: 'create') do |form| %>


+ 1
- 1
config/importmap.rb View File

@ -10,7 +10,7 @@ pin "stimulus-use" # @0.52.3
pin "@rails/request.js", to: "@rails--request.js.js" # @0.0.12 pin "@rails/request.js", to: "@rails--request.js.js" # @0.0.12
pin "@rails/activestorage", to: "@rails--activestorage.js" # @8.0.200 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 "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 # site_helper
pin "application", preload: false pin "application", preload: false


+ 3
- 3
vendor/javascript/trix.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save