[966] simplify partner logo system and add partnership label (#247)

refactor: simplify partner logo system and add partnership label

- Replace separate mobile/desktop logo fields with single responsive
logo

- Add partner name field and display 'In partnership with' label

- Make partnership section clickable when partner website is available

- Update logo styling to use responsive max dimensions instead of fixed
sizes

- Change partner sorting to alphabetical by title

Author: IhorMasechko

website/modules/asset/ui/src/scss/_cases.scss

@@ -1413,18 +1413,49 @@
   }
 }
 
-.cs_partnership-picture {
-  display: block;
+.cs_partnership-box {
+  background-color: $white;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  width: 66px;
+  height: 66px;
+
+  @include breakpoint-medium {
+    width: 146px;
+    height: 146px;
+    padding: 20px 10px;
+  }
+}
+
+.cs_partnership-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.cs_partnership-text {
+  @include font-settings(6px, 100%, $font-weight-extra-bold);
+  color: $gray-500;
+  text-transform: uppercase;
+
+  @include breakpoint-medium {
+    @include font-settings(14px, 100%, $font-weight-extra-bold);
+  }
 }
 
 .cs_partnership-logo {
-  width: 66px;
-  height: 66px;
+  max-width: 100%;
+  height: auto;
+  max-height: 20px;
+  width: auto;
   object-fit: contain;
   display: block;
 
   @include breakpoint-medium {
-    width: 140px;
-    height: 140px;
+    max-height: 40px;
   }
 }

website/modules/business-partner/index.js

@@ -5,27 +5,19 @@ module.exports = {
     pluralLabel: 'Business Partners',
     slugPrefix: 'business-partner-',
     sort: {
-      createdAt: -1,
+      title: 1,
     },
     shortcut: false,
   },
   fields: {
     add: {
-      partnerLogoMobile: {
-        label: 'Partner Logo (Mobile)',
-        type: 'area',
+      title: {
+        label: 'Partner Name',
+        type: 'string',
         required: true,
-        options: {
-          max: 1,
-          min: 1,
-          widgets: {
-            '@apostrophecms/image': {},
-          },
-        },
-        help: 'Upload 66px × 66px logo for mobile/default view',
       },
-      partnerLogoDesktop: {
-        label: 'Partner Logo (Desktop)',
+      partnerLogo: {
+        label: 'Partner Logo',
         type: 'area',
         required: true,
         options: {
@@ -35,7 +27,6 @@ module.exports = {
             '@apostrophecms/image': {},
           },
         },
-        help: 'Upload 146px × 146px logo for desktop (≥ medium breakpoint)',
       },
       partnerWebsite: {
         label: 'Partner Website',
@@ -48,7 +39,7 @@ module.exports = {
     group: {
       basics: {
         label: 'Basics',
-        fields: ['partnerLogoMobile', 'partnerLogoDesktop', 'partnerWebsite'],
+        fields: ['title', 'partnerLogo', 'partnerWebsite'],
       },
     },
   },

website/modules/case-studies-page/views/show.html

@@ -134,38 +134,36 @@
 
       {% if data.piece._partner and data.piece._partner.length %}
       {% set partner = data.piece._partner[0] %}
-      {% set partnerLogoMobile = apos.image.first(partner.partnerLogoMobile) %}
-      {% set partnerLogoDesktop = apos.image.first(partner.partnerLogoDesktop) %}
+      {% set partnerLogo = apos.image.first(partner.partnerLogo) %}
       {% if partner.partnerWebsite %}
       <a
         href="{{ partner.partnerWebsite }}"
         target="_blank"
         rel="noopener noreferrer"
-        aria-label="Visit partner website"
+        aria-label="Visit {{ partner.title or 'partner' }} website"
         class="cs_partnership"
       >
       {% else %}
       <div class="cs_partnership">
       {% endif %}
-        {% if partnerLogoMobile or partnerLogoDesktop %}
-        <picture class="cs_partnership-picture">
-          {% if partnerLogoDesktop %}
-          <source
-            media="(min-width: 768px)"
-            srcset="{{ apos.attachment.url(partnerLogoDesktop, { size: 'full' }) }}"
-          />
+      <div class="cs_partnership-box">
+        <div class="cs_partnership-label">
+          <span class="cs_partnership-text">In partnership</span>
+          <span class="cs_partnership-text">with</span>
+          {% if partner.title %}
+          <span class="cs_partnership-text">{{ partner.title }}</span>
           {% endif %}
-          {% if partnerLogoMobile %}
+        </div>
+        {% if partnerLogo %}
           <img
             class="cs_partnership-logo"
-            src="{{ apos.attachment.url(partnerLogoMobile, { size: 'full' }) }}"
-            alt="{{ partnerLogoMobile._alt or 'Partner logo' }}"
-            width="{{ apos.attachment.getWidth(partnerLogoMobile) }}"
-            height="{{ apos.attachment.getHeight(partnerLogoMobile) }}"
+            src="{{ apos.attachment.url(partnerLogo, { size: 'full' }) }}"
+            alt="{{ partnerLogo._alt or partner.title or '' }}"
+            width="{{ apos.attachment.getWidth(partnerLogo) }}"
+            height="{{ apos.attachment.getHeight(partnerLogo) }}"
           />
           {% endif %}
-        </picture>
-        {% endif %}
+        </div>
       {% if partner.partnerWebsite %}
       </a>
       {% else %}

website/modules/case-studies/index.js

@@ -57,9 +57,9 @@ module.exports = {
         max: 1,
         builders: {
           project: {
+            title: 1,
             slug: 1,
-            partnerLogoMobile: 1,
-            partnerLogoDesktop: 1,
+            partnerLogo: 1,
             partnerWebsite: 1,
           },
         },