Skip to content
This repository has been archived by the owner on Dec 7, 2022. It is now read-only.

Commit

Permalink
Merge pull request #1870 from LivePersonInc/table-issues
Browse files Browse the repository at this point in the history 
fixed search style and input
  • Loading branch information
@itay1313
itay1313 authored Sep 13, 2022
2 parents 2a90249 + 86f8fc3 commit 65fa10f
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 111 deletions.
17 changes: 14 additions & 3 deletions css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -596,6 +596,11 @@ td {
}
}

.table-wrapper {
display: block;
overflow-x: auto;
}

#featurestable {
width: 100%;
max-width: none;
Expand All @@ -612,6 +617,8 @@ td {

#featurestable tr td {
vertical-align: middle;
hyphens: inherit;
overflow-wrap: inherit;
}

#featurestable .green {
Expand Down Expand Up @@ -666,7 +673,7 @@ td {
padding-left: 10px;
}

.categoryrow {
.categoryrow td {
background-color: #162036 !important;
}

Expand Down Expand Up @@ -1218,10 +1225,13 @@ div#defaultsidebar .mysidebar .sidebarbuttoncontainer {
}

#jumpto {
flex: 1 !important; /* TODO: Disable “important” */
padding-bottom: var(--space10);
}

#jumpto #anchorlist p:not(:empty) {
min-width: 240px;
}

#anchorlist {
margin-top: 70px;
overflow-wrap: anywhere;
Expand Down Expand Up @@ -1266,7 +1276,8 @@ div#defaultsidebar .mysidebar .sidebarbuttoncontainer {
}

.highlightlink {
background-color: var(--body-background) !important; /* Make sure background is white */
background-color: var(--body-background) !important;
/* Make sure background is white */
color: var(--link-color) !important;
font-weight: bold;
}
Expand Down
19 changes: 18 additions & 1 deletion css/inner-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,10 +190,27 @@ table>thead>tr>th {
border-bottom: none;
}

table>tbody>tr:nth-of-type(odd) {
table>tbody>tr:nth-of-type(odd):not(.categoryrow) td {
background-color: var(--table-cell);
}

#featurestable tr td,
#featurestable tr th {
padding: 8px;
min-width: 130px;
}

#featurestable tr td:first-child,
#featurestable tr th:first-child {
min-width: 200px;
}

#featurestable tr {
width: 100%;
display: grid;
grid-auto-flow: column;
}

