[Feature] Campaign Page chips

[swolf86]

Which area(s) of Podkrepi.bg are affected? (leave empty if unsure)

Campaign Page

Describe the feature you'd like to request

As a donor I want to have quick way of accessing the different information sections of the campaign.
For example, if I click on reports - go the part of the page where reports are shown, same logic for news, etc.

Tabs could be:
https://docs.google.com/spreadsheets/d/1QfWNWorA1fGPetqunSsmuMYBdI2jFMgr-CGyEW4qXAc/edit#gid=1891924976

Describe the solution you'd like

Please follow arrangement of the text as shown:
H1 for title,
then status, start end date
then beneficiary, organiser
then chips on 2 rows

Active stat/colour change of chips

Link to Figma
Campaign page opened
https://www.figma.com/file/MmvFKzUv6yE5U2wrOpWtwS/Podkrepi.bg?type=design&node-id=17103%3A52878&t=yGtnHCQ1lUpijG5R-1

All chips will act like a link

• News will go to the news area of the page (like an anchor)
• Reports will go to the reports area of the page (like an anchor)
• Еxpert committee will lead to the blog article https://podkrepi.bg/blog/ekspertni-saveti
• Guarantor will go the guarantor area of the page (like an anchor)
• trusted organizer would be excluded from dev. for now

More info @milenasp @swolf86

[slavcho]

Love this idea.
We already have a link for the financial reports:

We just need to move it to the tabs.

[swolf86]

Love this idea. We already have a link for the financial reports:

We just need to move it to the tabs.

Yeah this is slight re-arrangement of the information

[milenasp]

Thank you! Working on it.

[sashko9807]

Thank you! Working on it.

Hello, this feature has been assigned to another volunteer, and is already in works.

You can contact @dzhaniivanov , to see whether he needs help with implementing this feature.

[milenasp]

Noted. Thanks for letting me know

[swolf86]

Noted. Thanks for letting me know

Yeah Milena,. this is your design I just pasted it in this issue. @Dzhani is working on it. Dzhni If you have any questions please include Milena as well

[igoychev]

@swolf86 @milenasp we need to discuss this once again, because @dzhaniivanov has implemented the new design but after testing it as a whole this doesn't look like an improvement over the current one.

Things to reconsider:

• the line with category, dates and status is not well aligned with the beneficient | organizer sections below it
• the chips being on two lines is confusing and again show as misaligned to the previous sections
• the usual expectation is that chips are pointing to section inside the page, but as per the new design some are pointing outside the page - those should be removed as they are reachable from the main menu and are not element of this page
• there are sections of the page that also need to be on the chip line and the whole chip line should be: Description, Expense Reports, News, Donation Wishes
• having different colors for different chips might look good idea, but actually it is better to have chips with the same color to show that they are equal elements of the screen and also to not steal the attention from the videos and images which are colorful enough

[swolf86]

@igoychev can we see the implementation please is it possible to see it
I can explain all of the points

[igoychev]

@igoychev can we see the implementation please is it possible to see it

[swolf86]

1. the line with category, dates and status is not well aligned with the beneficient | organizer sections below it
   the chips being on two lines is confusing and again show as misaligned to the previous sections - _Yes text should be on 1 line and aligned and equal spacing as shown on the printscreen below. Chips being different level is requirement from campaigns. News and reports are seen as more important. We cannot fit the whole text withing 2 columns and expanded to 1 line _
   

2. the usual expectation is that chips are pointing to section inside the page, but as per the new design some are pointing outside the page - those should be removed as they are reachable from the main menu and are not element of this page
   This is workaround until we got section of the page, Allowing the users to go to a certain page or place of the page via multiple different methods is desired. Usually users don't spend huge amount on time so they can explore the whole website and see if there are alternative

3 there are sections of the page that also need to be on the chip line and the whole chip line should be: Description, Expense Reports, News, Donation Wishes
We have reports and News, Description is taking 80% of the page - would it be that beneficial. Donation wishes - yes it should be added

4 having different colors for different chips might look good idea, but actually it is better to have chips with the same color to show that they are equal elements of the screen and also to not steal the attention from the videos and images which are colorful enough
We user tested that feature with 1 colour on 1 line and the user was searching and didn't see the chips. Therefore we added different colours

[swolf86]

@dzhaniivanov @igoychev here's the latest solution
First clickable chips in blue with active, hover state - functioning like an anchor
Second non-clickable chips with outline - no states
Tags to be added by organizer in the campaign admin tab