Skip to content

Redesign: meeting cards#10722

Merged
ferblape merged 19 commits intofeature/redesignfrom
feature/redesign-meeting-cards-l-g
May 16, 2023
Merged

Redesign: meeting cards#10722
ferblape merged 19 commits intofeature/redesignfrom
feature/redesign-meeting-cards-l-g

Conversation

@Crashillo
Copy link
Copy Markdown
Contributor

@Crashillo Crashillo commented Apr 14, 2023

🎩 What? Why?

This is a technical refactor:

  • Move some common CSS to the core to avoid requiring the meetings asset chunks.
  • Solves a naming conflict among the meeting cards and other cell
  • Wraps the meeting body using the dynamic-texts css class, after this one was removed from the sanitize methods

NOTE: Meeting G card does not apply

📌 Related Issues

📷 Screenshots

@Crashillo Crashillo added the project: redesign Barcelona City Council contract label Apr 14, 2023
@Crashillo Crashillo linked an issue Apr 14, 2023 that may be closed by this pull request
@Crashillo Crashillo requested a review from ferblape April 14, 2023 15:13
@Crashillo Crashillo linked an issue Apr 14, 2023 that may be closed by this pull request
@Crashillo Crashillo requested a review from furilo April 14, 2023 15:30
@ferblape ferblape requested a review from a team April 27, 2023 07:49
@furilo
Copy link
Copy Markdown
Contributor

furilo commented May 3, 2023

You can review this @decidim/product

Copy link
Copy Markdown
Member

@carolromero carolromero left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! As this is a technical refactor I'm not sure if it applies, but fwiw this is the feedback on the links to review in the PR. Feel free to reuse some of it in a new issue so as not to block this PR.

Search page lists meetings (and meetings index view)

  • The changing position of some metadata is confusing and we believe it forces the participant to figure out what they are seeing in each row.
    image
    To avoid this we believe that the metadata to display are these and in this order:
  • Type
  • Duration
  • Comments (if there are no comments, show the icon plus 0)
  • Category (this can be optional but placing it at the end generates less friction)

We leave out the origin metadata (whether it is official or not), as this information is not very relevant in most cases because it is almost always "official".

Meeting body

  • We are aware that the redesign of online meetings is in the backlog but, as it is closely related, here are some problems and doubts we have with the current design of the meeting body:

The date + address/location + map layout

  • Online meetings: If the meeting is online this layout is incomplete, showing only the date of the event and an empty space after that.
    image
  • In-person or hybrid meetings: the current implementation of the map does not add value (although the zoom level could be adjusted to give better context). But even so, perhaps it is sufficient that the address is a link to the map.
    image

On the other hand, the sidebar, which changes depending on the settings and the time of the meeting (before, during or after), is a bit underutilized:
https://decidim-redesign.populate.tools/assemblies/coordination-committee/f/1037/meetings/1805
https://decidim-redesign.populate.tools/assemblies/coordination-committee/f/1037/meetings/1768

So, after some thought and discussion with the rest of @decidim/product, we think it would be worth exploring the option to bring the date and location (which will be a link whether it is an in-person or online meeting) to the sidebar. Nevertheless, if you already had an idea to solve this layout for online meetings, we are happy to discuss it.

Other things we have realized while reviewing:

  • We were wondering about the sticky sidebar when scrolling. What is the status of this?
  • The follow/share/report options are missing.

@Crashillo
Copy link
Copy Markdown
Contributor Author

To avoid this we believe that the metadata to display are these and in this order:

Type
Duration
Comments (if there are no comments, show the icon plus 0)
Category (this can be optional but placing it at the end generates less friction)

We leave out the origin metadata (whether it is official or not), as this information is not very relevant in most cases because it is almost always "official".

There were a withdrawn_item indicator also that I placed after category. Besides, for consistency, both comments and endorsers will display zero items (meetings are not endorsable, but some other resources are)

@furilo
Copy link
Copy Markdown
Contributor

furilo commented May 9, 2023

We were wondering about the sticky sidebar when scrolling. What is the status of this?

Are you thinking on having this sticky only in meetings, or for all components? In the context of Decidim, I'm a little bit afraid of doing this. The theory is simple, but given the myriad of possible combinations it won't be long until we have a sidebar content which is taller than the available viewing height, which would produce an inner scroll in that area... which is not fun regarding usability.

Online meetings review -> #10172

@Crashillo Crashillo requested a review from carolromero May 9, 2023 15:11
@Crashillo Crashillo mentioned this pull request May 9, 2023
Copy link
Copy Markdown
Member

