-
Improvement
-
Resolution: Fixed
-
Neutral
-
None
-
None
-
-
Empty show more show less
-
Basel 102, Basel 103, Basel 104, Basel 105
-
5
The visual design of content blocks image / video / embed need to be adapted to the new look of the Stories app style.
General characteristics:
- labels and form fields in general follow the same style as already implemented
- minor color adjustment of edited fields and delete button as the following:
- when a block is being edited the bg color is light blue 1 (#F3F7F9) and the bg of the active input field is light blue 2 (#DBE8EB)
- the delete button has the same color as light blue 1 (#F3F7F9) so button and block visually belong together
Embed URL:
- image preview has new styling (size, image position, icon, font, padding) and background
- background (transparent stripes, size: 870x210px)
- text background (#FFFFF, opacity 80%, size 660x110px)
- text (verdana bold/regular 11px)
- icon (instagram, flickr, youtube, fb, company logo, brand, etc, size 25x25px)
- if there is no icon align url address to left border
- image background (#FFFFF, opacity 80%, size 150x110px)
- image (center aligned, width max 150px, height max 110px)
- re-name labels as in the mockup
Mockup:
Following mockups shows the design for each content type in sequence of the workflow (in comparison with the old design).
Image | Video option 1 from asset | Video option 2 from embed code | Embed URL |
---|---|---|---|
Acceptance criteria
- is related to
-
CONTEDIT-129 Add site's icon in embed URL block for famous websites
- Closed
- relates to
-
CONTEDIT-122 Implement visual design for video block
- Closed
-
CONTEDIT-127 Implement visual design for MultiValueFieldDefinition
- Closed
-
CONTEDIT-73 Implement visual design for image block
- Closed