CR Product Pages
added scoped label
added scoped label
assigned to @michaelfbradley
![Mark Harding](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill-opacity="0"/></svg>)
Owner@eiennohi please follow up with @michaelfbradley so knows how to test to give final approval so this can be merged in.
approved this merge request
- Developer
@michaelfbradley Please confirm that these product pages are good to go. @markeharding and @xander-miller need your approval as well.
assigned to @xander-miller
assigned to @markeharding
added 1 deleted label
removed 1 deleted label
![Michael Bradley](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect fill-opacity="0"/></svg>)
DeveloperWill do @brianhatchet @markeharding - Will review today.
- Developer
General Product Page Feedback for large desktop screens
- 1 - Radio Buttons not displaying correctly or functioning
- 2 - text colour incorrect
- 3 - Missing purchase CTA and total per month
- 4 - header/nav should match designs
- 5 - Missing logos
- 6 - Footer should span the full width of the window
- 7 - Size of this polygon doesn’t full match designs
- Developer
Responsive Issues
Not enough design consideration was given to the responsive nature of these pages. A medium sized view will need to be introduced. Moving forward, all pages will adapt across large, medium and small screens.
Breakpoints
The breakpoints for the responsive layout should be as follows.
-
Small screen
<= 576px -
Medium screen
<= 922px -
Large screen
> 922px
Medium screen designs have been added to InVision. Multiple variations have been added to illustrate how the pages should look like across various sizes.
- 900px wide - https://invis.io/KWU1X9IEB2U#/397088238_Product_Page_-PRO--Medium_900-
- 700px wide - https://invis.io/KWU1X9IEB2U#/397088237_Product_Page_-PRO--Smaller_Medium_700-
- 600px wide - https://invis.io/KWU1X9IEB2U#/397088236_Product_Page_-PRO--Smaller_Medium_600-
Getting the responsive layout to function correctly for medium design will involve using margins/paddings/font-sizes/line-heights etc relative to the view width.
For example, See see the current state of the product pages at 600px wide.
-
Small screen
unapproved this merge request
- Owner
@brianhatchet should this now be back in WIP? Label is also Status::Awaiting Review
- Developer
Yes, and it's set to Requires Changes now
- Developer
No, I'm changing the label as I haven't yet addressed Michael's feedback for this MR
added scoped label and automatically removed label
marked as a Work In Progress
- Owner
What is the status here?
- Developer
Working on it. Will have it tomorrow
added 2 commits
added 39 commits
-
7f495f93...65da1be5 - 37 commits from branch
master - fb3e7ab3 - Merge remote-tracking branch 'upstream/master' into fix/product-pages-design-2232
- 2f0f74ad - (fix): mobile styling
-
7f495f93...65da1be5 - 37 commits from branch
added scoped label and automatically removed label
unmarked as a Work In Progress
added 9 commits
-
2f0f74ad...ea067e71 - 8 commits from branch
master - 24894bf7 - Merge remote-tracking branch 'upstream/master' into fix/product-pages-design-2232
-
2f0f74ad...ea067e71 - 8 commits from branch
- Developer
Bullet text color not updated on dark theme.
added scoped label and automatically removed label
added 1 commit
- 79005ae5 - (fix): marketing points colours in dark mode
added scoped label and automatically removed label
- Developer
updated @xander-miller
added 11 commits
-
addc3fa6...7b93f3f1 - 10 commits from branch
master - 8fd0b1ce - Merge remote-tracking branch 'upstream/master' into fix/product-pages-design-2232
-
addc3fa6...7b93f3f1 - 10 commits from branch
approved this merge request
approved this merge request
893 898 </div> 894 899 </div> 895 900 </ng-template> 901 <ng-template ngSwitchCase="subscription"> - Owner
It looks like you can enable a pro subscription without having pro? Thats a bit confusing.
![:speech_balloon:](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><rect fill-opacity="0"/></svg> ":speech_balloon:"){kind=small}
