Enable adding integration logo to integration box (#156)
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
index 0312cd1..3b5e73a 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -194,11 +194,24 @@
height: 208px;
justify-content: center;
+ &--logo {
+ margin: auto 0;
+ filter: grayscale(1);
+ opacity: 0.6;
+ }
+
&--name {
@extend .subtitle__medium--brownish-grey;
font-weight: bold;
text-align: center;
}
+
+ &:hover {
+ .box-event__integration--logo {
+ filter: none;
+ opacity: 1;
+ }
+ }
}
}
diff --git a/landing-pages/site/layouts/index.html b/landing-pages/site/layouts/index.html
index cf069fa..072f877 100644
--- a/landing-pages/site/layouts/index.html
+++ b/landing-pages/site/layouts/index.html
@@ -45,6 +45,7 @@
<a class="list-item" href="">
<div class="card">
<div class="box-event box-event__integration">
+ <img src="" alt="" data-name="logo" class="box-event__integration--logo"/>
<span class="box-event__integration--name" data-name="name"></span>
</div>
</div>
diff --git a/landing-pages/site/assets/icons/azure-logo.svg b/landing-pages/site/static/integration-logos/azure-logo.svg
similarity index 100%
rename from landing-pages/site/assets/icons/azure-logo.svg
rename to landing-pages/site/static/integration-logos/azure-logo.svg
diff --git a/landing-pages/src/js/integrationList.js b/landing-pages/src/js/integrationList.js
index dc682a7..ece0b2e 100644
--- a/landing-pages/src/js/integrationList.js
+++ b/landing-pages/src/js/integrationList.js
@@ -55,7 +55,7 @@
const sortByLogoAvailability = (a, b) => {
const a_key = a.logo ? 1 : -1;
const b_key = b.logo ? 1 : -1;
- return a_key - b_key;
+ return b_key - a_key;
};
let fetchIntegrationRequest = null;
@@ -87,6 +87,15 @@
function createElement(item) {
const element = templateElement.cloneNode(true);
+
+ const imgNode = element.querySelector('[data-name="logo"]');
+ if (item.logo) {
+ imgNode.src = item.logo;
+ imgNode.alt = `${item.name} logo`;
+ } else {
+ imgNode.parentNode.removeChild(imgNode);
+ }
+
element.querySelector('[data-name="name"]').innerText = item.name;
element.querySelector("a").href = item.url;
return element.firstElementChild;
