]> _ Git - fluidbook-v3.git/commitdiff
Adjust footer to add Linkedin icon + improve resellers listing. Done #4674 @2
authorstephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Wed, 15 Sep 2021 16:48:09 +0000 (16:48 +0000)
committerstephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Wed, 15 Sep 2021 16:48:09 +0000 (16:48 +0000)
framework/application/forms/CMS/Sub/Social/Network.php
framework/application/views/scripts/common/footer.phtml
framework/application/views/scripts/templates/contact.phtml
less/102-footer.less
less/310-contact.less

index 8c9d316e5379507cf0866b406036857ab7edccf3..4336cfd4a0a6185e6309bb9ba7a0078d8ba2bf98 100644 (file)
@@ -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
+}
index a87e01331663b13b7f41178ed401a72869624c78..f3bd87c1b60cb30b20d4b3655cfcb990c15f5bdb 100644 (file)
@@ -51,17 +51,38 @@ $res .= '<div class="footer-external">';
 \r
 $res .= '<div class="footer-social">';\r
 foreach ($this->option('social_networks') as $social) {\r
+\r
+    if (empty($social['title']) || empty($social['icon'])) continue;\r
+\r
+    // Make CSS friendly ID from title\r
+    $social_ID = strtolower(trim($social['title']));\r
+    // Make alphanumeric (removes all other characters)\r
+    $social_ID = preg_replace('/[^a-z0-9_\s-]/', '', $social_ID);\r
+    // Clean up multiple dashes or whitespace\r
+    $social_ID = preg_replace('/[\s-]+/', ' ', $social_ID);\r
+    // Convert whitespaces and underscores to dashes\r
+    $social_ID = preg_replace('/[\s_]/', '-', $social_ID);\r
+\r
+    // Get the SVG for embedding (for simplicity, we assume it is properly optimised)\r
+    $SVG_file = PUBLIC_PATH . CubeIT_View_Helper_ImageCms::getPath($social['icon']);\r
+    if (!file_exists($SVG_file)) continue;\r
+    $SVG = file_get_contents(PUBLIC_PATH . CubeIT_View_Helper_ImageCms::getPath($social['icon']));\r
+\r
        $res .= '<style type="text/css">';\r
-       $res .= '#s-' . $social['icon'] . ':hover{background-color: ' . $social['color'] . ';border-color: ' . $social['color'] . ';}';\r
+       $res .= '#s-' . $social_ID . ':hover{background-color: ' . $social['color'] . ';border-color: ' . $social['color'] . ';}';\r
        $res .= '</style>';\r
-       $res .= $this->link('', $social['url'], array('id' => 's-' . $social['icon'],\r
+       $res .= $this->link($SVG, $social['url'], ['id' => 's-' . $social_ID,\r
                                                      'title' => $social['title'],\r
-                                                     'class' => 'social-link fb-' . $social['icon'],\r
+                                                     'class' => 'social-link',\r
                                                      'itemprop' => 'sameAs',\r
-                                                     'data-event' => array('category' => 'social',\r
-                                                                           'action' => 'go',\r
-                                                                           'label' => $social['icon'])));\r
-       $res .= '</a>';\r
+                                                     'target' => '_blank',\r
+                                                     'rel' => 'noopener',\r
+                                                     'data-event' => [\r
+                                                         'category' => 'social',\r
+                                                         'action' => 'go',\r
+                                                         'label' => $social['title']\r
+                                                  ]\r
+                                              ]);\r
 }\r
 $res .= '</div>'; // .footer-external\r
 \r
index 5aa60299ec770a3e822d2ca3a06263cdf2e07040..0ac480e300cb3319f138d76fdb93c0ada5eb9c86 100644 (file)
@@ -23,13 +23,15 @@ if ($this->form_first) {
 // Resellers\r
 $res .= '<div class="resellers content-wrapper grid">';\r
 $res .= '<h2 class="title col-6">' . nl2br($this->resellers_title) . '</h2>';\r
+$res .= '<div class="resellers-grid">';\r
 foreach ($this->resellers as $reseller) {\r
-    $res .= '<div class="reseller col-1">';\r
+    $res .= '<div class="reseller">';\r
     $res .= '<h4>' . $locale->getTranslation($reseller['country'], 'Territory') . '</h4>';\r
     $res .= $reseller['company'];\r
     $res .= $this->markupDotclear($reseller['details']);\r
     $res .= '</div>'; // .reseller\r
 }\r
+$res .= '</div>'; // .resellers-grid\r
 $res .= '</div>'; // .resellers\r
 \r
 echo $res;\r
index 833744aca5abc19fcf0af33d774f8c2eb3c16aad..8b54d339ffd05dc767e07da84ca80a9808ee72b0 100644 (file)
@@ -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
+}
index 5bf241c1b00a15fc7035344e3b6be38bfb67275a..f529ce08f882af7e3ebe82528c00311909e88312 100644 (file)
 .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
+}