diff --git a/README.txt b/README.txt index e522ffb..965c8de 100644 --- a/README.txt +++ b/README.txt @@ -23,3 +23,5 @@ Gem ------------------- bundle config set --local without 'development test' +https://miro.com/app/board/uXjVG_Og9ms=/?utm_source=notification&utm_medium=email&utm_campaign=daily-updates&utm_content=view-board-cta&lid=599kz7rhrs0e +https://miro.com/app/board/uXjVG_Og9ms=/ diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 155e777..f9ac840 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -100,61 +100,6 @@ background-color: #0058a3; } -header { - view-transition-name: none; -} - -main { - view-transition-name: main; -} - -footer { - view-transition-name: none; -} - -::view-transition-old(root), -::view-transition-new(root) { - animation: none; /* takes them out of the overlay tree */ -} - -::view-transition-old(main) { - z-index: 1; -} - -::view-transition-new(main) { - z-index: 2; -} - -@keyframes slide-in { - from { - transform: translateY(100dvh); - } - - to { - transform: translateY(0); - } -} - -@keyframes slide-out { - from { - transform: translateY(0); - } - - to { - transform: translateY(-100dvh); - } -} -/* Forward nav (normal clicks) */ -html[data-turbo-visit-direction="forward"] { - &::view-transition-new(main) { animation: slide-in .3s ease-out both; } - &::view-transition-old(main) { animation: slide-out .3s ease-in both; } -} - -/* Back button reverses the sense */ -html[data-turbo-visit-direction="back"] { - &::view-transition-new(main) { animation: none } - &::view-transition-old(main) { animation: none } -} body { background-color: var(--clr-dark-yellow); @@ -163,6 +108,7 @@ body { display: flex; flex-direction: column; gap: 0; + min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; touch-action: manipulation; @@ -224,478 +170,6 @@ footer { color: var(--clr-white); } - -.language__selector-select { - position: relative; - display: inline-block; -} - - -.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; -} - -.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; - - - & > div { - display: inline-flex; - align-items: baseline; - gap: 0.4em; - pointer-events: none; - } - - & 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-base); - font-family: var(--ff-ikea); - font-weight: 700; - height: 2.75rem; - border-radius: 2.75rem; - width: 100%; - cursor: pointer; - text-decoration: none; - display: flex; - align-items: center; - justify-content: center; - padding: 0 1em; - box-sizing: border-box; - transition: transform 0.08s ease-in-out; - user-select: none; - -webkit-user-select: none; - -webkit-tap-highlight-color: transparent; - - &:not(.wiggle):active { - transform: scale(0.96); - } - -} - -@keyframes wiggle { - 0%, 100% { transform: translateX(0); } - 15% { transform: translateX(-6px); } - 30% { transform: translateX(6px); } - 45% { transform: translateX(-4px); } - 60% { transform: translateX(4px); } - 75% { transform: translateX(-2px); } - } - -.wiggle { - animation: wiggle 0.45s ease-in-out; -} - -.button__base-light { - background-color: transparent; - color: var(--clr-black); -} - - -main { - padding: 50px 0.75rem 1rem 0.75rem; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: end; - - &:has(.with-backdrop) { - background-color: var(--clr-dark-yellow); - } - - -} - - -.background-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: -1; - & img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0; - transition: opacity 0.4s ease-in-out; - - - &.loaded { - opacity: 1; - } - } -} - -@media (min-width: 474px) { - main { - justify-content: center; - } -} - -.intro-container { - display: grid; - grid-template-columns: 1; - grid-template-rows: auto; - /*gap: 8px;*/ -} - -.intro-content-container, -.question-container { - display: grid; - grid-template-columns: 1; - grid-template-rows: auto; - /*gap: 8px;*/ - width: 100%; -} - -.intro-container, -.question-container { - max-width: 450px; - margin: 0 auto; -} - -.intro-content-header, -.intro-content-body { - padding: 1rem 0.75rem; - border-radius: 0.75rem; -} - - -.intro-content-header { - background-color: var(--clr-white); - font-size: var(--fs-2xl); - line-height: 1.2; - font-weight: 700; -} - -.intro-content-body { - background-color: var(--clr-medium-yellow); - font-size: var(--fs-base); - line-height: 1.4; -} - - -.question-step { - font-size: var(--fs-s); - font-weight: 700; - line-height: 1; - display: flex; - & div { - background-color: var(--clr-medium-yellow); - padding: 0.625rem 0.75rem; - border-radius: 400px; - } -} - -.question-header { - background-color: var(--clr-medium-yellow); - border-radius: 1rem; - font-size: var(--fs-xl); - line-height: 1.2; - font-weight: 700; - padding: 1rem 0.75rem; -} - -.error { - padding: 1rem 0.75rem; - border-radius: 1rem; - background-color: var(--clr-text-highlight); - color: var(--clr-black); - font-size: var(--fs-s); - line-height: 1.2; - -} - -.question-answer { - - font-size: var(--fs-lg); - line-height: 1.4; - - - & label { - display: block; - padding: 1rem 0.75rem; - border-radius: 1rem; - background-color: var(--clr-white); - cursor: pointer; - user-select: none; - -webkit-user-select: none; - -webkit-tap-highlight-color: transparent; - - & div { - position: relative; - display: inline-block; - padding: 0 0.2em; - margin: 0 -0.2em; - } - - & div::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--clr-text-highlight); - clip-path: inset(0 100% 0 0); - transition: clip-path 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); - z-index: 1; - mix-blend-mode: darken; - } - } - - & input[type=radio] { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; - } - - &:has(input[type=radio]:checked) { - - & label>div::after { - clip-path: inset(0 0 0 0); - } - - } - - & + .question-answer { - margin-top: 8px; - } - -} - -.question-container { - & em { - font-style: normal; - background-color: var(--clr-text-highlight); - padding: 1px 2px; - margin-right: -2px; - } - - & strong { - font-weight: 700; - } - -} - - -.question-result, .result-stats { - background-color: var(--clr-medium-yellow); - border-radius: 0.75rem; - font-size: var(--fs-base); - line-height: 1.4; - padding: 1rem 0.75rem; -} - -.result-actions { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.5rem; - - & a { - background-color: var(--clr-medium-yellow); - border-color: var(--clr-medium-yellow); - color: var(--clr-black) - } -} - -.answers-distribution { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - - - height: 45dvh; - max-height: 300px; - - & > div { - box-sizing: border-box; - padding: 1rem 0.75rem; - background-color: var(--clr-medium-yellow); - border-radius: 0.75rem; - color: var(--clr-dark-yellow); - font-size: var(--fs-s); - font-weight: 700; - line-height: 1.3; - - align-self: end; - - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 0; - - transition: background-color 200ms ease-in-out, color 200ms ease-in-out; - - &.answered { - background-color: var(--clr-white); - color: var(--clr-black); - } - } - - & .explanation { - display: none; - } - - & .percentage { - font-size: var(--fs-4xl); - line-height: 1; - opacity: 0; - - &::after { - content: '%'; - font-size: 2.5rem; - } - } -} - -.breakable { - overflow-wrap: break-word; - word-wrap: break-word; - hyphens: auto; -} - - -.result-msg { - background-color: var(--clr-white); - border-radius: 0.75rem; - font-size: var(--fs-base); - line-height: 1.4; - padding: 1.25rem 0.75rem; - - & h1 { - font-size: var(--fs-3xl); - line-height: 1.1; - margin: 0 0 0.4em 0; - overflow-wrap: break-word; - word-wrap: break-word; - hyphens: auto; - } - - & div:first-child { - font-weight: 700; - } -} - - -label.question-answer { - display: flex; - align-items: start; - height: 6.75rem; - cursor: pointer; - padding: 1rem 0.75rem; - border-radius: 1rem; - background-color: var(--clr-white); - - & input { - flex-grow: 1; - border: none; - outline: none; - font-size: var(--fs-lg); - line-height: 1.4; - padding: 0; - } - - &:has(.field_with_errors) { - outline: 4px solid var(--clr-text-highlight); - outline-offset: -4px; - } -} - -label { - cursor: pointer; -} - -.animation-element { - box-sizing: border-box; - opacity: 0; - padding-top: 8px; - - &:last-child { - padding-top: 12px; - } - - & > * { - box-sizing: border-box; - } -} - -.typewriter-cursor::after { - content: '|'; - animation: typewriter-blink 1s infinite; - color: currentColor; - font-weight: 400; - position: absolute; -} - -@keyframes typewriter-blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} -/*.cursor { - animation: blink 1000ms infinite; - color: var(--clr-black); - font-weight: 400; -} - -@keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -}*/ - - -@media (min-width: 815px) { - header { - top: 1.25rem; - left: 1.875rem; - - } - - main { - padding: calc(50px + 1.25rem) 1.25rem 1.875rem 1.25rem; - } - - footer { - top: 1.25rem; - right: 1.875rem; - - } - -} - [data-locale] { display: none; } diff --git a/app/controllers/admin/nodes_controller.rb b/app/controllers/admin/nodes_controller.rb index 79fada1..723b346 100644 --- a/app/controllers/admin/nodes_controller.rb +++ b/app/controllers/admin/nodes_controller.rb @@ -36,7 +36,6 @@ class Admin::NodesController < Admin::AdminController @node = Node.new(node_params) @node.status = :status_draft - @node.template = @node.root.site? ? Node::NODE_TEMPLATES.first : Node::TILE_TEMPLATES.first base_title = t('ui.untitled') title = base_title diff --git a/app/helpers/admin/nodes_helper.rb b/app/helpers/admin/nodes_helper.rb index 74043f9..731e9df 100644 --- a/app/helpers/admin/nodes_helper.rb +++ b/app/helpers/admin/nodes_helper.rb @@ -7,7 +7,7 @@ module Admin::NodesHelper result << [parent.title, parent.id] if parent.root? parent.children.ordered.each do |child| - result << ["#{"\u00A0\u00A0" * (child.depth)}#{child.title}".html_safe, child.id, { disabled: (child == node or child.ancestor_ids.include?(node.id)) }] + result << ["#{"-" * (child.depth)} #{child.title}".html_safe, child.id, { disabled: (child == node or child.ancestor_ids.include?(node.id)) }] result = result + node_structure_for_select(child, node) end diff --git a/app/models/node.rb b/app/models/node.rb index 2c8807d..fd52de1 100644 --- a/app/models/node.rb +++ b/app/models/node.rb @@ -12,27 +12,28 @@ class Node < ApplicationRecord extend Mobility translates :slug, - :tags, - locale_accessors: I18n.available_locales, - fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, fr_ca: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en} + :tags, + locale_accessors: I18n.available_locales, + fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, fr_ca: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en} translates :title, - :url, - :href, - :page_title, - :page_description, - locale_accessors: I18n.available_locales, - fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, fr_ca: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en} + :url, + :href, + :page_title, + :page_description, + locale_accessors: I18n.available_locales, + fallbacks: {zh: :en, hr: :en, cs: :en, da: :en, nl: :en, fi: :en, fr: :en, fr_ca: :en, de: :en, hu: :en, it: :en, ja: :en, ko: :en, nb: :en, pl: :en, pt: :en, ro: :en, sr: :en, sk: :en, sl: :en, es: :en, sv: :en, uk: :en} - NODE_TEMPLATES = %w"tmpl_article tmpl_index tmpl_list" enum :status, { status_published: 0, status_draft: 1, status_archived: 2 } - enum :template, { tmpl_index: 0, - tmpl_article: 1, - tmpl_list: 2 - } + enum :template, { + tmpl_article: 0, + tmpl_chance: 1, + tmpl_choice: 2, + tmpl_bonus: 3 + } include PgSearch::Model pg_search_scope :pg_search, diff --git a/app/views/admin/nodes/_form.html.erb b/app/views/admin/nodes/_form.html.erb index f647c6f..bca8334 100644 --- a/app/views/admin/nodes/_form.html.erb +++ b/app/views/admin/nodes/_form.html.erb @@ -65,11 +65,12 @@ } unless form.object.root? %> <%= render partial: 'material/select_field', - locals: { - f: form, - attr: :template, - include_blank: form.object.root?, - choices: Node.templates.slice(*(Node::NODE_TEMPLATES)).map { |k,v| [t(k, scope: :'nodes.templates'), k] }.sort } %> + locals: { + f: form, + attr: :template, + include_blank: false, + choices: Node.templates.map { |k,v| [t(k, scope: :'nodes.templates'), k] }.sort + } %> <%= render partial: 'material/tom_select_field', locals: { diff --git a/app/views/languages/index.html.erb b/app/views/languages/index.html.erb index 9551649..b065a57 100644 --- a/app/views/languages/index.html.erb +++ b/app/views/languages/index.html.erb @@ -1,38 +1,3 @@ -<%- - content_for :title, t('project_name') - - -%> - - -
- - -
- -
- <%= 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' - } %> -
-
- <%= t accept_language, scope: 'languages' %> - <%= svg 'ico-arrow-down' %> -
-
-
- -
- -
- <%= render partial: 'intro' %> -
- -
- +<%- content_for :title, t('project_name') %> +

