Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5608

Implement "Take action" style design on BETA WYSIWYG version of Covers

    XporterXMLWordPrintable

    Details

    • Type: Task
    • Status: CLOSED
    • Priority: Should have
    • Resolution: Merged
    • Affects Version/s: None
    • Fix Version/s: 2.62.0
    • Labels:
    • Story Points:
      8
    • Sprint:
      Sprint #166
    • Section:
      Block: Covers
    • P4 site:
      All sites
    • Track:
      Development
    • Epic Link:
    • P4 Test Environment:
      iocaste
    • Release Notes excerpt:
      Hide
      New designs have been applied to the WYSIWYG version of the Covers block for the "Take action covers" design, which you can already check out in beta on development environments. The current live version of the Covers block is not affected by this change.
      Show
      New designs have been applied to the WYSIWYG version of the Covers block for the "Take action covers" design, which you can already check out in beta on development environments. The current live version of the Covers block is not affected by this change.

      Description

      Here is the link to the new Take action covers design

      The comments on each of the InVision screens are the same, so no need for the devs to go through each of them. This is what they say:

      HTML/CSS Prototype:
      Link to HTML/CSS prototype: https://codepen.io/matthew-hinders-anderson/pen/qBZGvvz?editors=1100

      Design notes:

      The entire card should function as a clickable link
      Card height is fixed, see CSS below for exact values
      Only show one tag, even if more exist
      Limit card title to 60 characters
      Limit card description to 110 characters
      Limit button text to 20 characters
      Button uses a new style, "Primary CTA small"
      Button stays in the bottom right of the card, even when the card text does not fill the entire space.

        Gliffy Diagrams

          Attachments

            Issue Links

            blocks

            Task - A task that needs to be done. PLANET-6379 New Post, Comments, Covers and Take Action Boxout design implementation

            • Should have - Of significant value but can go live without it
            • Validated
            has to be done before

            Task - A task that needs to be done. PLANET-5609 Take Action covers block - create a carousel layout style (frontend)

            • Should have - Of significant value but can go live without it
            • OPEN
            has to be finished together with

            Task - A task that needs to be done. PLANET-5508 New Take action covers - find a way to define main tag of a post

            • Should have - Of significant value but can go live without it
            • OPEN

            Task - A task that needs to be done. PLANET-6071 Implement the new design of the Comments block

            • Should have - Of significant value but can go live without it
            • CLOSED

            Task - A task that needs to be done. PLANET-6069 Implement the new Take action boxout design

            • Should have - Of significant value but can go live without it
            • Validated

            Task - A task that needs to be done. PLANET-6070 Implement the new Post page centered layout

            • Should have - Of significant value but can go live without it
            • In Review
            relates to

            UI task - PLANET-5454 New Take Action cover UI

            • Should have - Of significant value but can go live without it
            • CLOSED

              Activity

                People

                Assignee:
                mleray Maud Leray
                Reporter:
                mfatome Magali Fatome
                Tester:
                Magali Fatome
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved: