Implement focus mode in the budget projects component#14512
Implement focus mode in the budget projects component#14512
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
5b3f1bc to
98353fd
Compare
There was a problem hiding this comment.
Hi @mllocs, thanks for your effort on this 💪
Here is my review:
Bottom sheet
-
Message in bottom sheet: It seems that in mobile this message is hardcoded and it's not changing according to the rules that admins define.
-
See the message in Desktop (as it should be):
-
See the message in mobile:
-
Bottom sheet is breaking the list view when the Sticky button is shown.
Copies
-
Change copy of the info message. Right now, depending on the voting rules, is:
-
"Start adding projects. Assign at least €750,000 to the projects you want and vote according to your preferences
to define the budget." or -
"Start adding projects. Select at least 3 projects you want and vote according to your preferences
to define the budget."
We want to simplify it by getting rid of the last part of the sentence "to define the budget". -
In the projects list, we want to change "Select Projects" for "Add projects" to give more consistency across all the terms used.
CTA Copy
- If I'm not verified, I should see the "Start Voting" CTA as "Verify yourself to vote". When I click on the CTA, I'm prompted with the verification form, and then, I can click on the "Start voting" CTA.
For this, is important to avoid do something that could cause a performance issue in Decidim. As a lot of people will be visting at the same time this page, and depending on their verification status, the CTA will be rendered on different ways.
Project page
- If as a visitant, I click on the "Add project" CTA. I should be redirected to the Ephemeral Verification form. Not to the log-in modal.
Enregistrament de pantalla del 2025-04-11 12-47-08.webm
Back button
- Change the copy for “Back to list”
- Format del Back button in desktop, should be all in blue.
Design fixes
-
In desktop, on budgets landing page, if I have voted on a budget, the card is broken. It should be with the same width as the others.
-
Sticky button “Start voting” is mixed with language selector.
Modal messages
-
Primary button. When I have not finish my voting and I click the "Cancel" button on focus mode. The primary CTA should be "Continue Voting", and "Exit Voting" should be a secondary button. Could be apply the proto design? See how it was defined in the prototype:
-
Ok Button Wrong behaviour. In this modal, clicking the "Ok" button (that should be "continue voting") is kicking me out of the budget. However, it should keep me in the same page.
-
Weird behaviour of modals. It seems there are two modals mixed, that appears randomly. It might be something related to ephemeral users. You have a clue on what could be happening here?
Option a)
Option b)
|
Hi @mllocs thanks for all the changes, a few comments: Regarding this:
For the record: We have changed the approach. So after the verification, you are redirected to the project list, where you can start adding projects. Project pageI'm adding a new request I just detected:
|
|
Thanks @mllocs, everything working as expected! Just a small detail: Following this flow: If as a visitant, I click on the "Add project" CTA. I should be redirected to the Ephemeral Verification form. Now I'm redirected to the project page without focus mode, this can block participants on that page (https://decidim-lot2.populate.tools/processes/branch-highway/f/6/budgets/3/projects/14): Instead of this, I should be redirected to the same page but with Focus Mode enabled (https://decidim-lot2.populate.tools/processes/branch-highway/f/6/budgets/3/focus/projects/14): |
|
@mllocs could you fix the code climate as well |
decidim-budgets/app/cells/decidim/budgets/project_l/extra_data.erb
Outdated
Show resolved
Hide resolved
decidim-budgets/app/controllers/decidim/budgets/focus/projects_controller.rb
Show resolved
Hide resolved
decidim-budgets/app/controllers/decidim/budgets/focus/projects_controller.rb
Show resolved
Hide resolved
decidim-budgets/app/controllers/decidim/budgets/focus/projects_controller.rb
Outdated
Show resolved
Hide resolved
decidim-budgets/app/controllers/decidim/budgets/focus/projects_controller.rb
Outdated
Show resolved
Hide resolved
Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>
Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>
…ows features (#46) * Improve registration and verification flow (decidim#13295) Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro> Co-authored-by: Maxim Colls <collsmaxim@gmail.com> * Fix title on spec for the 'Create new proposal' page (decidim#14347) * Fix title on spec for the 'Create new proposal' page * Fix another spec * Remove scopes_select_field from dummy authorization form * Fix admin pipeline with `welcome_notification_body` spec error (decidim#14475) * Standardize direct verification for one-time participation (decidim#13579) Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro> Co-authored-by: Hugoren Martinako <aumpfbahn@gmail.com> * Fix title on spec for the 'Create new proposal' page (decidim#14347) * Fix title on spec for the 'Create new proposal' page * Fix another spec * Remove scope from tests * Make transferable authorization when duplicate user is ephemeral (decidim#13981) * Implement share and download buttons in budget successful vote screen (decidim#14283) Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro> * Extract success animation to a helper * Fix HexaPDF dependency (decidim#13834) * Fix HexaPDF dependency * Fix Gemfile * Remove reference to rqrcode * Update decidim-generators lockfile * Implement focus mode in the budget projects component (decidim#14512) Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro> * Allow customization of focus_mode_back_button text and path and use in projects index * Define a setting in budgets component to enter in focus mode by default voting budgets * Hide start voting button if voting is not available * Hide voting progress box in project show if not in focus mode * Consider focus mode settings in budgets lists cells * Adapt tests * Do not display vote text in budget list item cell if voting is not available * Set authorization_redirect_path of project vote button to take into account focus mode * Avoid duplication of button id * Allow displaying close focus mode or ephemeral session on header with focus mode back button * Adapt tests * Add missing i18n strings from ca/es (#49) * Use focus mode and Vote text regardless the allowed vote status * Define budget order status view in focus mode * Redirect to focus mode endpoints when component settings sets focus mode as default * Fix linter offense Co-authored-by: Andrés Pereira de Lucena <andreslucena@users.noreply.github.com> * Remove unused translations * Fix tests * Add new strings for the budgets voting phase * Remove 'Download your vote' from the success page in Budgets * Fix size in project's title * Remove unused strings * Change bold messages in the budget's voting explanation * Change behavior of the minimum budget so it's minimum projects * Redirect authorized vote button in projects index to the same page * Exclude focus navigation links from exit focus warning modal behavior * Normalize i18n on English locale and make consistent the other translations * Fix budget detail with "You voted for this" string (decidim#14284) * Adapt tests * Add highlighted colors on the different states of the budgets' voting (#55) * Add highlighted colors on the different states of the budgets' voting * Improve the message in the finished budget voting * Fix linter offense * Remove share button and fix header close button (#56) * Remove share button and center CTA * Add title to success page * Fix placing of the Cancel button in ephemeral/focus modes * Remove unused strings from i18n-tasks --------- Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro> Co-authored-by: Maxim Colls <collsmaxim@gmail.com> Co-authored-by: Hugoren Martinako <aumpfbahn@gmail.com> Co-authored-by: Andrés Pereira de Lucena <andreslucena@users.noreply.github.com> Co-authored-by: Andrés Pereira de Lucena <andreslucena@gmail.com> Co-authored-by: Francisco Bolívar <francisco.bolivar@nazaries.com>
🎩 What? Why?
This PR simplifies the process of voting a budget by introducing a new "path" called focus mode. Overall, this simplifies the UI and guides the user through the steps.
📌 Related Issues
Testing
📷 Screenshots