.designsheet table tr td {
line-height: 2.4em !important;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion js/additionalscripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -668,7 +668,7 @@ function searchFunction() {
//very similar to the search function above, just for the capabilities comparison table
function capabilitiesSearch() {
var $title = $(".h1").text()
if ($title.indexOf("Rich Messaging Channel Capabilities") > -1) {
if ($title.indexOf("Messaging features Capabilities Comparison") > -1) {
// Declare variables
// console.log("run")
var input, filter, table, tr, categorytr, td, i
Expand Down
214 changes: 108 additions & 106 deletions pages/Documents/APIGuidelines/messaging-features-capabilities-comparison.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,112 +10,114 @@ redirect_from:
---

<input id="capabilitiesSearch" placeholder="Search by Capability Name" />
<table id="featurestable">
<thead>
<th></th>
<th>Mobile App Messaging</th>
<th>Web Messaging</th>
<th>Apple Business chat</th>
<th>SMS</th>
<th>Facebook</th>
<th>WhatsApp</th>
<th>Google RCS</th>
<th>Line</th>
<th>Messaging Window API</th>
<th>Connector API</th>
</thead>
<tbody>
{% for category in site.data.capabilities %}
<tr class="categoryrow">
<td>{{ category.categoryName }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
{% for feature in category.features %}
<tr>
<td>{{ feature.featureName }}</td>
{% for channel in feature.channels %}
{% if forloop.index == 1 %}
{% if channel.mobileAppMessaging == "Supported" %}
<td class="green">{{ channel.mobileAppMessaging }}</td>
{% else %}
<td>{{ channel.mobileAppMessaging }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 2 %}
{% if channel.webMessaging == "Supported" %}
<td class="green">{{ channel.webMessaging }}</td>
{% else %}
<td>{{ channel.webMessaging }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 3 %}
{% if channel.appleBusinessChat == "Supported" %}
<td class="green">{{ channel.appleBusinessChat }}</td>
{% else %}
<td>{{ channel.appleBusinessChat }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 4 %}
{% if channel.sms == "Supported" %}
<td class="green">{{ channel.sms }}</td>
{% else %}
<td>{{ channel.sms }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 5 %}
{% if channel.facebook == "Supported" %}
<td class="green">{{ channel.facebook }}</td>
{% else %}
<td>{{ channel.facebook }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 6 %}
{% if channel.whatsapp == "Supported" %}
<td class="green">{{ channel.whatsapp }}</td>
{% else %}
<td>{{ channel.whatsapp }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 7 %}
{% if channel.googleRCS == "Supported" %}
<td class="green">{{ channel.googleRCS }}</td>
{% else %}
<td>{{ channel.googleRCS }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 8 %}
{% if channel.line == "Supported" %}
<td class="green">{{ channel.line }}</td>
{% else %}
<td>{{ channel.line }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 9 %}
{% if channel.messagingWindowAPI == "Supported" %}
<td class="green">{{ channel.messagingWindowAPI }}</td>
{% else %}
<td>{{ channel.messagingWindowAPI }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 10 %}
{% if channel.connectorAPI == "Supported" %}
<td class="green">{{ channel.connectorAPI }}</td>
{% else %}
<td>{{ channel.connectorAPI }}</td>
{% endif %}
{% endif %}
<div class="table-wrapper">
<table id="featurestable">
<thead>
<th></th>
<th>Mobile App Messaging</th>
<th>Web Messaging</th>
<th>Apple Business chat</th>
<th>SMS</th>
<th>Facebook</th>
<th>WhatsApp</th>
<th>Google RCS</th>
<th>Line</th>
<th>Messaging Window API</th>
<th>Connector API</th>
</thead>
<tbody>
{% for category in site.data.capabilities %}
<tr class="categoryrow">
<td>{{ category.categoryName }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
{% for feature in category.features %}
<tr>
<td>{{ feature.featureName }}</td>
{% for channel in feature.channels %}
{% if forloop.index == 1 %}
{% if channel.mobileAppMessaging == "Supported" %}
<td class="green">{{ channel.mobileAppMessaging }}</td>
{% else %}
<td>{{ channel.mobileAppMessaging }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 2 %}
{% if channel.webMessaging == "Supported" %}
<td class="green">{{ channel.webMessaging }}</td>
{% else %}
<td>{{ channel.webMessaging }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 3 %}
{% if channel.appleBusinessChat == "Supported" %}
<td class="green">{{ channel.appleBusinessChat }}</td>
{% else %}
<td>{{ channel.appleBusinessChat }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 4 %}
{% if channel.sms == "Supported" %}
<td class="green">{{ channel.sms }}</td>
{% else %}
<td>{{ channel.sms }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 5 %}
{% if channel.facebook == "Supported" %}
<td class="green">{{ channel.facebook }}</td>
{% else %}
<td>{{ channel.facebook }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 6 %}
{% if channel.whatsapp == "Supported" %}
<td class="green">{{ channel.whatsapp }}</td>
{% else %}
<td>{{ channel.whatsapp }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 7 %}
{% if channel.googleRCS == "Supported" %}
<td class="green">{{ channel.googleRCS }}</td>
{% else %}
<td>{{ channel.googleRCS }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 8 %}
{% if channel.line == "Supported" %}
<td class="green">{{ channel.line }}</td>
{% else %}
<td>{{ channel.line }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 9 %}
{% if channel.messagingWindowAPI == "Supported" %}
<td class="green">{{ channel.messagingWindowAPI }}</td>
{% else %}
<td>{{ channel.messagingWindowAPI }}</td>
{% endif %}
{% endif %}
{% if forloop.index == 10 %}
{% if channel.connectorAPI == "Supported" %}
<td class="green">{{ channel.connectorAPI }}</td>
{% else %}
<td>{{ channel.connectorAPI }}</td>
{% endif %}
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tr>
{% endfor %}
{% endfor %}
</tbody>
</tbody>
</table>
</div>

0 comments on commit 65fa10f

Please sign in to comment.