updated designs

Author: markzegarelli

src/_data/catalog/destinations.yml

@@ -23,13 +23,28 @@
 
 
 <div class="quick-info">
-<h3>Quick Info</h3>
+  <div class="qi-content">
+<h4>Destination Info</h4>
 <ul class="qi">
-  <li>Accepts {% for method in destMethods%}{% if destMethods.size == 1 %}{{method}} calls.{% else %}{% unless forloop.last == true %}{{method}}, {% endunless %}{% if forloop.last == true%}and {{method}} calls.{%endif%}{% endif %}{% endfor %}</li>
+  {% if destMethods.size > 0 %}<li>Accepts {% for method in destMethods%}{% if destMethods.size == 1 %}{{method}} calls.{% else %}{% unless forloop.last == true %}{{method}}, {% endunless %}{% if forloop.last == true%}and {{method}} calls.{%endif%}{% endif %}{% endfor %}</li>{% endif %}
   <li>Referred to as <strong>{{destinationInfo.previous_names | join: '</strong>, or <strong>' }}</strong> in the <a href="/docs/guides/filtering-data/#filtering-with-the-integrations-object">Integrations object</a></li>
 </ul>
 {% if components.size > 0%}
-<h3>Connection Modes</h3>
+
+<h4>Components</h4>
+<ul class="components-list">
+{%for component in components %}
+{% if component.code contains "/segment-integrations/" %}
+<li><a href="{{component.code}}" target="_blank">{% if component.type == "IOS" %}iOS{%else%}{{component.type | capitalize}}{%endif%}</a></li>
+{% else %}
+<li>{% if component.type == "IOS" %}iOS{%else%}{{component.type | capitalize}}{%endif%}</li>
+{% endif %}
+{% endfor %}
+</ul>
+
+</div>
+<div class="qi-content">
+<h4>Connection Modes <a href="/docs/connections/destinations/#connection-modes"><img src="/docs/images/help.svg"/></a></h4>
 <table>
 <thead>
   <tr>
@@ -39,30 +54,19 @@ <h3>Connection Modes</h3>
 </thead>
 <tbody>
   <tr>
-    <td>Web {% if connectionModes.device.web == true %} ✅ {% else %}⬜️{% endif %}</td>
-    <td>Web {% if connectionModes.cloud.web == true %} ✅ {% else %}⬜️{% endif %}</td>
+    <td> {% if connectionModes.device.web == true %} <img src="/docs/images/supported.svg" /> {% else %}<img src="/docs/images/unsupported.svg" />{% endif %} Web</td>
+    <td> {% if connectionModes.cloud.web == true %} <img src="/docs/images/supported.svg" /> {% else %}<img src="/docs/images/unsupported.svg" />{% endif %} Web</td>
   </tr>
   <tr>
-    <td>Mobile {% if connectionModes.device.mobile == true %} ✅ {% else %}⬜️{% endif %}</td>
-    <td>Mobile {% if connectionModes.cloud.mobile == true %} ✅ {% else %}⬜️{% endif %}</td>
+    <td>{% if connectionModes.device.mobile == true %} <img src="/docs/images/supported.svg" /> {% else %}<img src="/docs/images/unsupported.svg" />{% endif %} Mobile</td>
+    <td>{% if connectionModes.cloud.mobile == true %} <img src="/docs/images/supported.svg" /> {% else %}<img src="/docs/images/unsupported.svg" />{% endif %} Mobile</td>
   </tr>
   <tr>
-    <td>Server ⬜️ </td>
-    <td>Server {% if connectionModes.cloud.server == true %} ✅ {% else %}⬜️{% endif %}</td>
+    <td> <img src="/docs/images/unsupported.svg" /> Server</td>
+    <td> {% if connectionModes.cloud.server == true %} <img src="/docs/images/supported.svg" /> {% else %}<img src="/docs/images/unsupported.svg" />{% endif %} Server</td>
   </tr>
 </tbody>
 </table>
-
-<h3>Components</h3>
-<ul>
-{%for component in components %}
-{% if component.code contains "/segment-integrations/" %}
-<li><a href="{{component.code}}" target="_blank">{{component.type}}</a></li>
-{% else %}
-<li>{{component.type }}</li>
-{% endif %}
-{% endfor %}
-</ul>
-
+</div>
 {% endif %}
 </div>

