Homepage redesign
closes https://gitlab.com/minds/ux/issues/2 closes #2112
Testing
- logged out, go to the homepage. There's a 50/50 chance that you will either see a mobile phone on the right, or the register form. You can change it manually by modifying the experiment key in the local storage from 'base' to 'form' and vice-versa.
- everything should look like in Michael's designs, for mobile, tablets and desktop.
If you're on the homepage version with the mobile phone:
- "Join Minds Now" buttons should redirect to
/onboardingwhere you'll only see the registration form. - Registering should go to the next step for onboarding
- Skipping this should redirect you to homepage
If you're on the homepage version with the register form:
- Registering should redirect to the first step of the onboarding
- Skipping it should redirect to newsfeed
Testing the onboarding steps TBD
depends on engine!395
added scoped label
changed the description
added 7 commits
- 4c3d6e23 - (feat): renamed HomepageComponent to HomepageV1Component
- 5be586b4 - (fix): no background colour for the form
- 8484f94e - (feat): responsive design for register form and top-left corner decoration
- 867ec072 - (fix): several styling fixes for mobile resolution
- 2afc5b4f - (fix): app buttons
- 11be027c - (feat): added m-grid__column__skip-#{$i} for desktop and mobile
- 507c3221 - (fix): quotation and links styling fixes
Toggle commit listadded 74 commits
-
507c3221...35070b4f - 73 commits from branch
master - cc521451 - Merge remote-tracking branch 'upstream/master' into feat/homepage-redesign
-
507c3221...35070b4f - 73 commits from branch
added 1 commit
- bd99718e - (fix): added images that got deleted while merging master
mentioned in merge request engine!395
unmarked as a Work In Progress
changed title from design to design
changed the description
added scoped label
marked as a Work In Progress
added 2 commits
added 11 commits
-
dec3617e...a0d1737e - 10 commits from branch
master - 57e73e13 - Merge remote-tracking branch 'upstream/master' into feat/homepage-redesign
-
dec3617e...a0d1737e - 10 commits from branch
changed the description
added 17 commits
-
18ccfa82...32c47ab2 - 13 commits from branch
master - 76833369 - (feat): remove last section and correct items in "our principles"
- fb30ca6f - (feat): add join button
- dbe902ab - (fix): tringle thingy
- 011c75d7 - Merge remote-tracking branch 'upstream/master' into feat/homepage-redesign
Toggle commit list-
18ccfa82...32c47ab2 - 13 commits from branch
added 1 commit
- 3607b826 - (fix): "Join Minds Now" on the bottom should only appear for base experiment
unmarked as a Work In Progress
ReporterLink? ;)
![Mark Harding](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill-opacity="0"/></svg>)
OwnerClick 'View App' above.
- Last updated by Marcelo Rivera
17 17 @Component({ 18 18 template: ` 19 19 <div 20 *mExperiment="'homepage'; bucket: 'base'" 20 *mExperiment="'homepage'; buckets: ['base']" 21 21 class="homepage-bucket-base" 22 22 ></div> 23 23 <div 24 *mExperiment="'homepage'; bucket: 'variant1'" 24 *mExperiment="'homepage'; buckets: ['variant1']" - Owner
I am unable to test with variant1. It is showing blank
changed this line in version 18 of the diff
- Last updated by Mark Harding
3 3 m-marketing { 4 4 display: block; 5 5 font-family: Roboto, sans-serif; 6 overflow-x: hidden; - Owner
why is this here?
![Marcelo Rivera](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect fill-opacity="0"/></svg>)
Developersome of the shape we've included in ::before and ::after elements need to be moved a bit away from the screen, so it causes overflow which spawns horizontal scrollbars in smaller resolutions
- Owner
It feels like a hack that shouldn't be needed and can lead to some foreseen issues down the line.
- Resolved by Mark Harding
- Last updated by Mark Harding
48 i18n 49 > 50 Earn for your ideas. 51 </p> 31 52 32 <div class="m-homepage--app-buttons"> 33 <div class="m-homepage--app-buttons__iosBanner"> 53 <button 54 class="mf-button mf-button--alt m-homepage__joinButton" 55 (click)="goToLoginPage()" 56 i18n 57 > 58 Join Minds Now 59 </button> 60 61 <div class="m-homepage__appButtons"> - Owner
These look inconsistent with the mockup.
.@michaelfbradley I thought we were not going to use the google play icon?
- Developer
This is because it changed since I did that part, nobody told me and I didn't notice it.
@michaelfbradley could you give me the latest .sketch file so I can export it?
Edited by Marcelo Rivera -
Hey @eiennohi - this should be in the latest Sketch file sent though last week. In case it's not, I'll resend it again now via WeTransfer.
- Owner
@michaelfbradley why are we not able to make use of invision?
- Resolved by Mark Harding
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Last updated by Michael Bradley
W: 333 | H: 608
- Owner
This is fussy on retina display.
- Developer
How do you suggest that I tweak that? I don't own a retina display, so I cannot test it there
- Owner
It needs to be twice the width
-
Using sketch, you can export assets and bump the resolution quite easily, so you can have you
1xand2ximages for Retina.
Just to note @eiennohi - The above image of the phone seems to be an older version. You will see the latest in the sketch file.
- Resolved by Marcelo Rivera
- Owner
@michaelfbradley Why are we using a different green on the homepage to elsewhere?
-
Hey @markeharding - This goes back to a discussion with @jotto141 and @ottman a week or two ago.
I know you're not a big fan of the existing green, so this was introduced as an alternative. We can go with either, we just need to be consistent with the choice moving forward.
So it's either
#5DBAC0(<- newer version) or#4FC3A9(<- older version) - Owner
Ok. @eiennohi make that colour change for the entire site vs just the homepage.
- Owner
@eiennohi there looks to be lots of discrepancies between implementation and mockup. Also the AB testing does not appear to be working at all. Please revert those changes.
added scoped label and automatically removed label
added 1 commit
- 09e8059c - (fix): reverted lint on tasks/extract.i18n.xlf.ts
added 1 commit
- c8d26f1c - (fix): don't use document for accessing the topbar
- Owner
The topbar is not consistent with the mockups either and appears unfinished.
. Also the margins of the bulb and the signups buttons appear to be off.Edited by Mark Harding - Owner
I am unable to get the A/B testing platform to work without a manual override of the local storage. Does it work for you @eiennohi ?
.There is a major discrepancy between this form and the one in mockup. These need to be pixel perfect.
Edited by Mark Harding - Owner
Form is not responsive