Intro

\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 094a560..2550ef9 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -4,14 +4,10 @@ <%= content_for?(:title) ? yield(:title) : t(:project_name) %> - - <%= tag :meta, name: 'description', content: content_for?(:meta_description) ? yield(:meta_description) : (@node.present?? @node.page_description : '') %> - - - - - + + <%= tag.meta name: 'description', content: content_for?(:meta_description) ? yield(:meta_description) : (@node.present?? @node.page_description : '') %> + <%= csrf_meta_tags %> <%= csp_meta_tag %> @@ -27,7 +23,7 @@ -
+
<%= link_to svg('ikea-foundation-203x22'), url_for(controller: 'languages', action: (I18n.default_locale == I18n.locale ? 'index' : 'show')) %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 09ff0cd..854f8c5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -210,9 +210,10 @@ en: en: English de: German templates: - tmpl_index: Get started - tmpl_list: Result - tmpl_article: Question + tmpl_article: Side + tmpl_chance: Chance + tmpl_choice: Choice + tmpl_bonus: Bonus chance categories: box: Box folder: Folder diff --git a/update_css.rb b/update_css.rb deleted file mode 100644 index c94bae6..0000000 --- a/update_css.rb +++ /dev/null @@ -1,42 +0,0 @@ - -FILES = [ - "app/assets/stylesheets/admin.css", - "app/assets/stylesheets/application.css", - "app/assets/stylesheets/assets.css", - "app/assets/stylesheets/attachments.css", - "app/assets/stylesheets/form.css", - "app/assets/stylesheets/forms.css", - "app/assets/stylesheets/lists.css", - "app/assets/stylesheets/nodes.css", - "app/assets/stylesheets/popup-menu.css", - "app/assets/stylesheets/sessions.css", - "app/assets/stylesheets/tom-select.css" -] - -FILES.each do |file_path| - full_path = File.join(Dir.pwd, file_path) - next unless File.exist?(full_path) - - content = File.read(full_path) - - # 1. Recalculate rem values - # Improved regex to handle .75rem as well as 0.75rem and 1rem - content.gsub!(/(\d*\.\d+|\d+)rem/) do |match| - numeric_part = $1 - val = numeric_part.to_f - new_val = (val * 0.625).to_r.to_f - formatted_val = new_val.to_s.gsub(/\.0$/, "") - # If the original was .75rem, we might want to keep the dot-only style, - # but 0.46875rem is more standard and safer. - "#{formatted_val}rem" - end - - # 2. Update font-size/font from 10px to 16px - # Only inside font or font-size declarations - content.gsub!(/(font(?:-size)?\s*:\s*[^;]+;)/i) do |decl| - decl.gsub(/\b10px\b/, "16px") - end - - File.write(full_path, content) - puts "Updated #{file_path}" -end