Uploaded image for project: 'Content Editor'
  1. Content Editor
  2. CONTEDIT-123

Implement visual design for embed url block

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Neutral Neutral
    • 1.0.6
    • None
    • None
    • 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

          1. embed_block.png
            embed_block.png
            662 kB
          2. image_block.png
            image_block.png
            850 kB
          3. video_asset_block.png
            video_asset_block.png
            1.37 MB
          4. video_embed_block.png
            video_embed_block.png
            400 kB

              creichenbach Cedric Reichenbach
              avongunten Anja von Gunten
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved:

                  Task DoD