Merge branch 'staging/3.9' into release/3.9

Author: ikulikov

_includes/marketplace-style.css

@@ -1,9 +1,65 @@
-p, h1, h3, h5 {
+body {
+	background-color: #F7F9FC;
+}
+
+.marketplace-title {
 	color: #212529;
+	font-size: 56px;
+	font-weight: 600;
+	line-height: 72px;
+	letter-spacing: 0.14px;
+	text-align: center;
+	margin-bottom: 32px;
 }
 
-body {
-	background-color: #F7F9FC;
+.marketplace-desc {
+	color: rgba(0, 0, 0, 0.76);
+	font-size: 20px;
+	font-weight: 400;
+	line-height: 32px;
+	letter-spacing: 0.15px;
+	text-align: center;
+}
+
+.marketplace-cards {
+	display: flex;
+	justify-content: space-between;
+	gap: 32px;
+	margin: 56px 0;
+}
+
+.marketplace-card {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 46px;
+	border-radius: 24px;
+	background: #FFF;
+	box-shadow: -4px 15px 50px -20px rgba(0, 0, 0, 0.15), 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+	width: 100%;
+	animation: slide-in 0.8s ease-out forwards
+}
+
+.marketplace-card .marketplace-card-icon {
+	padding: 25px;
+	border-radius: 24px;
+	border: 3px solid #3E9AF8;
+	width: fit-content;
+}
+
+.marketplace-card .marketplace-card-title {
+	font-size: 28px;
+	font-weight: 500;
+	line-height: 44px;
+	letter-spacing: 0.249px;
+	color: #2A7DEC;
+}
+
+.marketplace-card .marketplace-card-desc {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 28px;
+	letter-spacing: 0.15px;
 }
 
 .background {
@@ -36,36 +92,13 @@ body {
 }
 
 /*#hardwareContainer:after*/
-#users main h1 {
-	font-size: 36px;
-	font-weight: 500;
-	line-height: 54px;
-	margin: 10px 0 32px;
-	text-align: center;
-}
-
-#users main h3 {
-	font-size: 30px;
-	font-weight: 500;
-	line-height: 54px;
-	margin: 10px 0 32px;
-	text-align: center;
-}
-
-#users main h5 {
-	text-align: center;
-	font-size: 20px;
-	line-height: 1.5em;
-	font-weight: normal;
-	margin-bottom: 60px;
-}
-
 p.button-section {
+	margin-top: 32px;
 	padding-bottom: 48px;
 }
 
 .button {
-	font-size: 18px;
+	font-size: 16px;
 	padding: 12px 20px;
 }
 
@@ -84,23 +117,31 @@ section {
 	}
 }
 
-@media screen and (max-width: 768px) {
-	#users {
-		padding: 30px 20px 0;
+@keyframes slide-in {
+	from {
+		opacity: 0;
+		transform: translateY(30%);
 	}
 
-	#users main h1 {
-		font-size: 32px;
-		line-height: 50px;
+	to {
+		opacity: 1;
+		transform: translateY(0);
 	}
+}
 
-	#users main h3 {
-		font-size: 26px;
-		line-height: 50px;
+@media screen and (max-width: 1100px) {
+	.marketplace-cards {
+		flex-wrap: wrap;
 	}
+}
 
-	#users main h5 {
+@media screen and (max-width: 500px) {
+	.marketplace-title {
+		font-size: 46px;
+		line-height: 65px;
+	}
+	.marketplace-desc {
 		font-size: 16px;
+		line-height: 25px;
 	}
-
-}
+}

_includes/partner-script.js

@@ -33,11 +33,24 @@ function rengen() {
             box.appendChild(programImg);
         }
 
+        var cardHeader = document.createElement('div');
+        cardHeader.className = "cardHeader"
+
 		var img = document.createElement('img');
         img.className = 'logo';
 		img.src = 'https://img.thingsboard.io/partners/' + obj.logo;
 
+        var siteLink = document.createElement('a');
+        siteLink.className = 'siteLink';
+        siteLink.textContent = 'Website';
+        siteLink.href = obj.site.href;
+        siteLink.target = obj.site.target;
+
 		var div = document.createElement('div');
+        div.className = 'wrapper';
+
+        var cardContent = document.createElement('div');
+        cardContent.className = 'card-content';
 
         var titleElement = document.createElement('p');
         titleElement.textContent = obj.name;
@@ -54,7 +67,7 @@ function rengen() {
         bg.className = 'box-background';
 
         var linksElement = document.createElement('div');
-        linksElement.className = 'links';
+        linksElement.className = 'links owl-carousel partnersCarousel';
 
         for (var linkName in obj.links) {
             var linkInfo = obj.links[linkName];
@@ -67,12 +80,21 @@ function rengen() {
             linksElement.appendChild(link);
         }
 
+        if(linksElement.children.length >= 2) {
+            linksElement.classList.add('usecase-carousel', 'owl-theme', 'smallArrow');
+        } else {
+            linksElement.classList.remove('owl-carousel', 'partnersCarousel');
+        }
+
+        cardHeader.appendChild(img);
+        cardHeader.appendChild(siteLink);
         text.appendChild(titleElement);
 		text.appendChild(p);
-        div.appendChild(text);
+        cardContent.appendChild(cardHeader);
+        cardContent.appendChild(text);
+        div.appendChild(cardContent);
 		div.appendChild(linksElement);
 		box.appendChild(bg);
-		box.appendChild(img);
 		box.appendChild(div);
 
 
@@ -81,7 +103,7 @@ function rengen() {
 
 	if (partnersType === 'hardware') {
         var becomeHardwarePartnerBox = document.createElement('div');
-        becomeHardwarePartnerBox.className = 'partner-box';
+        becomeHardwarePartnerBox.className = 'partner-box become-partner-box';
 
         var bg = document.createElement('div');
         bg.className = 'box-background';
@@ -127,4 +149,23 @@ function actions(sectionId) {
             rengen();
         }
     }
+
+    jqueryDefer(addCarousel);
+}
+
+function addCarousel() {
+    $('.owl-carousel').each(function(index) {
+        const $carousel = $(this);
+        const carouselId = "owl-carousel-" + index;
+        $(this).attr("id", carouselId);
+
+        if(!$carousel[0].classList.contains("owl-loaded")) {
+            $('#' + carouselId).owlCarousel({
+                autoWidth: true,
+                margin: 10,
+                nav: true,
+                dots: false
+            });
+        }
+    })
 }