src/_includes/content/destination-dossier.html

@@ -2,35 +2,24 @@
 layout: integration
 ---
 <div class="markdown">
-  {% assign newContent = '' %}
-  {% assign sections = content | split:'</h2>' %}
-    
+   
 
-  {% if page.hide-dossier != true or page.name == "index.md" %}
-    {% capture destination-dossier %}{% include content/destination-dossier.html %}{% endcapture %}
-    
-    {% for section in sections %}
-    {% if forloop.index == 1 %}
-    {{newContent | append: section}}
-    {{newContent | append: '</h2> <!--insert-->'}}
-    {{destination-dossier | markdownify}}
+{% if page.hide-dossier != true  %}
+  {% capture destination-dossier %}{% include content/destination-dossier.html %}{% endcapture %}
+  
+  {{destination-dossier | markdownify}}
 
-    {% else %}
-    {{newContent | append: section}}
-    {{newContent | append: '</h2> <!--insert-->'}}
-    {% endif %}
-  {% endfor %}
+{% endif %}
 
 
-  {% else %}
 
 {% if page.maintenance == true %}
   {% capture maintenance-mode %}{% include content/destination-maintenance.md %}{% endcapture %}
   {{maintenance-mode | markdownify}}
 {% endif %}
 
   {{ content }}
-{% endif %}
+
 {% unless page.hide-boilerplate == true %}
   {% capture destination-footer %}{% include content/destination-footer.md  %}{% endcapture %}
   {{ destination-footer | markdownify }}

src/_layouts/destination.html

@@ -18,26 +18,48 @@
   border-radius: 5px;
   padding: 10px;
   z-index: 1000;
+  display: flex;
+
+  .qi-content{
+    flex: 50%;
+    padding: 10px;
+  }
 
   @include breakpoint(small down)  {
     max-width: 100%;
     float: none;
   }
 
+  h4 {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+
   table {
+    margin-top: 12px;
     th {
-      font-size: 12px;
+      font-size: 14px;
       font-weight: 600;
       padding: 5px 13px;
-      background-color: white;
+      background-color: #F4F6FA;
       text-transform: none;
       color: #474D66;
+      height: 44px;
     }
     td {
       padding: 8px 14px;
       background-color: white;
       border: none;
-      font-size: 12px;
+      font-size: 14px;
+      height: 40px;
+      vertical-align: middle;
+      img {
+        border: none;
+        display: inline;
+        margin: 0;
+        vertical-align: inherit;
+      }
     }
   }
 
@@ -50,30 +72,45 @@
   h3:first-of-type {
     margin-top:0px;
   }
+  h4:nth-of-type(2){
+    margin-top: 16px;
+  }
   ul li {
-    font-size: 12px;
-    line-height: 1.5;
-    margin-top: 0px;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  ul li:first-of-type {
+    margin-bottom: 16px;
   }
-
   ul li:before{
     width: 5px;
     height: 5px;
     background-color: #8f95b2;
     border-radius: 50%;
     transform: translate(-16px, 7px);
   }
+  ul.components-list {
+    list-style-type: none;
+
+    li {
+      float: left;
+      margin: 8px 10px 0 0;
+    }
 
+    li:before {
+      content: none;
+    }
+  }
   p {
-    font-size: 12px;
+    font-size: 14px;
   }
   .links {
     margin-top: 15px;
   }
   a {
     display: inline-block;
     img {
-      height: 24px;
+      height: 14px;
       margin: 0; 
       border: none;
     }

src/_sass/components/_quickinfo.scss

@@ -1,6 +1,7 @@
 ---
 title: 'Google Analytics 4 destination'
 strat: google
+hide-dossier: true
 ---
 
 Google introduced the new version of Google Analytics, called Google Analytics 4 (GA4), in October 2020. GA4 has some distinct differences from Universal Analytics (UA), which are important to understand before considering migration and the data schema changes that might require.

src/connections/destinations/catalog/google-analytics/ga4-plans.md

@@ -1,6 +1,7 @@
 ---
 title: Google Universal Analytics Destination
 strat: google
+hide-dossier: true
 ---
 
 > warning "Migrate mobile implementations to Firebase"