UI for mobile client-side app

[HollyJoyPhillips]

Summary: As the apps in the developer and client portal are now standalone and accessible via another page rather than a modal, we should support both options in a mobile view

Relates to ticket: #1125
Client side: #1206
Developer side: #1210

General

• Headers: H5, Museo Sans 700
• Colour: #12263f
• Text: Roboto, 14px
• Colour: 556986
• Guttering: 1rem (as with submit app and other pages in the developer portal)

In mobile view we should only display the main page (not the left hand navigation) and move the contents which would have been in the left-hand navigation to the bottom of the app detail

Main Page

• Icon image to the left of App Name
• App Name: H2, Museo Sans 300
• Directly underneath, add ‘Verified by Reapit’ and a green tick (the same green tick when an app is listed)
• To the right, add the ‘Install’ or ‘Uninstall’ button
• Summary: App ‘Summary’
• Image: ScreenShot 2
• Description: App ‘Description’
• Permissions: H5 heading – List app permissions/scopes
• Images: Display remaining screenshots (2,3,4,5) stacked (image lightbox TBC)
• Should display ‘Category’ if one has been selected, use Lozenge/tag component
• Should display ‘Desktop Integration Types’ if applicable (as above)
• Heading: Developer (Logo upload TBC)
• Heading: About Developer (text TBC)
• Heading: Contact Developer
• Button: Need Help?
  Action: Should open a modal with the ‘Support’ and ‘Telephone’ fields of the app (UI TBC)

See mockup:

[phmngocnghia]

@HollyJoyPhillips

Image: ScreenShot 2

Do you mean Screenshot 1. Seems weird to me because I see:

Images: Display remaining screenshots (2,3,4,5) stacked (image lightbox TBC)

So we won't display screenshot 1, and render screenshot 2 twice times?

[HollyJoyPhillips]

@phmngocnghia

So we are going to be using screenshot 1 as a featured image (see image in top right hand corner on the mock up):

However, we haven't yet confirmed the scope for it as yet so for now, we will start with screenshot 2 and the remaining screenshots below should be 3, 4, & 5 ( I incorrectly included 2 in the remaining images)

So to confirm, 1 will be to the right of the icon image and name (TBC)
2 will be directly underneath the summary
3, 4 & 5 will be at the bottom.

[HollyJoyPhillips]

Hi @phmngocnghia, couple of small tweaks please:

• Can you make the featured image have a Max height: 222 Max Width: 495
  

• When in mobile, the image should drop below the icon, name, verified and CTA, see example :

• Screen shot 2 should be under the summary (remaining images under the permissions as is)

• The summary and icon are duplicated under the description: