Use icon font instead of SVGs for feature icons. WIP #488 @1.5

diff --git a/framework/application/forms/CMS/Sub/Features/Feature.php b/framework/application/forms/CMS/Sub/Features/Feature.php
index d0883509c94aacac641fce0fa35d095e8bee8422..0fa076cf65936082a1874b990093035c937275ff 100644 (file)
--- a/framework/application/forms/CMS/Sub/Features/Feature.php
+++ b/framework/application/forms/CMS/Sub/Features/Feature.php
@@ -13,8 +13,8 @@ class Fluidbook_Form_CMS_Sub_Features_Feature extends CubeIT_Form_SubForm {
         $content->setLabel('Contenus');
         $this->addElement($content);
 
-        $icon = new CubeIT_Form_Element_File_Image('icon');
-        $icon->setLabel('Pictogramme');
+        $icon = new Zend_Form_Element_Text('icon');
+        $icon->setLabel('Pictogramme reference (CSS class)');
         $this->addElement($icon);
 
         $bg_gradient = new Fluidbook_Form_CMS_Sub_Gradient();

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 6fdc52acd84147655940e4baa2520552078ec381..26b626eccb6ac1ce9ac16fac1175d443ee4c2fc4 100644 (file)
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -24,8 +24,8 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
 
             $res .= '<div class="feature-inner">';
 
-            if (is_array($block['icon'])) {
-                $res .= $this->imageCms($block['icon'], '', null, null, ['class' => 'feature-icon']);
+            if (!empty($block['icon'])) {
+                $res .= '<div class="feature-icon fb-'. $block['icon'] .'"></div>';
             }
 
             $res .= '<div class="feature-text">';

diff --git a/less/410-features.less b/less/410-features.less
index 4959a3e54c620ec4a845bc864945dfb5be45a72b..86513bd10f8ec4bc1aebd480777bb3f284f068be 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -9,6 +9,7 @@
   overflow: hidden;
   background-repeat: no-repeat;
   background-size: 100%;
+  color: @color-text;
 
   // Block layouts
   &.rectangle-right, &.rectangle-bottom {
@@ -49,15 +50,27 @@
 }
 
 .feature-icon {
+  font-size: 65px;
+  line-height: 49px;
   margin-bottom: 30px;
   margin-right: 30px;
 
   .small-rectangle-wide & {
     float: left;
   }
+
+  // Hide icon for these views by default
+  .rectangle-right &,
+  .rectangle-bottom &,
+  .square-top &,
+  .square-bottom & {
+    display: none;
+  }
 }
 
 .feature-text {
+  overflow: hidden;
+
   .rectangle-right & {
     width: 30%;
   }