DEV-17995 design review tweaks (#22171)

* Apply full screen takeover for mobile viewports under 480px
* Hide Matomo badge and display CTA full width on mobile under 480px
* Collapse header when there's no header metadata to display
* Remove featured plugin flag from the plugin display title
* Full width figure background with figcaption aligned to the left
* Rewrite URLs for plugin screenshots to local files for UI tests
* Add plugin screenshot images for UI tests
* Update expected UI test screenshots

plugins/Marketplace/config/test.php

@@ -90,19 +90,24 @@ function updatePluginUrlsForTests(&$plugin)
                 $plugin['shop']['reviews']['embedUrl'] = '';
             }
 
+            // preg_replace patterns
+            $from = [
+                '@^https?://.*?/([^/]*?)/images/([^/]*?)/(.*?)$@',
+                '@^https?://.*?/img/categories/(.*?)$@i',
+            ];
+            $to = [
+                'plugins/Marketplace/tests/resources/images/plugins/$1/images/$2/$3',
+                'plugins/Marketplace/tests/resources/images/categories/$1',
+            ];
+
             if (!empty($plugin['coverImage'])) {
-                $plugin['coverImage'] = preg_replace(
-                    [
-                        '@^https?://.*?/([^/]*?)/images/([^/]*?)/(.*?)$@',
-                        '@^https?://.*?/img/categories/(.*?)$@i',
-                    ],
-                    [
-                        'plugins/Marketplace/tests/resources/images/plugins/$1/images/$2/$3',
-                        'plugins/Marketplace/tests/resources/images/categories/$1',
-                    ],
-                    $plugin['coverImage'],
-                    1
-                );
+                $plugin['coverImage'] = preg_replace($from, $to, $plugin['coverImage'], 1);
+            }
+
+            if (!empty($plugin['screenshots']) && is_array($plugin['screenshots'])) {
+                foreach ($plugin['screenshots'] as $key => $screenshotUrl) {
+                    $plugin['screenshots'][$key] = preg_replace($from, $to, $screenshotUrl, 1);
+                }
             }
         }
 

plugins/Marketplace/stylesheets/plugin-details.less

@@ -149,6 +149,13 @@
         top: 5% !important; // required to override inline style set by the modal
     }
 
+    @media (max-width: 480px) {
+        // full screen takeover
+        min-width: 100vw;
+        min-height: 100vh;
+        top: 0 !important; // required to override inline style set by the modal
+    }
+
     .btn-close {
         z-index: 100;
     }
@@ -170,6 +177,30 @@
         @media (max-width: 992px) {
             max-height: 90vh;
         }
+
+        @media (max-width: 480px) {
+            // full screen takeover
+            min-height: 100vh;
+        }
+
+        &--simple-header {
+            .modal-content__header {
+                height: 90px;
+            }
+
+            .modal-content__main {
+                max-height: calc(~"80vh - 180px");
+
+                @media (max-width: 992px) {
+                    max-height: calc(~"90vh - 180px");
+                }
+
+                @media (max-width: 480px) {
+                    // full screen takeover
+                    min-height: calc(~"100vh - 180px");
+                }
+            }
+        }
     }
 
     .modal-content__header {
@@ -273,6 +304,10 @@
             max-height: calc(~"90vh - 250px");
         }
 
+        @media (max-width: 480px) {
+            max-height: calc(~"100vh - 250px");
+        }
+
         h2, h3, h4, h5, h6 {
             margin: 20px 0 10px 0;
             color: #000000;
@@ -388,18 +423,21 @@
 
                 figure {
                     margin: 24px auto;
-                    border: 1px solid #e0e0e0;
-                    display: inline-block;;
+                    background: #f7f7f7;
+                    border: 24px solid #f7f7f7;
+                    border-bottom-width: 16px;
                 }
 
                 img {
                     max-width: 100%;
+                    margin: 0 auto;
                 }
 
                 figcaption {
-                    padding: 8px;
-                    background: #e0e0e0;
+                    padding: 16px 0 0;
                     text-align: left;
+                    line-height: 24px;
+                    font-weight: 700;
                 }
             }
         }
@@ -434,10 +472,18 @@
             @media (max-width: 600px) {
                 width: 70%;
             }
+
+            @media (max-width: 480px) {
+                width: 100%;
+            }
         }
 
         .matomo-badge-modal {
             position: initial;
+
+            @media (max-width: 480px) {
+                display: none;
+            }
         }
     }
 }