[CONTEDIT-123] Implement visual design for embed url block Created: 22/Jun/17  Updated: 20/Dec/17  Resolved: 21/Jul/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0.6

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Cedric Reichenbach
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File embed_block.png     PNG File image_block.png     PNG File video_asset_block.png     PNG File video_embed_block.png    
Issue Links:
Relates
relates to CONTEDIT-122 Implement visual design for video block Closed
relates to CONTEDIT-127 Implement visual design for MultiValu... Closed
relates to CONTEDIT-73 Implement visual design for image block Closed
relation
is related to CONTEDIT-129 Add site's icon in embed URL block fo... Closed
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)
Date of First Response:
Epic Link: Content Editor fine-tuning
Sprint: Basel 102, Basel 103, Basel 104, Basel 105
Story Points: 5

 Description   

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


 Comments   
Comment by Philip Mundt [ 19/Jul/17 ]

Work on the AbstractPeek class needs an overhaul:

  • Prepending the "www" on every host seems wrong
  • Domain doesn't belong to "data"
    • As a side effect integration tests fail
Generated at Mon Feb 12 00:17:18 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.