Style calculators constructor show page #984

olexandervanzuriak · 2024-11-26T15:54:56Z

#963

Code reviewers

@loqimean

Summary of issue

All calculators should be in the same style as the diaper and menstrual hygiene calculator

the same colors by default
the same font by default

Result

Video1.mp4

Testing approach

Tested locally

CHECK LIST

СI passed
Сode coverage >=95%
PR is reviewed manually again (to make sure you have 100% ready code)
All reviewers agreed to merge the PR
I've checked new feature as logged in and logged out user if needed
PR meets all conventions

…cts/ZeroWaste into 963-view-of-the-constructors-calculator

codecov · 2024-11-26T16:28:01Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.31%. Comparing base (9130d91) to head (e144e42).
Report is 48 commits behind head on calculators-constructor.

Additional details and impacted files

@@                     Coverage Diff                     @@
##           calculators-constructor     #984      +/-   ##
===========================================================
+ Coverage                    83.98%   85.31%   +1.33%     
===========================================================
  Files                           65       65              
  Lines                          974      974              
===========================================================
+ Hits                           818      831      +13     
+ Misses                         156      143      -13

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

loqimean · 2024-11-27T14:25:08Z

app/views/calculators/show.html.erb

-<div class="container place-items-center">
-  <h1 class="text-4xl font-bold">Calculator <%= @calculator.name %></h1><br>
+<%# TODO: Delete this and use user provided value %>
+<% color = "blue" %>


колір має передаватися хексом

loqimean · 2024-11-27T14:26:51Z

app/views/calculators/show.html.erb

+<% calculator_image = "scales.png" %>
+
+<div class="rounded jumbotron jumbotron-fluid position-relative">
+  <h1 class="pt-6 text-2xl font-semibold text-center font-sans text-<%= color %>">Calculator <%= @calculator.name %> <%= @text %></h1>


не гуд. додай в конфіги color: { dynamic: "var(--calculator-color)" }, щось таке, тоді тут вже будеш десь зверху сетати цю змінну: <div style="--calculator-color: <%= @calculator.color %>">

loqimean · 2024-11-27T14:27:06Z

config/tailwind.config.js

+  safelist: [
+    {
+      pattern: /bg-.*/,
+    },
+    {
+      pattern: /text-.*/,
+    },
+  ],


це відповідно видалиш

loqimean · 2024-11-27T14:27:30Z

app/services/calculators/calculation_service.rb

@@ -1,4 +1,6 @@
 class Calculators::CalculationService
+  include ApplicationHelper


не гуд

loqimean · 2024-11-27T14:28:53Z

app/services/calculators/calculation_service.rb

+      if current_locale?(:en)
+        { label: formula.en_label, result: result, en_unit: formula.en_unit }
+      else
+        { label: formula.uk_label, result: result, en_unit: formula.uk_unit }
+      end


тут ти можеш додати локальзацію додним рядком грубо кажучи:

{ label: formula.public_send("#{I18n.locale}_label") }

та навіть прсотіше того, бо мав би бути підключений до формули концерн транслейтебел (він сам в залежності від локалі бере потрібний переклад):

{ label: formula.label }

loqimean · 2024-11-28T17:27:07Z

app/views/calculators/partials/show/_constructor_calculator_description.erb

+    <div class="description-content-box">
+      <p data-type="description_block_html" class="description-text">
+        <%# TODO: Change description text and links %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus arcu iaculis placerat euismod. Pellentesque nibh arcu, varius ac arcu a, eleifend semper leo. Aliquam ultricies lacus at mi ornare, sit amet vestibulum est fermentum. Praesent sed dapibus elit. Curabitur congue ante non metus posuere porttitor. Etiam non lacus imperdiet turpis pellentesque viverra. Nulla in velit mi. Suspendisse molestie tempor ornare. 


забери текст

Додай умову, щоб не показувати секцію, поки нема контенту (просто if false)

залиш тік div, бо контент едітора, який потім додадуть, буде містити багато інших тегів і так буде правельніше

має бути просто div, в який потім передадуть контент одною строкою

loqimean · 2024-11-29T12:27:49Z

app/views/calculators/partials/show/_constructor_calculator_description.erb

+  <div>
+    <%# TODO: Add description partial here %>
+  </div>


а чому ти всі стилі видалив? ти мав залишити весь той контейнер, просто без контенту

loqimean · 2024-11-29T12:28:31Z

app/views/calculators/partials/_calculation_results.html.erb

+<% color = "#088F8F" %>
+
+<%# TODO: Delete this and use user provided value%>
+<% formula_image = "money_to_spent_2.png" %>
+
+<div style="--calculator-color: <%= color %>" class="calculation-results rounded jumbotron jumbotron-fluid position-relative">


а навіщо тут також колір передавати? він зверху передається та й все, ну на шоу пейджі

loqimean · 2024-11-29T12:28:53Z

