Issue #3278972 by chrisfromredfin, narendraR, Libbna, tim.plunkett: Update List view design

images/project-usage-icon.svg

+<svg width="31" height="27" viewBox="0 0 31 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="14.5833" width="4.33333" height="5" rx="2.16667" transform="rotate(90 8 14.5833)" fill="#7E869E" fill-opacity="0.25" stroke="black" stroke-width="1.2"/>
+  <rect x="21.75" y="13.5" width="4.33333" height="5" rx="2.16667" transform="rotate(-90 21.75 13.5)" fill="#7E869E" fill-opacity="0.25" stroke="black" stroke-width="1.2"/>
+  <path d="M23 12.4166L20.6197 14.4795C19.3706 15.562 18.7461 16.1033 18 16.1033C17.2539 16.1033 16.6294 15.562 15.3803 14.4795L14.3697 13.6037C13.1206 12.5211 12.4961 11.9798 11.75 11.9798C11.0039 11.9798 10.3794 12.5211 9.13028 13.6037L6.75 15.6666" stroke="black" stroke-width="1.2"/>
+</svg>

src/DrupalOrg/DrupalOrgProject.php

@@ -2,8 +2,8 @@
 
 namespace Drupal\project_browser\DrupalOrg;
 
-use Drupal\Component\Utility\Html;
 use Drupal\Component\Utility\Unicode;
+use Drupal\Component\Utility\Xss;
 
 /**
  * Represents a single project from Drupal.org.
@@ -250,7 +250,7 @@ class DrupalOrgProject {
     if (!$this->body['summary']) {
       $this->body['summary'] = $this->body['value'];
     }
-    $this->body['summary'] = Html::escape(strip_tags($this->body['summary']));
+    $this->body['summary'] = Xss::filter(strip_tags($this->body['summary']));
     $this->body['summary'] = Unicode::truncate($this->body['summary'], 200, TRUE, TRUE);
   }
 

sveltejs/src/Project/ProjectListView.svelte

@@ -2,7 +2,6 @@
     export let project;
     import ActionButton from './ActionButton.svelte';
     import Image from './Image.svelte';
-    import Categories from './Categories.svelte';
     import SecurityCoverage from './SecurityCoverage.svelte';
     import MaintainedIcon from "./MaintainedIcon.svelte";
 </script>
@@ -10,10 +9,10 @@
 
     /* Small devices (portrait tablets and large phones, 600px and up) */
     @media only screen and (min-width: 600px) {
-        .top {
-            overflow: hidden;
-            display: flex;
-            align-items: center;
+        .left {
+            float: left;
+            padding: 10px;
+            width: 10%;
         }
     }
 
@@ -25,26 +24,21 @@
     }
 
     .project {
-        border: 1px solid black;
         margin-bottom: 2em;
-        border: 1px solid rgba(212, 212, 218, 0.8);
-        border-radius: 2px;
-        box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
+        background: #ffffff;
+        border: 0.5px solid #a4a2a2;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     }
     h3 {
-        margin-top: .25em;
-        text-align: center;
+        padding-top: 10px;
     }
     h3 a {
         text-decoration: none;
         color: black;
     }
     .main {
-        display: flex;
-        background: white;
-        min-height: 275px;
-        position: relative;
-        padding: 1em 1em;
+        float: right;
+        width: 88%
     }
 
     @media only screen and (max-width: 1450px) {
@@ -54,17 +48,29 @@
     }
 
     .body {
-        text-align: center;
         font-size: 15px;
     }
 
     .icons {
-        display: block;
+        display: flex;
+        padding: 1em 1em 1em 0;
     }
 
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: center
+    }
+    .image img {
+      max-width: 100%;
+      width: 3em;
+    }
+    .image {
+      padding-left: 4em
+    }
 </style>
 <div class="project">
-    <div class="top">
+    <div class="left">
         <Image field_project_images={project.field_project_images}/>
     </div>
     <div class="main">
@@ -73,11 +79,16 @@
                 <a href="{project.url}" target="_blank" rel="noreferrer">{project.title}</a>
             </h3>
             <div class="body">{@html project.body.summary}</div>
-            <Categories field_module_categories={project.field_module_categories}/>
         </div>
         <div class="icons">
             <SecurityCoverage coverage={project.field_security_advisory_coverage}/>
             <MaintainedIcon maintained={project.field_maintenance_status.id}/>
+            <div class="container">
+                <div class="image">
+                  <img src="{drupalSettings.project_browser.origin_url}/{drupalSettings.project_browser.module_path}/images/project-usage-icon.svg" alt="Project Usage"/>
+                </div>
+                <div class="text">{project.project_usage_total.toLocaleString()} Active Installs</div>
+            </div>
             <ActionButton project={project}/>
         </div>
     </div>