Feature: Project Details Page

netlify[bot] commented 2 years ago

Deploy Preview for makers-bolt-fun-preview ready!

Name	Link
Latest commit	fe117ead1a8ad0687c1c3ec4fa53fe7c1e9180b3
Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun-preview/deploys/633bda90b8e5fd00086aa791
Deploy Preview	https://deploy-preview-173--makers-bolt-fun-preview.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 2 years ago

Deploy Preview for makers-bolt-fun-stories ready!

Name	Link
Latest commit	fe117ead1a8ad0687c1c3ec4fa53fe7c1e9180b3
Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun-stories/deploys/633bda90b8e5fd00086aa796
Deploy Preview	https://deploy-preview-173--makers-bolt-fun-stories.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

barefoot-88 commented 2 years ago

Nice work @MTG2000 , here are some thoughts...

Modal

i). Can we still keep the capabilities + makers parts to this as I think they are important ii). The "Shore more" button could maybe be more enticing... "View project (/details)" could be better. Open to ideas...

Project page

i). Makers + Open Roles... do you think it would make sense to have these two cards merge? Like this...

ii). For this component (projects), could the Category type be Paragraph2 (I think we are currently using Body2, which is heavier). This is minor but will look nicer...

Mobile view

For the mobile view, I think we want to be optimal. A lot of our users (>50%) visit on mobile, so I think this view to be lit 🔥

Figma design: https://www.figma.com/file/2rWlc79smZ9oyWSZHKhUUy/BOLT%F0%9F%94%A9FUN?node-id=2594%3A117930

i). The project should be full width (eventually I want to optimise profiles to also use this view, the main profile card eats up space.. looks better on web than mobile IMO). ii). ^ It ^ should contain (in this order): Header image (launched/WIP + ✏️ edit), Avatar, Name, Description, Category, About, Links, Screenshots (carousel would be a nice UX for mobile), Capabilities, Makers + Open Roles

iii). We can then have a divider, and underneath some chips for makers to select from. These elements should also be full width and not contained within a card (as seen in the designs).

Stories (default selected)
Tournaments
Badges (later)
Activity (github esq) (also later)

iv). Finally, at the bottom of the page (underneath another divider), we can show "Similar projects"

barefoot-88 commented 2 years ago

@MTG2000 QA points...

Project modal

i). "Launch status tag + "X/✏️" icons can be centred in alignment, otherwise the eye sees a difference in height between top + bottom for the launch status tag. ii). Button at the bottom of the modal should be an outline style, with text size Body 2 (14px).

Page (Web)

i). Can we reduce the spacing and line heights between tags/chips to 8px ...? Not a major issue (For the open roles) ii). Empty state of "Stories (0)" should be the same text style (size, weight, colour) as the other cards (Paragraph 1 - 16px). ATM it's too big and bold.

(Page) Mobile

i). Header image can be full screen width. Is there a reason this isn't the case? ii). Avatar is overlapping with the title iii). Links should be viewable without a scroll. For mobile I'd suggest we maybe even put them above the description (if a description is very long, it could be below the page cutoff). iv). Can we reduce the spacing and line heights between tags/chips to 8px ...? Not a major issue v). For the extras sections (Stories, Tournaments, Similar projects), this should be the ordered displayed...

Stories / 2. Tournaments / (Line break) 3. Similar projects vi). As noted ^, there should be a line break between Tournaments and Similar projects to give a feeling of space and differentiation (since it's not actually about the project). vii). Remove the lines between the "Similar projects", I think it detracts from the line breaks above... The spacing between these elements should be 24px viii). Empty states: The empty states text "No stories added yet" should also be the same type size, weight, and colour. Please use Paragraph 1, the same used in "Capabilities" (see screenshot below)