Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GR9 UI Changes #8483

Closed
3 tasks done
Kweiss opened this issue Mar 4, 2021 · 75 comments
Closed
3 tasks done

GR9 UI Changes #8483

Kweiss opened this issue Mar 4, 2021 · 75 comments

Comments

@Kweiss
Copy link
Member

Kweiss commented Mar 4, 2021 •
edited by octavioamu
Loading

What:

  • We need more spacing on "Collections" heading on the top = https://stage.gitcoin.co/grants/
    Collections

  • Can we remove the "did you know" tip? It stacks on top on mobile view and doesn't add much value. Most people know how the cart works now.
    image

  • Can we revise the line weight on collections to not be the dark blue (maybe light grey) and thinner borders? Dealers choice here!
    Octavio: changed the bg on the thumbs to be the new blue
@Kweiss
Copy link
Member Author

Kweiss commented Mar 4, 2021 •
edited by octavioamu
Loading

  • Please remove the "Add all to cart" on grants explore page:
    Screen Shot 2021-03-04 at 9 37 44 AM

This is just on the default Explorer page (we want to prevent adding all 1700 grants to the cart)

Aditya: this should be kept on clr pages / categories pages cause we have folks who wan to contribute like 100 DAI to 100 projects (we've seen this request come which is why we had to built this out)
I am open to removing this on the grants/explore page

@Kweiss
Copy link
Member Author

Kweiss commented Mar 4, 2021 •
edited by thelostone-mc
Loading

  • Need to style the List view

@Kweiss
Copy link
Member Author

Kweiss commented Mar 4, 2021 •
edited by octavioamu
Loading

  • Add back the "Follow" star - rename from Follow to "Favorite" (keep the star, but align the star to the right of the text). Similar to below:
    Screen Shot 2021-03-04 at 9 40 58 AM

Update the nav to be renamed "Favorite" instead of Following.

@Kweiss
Copy link
Member Author

Kweiss commented Mar 4, 2021 •
edited by octavioamu
Loading

  • Can we hide / remove the inactive "Categories" (CLR rounds) from the nav for GR9?
    Turn this
    into this
    And we also ned to add NFTs as well as a new core category (for grant selection, and for the round)

Aditya: This would be configured via django admin! We can do this on tuesday
But do keep in mind that this would mean other category filters would not appear like filecoin / matic / BLM etc.
I was under the assumption we would still want to show the filters even if they don't have an active CLR going

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by octavioamu
Loading

Add back the "Favorite" star - rename from favorite to "Follow" (keep the star, but align the star to the right of the text). Similar to below:
Screen Shot 2021-03-04 at 9 40 58 AM

Update the nav to be renamed "Favorite" instead of Following.

  • We will need to rename it to "Favorite" on the details page as well.

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by gdixon
Loading

  • When there are no items in the cart please remove the ability to clear cart, share cart, save to collection.
    Clicking on each of those icons still returns the confirmations and modals when there is nothing in the cart.

Screen Shot 2021-03-05 at 3 56 21 AM

Nice to have is a no data image if we have time.

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by octavioamu
Loading

  • Please update font style Gitcoin grants sustain web3 projects with quadratic funding to follow design.
    See below

Screen Shot 2021-03-05 at 4 12 08 AM

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by thelostone-mc
Loading

  • Since we built the sponsors to be dynamic, can we add placeholders for when we have more sponsors so that the logos fall to the second line? See gray circle placeholders.

Screen Shot 2021-03-05 at 4 14 48 AM

^ This will not be addressed since it will be an image

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by thelostone-mc
Loading

  • On some grant cards there is a floating ETH next to add to cart button.

Screen Shot 2021-03-05 at 4 28 34 AM

symbol

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by octavioamu
Loading

  • Screen Shot 2021-03-05 at 4 38 18 AM

Button hover states are currently #4A2FE9, please update hover states on all buttons to #5932C4, brand violet dark.

@owocki
Copy link
Contributor

owocki commented Mar 5, 2021 •
edited by gdixon
Loading

@Kweiss
Copy link
Member Author

Kweiss commented Mar 5, 2021 •
edited by octavioamu
Loading

  • The collection thumbnail on the core grants landing page should not be clickable. Only hav the View and share button.

@Kweiss
Copy link
Member Author

Kweiss commented Mar 5, 2021 •
edited by octavioamu
Loading

  • The collection view on the grants homepage should be the featured collections, not all collections

@Kweiss
Copy link
Member Author

Kweiss commented Mar 5, 2021 •
edited by octavioamu
Loading

  • On the side nav of the grants explorer page, update CLR heading to QF heading
    Screen Shot 2021-03-05 at 10 38 04 AM

@Kweiss
Copy link
Member Author

Kweiss commented Mar 5, 2021 •
edited by octavioamu
Loading

  • The total amount should be visible when not in an active matching round...

Screen Shot 2021-03-05 at 10 44 21 AM

@Kweiss
Copy link
Member Author

Kweiss commented Mar 5, 2021 •
edited by gdixon
Loading

  • We can remove these headings.

Screen Shot 2021-03-05 at 10 48 13 AM

@octavioamu
Copy link
Contributor

octavioamu commented Mar 5, 2021 •
edited
Loading

  • url with slash at the end and without is hidding clrs round row

@Kweiss
Copy link
Member Author

Kweiss commented Mar 5, 2021 •
edited by octavioamu
Loading

  • Please remove the Green Text links for this round until we can better organize and filter our grants.

Screen Shot 2021-03-05 at 1 14 35 PM

Octavio: solved by adding ability to hide / show from admin

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited
Loading

The message area should collapse and expand and display current message options

Screen Shot 2021-03-05 at 3 22 08 PM

Please see local component on component page

Screen Shot 2021-03-05 at 3 34 37 PM

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 5, 2021 •
edited by Kweiss
Loading

Please right align value in input box in cart

Screen Shot 2021-03-05 at 3 49 12 PM

[KW] - If we do this, the heading will be floating by itself, along with the "apply to all"... Are we sure we want to do this?

@octavioamu
Copy link
Contributor

octavioamu commented Mar 6, 2021 •
edited
Loading

many areas on collection broken (on production) now are fixed

  • navigating between the filters from grants to collections

  • add to collections from the card

  • missing data and broken code logic in diff scenarios

  • diff behaviours clicking on card between button and title

@octavioamu
Copy link
Contributor

  • when "my collections is press then then the keyword with the handle never get removed when changing to others filters blocking the results https://stage.gitcoin.co/grants/explorer/collections?keyword=octavioamu

@owocki
Copy link
Contributor

owocki commented Mar 6, 2021 •
edited
Loading

https://bits.owocki.com/12uodgvA

  1. whats up with this green text on the page? it seems out of place. its not labeled or anything
  2. we need the image banner for the matching partners

@octavioamu
Copy link
Contributor

https://bits.owocki.com/12uodgvA

  1. whats up with this green text on the page? it seems out of place. its not labeled or anything
  2. we need the image banner for the matching partners
  1. so is dynamically showing the filters as there are only 2 enabled it show a little weird but looks good with more, clicking drive you to the explorer with the filters applied.
  2. yes to setup those use the policy image background field / banner image control the one shown on the explorer.
    the size of that image on the landing will follow the image size and scale down/up based on the space (fluid) so tall banner will take more space, short one less.

About the banners on explorer I changed all the css to don't need media queries to fit the mobile if the image is height 414px. In case another heigh image is need this is the inline css code needed:
.grants_hero_img { padding-top: calc(IMAGE HEIGHT / IMAGE WIDTH * 100%); }

example padding-top: calc(414 / 2000 * 100%);
That will ensure the image to scale properly in any screen size without adding extra spaces on top and bottom.

@octavioamu
Copy link
Contributor

octavioamu commented Mar 6, 2021 •
edited
Loading

@Kweiss
Copy link
Member Author

Kweiss commented Mar 6, 2021 •
edited by octavioamu
Loading

  • When adding grants to the cart on list view - Even though the items are in my cart, the button does not change to (remove from cart)... I think it should like it does on the grid view:

image

Remove from cart buttons properly applied:
image

@Kweiss
Copy link
Member Author

Kweiss commented Mar 6, 2021 •
edited by octavioamu
Loading

  • When clicking the "Save as collection" from the cart, the modal to add more information is now missing:

image

@Kweiss

This comment has been minimized.

Sign in to view
@Kweiss
Copy link
Member Author

Kweiss commented Mar 6, 2021 •
edited by gdixon
Loading

  • The side cart seems to compress the page contents (can it fly out on top of content and not change the layout?)

image

Octavio: this cart is not written in vue I was expecting to change it to vue on this round so we can use our currents flyout and restructure that page html, I will check if I can make a patch solution for now.

@Kweiss
Copy link
Member Author

Kweiss commented Mar 6, 2021 •
edited
Loading

  • Even though a grant is in an active CLR - the cart does not show that it is in an active CLR anymore. Confirm the cart recognizes when in an active CLR
    image

@octavioamu
Copy link
Contributor

octavioamu commented Mar 8, 2021 •
edited
Loading

there is a 'followed grants' view on the side but no option to follow a grant in the UI https://share.getcloudapp.com/KouZ5yBk - i vote we remove this sidebar filter bc of that

Someone changed back to followed was "starred" a few days back, as you star grants using the star icon
edit: is back now.

@octavioamu
Copy link
Contributor

octavioamu commented Mar 8, 2021 •
edited
Loading

the cart page takes about 7s to load.

The additions of new chains like polkadot with lot of js files seems is adding a lot of delay, we should revisit this for a better approach.

@owocki
Copy link
Contributor

owocki commented Mar 9, 2021 via email

@willsputra
Copy link
Contributor

willsputra commented Mar 9, 2021 •
edited
Loading

  • clicking on a grant from town square just opens a blank tab (click on the grey preview part)
    Octavio: yes this been there for a while
    Will: noted 👍
    Screenshot 2021-03-09 at 10 02 40 PM
  • tried to open the Stats tab but it always kicks me back to the default tab
    https://stage.gitcoin.co/grants/14/the-human-fundz-slay-the-machines
    Octavio: is working here, your page will reload just scroll to bottom to see the tab with the stats
    Will: yeah I see the Stats tab but when I click it, it reloads me to the other tab
    https://share.vidyard.com/watch/bpmp7f7yK1eYc9ncCG4SZJ?
  • tried checking out a grant with DAI, why does it ask for SAI permission?
    Octavio: because you have that token address as sai in your wallet
    Will: noted 👍
    Screenshot 2021-03-09 at 10 22 55 PM

@owocki
Copy link
Contributor

owocki commented Mar 9, 2021 •
edited
Loading

@PixelantDesign please tell us where the grants 9 twitter cards are so we can fix
Meta unfurl images for Twitter/Facebook previews should be GR9 not GR8

ok i guess ill just do this since after repeated back and forth its still not updated.

edit: commit 5f3a9a6

@Kweiss
Copy link
Member Author

Kweiss commented Mar 9, 2021 •
edited by octavioamu
Loading

After clicking on a few links, the mouse over effect does not go away:
Octavio: those are toggles, same as prod today you need to uncheck it or check it. give you the ability to filter on a context "your grants "
image

@owocki
Copy link
Contributor

owocki commented Mar 9, 2021 •
edited by Kweiss
Loading

@owocki

This comment has been minimized.

Sign in to view
@owocki
Copy link
Contributor

owocki commented Mar 9, 2021

after i contribute to grants, i cannot click on the grant names in the modal to get back to them https://bits.owocki.com/jkueklvv - should be an easy lift to make these clickable.

@owocki
Copy link
Contributor

owocki commented Mar 9, 2021

after i contribute to grants, the modal does not have the custom image of my contribution per the design (image of my face + 4 of the grants i contributed to around it). instead it has this spaceman art https://bits.owocki.com/4gu1Eyel

the same goes for the cart share unfurl image; which just has the default gitcoin stock image on it instead of the custom contribution image (image of my face + 4 of the grants i contributed to around it)

@owocki
Copy link
Contributor

owocki commented Mar 10, 2021

hey @PixelantDesign i'm just realizing there is now no longer any text on the cart telling the user about TrustBonus + why do verify their anti sybil info. was that something we purposefully left out, or was it an oversight?

the TrustBonus tab on the profile is what provides sybil resistence to the platform

@owocki owocki mentioned this issue Mar 10, 2021
Merged
@owocki
Copy link
Contributor

owocki commented Mar 10, 2021

https://gitcoin.co/grants/clr/ethereum/9/gr9-infra/?sort=-clr_prediction_curve__0__1

if you go here and try to change the sort order, the grants just disappear - they dont actually load @gitcoinco/engineers - once u refreshthe page they show up

@owocki
Copy link
Contributor

owocki commented Mar 10, 2021 •
edited
Loading

site search not working :/ https://bits.owocki.com/YEuX01xP

edit: fixed at ab8b3fc

@willsputra
Copy link
Contributor

improvement request: on post-checkout thank you modal, Share on Twitter should open a new tab, else people won't be able to do other actions (save as collection, see the trust bonus modal).

Screenshot 2021-03-11 at 10 01 54 PM

@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 12, 2021 •
edited
Loading

hey @PixelantDesign i'm just realizing there is now no longer any text on the cart telling the user about TrustBonus + why do verify their anti sybil info. was that something we purposefully left out, or was it an oversight?
the TrustBonus tab on the profile is what provides sybil resistence to the platform

We were trying to prioritize users getting through the checkout so that they had a clear path. We will likely need to figure out a minimized version of the banner and placement or some how bring the verification in context of the checkout via modal. The Since the user could verify anytime during the round before the round was over and still be eligible for increased match, we moved the message to later in the flow.

@Kweiss
Copy link
Member Author

Kweiss commented Mar 12, 2021 •
edited by gdixon
Loading

  • The connect wallet is behind the QF Matches

image

This was referenced Mar 12, 2021
Merged
Merged
Merged
@owocki
Copy link
Contributor

owocki commented Mar 15, 2021 •
edited
Loading

a few users reporting that their computer fan really starts blowing on the cart page / performance issues

@owocki
Copy link
Contributor

owocki commented Mar 15, 2021

community suggesting privacy preserving analytics over GA /hotjar/adroll https://twitter.com/TokenBrice/status/1370721434637582344

@owocki
Copy link
Contributor

owocki commented Mar 15, 2021

community suggests having data on whether a project is VC funded or not

@owocki
Copy link
Contributor

owocki commented Mar 15, 2021

moving the feedback stuff to #8597

@gdixon gdixon mentioned this issue Mar 15, 2021
Merged
@PixelantDesign
Copy link
Contributor

PixelantDesign commented Mar 17, 2021 •
edited by gdixon
Loading

  • Grant owner asking if we can dock the add to cart button to the bottom of the screen on the mobile view of grant detail.
    gr9 feedback #8597 (comment)

Also thinking docking checkout at the bottom of the cart would be helpful while we are at it
🙏🙏🙏 @gdixon

Screen Shot 2021-03-17 at 6 32 15 AM

@PixelantDesign
Copy link
Contributor

@owocki can you share more on this "community suggests having data on whether a project is VC funded or not"? Is it just has had vc funding or not, or are they interested in stage of project?

@PixelantDesign
Copy link
Contributor

On collections screen there isn't anything that shows a user they can click on to save to previously created collections

Screen Shot 2021-03-17 at 6 53 13 AM

@gdixon gdixon mentioned this issue Mar 19, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@PixelantDesign @owocki @Kweiss @octavioamu @thelostone-mc @willsputra