@carolromero carolromero left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @Crashillo! I think we can move forward now.
@furilo I'll add the topic of the sticky bar to our agenda of next week's meeting.

@ferblape ferblape requested a review from a team May 10, 2023 11:14
@ferblape ferblape merged commit 4971539 into feature/redesign May 16, 2023
@ferblape ferblape deleted the feature/redesign-meeting-cards-l-g branch May 16, 2023 10:02
@ferblape
Copy link
Copy Markdown
Contributor

Merged, as we need it for the tests PR

entantoencuanto added a commit that referenced this pull request May 16, 2023
* feature/redesign:
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
entantoencuanto added a commit that referenced this pull request May 16, 2023
* feature/redesign:
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
  Redesign: processes groups content blocks (#10491)
entantoencuanto added a commit that referenced this pull request May 16, 2023
* feature/redesign:
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
@entantoencuanto entantoencuanto restored the feature/redesign-meeting-cards-l-g branch May 17, 2023 17:59
@entantoencuanto entantoencuanto deleted the feature/redesign-meeting-cards-l-g branch May 17, 2023 18:01
entantoencuanto added a commit that referenced this pull request May 18, 2023
…blies-details-page

* feature/redesign:
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
entantoencuanto added a commit that referenced this pull request May 22, 2023
…dcrumb

* feature/redesign:
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
entantoencuanto added a commit that referenced this pull request May 22, 2023
* feature/redesign:
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
entantoencuanto added a commit that referenced this pull request May 22, 2023
* feature/redesign:
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
entantoencuanto added a commit that referenced this pull request May 22, 2023
…rafts

* feature/redesign:
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
  Redesign: processes groups content blocks (#10491)
  Redesign: assemblies content blocks (#10573)
entantoencuanto added a commit that referenced this pull request May 22, 2023
…-comments

* feature/redesign:
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
entantoencuanto pushed a commit that referenced this pull request May 26, 2023
* renaming meeting cell due to conflict with cards

* move some styles to the core to avoid loads additional chunks

* wrap body with the dynamic class

* update test markup

* cell spec must call to the cell itself

* update test markup

* fix typo

* update test markup

* useless css binding

* fix test

* move minutes after agenda, from tabs

* include dynamic css class for texts

* meetings metadata items order

* show comments and endorsers even they're zero

* include resource options in the sidebar

* fix test
entantoencuanto added a commit that referenced this pull request May 26, 2023
…rafts

* feature/redesign:
  Feature/redesign components breadcrumb (#10441)
  Redesign: debates (#10653)
  Redesign: Remove reference to commentable in activity cell (#10816)
  Redesign: spinner (#10848)
  Redesign: omnipresent banner (#10847)
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
  Redesign: processes groups content blocks (#10491)
  Redesign: assemblies content blocks (#10573)
entantoencuanto added a commit that referenced this pull request May 26, 2023
* feature/redesign: (21 commits)
  Feature/redesign components breadcrumb (#10441)
  Redesign: debates (#10653)
  Redesign: Remove reference to commentable in activity cell (#10816)
  Redesign: spinner (#10848)
  Redesign: omnipresent banner (#10847)
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
  simplify 2col layout (#10819)
  Redesign: processes groups content blocks (#10491)
  Redesign: assemblies content blocks (#10573)
  Redesign: process & process group cards (#10716)
  Redesign: conference cards (#10502)
  Redesign: pending blogs (#10686)
  Redesign: blog cards (#10685)
  Redesign: filters (#10390)
  replace uses of specific margin-bottom for layout margins (#10675)
  Redesign: menu mobile (#10351)
  Fix comments scss to avoid compilation errors (#10657)
  ...
entantoencuanto added a commit that referenced this pull request Jun 2, 2023
* feature/redesign:
  Redesign: amendments (#10765)
  Redesign: proposals (#10555)
  Remove unused preset-env dependencies (#10916)
  Feature/redesign components breadcrumb (#10441)
  Redesign: debates (#10653)
  Redesign: Remove reference to commentable in activity cell (#10816)
  Redesign: spinner (#10848)
  Redesign: omnipresent banner (#10847)
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
entantoencuanto added a commit that referenced this pull request Jun 2, 2023
* feature/redesign:
  Redesign: amendments (#10765)
  Redesign: proposals (#10555)
  Remove unused preset-env dependencies (#10916)
  Feature/redesign components breadcrumb (#10441)
  Redesign: debates (#10653)
  Redesign: Remove reference to commentable in activity cell (#10816)
  Redesign: spinner (#10848)
  Redesign: omnipresent banner (#10847)
  Add redesign enable ENV variable to control the pipeline (#10610)
  Redesign: progress bar (#10638)
  Redesign: meeting cards (#10722)
  Redesign: pending login (#10699)
ferblape pushed a commit that referenced this pull request Jun 7, 2023
* aside from collaborative draft index

* list of collaborative drafts

* define card L & metadata

* main from collaborative draft show

* aside from collaborative draft show

* fix links between versions

* redesign forms

* fix erblint

* fix i18n

* expand button

* normalize i18n

* fix css glitches collaborative drafts

* Remove index from collaborative drafts versions

* include version links in the aside as well

* avoid warning rspec

* create assets for proposals (partial cherrypicked f1e2324)

* move "create proposal" to the last position

* collaborative drafts states

* fix tests cell

* fix state text for show

* fix tests

* fix tests

* Update decidim-proposals/config/locales/en.yml

Co-authored-by: Carolina Romero <carolromero@users.noreply.github.com>

* Redesign: assemblies content blocks (#10573)

* Declare participatory spaces content blocks scope name in manifest and extract to a controller concern

* Add admin management of content blocks in assemblies

* Register html content block in assemblies

* Get content block scope name from space manifest in participatory processes

* Make use of manifest to obtain scope_class and base model in spaces content blocks

* Register content blocks of documents and images in assemblies using core cell

* Use core content blocks for images and documents on processes and remove unnecesary ones

* Use core content blocks for announcement on processes and assemblies and remove unnecesary ones

* Use core content blocks for last activities on processes and assemblies and remove unnecesary ones

* Define stats content block for assemblies and register it

* Register highlighted results, meetings, posts and proposals content blocks for assemblies

* Move participatory processes hero content block to generic block in core

* Register hero block for assemblies

* Remove hero block from assembly layout header

* Change assembly_nav_items helper method to accept participatory space argument

* Define and register main data content block cell for assemblies

* Define and register metadata content block for assemblies

* Define children assemblies cell

* Reorder content blocks

* Change div class wrapping assemblies list on cell

* Allow configuring title on assemblies cell and set it on content blocks using it

* Change query of related processes cell depending on participatory space class

* Hide related assemblies and processes cell if there are no elements to show

* Change default max results on featured processes and assemblies content blocks

* Fix condition

* Recover partial used by old layout

This partial is expected to be removed after fully enabling redesign

* Remove static content blocks from assembly show and remove deprecated partials

* Move assembly breadcrumb in show

* Remove unused translation

* Remove deprecated assembly card-g show

The generation of the view is done by the parent class

* Fix selector in test

* Update selectors in test

* Add trait to include content blocks in assemblies factories and use them to fix examples

* Fix shared examples for assemblies adding content blocks

* Hide stats content blocks if processes or assemblies disable show statistics

* Update assembly show tests

This test adds the content blocks required to test the contents and
updates the selectors changed with the redesign

* Unify tests

* remove data attribute from process_header partial pending of redesign

* Allow participatory space hero cell to define and include a cta link

* Define specific hero_cell for processes to include CTA item

* Update tests to check CTA in hero content block

* Update assembly members spec

* Skip filters tests temporarily on assemblies index pending of filters branch merge

* Update tests after changing default max results values

* Allow the insertion of hooks in card metadata cell

* Add upcoming_meeting_for_card hook in assembly card-g metadata

* Change upcoming_meeting_for_card hook output depending of redesign enablement

* Adapt test

* Fix content_block_scope_name in process group landing page admin controller

* Ensure that no content blocks related to inactive modules are registered

* Change sanitize method for short description on assembly main data cell

Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>

* Add with_type to assemblies ransackable scopes

* Integrate assemblies index filter

* Adapt assemblies filters tests to redesign

* Skip failing test extracted to an issue

* Ignore unused assemblies filters keys translations

* Update filter params in test

---------

Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>

* Redesign: processes groups content blocks (#10491)

* Pass the options to the metadata cell from card_l and card_g and disable links if the whole card has a link

* Pass in highlighted items for component a show_space option

* Pass the show_space option from some highlighted resources content blocks settings

* Move active content blocks query to controller

* Use generic html cell for corresponding content block on processes groups

* Set component_manifest_name on register of hihglighted resources blocks for processes groups

* Fix selectors in tests of processes groups page

* Add sleep

* Change content statistics content block in processes groups to use the redesigned version

* Update tests

* Remove unnecesary blank spaces

* Fix test to check private space message depending on content blocks configuration

* Remove deprecated examples on steps index page of a participatory process

* Move private space announcement out of content blocks

* Rename registry name of hero content block in processes

* Fix selector in test

* Rename registry name of hero content block in processes

* Fix ambiguous tests

* Fix manifest name in test

* Unify tests

* Update manifest name

* reuse the block-reference styles for the private space

* Remove links to last activities inside a participatory process from content blocks

* Replace processes content block in process groups homepage with redesigned one

* Remove deprecated content block

* Remove unused translations

* Remove deprecated tests

* Add missing cell

* Change metadata content block to inherit from redesigned block

* Replace title content block with main data

* Remove title content block and move translations

* Adapt tests

* Adapt title cell test

* Update icons of metadata content block

* Remove comment

* Move some process group metadata elements to title block

* Update tests

* Add missing view

* set styles for process-group metadata

* split attributes in two blocks

* Add comment to keep file

* Amend wrong merge conflict resolution

* Use cell of related processes for count in ProcessGroupMetadataCell

* Ensure that no content blocks related to inactive modules are registered

* Change sanitize method for short description on process main data cell

* Change filter of processes content block in groups to allow active or all

* Update processes content block registry to use filter settings

* Add tests to check processes block in porcesses group landing page filter settings

* Add order setting to content block registry

* Translate and sanitize attributes in photo cell

* Remove unused translation

* Avoid exceptions in processes hero content block when there is no active step

---------

Co-authored-by: Hugoren Martinako <aumpfbahn@gmail.com>

* simplify 2col layout (#10819)

* Redesign: pending login (#10699)

* replace old form (blind, wip)

* user invitation page

* avoid the last-child form__wrapper-block padding-bottom rule

* fix typo

* unused key

* fix erblint

* Redesign: meeting cards (#10722)

* renaming meeting cell due to conflict with cards

* move some styles to the core to avoid loads additional chunks

* wrap body with the dynamic class

* update test markup

* cell spec must call to the cell itself

* update test markup

* fix typo

* update test markup

* useless css binding

* fix test

* move minutes after agenda, from tabs

* include dynamic css class for texts

* meetings metadata items order

* show comments and endorsers even they're zero

* include resource options in the sidebar

* fix test

* Redesign: progress bar (#10638)

* refactor progress bar

* add some animation to the progress bar

* remove deprecated option uses

* remove i18n deprecated

* set numbers to bold

* fix tests

* mark as deprecated for redesign

* fix tests

---------

Co-authored-by: Eduardo Martinez Echevarria <eduardomech@gmail.com>

* Add redesign enable ENV variable to control the pipeline (#10610)

* Add redesign enable ENV variable to control the pipeline

* Change accept_confirm helper method to disable redesign expected selectors on admin interactions

* Update accept_confirm calls with admin

* Add edit link to redesigned wrapper when a component exists

* Fix selector in test

* Add redesign pending widget layout

* Remove deprecated test

* Add skip for redesign pending homepage content block

* Fix expected text

* Add skip for redesign pending homepage content block

* Fix expected menu nav items

* Fix selector in shared test

* Adapt interaction with main navigation dropdown

* Recover confirm data in step navigation cell

* Adapt triggerWarnings method used when iframes are present to redesign

* Fix selector in test

* Redesign: processes groups content blocks (#10491)

* Pass the options to the metadata cell from card_l and card_g and disable links if the whole card has a link

* Pass in highlighted items for component a show_space option

* Pass the show_space option from some highlighted resources content blocks settings

* Move active content blocks query to controller

* Use generic html cell for corresponding content block on processes groups

* Set component_manifest_name on register of hihglighted resources blocks for processes groups

* Fix selectors in tests of processes groups page

* Add sleep

* Change content statistics content block in processes groups to use the redesigned version

* Update tests

* Remove unnecesary blank spaces

* Fix test to check private space message depending on content blocks configuration

* Remove deprecated examples on steps index page of a participatory process

* Move private space announcement out of content blocks

* Rename registry name of hero content block in processes

* Fix selector in test

* Rename registry name of hero content block in processes

* Fix ambiguous tests

* Fix manifest name in test

* Unify tests

* Update manifest name

* reuse the block-reference styles for the private space

* Remove links to last activities inside a participatory process from content blocks

* Replace processes content block in process groups homepage with redesigned one

* Remove deprecated content block

* Remove unused translations

* Remove deprecated tests

* Add missing cell

* Change metadata content block to inherit from redesigned block

* Replace title content block with main data

* Remove title content block and move translations

* Adapt tests

* Adapt title cell test

* Update icons of metadata content block

* Remove comment

* Move some process group metadata elements to title block

* Update tests

* Add missing view

* set styles for process-group metadata

* split attributes in two blocks

* Add comment to keep file

* Amend wrong merge conflict resolution

* Use cell of related processes for count in ProcessGroupMetadataCell

* Ensure that no content blocks related to inactive modules are registered

* Change sanitize method for short description on process main data cell

* Change filter of processes content block in groups to allow active or all

* Update processes content block registry to use filter settings

* Add tests to check processes block in porcesses group landing page filter settings

* Add order setting to content block registry

* Translate and sanitize attributes in photo cell

* Remove unused translation

* Avoid exceptions in processes hero content block when there is no active step

---------

Co-authored-by: Hugoren Martinako <aumpfbahn@gmail.com>

* simplify 2col layout (#10819)

* Redesign: pending login (#10699)

* replace old form (blind, wip)

* user invitation page

* avoid the last-child form__wrapper-block padding-bottom rule

* fix typo

* unused key

* fix erblint

* Adapt within_use_menu tests helper method to redesign

* Fix selector

* Change temporarily way to reach a path

* Add REDESIGN_PENDING skips to verifications tests inside a component not redesigned yet

* Adapt data_consent tests helper method to redesign

* Fix interaction with add to calendar

* Adapt top bar search test in meetings

* Prepare within_language_menu tests helper method to redesign

* Adapt test

* Use accept_confirm on submit

* Skip tests pending of merge

* Skip test pending of issue resolution

* Change within_language_menu to accept an admin variation

* Add redesign layout to dummy resources controller

* Include required assets in comments invocation from dummy resources show view

* Adapt comments reports shared examples to redesign

* Adapt comments tests to redesign

* Avoid some updates on input character counter js

* Include translation bar in redesigned participatory spaces layouts

* Adapt tests to redesign

* Fix test

* Add REDESIGN_PENDING skips to maybe deprecated examples

* Skip step in meeting creation test pending of redesign of scope selector in front

* Adapt tests to redesign

* Adapt examples to deletion of 'official' metadata item in meetings cards

* Prepare dynamically_attach_file tests helper method to redesigned interface in front

* Use dynamically_attach_file with front interface in verification tests

* Adapt test to front interface attaching files when files are invalid

* Fix wrong condition

* Adapt tests

* Use the right redesigned partial for timeout modal in live event

* Remove commented code

* Unskip examples after follow button redesign

---------

Co-authored-by: Eduardo Martinez Echevarria <eduardomech@gmail.com>
Co-authored-by: Hugoren Martinako <aumpfbahn@gmail.com>

* Enable redesign in proposals tests pipeline

* Skip tests REDESIGN_PENDING of other PRs

* Update expected texts in tests

* Skip REDESIGN_PENDING tests which include uploading files

* Skip tests REDESIGN_PENDING of other PRs

* Activate redesign in proposals

* Adapt tests to redesign

* Adapt dynamic attach to redesign when title option is present

* Skip REDESIGN_PENDING test related with validation messages in front forms

* Adapt tests to redesign

* Skip tests REDESIGN_PENDING of proposals PR

* Skip tests REDESIGN_PENDING of other PRs

* Remove has addres checkbox from proposal edition form

* Skip REDESIGN_PENDING interaction in front forms with scopes picker

* Adapt tests to redesign

* Add REDESIGN_PENDING skip related with pending coauthorships display

* Skip REDESIGN_PENDING test pending of other PR

* Add stylelint disable to blank file

* remove deprecated functions and locales

* Fix presenter in metadata cell for coauthors on coauthorable resources

* remove no longer required file

* Update decidim-proposals/app/views/decidim/proposals/collaborative_drafts/new.html.erb

Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>

* remove all REDESIGN_PENDING from #10555

* remove all REDESIGN_PENDING from #10765

* Skip example REDESIGN_PENDING of an open issue

* Move filter sections to a helper method

* Add checks to test

* Unskip tests

After merging #10921 the related tests are passing and can be enabled
again

* Add sleep to test

* Ignore title on attachment form method and single file upload

* Unskip test pending of this PR

* Add sleep

* use coauthorship cell from #10846

* Change sleep

* Add check and simplify test

* Skip REDESIGN_PENDING tests failing on GitHub pipeline

* Update decidim-proposals/app/views/decidim/proposals/collaborative_drafts/_edit_form_fields.html.erb

Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>

---------

Co-authored-by: Eduardo Martinez Echevarria <eduardomech@gmail.com>
Co-authored-by: Carolina Romero <carolromero@users.noreply.github.com>
Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

project: redesign Barcelona City Council contract

Projects

No open projects
Status: Done

Development

Successfully merging this pull request may close these issues.

Redesign / Missing styles in body Redesign: Cards L&G for meetings

4 participants