ikea-foundation
/
week_2024
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

na

main
Mattias Bodlund 7 months ago
parent
7d9b64117a
commit
b67ccfc49d
18 changed files with 217 additions and 693 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      app/assets/images/ico-arrow-down.svg
  2. +88
    -515
      app/assets/stylesheets/application.css
  3. +1
    -1
      app/controllers/application_controller.rb
  4. +10
    -0
      app/controllers/languages_controller.rb
  5. +1
    -1
      app/helpers/languages_helper.rb
  6. +5
    -3
      app/helpers/site_helper.rb
  7. +14
    -0
      app/javascript/application.js
  8. +50
    -0
      app/javascript/locale_controller.js
  9. +7
    -0
      app/views/languages/_intro.html.erb
  10. +24
    -16
      app/views/languages/index.html.erb
  11. +5
    -0
      app/views/languages/update.turbo_stream.erb
  12. +8
    -14
      app/views/layouts/application.html.erb
  13. +0
    -51
      app/views/site/tmpl_article.html.erb
  14. +0
    -23
      app/views/site/tmpl_index.html.erb
  15. +0
    -42
      app/views/site/tmpl_list.html.erb
  16. +1
    -0
      config/importmap.rb
  17. +0
    -26
      config/locales/en.yml
  18. +2
    -0
      config/routes.rb

+ 1
- 1
app/assets/images/ico-arrow-down.svg View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.59 18.27"><path d="M6.93,0c.53,0,.96.43.96.96v13.75l4.08-3.91c.38-.37.99-.35,1.36.03s.35.99-.03,1.36l-6.36,6.08L.31,12.2c-.39-.36-.42-.97-.06-1.36.36-.39.97-.42,1.36-.06l4.36,3.99V.96c0-.53.43-.96.96-.96Z" style="fill:#000;"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.59 18.27"><path d="M6.93,0c.53,0,.96.43.96.96v13.75l4.08-3.91c.38-.37.99-.35,1.36.03s.35.99-.03,1.36l-6.36,6.08L.31,12.2c-.39-.36-.42-.97-.06-1.36.36-.39.97-.42,1.36-.06l4.36,3.99V.96c0-.53.43-.96.96-.96Z" style="fill:#FFF;"/></svg>

+ 88
- 515
app/assets/stylesheets/application.css View File

