Skip to content

Commit b7a5d04

Browse files
author
markzegarelli
committed
redesign quick-info
1 parent cd3bc07 commit b7a5d04

File tree

2 files changed

+130
-11
lines changed

2 files changed

+130
-11
lines changed

‎src/_includes/content/destination-dossier.html

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@
1212
{% assign methodHTML = methodUrl | append: methodName %}
1313
{% assign methodHTML = methodHTML | append: '</a>' %}
1414
{% assign destMethods = destMethods | push: methodHTML %} {%endif%}
15+
{% assign connectionModes = destinationInfo.connection_modes %}
16+
{% assign components = destinationInfo.components %}
1517
{% endfor %}
1618
{% assign destMethods = destMethods| reverse %}
1719

1820
{% if page.cmode-override %}
1921
{% assign destinationInfo = site.data.catalog.overrides.items % | where: "slug", thisDestination | first %}
2022
{% endif %}
21-
<div class="quick-info">
23+
<!-- <div class="quick-info">
2224
<h4>{{ destinationInfo.display_name }} quick info </h4>
2325
<p>{% if destMethods.size > 0 %}
2426
<strong>{{destinationInfo.display_name}}</strong> {% if destinationInfo.status == "PUBLIC_BETA" %} is in beta, and{% endif %} 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 %} If you reference it in the <a href="/docs/guides/filtering-data/#filtering-with-the-integrations-object">Integrations object</a>, call it &ldquo;{{destinationInfo.previous_names | join: '", or "' }}&rdquo;.
@@ -38,4 +40,49 @@ <h4>{{ destinationInfo.display_name }} quick info </h4>
3840
</p>
3941
{% endunless %}
4042
41-
</div>
43+
</div> -->
44+
45+
<div class="quick-info">
46+
<h3>Quick Info</h3>
47+
<ul class="qi">
48+
<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>
49+
<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>
50+
</ul>
51+
{% if components.size > 0%}
52+
<h3>Connection Modes</h3>
53+
<table>
54+
<thead>
55+
<tr>
56+
<th>Device-mode</th>
57+
<th>Cloud-mode</th>
58+
</tr>
59+
</thead>
60+
<tbody>
61+
<tr>
62+
<td>Web {% if connectionModes.device.web == true %} ✅ {% else %}⬜️{% endif %}</td>
63+
<td>Web {% if connectionModes.cloud.web == true %} ✅ {% else %}⬜️{% endif %}</td>
64+
</tr>
65+
<tr>
66+
<td>Mobile {% if connectionModes.device.mobile == true %} ✅ {% else %}⬜️{% endif %}</td>
67+
<td>Mobile {% if connectionModes.cloud.mobile == true %} ✅ {% else %}⬜️{% endif %}</td>
68+
</tr>
69+
<tr>
70+
<td>Server ⬜️ </td>
71+
<td>Server {% if connectionModes.cloud.server == true %} ✅ {% else %}⬜️{% endif %}</td>
72+
</tr>
73+
</tbody>
74+
</table>
75+
76+
<h3>Components</h3>
77+
<ul>
78+
{%for component in components %}
79+
{% if component.code contains "/segment-integrations/" %}
80+
<li><a href="{{component.code}}" target="_blank">{{component.type}}</a></li>
81+
{% else %}
82+
<li>{{component.type }}</li>
83+
{% endif %}
84+
{% endfor %}
85+
</ul>
86+
87+
{% endif %}
88+
</div>

‎src/_sass/components/_quickinfo.scss

Lines changed: 81 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,84 @@
1+
// .quick-info {
2+
// border: 1px solid #EBF0FF;
3+
// background: #FAFBFF;
4+
// border-radius: 8px;
5+
// padding: 25px;
6+
// h4 {
7+
// margin-bottom: 15px;
8+
// }
9+
// p:not(:last-of-type) {
10+
// margin-bottom: 25px;
11+
// }
12+
// }
13+
14+
115
.quick-info {
2-
border: 1px solid #EBF0FF;
3-
background: #FAFBFF;
4-
border-radius: 8px;
5-
padding: 25px;
6-
h4 {
7-
margin-bottom: 15px;
16+
float: right;
17+
border: 1px solid #eee;
18+
border-radius: 5px;
19+
max-width: 245px;
20+
padding: 10px;
21+
margin-left: 15px;
22+
background-color: #FAFBFF;
23+
z-index: 1000;
24+
25+
table {
26+
th {
27+
font-size: 12px;
28+
font-weight: 600;
29+
padding: 5px 13px;
30+
background-color: white;
31+
text-transform: none;
32+
color: #474D66;
833
}
9-
p:not(:last-of-type) {
10-
margin-bottom: 25px;
11-
}
34+
td {
35+
padding: 8px 14px;
36+
background-color: white;
37+
border: none;
38+
font-size: 12px;
39+
}
40+
}
41+
42+
h3 {
43+
font-size: 16px;
44+
font-weight: 700;
45+
line-height: 26px;
46+
margin: 12px 0 8px;
47+
}
48+
h3:first-of-type {
49+
margin-top:0px;
50+
}
51+
ul li {
52+
font-size: 12px;
53+
line-height: 1.5;
54+
margin-top: 0px;
55+
}
56+
57+
ul li:before{
58+
width: 5px;
59+
height: 5px;
60+
background-color: #8f95b2;
61+
border-radius: 50%;
62+
transform: translate(-16px, 7px);
63+
}
64+
65+
p {
66+
font-size: 12px;
67+
}
68+
.links {
69+
margin-top: 15px;
70+
}
71+
a {
72+
display: inline-block;
73+
img {
74+
height: 24px;
75+
margin: 0;
76+
border: none;
77+
}
78+
}
79+
}
80+
81+
p.released-on {
82+
font-size: 12px;
83+
margin-top: 0px;
1284
}

0 commit comments

Comments
 (0)