johnhbenetech
commented
4 years ago @rupeshparab as discussed these are preliminary tasks for starting to get the new design foundation built out.
Largely speaking at this point the tasks will be creating the placeholder UI elements, structure, and assets. The tasks for hooking up the functionality will follow later - so by no means is everything in the mockups expected to work at this point.
We should create this new UI as a completely separate view. It can be temporarily routed through a hidden URL scheme, maybe something like a parameter: mathshare.benetech.org/#/app?UI=new or something. Let me know what is technically possible here.
Eventually the plan will be to completely cut over to the new view so that any existing link will render in the new view.
As far as code organization goes, I'll leave that up to you. Since so much is changing I'm imagining there's not a ton from the old CSS and components that will still be used. So i'm assuming we will have an entirely separate set of files.
rupeshparab
alexrcabral
theladymay
abaranowska1
The resolution is better for example here:
but when we have a photo still a see an issue. @rupeshparab
This is the first task addressing the redesign for mobile. These will come in chunks and held in staging prior to release (estimated October).
Full mockup:
Sidebar:
This task covers the creation of the sidebar. This should include the profile image of the student, with their profile’s associated name listed below, centered, in bold. Below this is the account type (Student, Teacher, Other), and below this is a clickable button to sign out.
Below this, left-justified, are the options of: Home, My Sets, Sample Sets, About Mathshare, Help, and Settings. For now, these should just be placeholder links.
Font should be Poppins or equivalent (e.g. Helvetica Neue). Font sizes are relative, and font sizes from the mockup are given as an approximate example. Please follow the mockups regarding spacing. For accuracy, please use the Invision Inspect tool with the official mockups.
Name: font size ~20pt, bold, #37345B Profile Info: ~13pt, #737185 Navigation options: ~17pt, #737185 Navigation active page: ~17pt, bolded, #37345B
Reference
Style Guide + Official Mockups: https://invis.io/CQYLLW8J49U
All the desktop (standard and small) screens and the style guides for Mobile, Desktop and IPad will be available on this project. The assets will be available on the Invision Inspect tool. Developers will need to ask to join the project via Invision.
Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0
Acceptance criteria:
Given that I'm a logged-in user on the application portion of Mathshare, when I go to the dashboard view (including the My Sets view), then this sidebar with my profile information should be present. When I hover over any given link in the navigation bar, it should behave as a placeholder link. If I click the “Signout” option, I should be signed out as usual.