From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Wed, 15 Sep 2021 16:48:09 +0000 (+0000)
Subject: Adjust footer to add Linkedin icon + improve resellers listing. Done #4674 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=95bae0862230db77ef3f6ae2fa9e852af5ac1bcf;p=fluidbook-v3.git

Adjust footer to add Linkedin icon + improve resellers listing. Done #4674 @2
---

diff --git a/framework/application/forms/CMS/Sub/Social/Network.php b/framework/application/forms/CMS/Sub/Social/Network.php
index 8c9d316..4336cfd 100644
--- a/framework/application/forms/CMS/Sub/Social/Network.php
+++ b/framework/application/forms/CMS/Sub/Social/Network.php
@@ -18,9 +18,10 @@ class Fluidbook_Form_CMS_Sub_Social_Network extends CubeIT_Form_SubForm {
 		$couleur->setLabel('Couleur');
 		$this->addElement($couleur);
 
-		$icon = new Fluidbook_Form_Element_Picto('icon');
-		$icon->setLabel('Pictogramme (fontastic)');
+		$icon = new CubeIT_Form_Element_File_Image('icon');
+		$icon->setLabel('Pictogramme (SVG)');
+		$icon->setMaxItems(1);
 		$this->addElement($icon);
 	}
 
-}
\ No newline at end of file
+}
diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml
index a87e013..f3bd87c 100644
--- a/framework/application/views/scripts/common/footer.phtml
+++ b/framework/application/views/scripts/common/footer.phtml
@@ -51,17 +51,38 @@ $res .= '<div class="footer-external">';
 
 $res .= '<div class="footer-social">';
 foreach ($this->option('social_networks') as $social) {
+
+    if (empty($social['title']) || empty($social['icon'])) continue;
+
+    // Make CSS friendly ID from title
+    $social_ID = strtolower(trim($social['title']));
+    // Make alphanumeric (removes all other characters)
+    $social_ID = preg_replace('/[^a-z0-9_\s-]/', '', $social_ID);
+    // Clean up multiple dashes or whitespace
+    $social_ID = preg_replace('/[\s-]+/', ' ', $social_ID);
+    // Convert whitespaces and underscores to dashes
+    $social_ID = preg_replace('/[\s_]/', '-', $social_ID);
+
+    // Get the SVG for embedding (for simplicity, we assume it is properly optimised)
+    $SVG_file = PUBLIC_PATH . CubeIT_View_Helper_ImageCms::getPath($social['icon']);
+    if (!file_exists($SVG_file)) continue;
+    $SVG = file_get_contents(PUBLIC_PATH . CubeIT_View_Helper_ImageCms::getPath($social['icon']));
+
 	$res .= '<style type="text/css">';
-	$res .= '#s-' . $social['icon'] . ':hover{background-color: ' . $social['color'] . ';border-color: ' . $social['color'] . ';}';
+	$res .= '#s-' . $social_ID . ':hover{background-color: ' . $social['color'] . ';border-color: ' . $social['color'] . ';}';
 	$res .= '</style>';
-	$res .= $this->link('', $social['url'], array('id' => 's-' . $social['icon'],
+	$res .= $this->link($SVG, $social['url'], ['id' => 's-' . $social_ID,
 	                                              'title' => $social['title'],
-	                                              'class' => 'social-link fb-' . $social['icon'],
+	                                              'class' => 'social-link',
 	                                              'itemprop' => 'sameAs',
-	                                              'data-event' => array('category' => 'social',
-	                                                                    'action' => 'go',
-	                                                                    'label' => $social['icon'])));
-	$res .= '</a>';
+	                                              'target' => '_blank',
+	                                              'rel' => 'noopener',
+	                                              'data-event' => [
+	                                                  'category' => 'social',
+	                                                  'action' => 'go',
+	                                                  'label' => $social['title']
+                                                  ]
+                                              ]);
 }
 $res .= '</div>'; // .footer-external
 
diff --git a/framework/application/views/scripts/templates/contact.phtml b/framework/application/views/scripts/templates/contact.phtml
index 5aa6029..0ac480e 100644
--- a/framework/application/views/scripts/templates/contact.phtml
+++ b/framework/application/views/scripts/templates/contact.phtml
@@ -23,13 +23,15 @@ if ($this->form_first) {
 // Resellers
 $res .= '<div class="resellers content-wrapper grid">';
 $res .= '<h2 class="title col-6">' . nl2br($this->resellers_title) . '</h2>';
+$res .= '<div class="resellers-grid">';
 foreach ($this->resellers as $reseller) {
-    $res .= '<div class="reseller col-1">';
+    $res .= '<div class="reseller">';
     $res .= '<h4>' . $locale->getTranslation($reseller['country'], 'Territory') . '</h4>';
     $res .= $reseller['company'];
     $res .= $this->markupDotclear($reseller['details']);
     $res .= '</div>'; // .reseller
 }
+$res .= '</div>'; // .resellers-grid
 $res .= '</div>'; // .resellers
 
 echo $res;
diff --git a/less/102-footer.less b/less/102-footer.less
index 833744a..8b54d33 100644
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -155,8 +155,10 @@ footer.site .footer-inner {
 }
 
 .social-link {
-	margin-right: 20px;
-	display: inline-block;
+	margin-right: 12px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	border-radius: 50%;
 	border: 1px solid #fff;
 	transition: all 0.25s;
@@ -182,6 +184,10 @@ footer.site .footer-inner {
 		margin-right: 0;
 	}
 
+	svg {
+		width: 50%;
+	}
+
 	img {
 		display: block;
 	}
@@ -275,4 +281,4 @@ footer.legal .footer-inner {
 			margin-right: 0;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/less/310-contact.less b/less/310-contact.less
index 5bf241c..f529ce0 100644
--- a/less/310-contact.less
+++ b/less/310-contact.less
@@ -37,25 +37,12 @@
 .resellers {
 	display: block !important;
 	background-color: @color-light-grey;
-	padding-bottom: 2% !important;
-
-	@media @m900 {
-		text-align: center;
-	}
 }
 
-.reseller {
-	display: inline-block;
-	vertical-align: top;
-	padding-right: 30px;
-	width: percentage(1/6);
-	min-width: 240px;
-	margin-bottom: 30px; // Needed when items wrap
-	text-align: left;
-
-	@media @m900 {
-		min-width: 210px;
-	}
+.resellers-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+	grid-gap: 30px;
 
 	a {
 		text-decoration: none;
@@ -65,4 +52,4 @@
 .request-quote .form {
 	position: relative;
 	z-index: 2;
-}
\ No newline at end of file
+}