From a1e1ef0bbba3e95ce731dcccd3d06595d13cb239 Mon Sep 17 00:00:00 2001
From: Chukwuleta Tobechi <47084273+TChukwuleta@users.noreply.github.com>
Date: Fri, 28 Jun 2024 02:36:55 +0100
Subject: [PATCH] integration responsiveness

---
 src/css/styles.css | 170 ++++++++++++++++++++++-----------------------
 src/html/tmpl.html |   8 +--
 2 files changed, 88 insertions(+), 90 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index ddc06409..6a7b3606 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -140,52 +140,16 @@ body {
 }
 .api {
   grid-column: 3/8;
-  grid-row: 1/4;
+  grid-row: 1/3;
 }
-.svg-link.xenforo::before {
-  background-image: url(/img/xenforo.svg);
-  height: 90px;
-  width: 90px;
-}
-.xenforo {
-  grid-column: 8/11;
-  grid-row: 6/9;
-}
-.svg-link.shopify::before {
-  background-image: url(/img/shopify.svg);
-  height: 70px;
-  width: 70px;
-}
-.shopify {
-  grid-column: 12/10;
-  grid-row: 1/6;
-}
-.svg-link.opencart::before {
-  background-image: url(/img/opencart.svg);
-}
-.opencart {
-  grid-column: 7/7;
-  grid-row: 3/7;
-}
-.svg-link.joomla::before {
-  background-image: url(/img/joomla.svg);
-  height: 80px;
-  width: 80px;
-  background-size: 70px;
-}
-.joomla {
-  grid-column: 8/10;
-  grid-row: 3/7;
-}
-.svg-link.woo::before {
-  background-image: url(/img/woo.svg);
+.svg-link.custom::before {
+  background-image: url(/img/custom.svg);
   height: 80px;
   width: 80px;
-  background-size: 70px;
 }
-.woo {
-  grid-column: 8/10;
-  grid-row: 1/4;
+.custom {
+  grid-column: 4/5;
+  grid-row: 8/12;
 }
 .svg-link.drupal::before {
   background-image: url(/img/drupal.svg);
@@ -196,23 +160,29 @@ body {
   grid-column: 2/5;
   grid-row: 1/5;
 }
-.svg-link.whmcs::before {
-  background-image: url(/img/whmcs.svg);
-  height: 70px;
-  width: 70px;
+.svg-link.grandnode::before {
+  background-image: url(/img/grandnode.svg);
 }
-.whmcs {
-  grid-column: 3/5;
-  grid-row: 2/8;
+.grandnode {
+  grid-column: 4/8;
+  grid-row: 4/12;
 }
-.svg-link.custom::before {
-  background-image: url(/img/custom.svg);
+.svg-link.invoiceninja::before {
+  background-image: url(/img/invoiceninja.svg);
+}
+.invoiceninja {
+  grid-column: 6/8;
+  grid-row: 8/12;
+}
+.svg-link.joomla::before {
+  background-image: url(/img/joomla.svg);
   height: 80px;
   width: 80px;
+  background-size: 70px;
 }
-.custom {
-  grid-column: 2/5;
-  grid-row: 6/9;
+.joomla {
+  grid-column: 8/10;
+  grid-row: 3/7;
 }
 .svg-link.mag::before {
   background-image: url(/img/mag.svg);
@@ -220,26 +190,8 @@ body {
   width: 70px;
 }
 .mag {
-  grid-column: 7/8;
-  grid-row: 6/8;
-}
-.svg-link.zapier::before {
-  background-image: url(/img/zapier.svg);
-  height: 70px;
-  width: 70px;
-}
-.zapier {
-  grid-column: 5/10;
-  grid-row: 4/2;
-}
-.svg-link.presta::before {
-  background-image: url(/img/presta.svg);
-  height: 70px;
-  width: 70px;
-}
-.presta {
-  grid-column: 1/3;
-  grid-row: 1/7;
+  grid-column: 7/12;
+  grid-row: 4/12;
 }
 .svg-link.nopcommerce::before {
   background-image: url(/img/nopcommerce.svg);
@@ -248,23 +200,32 @@ body {
 }
 .nopcommerce {
   grid-column: 1/3;
-  grid-row: 4/9;
+  grid-row: 6/10;
 }
-.svg-link.grandnode::before {
-  background-image: url(/img/grandnode.svg);
+.svg-link.opencart::before {
+  background-image: url(/img/opencart.svg);
 }
-.grandnode {
-  grid-column: 3/8;
-  grid-row: 6/12;
+.opencart {
+  grid-column: 1/7;
+  grid-row: 5/7;
 }
-.svg-link.invoiceninja::before {
-  background-image: url(/img/invoiceninja.svg);
+.svg-link.presta::before {
+  background-image: url(/img/presta.svg);
   height: 70px;
   width: 70px;
 }
-.invoiceninja {
-  grid-column: 5/7;
-  grid-row: 2/8;
+.presta {
+  grid-column: 1/3;
+  grid-row: 2/7;
+}
+.svg-link.shopify::before {
+  background-image: url(/img/shopify.svg);
+  height: 70px;
+  width: 70px;
+}
+.shopify {
+  grid-column: 12/12;
+  grid-row: 1/6;
 }
 .svg-link.smartstore::before {
   background-image: url(/img/smartstore.svg);
@@ -273,7 +234,44 @@ body {
 }
 .smartstore {
   grid-column: 12/12;
-  grid-row: 4/8;
+  grid-row: 4/10;
+}
+.svg-link.whmcs::before {
+  background-image: url(/img/whmcs.svg);
+  height: 70px;
+  width: 70px;
+}
+.whmcs {
+  grid-column: 4/6;
+  grid-row: 2/7;
+}
+.svg-link.woo::before {
+  background-image: url(/img/woo.svg);
+  height: 80px;
+  width: 80px;
+  background-size: 70px;
+}
+.woo {
+  grid-column: 8/10;
+  grid-row: 1/3;
+}
+.svg-link.xenforo::before {
+  background-image: url(/img/xenforo.svg);
+  height: 90px;
+  width: 90px;
+}
+.xenforo {
+  grid-column: 9/12;
+  grid-row: 9/12;
+}
+.svg-link.zapier::before {
+  background-image: url(/img/zapier.svg);
+  height: 70px;
+  width: 70px;
+}
+.zapier {
+  grid-column: 5/10;
+  grid-row: 5/2;
 }
 .alt-tooktip {
   position: absolute;
diff --git a/src/html/tmpl.html b/src/html/tmpl.html
index 8b53c547..3df72e2f 100644
--- a/src/html/tmpl.html
+++ b/src/html/tmpl.html
@@ -304,10 +304,6 @@ <h2 class="desktop-only">{{integrations-and-plugins}}</h2>
 							<span class="whmcs">{{whmcs}}</span>
 						</a>
 
-						<a class="svg-link invoiceninja" href="https://docs.btcpayserver.org/InvoiceNinja/">
-							<span class="whmcs">{{invoiceninja}}</span>
-						</a>
-
 						<a class="svg-link mag" href="https://docs.btcpayserver.org/Magento/"><span class="mag">{{magento}}</span></a>
 
 						<a class="svg-link presta" href="https://docs.btcpayserver.org/PrestaShop/">
@@ -316,6 +312,10 @@ <h2 class="desktop-only">{{integrations-and-plugins}}</h2>
 
 						<a class="svg-link zapier" href="https://zapier.com/apps/btcpay-server/integrations"><span class="zapier">{{zapier}}</span></a>
 
+						<a class="svg-link invoiceninja" href="https://docs.btcpayserver.org/InvoiceNinja/">
+							<span class="invoiceninja">{{invoiceninja}}</span>
+						</a>
+
 					</div>
 
           <h2 class="mobile-only">{{integrations-and-plugins}}</h2>