@ -73,7 +73,10 @@
:root {
--clr-white: #fff;
--clr-black: #000;
--clr-bumblebee: #F0B902;
--clr-dark-yellow: #F0B902;
--clr-medium-yellow: #FFDE52;
--clr-light-yellow: #FFF3AE;
--ff-ikea: "Noto IKEA", "Noto Sans", "Roboto", "Open Sans", system-ui, sans-serif;
@ -82,7 +85,7 @@
--fs-base: 1.6rem;
--fs-lg: 1.8rem;
--fs-xl: 2.8rem;
--fs-2xl: 3.1rem;
--fs-2xl: 3.2rem;
--fs-3xl: 5.6rem;
--flip-deg: 0deg;
@ -94,13 +97,14 @@
body {
background-color: var(--clr-bumblebee);
background-color: var(--clr-dark-yellow);
color: var(--clr-black);
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
min-height: 100svh;
justify-content: end;
position: relative;
-webkit-font-smoothing: antialiased;
touch-action: manipulation;
@ -112,145 +116,88 @@ ul[class] {
list-style: none;
}
img.fade-in {
opacity: 0;
transition: opacity 0.4s ease-in;
&.loaded {
opacity: 1;
}
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
position: fixed;
top: 1.2rem;
left: 1.2rem;
& svg {
width: 70px;
height: auto;
}
& div {
line-height: 1.3;
font-size: 1.6rem;
text-align: right;
}
& span {
font-weight: 700;
font-style: italic;
&::before { content: ' '; display: block; }
}
}
main {
margin: 0 1rem;
flex-grow: 1;
}
footer {
position: fixed;
font-size: 1.2rem;
line-height: 1.2;
margin: 1rem;
right: 1.2rem;
top: 1.2rem;
font-family: var(--ff-ikea);
writing-mode: vertical-rl;
text-orientation: mixed;
}
.msg__container {
& h1 {
margin: 0 0 0.4375em 0;
line-height: 1.1;
font-size: var(--fs-3xl);
font-weight: 700;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
&:has(em) {
font-weight: 400;
& em {
font-weight: 700;
}
}
}
& > div:not([class]) {
margin: 0;
line-height: 1.2;
font-size: var(--fs-lg);
font-weight: 400;
& + div:not([class]) {
margin-top: 1.2em;
}
}
.language__selector-select {
position: relative;
display: inline-block;
}
.form__container {
margin: 40px auto;
}
.msg__container {
max-width: 440px;
margin: 40px auto 40px auto;
container-type: inline-size;
container-name: startbar;
.hidden-select {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
z-index: 1;
font-size: var(--fs-base);
border: 2px solid red;
}
@container startbar (min-width: 400px) {
h1, p, div {
text-align: center;
}
}
.hidden-select-value {
background-color: var(--clr-black);
color: var(--clr-white);
font-size: var(--fs-base);
font-weight: 700;
font-family: var(--ff-ikea);
line-height: 1;
border-radius: 400px;
height: 43px;
padding: 0 20px;
display: inline-flex;
align-items: center;
.language__selector-select {
position: relative;
margin-bottom: 16px;
&::after {
content: '';
position: absolute;
width: 13.59px;
height: 18.27px;
right: 33px;
height: 100%;
& > div {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
pointer-events: none;
background-image: url('ico-arrow-down.svg');
background-repeat: no-repeat;
background-position: center center;
}
& select {
width: 100%;
appearance: none;
box-sizing: border-box;
background-color: transparent;
border: 2px solid var(--clr-black);
font-size: var(--fs-lg);
font-weight: 700;
font-family: var(--ff-ikea);
line-height: 1.2;
height: 60px;
color: var(--clr-black);
padding: 0.888888888888889em 1.333333333333333em;
border-radius: 400px;
& svg {
width: 8px;
height: auto;
}
}
.button__base {
appearance: none;
background-color: var(--clr-black);
border: 2px solid var(--clr-black);
color: var(--clr-white);
font-size: var(--fs-lg);
font-size: var(--fs-base);
font-family: var(--ff-ikea);
font-weight: 700;
line-height: 1.2;
line-height: 1.4;
height: 60px;
border-radius: 400px;
width: 100%;
@ -268,442 +215,68 @@ footer {
}
.reveal__container {
background-color: var(--clr-black);
border-radius: 400px;
position: relative;
height: 62px;
--opacity: 1.0;
&::before {
content: attr(data-label);
color: var(--clr-white);
position: absolute;
font-size: var(--fs-lg);
font-weight: 700;
top: 50%;
left: 50%;
z-index: inherit;
transform: translate(-50%, -50%);
opacity: var(--opacity);
}
& input {
position: absolute;
inset: 0 0 0 0;
margin: 0;
}
}
html[lang="fr"],
html[lang="fr-CA"],
html[lang="de"],
html[lang="hu"],
html[lang="uk"] {
& .reveal__container::before {
font-size: var(--fs-base);
}
}
input[type=range] {
appearance: none;
width: 100%;
background-color: transparent;
height: 62px;
box-sizing: border-box;
border: 8px solid transparent;
}
::-webkit-slider-thumb {
appearance: none;
width: 46px;
height: 46px;
border-radius: 50%;
background-color: var(--clr-white);
cursor: pointer;
background-image: url('ico-arrow-right.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: 42px 42px;
border: none;
}
::-moz-range-thumb {
width: 46px;
height: 46px;
border-radius: 50%;
background-color: var(--clr-white);
cursor: pointer;
background-image: url('ico-arrow-right.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: 42px 42px;
border: none;
}
.icon__container {
position: absolute;
z-index: -1;
inset: 0 0 0 0;
overflow: hidden;
& img {
position: absolute;
z-index: -1;
pointer-events: none;
display: block;
width: 20%;
min-width: 160px;
max-width: 200px;
height: auto;
}
& img:nth-child(1) {
rotate: -20deg;
right: 10vw;
top: 10px;
}
& img:nth-child(2) {
rotate: 10deg;
left: 10vw;
bottom: 0;
transform: translateY(10%);
}
& img:nth-child(3) {
rotate: 10deg;
right: -3vw;
bottom: 10svh;
}
& img:nth-child(4) {
left: 4vw;
top: 18svh;
display: none;
}
}
.cards__container, .link__container {
margin-top: 2em;
margin-bottom: 2.4em;
}
.link__container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
container-type: inline-size;
container-name: link;
}
.link__branding {
& svg {
width: 70px;
height: auto;
}
}
ul.card__stack {
max-width: 270px;
aspect-ratio: 0.72972972972973;
position: relative;
width: 100%;
margin-bottom: 60px;
& a {
text-decoration: none;
color: var(--clr-black);
cursor: default;
}
}
.card-front, .card-back, .link {
background-color: var(--clr-white);
border-radius: 12px;
box-sizing: border-box;
}
.card-front, .card-back, .link {
box-shadow: var(--shadow);
}
.card__container {
position: absolute;
inset: 0 0 0 0;
transition: transform 0.3s ease-in-out 0s;
perspective: 500px;
}
.card {
position: absolute;
inset: 0 0 0 0;
transform-style: preserve-3d;
}
.card__container.active .card {
transform: rotateY(var(--flip-deg)) rotateX(var(--flip-rotate)) scale(var(--flip-scale));
main {
margin: 1.2rem 1.2rem 1.6rem 1.2rem;
}
.card-front {
font-size: var(--fs-xl);
font-weight: 700;
.intro-container {
display: grid;
padding: 1.142857142857143em 1em;
grid-template-rows: 1fr 4fr 1fr;
justify-items: center;
& div {
text-align: center;
overflow: hidden;
width: 100%;
& span {
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
}
svg {
width: 80%;
max-width: 82px;
}
& > *:nth-child(1) {
align-self: start;
}
& > *:nth-child(2) {
align-self: center;
}
& > *:nth-child(3) {
align-self: end;
}
grid-template-columns: 1;
grid-template-rows: auto;
gap: 8px;
}
.card-back {
background-color: var(--clr-white);
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
& svg {
width: 60%;
}
.intro-content-container {
display: grid;
grid-template-columns: 1;
grid-template-rows: auto;
gap: 8px;
}
.card-back, .card-front {
position: absolute;
inset: 0 0 0 0;
backface-visibility: hidden;
.intro-content-header,
.intro-content-body {
padding: 1.6rem 1.2rem;
border-radius: 1.2rem;
}
.link {
padding: 18px;
display: flex;
gap: 20px;
flex-direction: column;
position: relative;
margin-bottom: 24px;
& img {
display: block;
width: 100%;
aspect-ratio: 0.731818181818182;
height: auto;
border-radius: 8px;
}
& figure {
margin: 0;
}
& h1 {
font-size: var(--fs-2xl);
margin: 0 0 0.7em 0;
font-weight: 400;
line-height: 1.2;
& strong {
font-weight: 700;
}
}
.intro-content-header {
background-color: var(--clr-white);
font-size: var(--fs-2xl);
line-height: 1.2;
font-weight: 700;
}
.link__body, .link__learn-more {
.intro-content-body {
background-color: var(--clr-medium-yellow);
font-size: var(--fs-base);
line-height: 1.4;
line-height: 1.4;
}
.link__learn-more {
font-weight: 700;
margin-top: 20px;
border-top: 1px solid var(--clr-black);
border-bottom: 1px solid var(--clr-black);
& a {
padding: 1.25em 0;
display: block;
color: var(--clr-black);
text-decoration: none;
background-image: url('ico-arrow-right.svg');
background-repeat: no-repeat;
background-position: right center;
background-size: 32px 32px;
}
.intro-content-container button {
margin: 4px 0 0 0
}
.link__close {
position: absolute;
width: 46px;
aspect-ratio: 1;
background-color: var(--clr-black);
border-radius: 50%;
text-decoration: none;
right: 0;
top: -23px;
display: flex;
align-items: center;
justify-content: center;
& svg {
width: 18px;
aspect-ratio: 1;
}
}
.link__ctas, .cards__ctas {
display: flex;
flex-direction: column;
gap: 16px;
}
.cards__ctas {
max-width: 440px;
width: 100%;
}
@media (orientation: portrait) {
body {
min-height: calc(100svh + 35px);
}
main:has(.cards__container) {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.cards__container {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
margin-top: 0;
}
.card__stack-container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
ul.card__stack {
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 480px) {
.link {
& img {
aspect-ratio: 1.536363636363636;
object-fit: cover;
}
}
}
@container link (min-width: 735px) {
.link {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr fit-content(84px);
gap: 32px;
margin-bottom: 40px;
& img {
/*aspect-ratio: 0.615101289134438; */
aspect-ratio: 0.731818181818182;
}
}
.link__ctas {
flex-direction: row;
& li {
flex-grow: 1;
}
}
.link__image {
grid-column: 2;
grid-row: 1 / span 2;
}
.link__body-container {
grid-column: 1;
grid-row: 1;
}
.link__branding {
grid-column: 1;
grid-row: 2;
}
}
@media (min-width: 815px) {
header {
margin: 2rem;
top: 2rem;
left: 3rem;
& svg {
width: 80px;
}
}
footer {
margin: 2rem;
main {
margin: 2rem 3rem;
}
.icon__container img:nth-child(4) {
display: block;
footer {
top: 2rem;
right: 3rem;
}
}
[data-locale] {


+ 1
- 1
app/controllers/application_controller.rb View File

@ -1,6 +1,6 @@
class ApplicationController < ActionController::Base
http_basic_authenticate_with name: "stupid", password: "studio"
http_basic_authenticate_with name: "stupid", password: "studio" if Rails.env.production?
private


+ 10
- 0
app/controllers/languages_controller.rb View File

@ -9,6 +9,16 @@ class LanguagesController < ApplicationController
end
def update
set_locale
# Respond with Turbo Stream that updates the content div
respond_to do |format|
format.turbo_stream
end
end
private
def accept_language


+ 1
- 1
app/helpers/languages_helper.rb View File

@ -1,7 +1,7 @@
module LanguagesHelper
def languages_for_select
t('languages').map {|k,v| ["#{v} #{t(k, scope: 'flags')} ", k]}.sort
t('languages').map {|k,v| [v, k]}.sort
end
end

+ 5
- 3
app/helpers/site_helper.rb View File

@ -1,16 +1,18 @@
module SiteHelper
def frontend_javascript_importmap_tags
only_use = %w"application @hotwired/turbo-rails"
def frontend_javascript_importmap_tags(only_use=%w"application")
only_use = Array(only_use)
importmap_json = JSON.parse(Rails.application.importmap.to_json(resolver: self))['imports'].select{ |k,v| only_use.include?(k)}
safe_join [
javascript_inline_importmap_tag(JSON.pretty_generate({ "imports" => importmap_json})),
javascript_module_preload_tag(*importmap_json.map{|v| v[1]}),
javascript_import_module_tag('application')
javascript_import_module_tag(only_use[0])
], "\n"
end
def node_title(node)
parts = [node.page_title.blank? ? node.title : node.page_title ]
parts << t(:client_name)


+ 14
- 0
app/javascript/application.js View File

@ -0,0 +1,14 @@
import "@hotwired/turbo-rails"
import { Application } from "@hotwired/stimulus"
import LocaleController from "locale_controller"
const application = Application.start()
application.register("locale", LocaleController)
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }

+ 50
- 0
app/javascript/locale_controller.js View File

@ -0,0 +1,50 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["select", "current"]
static values = { url: String }
connect() {
}
disconnect() {
}
changeLocale() {
this.currentTarget.textContent = this.selectTarget.options[this.selectTarget.selectedIndex].textContent
// Create form data to send
const formData = new FormData()
formData.append("locale", this.selectTarget.value)
// Make the PUT request using fetch
fetch(this.urlValue, {
method: "PUT",
headers: {
'Accept': "text/vnd.turbo-stream.html",
"X-CSRF-Token": this.getMetaValue("csrf-token")
},
body: formData
})
.then (response => response.text())
.then(html => {
Turbo.renderStreamMessage(html)
document.documentElement.setAttribute('lang', this.selectTarget.value)
})
.catch((err) => {
console.info('rejected', err)
})
}
// Helper method to get CSRF token
getMetaValue(name) {
const element = document.head.querySelector(`meta[name="${name}"]`)
return element.getAttribute("content")
}
}

+ 7
- 0
app/views/languages/_intro.html.erb View File

@ -0,0 +1,7 @@
<% Node.roots.first.attachments.limit(2).each_with_index do |attachment, i| %>
<%= tag.div attachment.body.html_safe, class: i == 0 ? "intro-content-header" : "intro-content-body" %>
<% end %>
<button type="button" class="button__base">
<%= t('get_started') %>
</button>

+ 24
- 16
app/views/languages/index.html.erb View File

@ -1,22 +1,30 @@
<%- content_for :title, t('project_name') %>
<div class="msg__container msg__container-language">
<% I18n.available_locales.each do |l| %>
<%= tag.h1 t('hello', locale: l), data: {locale: l} %>
<% end %>
<% I18n.available_locales.each do |l| %>
<%= tag.div t('please_select_a_language_to_get_started', locale: l), data: {locale: l} %>
<% end %>
<div class="form__container">
<div class="intro-container">
<div data-controller="locale" data-locale-url-value="<%= url_for(controller: 'languages', action: 'update') %>">
<div class="language__selector-select">
<%= select_tag :language, options_for_select(languages_for_select, accept_language), id: 'language_select' %>
<%= select_tag :language,
options_for_select(languages_for_select, accept_language),
id: 'language_select',
class: 'hidden-select',
data: {
action: 'change->locale#changeLocale',
locale_target: 'select'
} %>
<div class="hidden-select-value">
<div>
<span data-locale-target="current"><%= t accept_language, scope: 'languages' %></span>
<%= svg 'ico-arrow-down' %>
</div>
</div>
</div>
<button type="button" class="button__base" id="confirm_btn">
<% I18n.available_locales.each do |l| %>
<%= tag.span t('confirm', locale: l), data: {locale: l} %>
<% end %>
</button>
</div>
<div id="intro" class="intro-content-container">
<%= render partial: 'intro' %>
</div>
</div>

+ 5
- 0
app/views/languages/update.turbo_stream.erb View File

@ -0,0 +1,5 @@
<turbo-stream action="update" target="intro">
<template>
<%= render partial: 'intro', formats: :html %>
</template>
</turbo-stream>

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

@ -1,37 +1,31 @@
<!DOCTYPE html>
<!doctype html>
<html lang="<%= controller_name == 'languages' ? accept_language : I18n.locale %>">
<head>
<title><%= content_for?(:title) ? yield(:title) : t(:project_name) %></title>
<meta charset="utf-8">
<%= tag :meta, name: 'description', content: content_for?(:meta_description) ? yield(:meta_description) : (@node.present?? @node.page_description : '') %>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#F0B902">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="apple-touch-icon" href="/ikea-favicon-300x300.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" sizes="16x16 32x32">
<link rel="icon" sizes="192x192" href="/ikea-favicon-300x300.png">
<%= stylesheet_link_tag "application" %>
<%= frontend_javascript_importmap_tags %>
<%= frontend_javascript_importmap_tags %w'application @hotwired/turbo-rails @hotwired/stimulus locale_controller' %>
</head>
<body>
<header>
<%= link_to svg('ikea-foundation-logo'), root_url %>
<div>
<% if controller_name == 'languages' %>
<% I18n.available_locales.each do |l| %>
<%= tag.div t('can_you_spot_the_link', locale: l).html_safe, data: {locale: l} %>
<% end %>
<% else %>
<%= t('can_you_spot_the_link').html_safe %>
<% end %>
</div>
<%= link_to svg('ikea-foundation-logo'), root_url %>
</header>
<main>
<%= yield %>
</main>
<footer>© Inter IKEA Systems B.V. 2025</footer>
<footer><span>© Inter IKEA Systems B.V. 2025</span></footer>
</body>
</html>

+ 0
- 51
app/views/site/tmpl_article.html.erb View File

@ -8,54 +8,3 @@
content_for :meta_description, @node.page_description.blank? ? article_parts[:description] : @node.page_description
%>
<article class="link__container">
<div class="link">
<%= link_to svg('ico-close'), @node.parent.url, class: 'link__close' %>
<% @node.attachments.limit(1).each do |attachment| %>
<% asset = attachment.asset %>
<%= tag.figure class: 'link__image' do %>
<%= image_tag rails_storage_proxy_url(asset.file.variant(resize_to_fill: [334,456])),
alt: asset.title,
srcset: "
#{rails_storage_proxy_url(asset.file.variant(resize_to_fill: [668,913]))} 668w,
#{rails_storage_proxy_url(asset.file.variant(resize_to_fill: [1002,1369]))} 1002w
",
sizes: "",
class: 'fade-in' if asset&.file&.image? %>
<% end %>
<div class="link__body-container">
<div class="link__body">
<%= article_parts[:html]&.html_safe %>
</div>
<%= tag.div class: "link__learn-more" do %>
<%= article_parts[:link].html_safe %>
<% end if article_parts[:link] %>
</div>
<div class="link__branding">
<%= svg 'ikea-foundation-week' %>
</div>
<% end %>
</div>
<ul class="link__ctas">
<li><%= link_to t('spot_another_link'), @node.parent.url, class: 'button__base' %></li>
<li>
<button type="button" class="button__base button__base-light" data-share-title="<%= yield(:title) %>" data-share-text="<%= strip_tags(t('can_you_spot_the_link')) %>">
<%= t 'challange_a_friend' %>
</button>
</li>
</ul>
</article>

+ 0
- 23
app/views/site/tmpl_index.html.erb View File

@ -1,25 +1,2 @@
<%- content_for :title, node_title(@node) %>
<div class="msg__container msg__container-start">
<% @node.attachments.each do |attachment| %>
<%= attachment.body.html_safe %>
<% end %>
<div class="form__container">
<%= link_to t('get_started'), @node.children.viewable.first.url, class: 'button__base' %>
</div>
</div>
<div class="icon__container">
<% Asset.stickets.order("RANDOM()").limit(4).each do |asset| %>
<%= image_tag rails_storage_proxy_url(asset.file.variant(resize_to_limit: [160,160])),
alt: asset.title,
srcset: "
#{rails_storage_proxy_url(asset.file.variant(resize_to_limit: [320,320]))} 2x,
#{rails_storage_proxy_url(asset.file.variant(resize_to_limit: [640,640]))} 3x
",
class: 'fade-in' if asset&.file&.image? %>
<% end %>
</div>

+ 0
- 42
app/views/site/tmpl_list.html.erb View File

@ -3,45 +3,3 @@
cards = @node.children.viewable.ordered
%>
<div class="cards__container">
<div class="card__stack-container">
<ul class="card__stack">
<% @node.children.viewable.ordered.each do |node| %>
<li>
<%= link_to node.url do %>
<div class="card__container" data-id="<%= node.id %>">
<div class="card">
<div class="card-back">
<%= svg "ico-arrow-updown" %>
</div>
<div class="card-front">
<%= tag.div tag.span(node.tags[0]) %>
<%= svg "ico-arrow-updown" %>
<%= tag.div tag.span(node.tags[1]) %>
</div>
</div>
</div>
<% end %>
</li>
<% end %>
</ul>
</div>
<ul class="cards__ctas">
<li>
<div class="reveal__container" data-label="<%= t 'drag_to_reveal' %>">
<input type="range" value="0" class="reveal">
</div>
</li>
<li>
<button type="button" class="button__base button__base-light button_shuffle_cards">
<%= t 'shuffle_cards' %>
</button>
</li>
</ul>
</div>

+ 1
- 0
config/importmap.rb View File

@ -14,3 +14,4 @@ pin "trix" # @2.1.13
# site_helper
pin "application", preload: false
pin "locale_controller", preload: false

+ 0
- 26
config/locales/en.yml View File

@ -66,32 +66,6 @@ en:
sv: Swedish
uk: Ukrainian
flags:
en: 🇬🇧
zh: 🇨🇳
hr: 🇭🇷
cs: 🇨🇿
da: 🇩🇰
nl: 🇳🇱
fi: 🇫🇮
fr: 🇫🇷
fr-CA: 🇨🇦
de: 🇩🇪
hu: 🇭🇺
it: 🇮🇹
ja: 🇯🇵
ko: 🇰🇷
nb: 🇳🇴
pl: 🇵🇱
pt: 🇵🇹
ro: 🇷🇴
sr: 🇷🇸
sk: 🇸🇰
sl: 🇸🇮
es: 🇪🇸
sv: 🇸🇪
uk: 🇺🇦
ui:
'yes': Yes


+ 2
- 0
config/routes.rb View File

@ -55,6 +55,8 @@ Rails.application.routes.draw do
get '*url', to: 'site#page', constraints: lambda { |req| req.path.exclude?('storage') }
end
put 'update_locale', to: 'languages#update'
# Defines the root path route ("/")
root "languages#index"


Write Preview
Loading…
Cancel
Save