Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-147512

When editing a Fragment, I want to customize every style on a per-viewport basis




      Nowadays, mobile-first approach has become the rule when designing multi-channel experiences. In 2021, 56% of the internet traffic happened from Mobile devices. In B2B, this percentage is as high as 50%.

      Consequently, it becomes a must to provide our clients with all the available options to adapt their web experiences to mobile terminals.  

      In addition to this, now that we have implemented the common styles application into classes, it becomes quite easy to provide full responsive capabilities to all the styles present in the Common Styles editor.

      The main scope of this epic is to provide mobile styling capabilities so that the effort to customize the look & feel for viewports other than desktop is minimized.


      • The following options will be now available for all viewports:
        • General: the section that affects only the "Frame" of the Fragment.
        • Styling: all elements except background image, that is already using adaptive media to change the image resolution in several viewports
        • Advanced: Custom CSS (pending)
      • The different styling options per viewport must be applied by adding the corresponding fragment classes to the corresponding media query section of the generated CSS.
      • [this will be done when redesigning the components, the new design already has the "clear" button integrated] Provide a "Clear to default" (other potential copies: "clear values", "reset to default", etc) button, at a viewport level (one button per tab per viewport), that resets all the element values of the tab to their default values (" " or whatever it is). On values inheritance:
        • We will NOT FORCE any type of inheritance per viewport. The default behavior will be "Desktop first". 
      • If I save a composition containing a fragment with different style values, values in all viewports must be saved.


      Acceptance criteria


      Test Scenarios

      Test Scenarios Test Strategy Kind of test Is it covered by FrontEnd ? (JS-Unit) Is it covered by BackEnd ? (unit or integration) Could it be covered by POSHI?
      The page editor could customize styles on non-desktop viewports Critial Manual No No Yes
      The page editor cannot change background image on non-desktop viewports High Manual No No Yes
      The saved fragment composition should persist styles defined on all viewports Critial Manual No Yes Yes
      The page editor only could clear color picker selection defined on current non-desktop viewport High Manual No No Yes


          Issue Links



              david.gutierrez David Gutiérrez Mesa
              mateo.hermosin Mateo Hermosin
              Engineering Assignee:
              Victor Galan
              Recent user:
              Maria Muriel
              Participants of an Issue:
              Product Designer(s) Assigned:
              Carolina Rodriguez
              Frontend Developer(s) Assigned:
              Victor Galan
              0 Vote for this issue
              0 Start watching this issue




                  Version Package