[MGNLDEMO-228] Stories demo design is not responsive Created: 30/Aug/17  Updated: 08/Feb/18  Resolved: 07/Feb/18

Status: Closed
Project: Magnolia Demo Projects
Component/s: stories-app
Affects Version/s: 1.1.5, 1.2
Fix Version/s: 1.1.8, 1.2.2

Type: Bug Priority: Neutral
Reporter: Federico Grilli Assignee: Antonín Juran
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File 08_story_detail_mobile.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: Fix stories demo issues
Sprint: Kromeriz 130, Kromeriz 131, Kromeriz 132, Kromeriz 133
Story Points: 8

 Description   

See linked video below. The issue is clearly visible on mobile devices and especially on smartphones in portrait mode. Besides trying the preview feature within AdminCentral I tested in on a real iPhone6.

https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/20450/94495/eayF0ar90WYo3x5/stories-smartphone-portrait.mov

https://www.dropbox.com/s/50vmqtmfx44ohrd/stories.mov?dl=0

  • Tour block is too narrow
  • Image caption cuts off
  • Tweet block cuts off at the tweet URL
  • On the Stories overview page, the "Discover" text does not scale down and is cut off.


 Comments   
Comment by Antti Hietala [ 26/Oct/17 ]

avongunten, please provide a design for:

  • External link block in mobile view
  • Tour block in mobile view
Comment by Anja von Gunten [ 21/Nov/17 ]

Here are some general specs and also the specific specs for the tour block and link block on mobile view:

General

  • Bio text: padding left/right: 40px, center aligned
  • Lead & Text: padding left/right: 20px, left aligned
  • Images: no padding, width = browser width
  • Caption: padding left/right: 20px, center aligned

Tour block

General:

  • Don’t scale image
  • Image size: 260x260px
  • Position: left top corner
  • Shorten tour description text to max. 4 lines (characters ?) and add ellipsis
    Mobile:
  • Stack tour block elements vertically (image, key words, description, button)
  • Dashed Border: Padding from browser window left/right: 20px
  • Grey background: Padding within box: left/right/top/bottom 10px
  • Content: Padding within box: left/right/top/bottom 30px

URL block

Mobile:

  • Stack URL block elements vertically (image, link, title, description)
  • Dashed Border: Padding from browser window left/right: 20px
  • Content: Padding within box: left/right/top/bottom 30px
Generated at Mon Feb 12 05:17:35 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.