app/views/calculators/show.html.erb

    </div>
  <% end %>
+  <%= image_tag "#{calculator_image}", class: "scales_img", alt: "Scales" %>


а навіщо ти в стрінгу огортаєш змінну?

loqimean · 2024-11-29T12:29:06Z

app/views/calculators/show.html.erb

    </div>
  <% end %>
+  <%= image_tag "#{calculator_image}", class: "scales_img", alt: "Scales" %>


alt через I18n пиши

loqimean · 2024-11-29T14:37:32Z

app/views/calculators/partials/_calculation_results.html.erb

+          <%= image_tag "#{formula_image}", class: "img-margin", alt: "icon" %>
+          <p class="dynamic-text-color"><%= result[:result] %></p>
+          <p class="text-2xl dynamic-text-color"><%= result[:unit] %></p>
+          <p class="diapers-font-text"><%= result[:label] %></p>


вирівняй

loqimean · 2024-11-29T14:38:11Z

app/views/calculators/partials/show/_constructor_calculator_description.erb

+    <div class="description-content-box">
+      <p data-type="description_block_html" class="description-text">
+        <%# TODO: Add description text and links %>
+      </p>
+    </div>
+    <div class="description-btn-box">
+      <%# TODO: Add discription btn link here %>
+    </div>


має бути один ендпоінт, куди буде закидатися контент, ну я ж казав про це

засинкайся з Сашею, вона тобі покаже, що на виході має, ви маєте законектитись

Style show page

70ce755

olexandervanzuriak requested a review from loqimean November 26, 2024 15:54

olexandervanzuriak added 2 commits November 26, 2024 17:58

Fix formatting

8744fe7

Merge branch 'calculators-constructor' of github.com:ita-social-proje…

8a0a37f

…cts/ZeroWaste into 963-view-of-the-constructors-calculator

olexandervanzuriak added 2 commits November 27, 2024 13:24

Added calculation service helper test

3bf95ba

Added change color logic

fa90e50

olexandervanzuriak self-assigned this Nov 27, 2024

loqimean requested changes Nov 27, 2024

View reviewed changes

olexandervanzuriak added 3 commits November 27, 2024 19:03

fix dynamic colors adding

fca482e

Change calculation_service logic

6e9fd0d

Fix calculation_service_helper test

2a5b0c2

olexandervanzuriak requested a review from loqimean November 27, 2024 17:18

loqimean requested changes Nov 28, 2024

View reviewed changes

olexandervanzuriak added 4 commits November 28, 2024 19:37

Change constructor calculatior description partial

2314773

Added space

6944ef3

Change constructor calculator description partial

e50181b

Added comment

ba40fe9

olexandervanzuriak requested a review from loqimean November 28, 2024 18:15

loqimean requested changes Nov 29, 2024

View reviewed changes

Fix image and added alt I18n and change calculation result partial

847f32e

olexandervanzuriak requested a review from loqimean November 29, 2024 13:01

loqimean requested changes Nov 29, 2024

View reviewed changes

Code formatting

e144e42

olexandervanzuriak requested a review from loqimean November 29, 2024 15:46

loqimean approved these changes Nov 29, 2024

View reviewed changes

olexandervanzuriak merged commit 679ae88 into calculators-constructor Nov 29, 2024
5 checks passed

olexandervanzuriak deleted the 963-view-of-the-constructors-calculator branch November 29, 2024 16:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style calculators constructor show page #984

Style calculators constructor show page #984

olexandervanzuriak commented Nov 26, 2024 •

edited

Loading

codecov bot commented Nov 26, 2024 •

edited

Loading

loqimean Nov 27, 2024

olexandervanzuriak Nov 27, 2024

loqimean Nov 27, 2024

olexandervanzuriak Nov 27, 2024

loqimean Nov 27, 2024

olexandervanzuriak Nov 27, 2024

loqimean Nov 27, 2024

olexandervanzuriak Nov 27, 2024

loqimean Nov 27, 2024

loqimean Nov 27, 2024

olexandervanzuriak Nov 27, 2024

loqimean Nov 28, 2024

loqimean Nov 28, 2024

loqimean Nov 29, 2024

loqimean Nov 29, 2024

loqimean Nov 29, 2024

loqimean Nov 29, 2024

loqimean Nov 29, 2024

loqimean Nov 29, 2024

loqimean Nov 29, 2024

		@@ -1,4 +1,6 @@
		class Calculators::CalculationService
		include ApplicationHelper

Style calculators constructor show page #984

Style calculators constructor show page #984

Conversation

olexandervanzuriak commented Nov 26, 2024 • edited Loading

Code reviewers

Summary of issue

Result

Testing approach

CHECK LIST

codecov bot commented Nov 26, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

olexandervanzuriak commented Nov 26, 2024 •

edited

Loading

codecov bot commented Nov 26, 2024 •

edited

Loading