Ticket #2095 - Use similar approach in all templates.

inc/js/classes/BxDolMenuSubmenu.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    UnaCore UNA Core
+ * @{
+ */
+
+function BxDolMenuSubmenu(oOptions)
+{
+    this._sObject = oOptions.sObject;
+    this._aHtmlIds = oOptions.aHtmlIds != undefined ? oOptions.aHtmlIds : {};  
+
+    this._sClassBar = oOptions.sClassBar != undefined ? oOptions.sClassBar : 'bx-menu-main-bar';
+    this._sClassBarWrapper = oOptions.sClassBarWrapper != undefined ? oOptions.sClassBarWrapper : 'bx-menu-main-bar-wrapper';
+    this._sClassMenu = oOptions.sClassMenu != undefined ? oOptions.sClassMenu : 'bx-menu-main-submenu';
+    this._sClassHideShadowAfter = 'bx-menu-main-bar-hide-shadow-after';
+    this._sClassHideShadowBefore = 'bx-menu-main-bar-hide-shadow-before';
+}
+
+BxDolMenuSubmenu.prototype.init = function() {
+    var $this = this;
+
+    $(document).ready(function() {
+        //--- Initialize Scrolling Effects ---//
+        $('.' + $this._sClassBar).bind('scroll', function () {
+            var oMenuBarWrapper = $(this).parents('.' + $this._sClassBarWrapper);
+            var oMenu = $(this).find('.' + $this._sClassMenu);
+
+            if(Math.abs(oMenu.position().left) >= (oMenu.width() - $(this).width() - 1))
+                oMenuBarWrapper.addClass($this._sClassHideShadowAfter);
+            else
+                oMenuBarWrapper.removeClass($this._sClassHideShadowAfter);
+
+            if(oMenu.position().left >= 0)
+                oMenuBarWrapper.addClass($this._sClassHideShadowBefore);
+            else
+                oMenuBarWrapper.removeClass($this._sClassHideShadowBefore);
+        });
+    });
+};
+
+/** @} */

modules/base/profile/template/cover.html

@@ -3,7 +3,7 @@
         <div class="bx-base-pofile-cover bx-def-cover-color-bg bx-def-box-sizing">
             <div class="bx-base-pofile-cover-image">
                 <a class="bx-base-pofile-cover-image bx-def-box-sizing" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">
-                    <img class="bx-base-pofile-cover-image" src="__cover_url__"/>
+                    <img class="bx-base-pofile-cover-image" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />"/>
                 </a>
                 <div class="bx-cover-gradient"></div>
             </div>

modules/base/profile/template/css/main.css

@@ -147,6 +147,10 @@ div.bx-base-pofile-cover-image {
     max-width: 100%;
     height: 32rem;
 }
+div.bx-base-pofile-cover-image,
+div.bx-base-pofile-cover-info {
+    background-color: rgba(255, 255, 255, 1.0);
+}
 a.bx-base-pofile-cover-image,
 a.bx-base-pofile-cover-image:hover {
     position:absolute;
@@ -163,15 +167,21 @@ a.bx-base-pofile-cover-image:hover {
     background-size: cover;
 }
 a.bx-base-pofile-cover-image img {
-    object-fit: cover;
-    max-width: 100%;
+    position: relative;
+    display: block;
+    width: 100%;
     height: 100%;
+
+    background-repeat: no-repeat;
+    background-position: center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
 }
 .bx-base-pofile-cover-info {
     position: relative;
     width: 100%;
-
-    background-color: rgba(255, 255, 255, 1.0);
 }
 .bx-base-pofile-ci-cnt {
     display: -webkit-flex;
@@ -217,6 +227,15 @@ a.bx-base-pofile-cover-thumb img {
     background-color: #fff;
 }
 
+a.bx-base-pofile-cover-thumb p.bx-base-pofile-unit-ava,
+a.bx-base-pofile-cover-thumb img.bx-base-pofile-unit-ava {
+    border: 5px solid #fff;
+}
+a.bx-base-pofile-cover-thumb p.bx-base-pofile-unit-ava {
+    line-height: 190px;
+    font-size: 5.0rem;
+}
+
 .bx-base-pofile-cover-user {
     -webkit-flex: 2 1 auto; 
     -ms-flex:  2 1 auto; 

modules/boonex/decorous/data/template/system/_sub_header.html

@@ -31,7 +31,7 @@
 				    __cover__
                                     <bx_injection:injection_between_cover_top_menu />
 				    <div class="bx-menu-main-bar-gap bx-def-centered bx-def-padding-leftright bx-def-page-width bx-def-box-sizing">
-					<div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-def-color-bg-sec">
+					<div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-menu-main-bar-hide-shadow-before bx-def-color-bg-sec">
 					    <div id="bx-menu-main-bar" class="bx-menu-main-bar">
 					        <bx_injection:injection_top_menu_before />
 				        	<bx_menu:sys_site_submenu />

modules/boonex/decorous/data/template/system/css/default.less

@@ -680,21 +680,29 @@ a.bx-def-font-h3:hover {
 
 /* page menu */
 .bx-menu-main-bar-wrapper {
-	-webkit-box-shadow: @bx-shadow-menu-page;
-	-moz-box-shadow: @bx-shadow-menu-page;
-	box-shadow: @bx-shadow-menu-page;
+    -webkit-box-shadow: @bx-shadow-menu-page;
+    -moz-box-shadow: @bx-shadow-menu-page;
+    box-shadow: @bx-shadow-menu-page;
 
-	border-width: @bx-border-width-menu-page;
-	border-style: solid;
-	border-color: @bx-color-border-menu-page;
+    border-width: @bx-border-width-menu-page;
+    border-style: solid;
+    border-color: @bx-color-border-menu-page;
 
-	background-color: @bx-color-menu-page;
+    background-color: @bx-color-menu-page;
 
-	background-image: @bx-image-bg-menu-page;
-	background-repeat: @bx-image-bg-menu-page-repeat;
-	background-attachment: @bx-image-bg-menu-page-attachment;
+    background-image: @bx-image-bg-menu-page;
+    background-repeat: @bx-image-bg-menu-page-repeat;
+    background-attachment: @bx-image-bg-menu-page-attachment;
     background-size: @bx-image-bg-menu-page-size;
 }
+.bx-menu-main-bar-wrapper:before {
+    border-bottom-left-radius: @bx-border-radius-block-bl;
+    background: @bx-color-menu-page-gradient-left;
+}
+.bx-menu-main-bar-wrapper:after {
+    border-bottom-right-radius: @bx-border-radius-block-br;
+    background: @bx-color-menu-page-gradient-right;
+}
 .bx-menu-main-bar-wrapper .bx-menu-main-submenu {
 	padding: @bx-content-padding-menu-page;
 }

modules/boonex/decorous/data/template/system/scripts/BxTemplConfig.php

@@ -142,6 +142,8 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-menu-account'] = $this->_setColorRgba($sName . '_menu_account_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-menu-add'] = $this->_setColorRgba($sName . '_menu_add_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-menu-page'] = $this->_setColorRgba($sName . '_menu_page_bg_color', 'rgba(242, 242, 242, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-menu-page-gradient-left'] = $this->_setGradientMenuPageLeft($sName . '_menu_page_bg_color', '242, 242, 242');
+        $this->_aConfig['aLessConfig']['bx-color-menu-page-gradient-right'] = $this->_setGradientMenuPageRight($sName . '_menu_page_bg_color', '242, 242, 242');
         $this->_aConfig['aLessConfig']['bx-color-menu-slide'] = $this->_setColorRgba($sName . '_menu_slide_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-form-input'] = $this->_setColorRgba($sName . '_form_input_bg_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-form-input-active'] = $this->_setColorRgba($sName . '_form_input_bg_color_active', 'rgba(255, 255, 255, 1)');

modules/boonex/decorous/install/sql/install.sql

@@ -271,7 +271,7 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 (@iCategoryId, CONCAT(@sName, '_menu_page_bg_image_size'), '_bx_decorous_stg_cpt_option_menu_page_bg_image_size', 'cover', 'select', 'auto,cover,contain', '', '', 5),
 (@iCategoryId, CONCAT(@sName, '_menu_page_content_padding'), '_bx_decorous_stg_cpt_option_menu_page_content_padding', '0.3rem', 'digit', '', '', '', 6),
 (@iCategoryId, CONCAT(@sName, '_menu_page_border_color'), '_bx_decorous_stg_cpt_option_menu_page_border_color', 'rgba(0, 0, 0, 0.1)', 'rgba', '', '', '', 7),
-(@iCategoryId, CONCAT(@sName, '_menu_page_border_size'), '_bx_decorous_stg_cpt_option_menu_page_border_size', '1px', 'digit', '', '', '', 8),
+(@iCategoryId, CONCAT(@sName, '_menu_page_border_size'), '_bx_decorous_stg_cpt_option_menu_page_border_size', '1px 0px 0px 0px', 'digit', '', '', '', 8),
 (@iCategoryId, CONCAT(@sName, '_menu_page_shadow'), '_bx_decorous_stg_cpt_option_menu_page_shadow', 'none', 'digit', '', '', '', 9),
 (@iCategoryId, CONCAT(@sName, '_menu_page_font_family'), '_bx_decorous_stg_cpt_option_menu_page_font_family', 'Arial, sans-serif', 'digit', '', '', '', 10),
 (@iCategoryId, CONCAT(@sName, '_menu_page_font_size'), '_bx_decorous_stg_cpt_option_menu_page_font_size', '1rem', 'digit', '', '', '', 11),

modules/boonex/lucid/data/template/system/_sub_header.html

@@ -37,7 +37,7 @@
                                     <bx_injection:injection_between_cover_top_menu />
 					
                                     <div class="bx-menu-main-bar-gap bx-def-centered bx-def-padding-leftright bx-def-page-width bx-def-box-sizing">
-					<div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-def-color-bg-sec">
+					<div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-menu-main-bar-hide-shadow-before bx-def-color-bg-sec">
 					    <div id="bx-menu-main-bar" class="bx-menu-main-bar">
 					        <bx_injection:injection_top_menu_before />
 				        	<bx_menu:sys_site_submenu />

modules/boonex/lucid/data/template/system/css/default.less

@@ -712,6 +712,14 @@ a.bx-def-font-h3:hover {
 	background-repeat: @bx-image-bg-menu-page-repeat;
     background-size: @bx-image-bg-menu-page-size;
 }
+.bx-menu-main-bar-wrapper:before {
+    border-bottom-left-radius: @bx-border-radius-block-bl;
+    background: @bx-color-menu-page-gradient-left;
+}
+.bx-menu-main-bar-wrapper:after {
+    border-bottom-right-radius: @bx-border-radius-block-br;
+    background: @bx-color-menu-page-gradient-right;
+}
 .bx-menu-main-bar-wrapper .bx-menu-main-submenu {
 	padding: @bx-content-padding-menu-page;
 }

modules/boonex/lucid/data/template/system/scripts/BxTemplConfig.php

@@ -28,9 +28,7 @@ class BxTemplConfig extends BxBaseConfig
             'bx-padding-sec' => '8px',
             'bx-padding-thd' => '4px',
 
-            'bx-size-avatar' => '96px',
-            'bx-size-thumb' => '32px',
-            'bx-size-icon' => '32px',
+            'bx-size-thumb' => '32px'
         ));
 
         //--- Images
@@ -158,6 +156,8 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-menu-account'] = $this->_setColorRgba($sName . '_menu_account_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-menu-add'] = $this->_setColorRgba($sName . '_menu_add_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-menu-page'] = $this->_setColorRgba($sName . '_menu_page_bg_color', 'rgba(242, 242, 242, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-menu-page-gradient-left'] = $this->_setGradientMenuPageLeft($sName . '_menu_page_bg_color', '242, 242, 242');
+        $this->_aConfig['aLessConfig']['bx-color-menu-page-gradient-right'] = $this->_setGradientMenuPageRight($sName . '_menu_page_bg_color', '242, 242, 242');
         $this->_aConfig['aLessConfig']['bx-color-menu-slide'] = $this->_setColorRgba($sName . '_menu_slide_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-form-input'] = $this->_setColorRgba($sName . '_form_input_bg_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-form-input-active'] = $this->_setColorRgba($sName . '_form_input_bg_color_active', 'rgba(255, 255, 255, 1)');

modules/boonex/lucid/data/template/system/scripts/BxTemplMenuSubmenu.php

@@ -16,6 +16,14 @@ class BxTemplMenuSubmenu extends BxBaseMenuSubmenu
     {
         parent::__construct ($aObject, $oTemplate);
     }
+
+    protected function _getJsCode($aParams = array())
+    {
+        return parent::_getJsCode(array(
+            'sClassBar' => 'bx-menu-main-submenu-wrp',
+            'sClassMenu' => 'bx-menu-main-submenu-group'
+        ));
+    }
 }
 
 /** @} */

modules/boonex/lucid/install/sql/install.sql

@@ -635,7 +635,7 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_lucid_menu_page_border_color', @iMixId, 'rgba(0, 0, 0, 0.1)'),
 ('bx_lucid_menu_page_content_padding', @iMixId, '0px'),
 ('bx_lucid_menu_page_bg_image_size', @iMixId, 'cover'),
-('bx_lucid_menu_page_bg_color', @iMixId, 'rgba(0, 0, 0, 0)'),
+('bx_lucid_menu_page_bg_color', @iMixId, 'rgba(220, 230, 240, 1)'),
 ('bx_lucid_menu_page_bg_image_repeat', @iMixId, 'no-repeat'),
 ('bx_lucid_menu_add_font_color_active', @iMixId, 'rgba(20, 80, 100, 1)'),
 ('bx_lucid_menu_add_font_shadow', @iMixId, 'none'),

modules/boonex/ocean/data/template/system/_sub_header.html

@@ -4,7 +4,7 @@
 
 	<bx_injection:top />
 	
-	<div id="bx-toolbar" class="bx-def-z-index-nav bx-def-shadow">
+	<div id="bx-toolbar" class="bx-header bx-def-z-index-nav bx-def-shadow">
 	
 	    <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
 	
@@ -38,23 +38,18 @@
 	
 	<bx_injection:injection_between_cover_top_menu />
 	
-	<div id="bx-menu-main-bar-wrapper">
-	
-	    <div id="bx-menu-main-bar" class="bx-def-padding-sec-leftright bx-def-box-sizing bx-def-color-bg-sec">
-
-            <bx_injection:injection_top_menu_before />
-
-            <bx_menu:sys_site_submenu />
+        <div class="bx-menu-main-bar-gap bx-def-centered bx-def-padding-leftright bx-def-page-width bx-def-box-sizing">
+            <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-menu-main-bar-hide-shadow-before bx-def-round-corners bx-def-color-bg-sec">
+                <div id="bx-menu-main-bar" class="bx-menu-main-bar">
+                    <bx_injection:injection_top_menu_before />
+                    <bx_menu:sys_site_submenu />
+                    <bx_injection:injection_top_menu_after />
+                </div>
+            </div>
+        </div>
 
-            <bx_injection:injection_top_menu_after />
-
-	    </div>
-	
-	</div>
-	
-	
 	<bx_injection:injection_between_content_menu />
-	
+
 	<div id="bx-content-wrapper">
 	
 		__informer__

modules/boonex/ocean/data/template/system/css/default.less

@@ -1,5 +1,13 @@
 @import '../../../../../../../template/css/default.less';
 
+/* page menu */
+.bx-menu-main-bar-wrapper:before {
+    background: @bx-color-menu-page-gradient-left;
+}
+.bx-menu-main-bar-wrapper:after {
+    background: @bx-color-menu-page-gradient-right;
+}
+
 /* image/thumbnail/gallery default styles */
 .bx-def-ava,
 .bx-def-thumb,
@@ -9,7 +17,7 @@
 }
 
 .bx-def-unit-info-title {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 .bx-def-unit-alert-middle {

modules/boonex/ocean/data/template/system/css/general.css

@@ -20,12 +20,6 @@
     line-height: 4rem;
 }
 
-/*---------------- main menu */
-#bx-menu-main-bar {
-	text-align: center;
-	overflow-x: auto;
-}
-
 /* --------------- content */
 #bx-content-wrapper {
 	background-image: url(../images/bg-page.png);

modules/boonex/ocean/data/template/system/scripts/BxTemplConfig.php

@@ -14,17 +14,20 @@ class BxTemplConfig extends BxBaseConfig
         parent::__construct();
 
         $this->_aConfig['aLessConfig'] = array_merge($this->_aConfig['aLessConfig'], array(
-        	'bx-font-family' => 'Helvetica, Arial, sans-serif',
-        
-        	'bx-color-page' => '#b9e2f6',
-        	'bx-color-block' => '#fff',
-        	'bx-color-box' => 'rgba(218, 248, 255, 1.0)',
-        	'bx-color-box-hover' => 'rgba(218, 248, 255, 0.5)',
-        	'bx-color-sec' => '#fff',
-        	'bx-color-hl' => 'rgba(202, 242, 252, 0.2)',
-        	'bx-color-active' => 'rgba(202, 242, 252, 0.4)',
+            'bx-font-family' => 'Helvetica, Arial, sans-serif',
 
-        	'bx-border-color' => '#00a0ce',
+            'bx-color-page' => '#b9e2f6',
+            'bx-color-block' => '#fff',
+            'bx-color-box' => 'rgba(218, 248, 255, 1.0)',
+            'bx-color-box-hover' => 'rgba(218, 248, 255, 0.5)',
+            'bx-color-sec' => '#fff',
+            'bx-color-hl' => 'rgba(202, 242, 252, 0.2)',
+            'bx-color-active' => 'rgba(202, 242, 252, 0.4)',
+
+            'bx-border-color' => '#00a0ce',
+
+            'bx-color-menu-page-gradient-left' => 'linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%)',
+            'bx-color-menu-page-gradient-right' => 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%)'
         ));
 
         $this->setPageWidth('bx_ocean_page_width');

modules/boonex/protean/data/template/system/_header_js_custom.html

@@ -1,23 +1,5 @@
 <script type="text/javascript" language="javascript">
     $(document).ready(function () {
         bx_activate_anim_icons('#283C50');
-
-        /**
-         * Page submenu.
-         */
-        $('.bx-menu-main-bar').bind('scroll', function () {
-            var oMenuBarWrapper = $(this).parents('.bx-menu-main-bar-wrapper');
-            var oMenu = $(this).find('#bx-menu-main-submenu');
-
-            if(Math.abs(oMenu.position().left) >= (oMenu.width() - $(this).width() - 1))
-                oMenuBarWrapper.addClass('bx-menu-main-bar-hide-shadow-after');
-            else
-                oMenuBarWrapper.removeClass('bx-menu-main-bar-hide-shadow-after');
-
-            if(oMenu.position().left >= 0)
-                oMenuBarWrapper.addClass('bx-menu-main-bar-hide-shadow-before');
-            else
-                oMenuBarWrapper.removeClass('bx-menu-main-bar-hide-shadow-before');
-        });
     });
-</script>
+</script>

modules/boonex/protean/data/template/system/css/default.less

@@ -648,12 +648,10 @@ a.bx-def-font-h3:hover {
     background-size: @bx-image-bg-menu-page-size;
 }
 .bx-menu-main-bar-wrapper:before {
-    left: 0px;
     border-bottom-left-radius: @bx-border-radius-block-bl;
     background: @bx-color-menu-page-gradient-left;
 }
 .bx-menu-main-bar-wrapper:after {
-    right: 0px;
     border-bottom-right-radius: @bx-border-radius-block-br;
     background: @bx-color-menu-page-gradient-right;
 }

modules/boonex/protean/data/template/system/css/general.css

@@ -1,55 +1,5 @@
 @import url(../../../../../../../template/css/general.css);
 
-/* --------------- Submenu */
-.bx-menu-main-bar-gap {
-    position: relative;
-}
-.bx-media-phone .bx-menu-main-bar-gap {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.bx-menu-main-bar-wrapper {
-    position: relative;
-
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-.bx-menu-main-bar-wrapper.bx-menu-main-bar-hide-shadow-before:before,
-.bx-menu-main-bar-wrapper.bx-menu-main-bar-hide-shadow-after:after {
-    display:none !important;
-}
-.bx-menu-main-bar-wrapper:before,
-.bx-menu-main-bar-wrapper:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 0;
-    width: 1.5rem;
-    height: 100%;
-    z-index: 1;
-}
-.bx-media-phone .bx-menu-main-bar-wrapper {
-    border-left-width: 0;
-    border-right-width: 0;
-}
-.bx-media-phone .bx-menu-main-bar-wrapper:before {
-    border-bottom-left-radius: 0;
-}
-.bx-media-phone .bx-menu-main-bar-wrapper:after {
-    border-bottom-right-radius: 0;
-}
-
-/* --------------- Profile Avatar */
-a.bx-base-pofile-cover-thumb p.bx-base-pofile-unit-ava,
-a.bx-base-pofile-cover-thumb img.bx-base-pofile-unit-ava {
-    border: 5px solid #fff;
-}
-a.bx-base-pofile-cover-thumb p.bx-base-pofile-unit-ava {
-    line-height: 190px;
-    font-size: 5.0rem;
-}
-
 /* --------------- Profile Stats block */
 .bx-profile-stats .bx-profile-stats-cnt {
     padding: 0;

modules/boonex/protean/data/template/system/scripts/BxTemplConfig.php

@@ -26,9 +26,7 @@ class BxTemplConfig extends BxBaseConfig
 
             'bx-padding' => '20px',
             'bx-padding-sec' => '10px',
-            'bx-padding-thd' => '5px',
-        
-            'bx-size-avatar' => '200px'
+            'bx-padding-thd' => '5px'
         ));
 
         //--- Images
@@ -353,37 +351,6 @@ class BxTemplConfig extends BxBaseConfig
         if($this->_isModule)
             $this->setPageWidth('bx_protean_page_width');
     }
-
-    protected function _getColorFromRgba($sKey, $sDefault = '')
-    {
-        if(empty($sDefault))
-            $sDefault = '51, 51, 51';
-
-        $sPattern = "/rgba?\s*\(\s*(([0-9]{1,3}\s*,?\s*){3})\s*([0-9\.]+)?\s*\)/";
-
-        $aMatch = array();
-        $sValue = trim(getParam($sKey));
-        if(!$this->_isModule || empty($sValue) || !preg_match($sPattern, $sValue, $aMatch) || empty($aMatch[1]))
-            $sValue = $sDefault;
-        else 
-            $sValue = trim($aMatch[1], ', ');
-
-        return $sValue;
-    }
-    
-    protected function _setGradientMenuPageLeft($sKey, $sDefault = '')
-    {
-        $sValue = $this->_getColorFromRgba($sKey, $sDefault);
-
-        return "linear-gradient(to right, rgba(" . $sValue . ", 1) 0%, rgba(" . $sValue . ", 0) 100%)";
-    }
-
-    protected function _setGradientMenuPageRight($sKey, $sDefault = '')
-    {
-        $sValue = $this->_getColorFromRgba($sKey, $sDefault);
-
-        return "linear-gradient(to right, rgba(" . $sValue . ", 0) 0%, rgba(" . $sValue . ", 1) 100%)";
-    }
 }
 
 /** @} */

studio/classes/BxDolStudioSettings.php

@@ -141,10 +141,10 @@ class BxDolStudioSettings extends BxTemplStudioPage
 		if($sName == BX_DOL_STUDIO_STG_MIX_SYSTEM || $this->oDb->updateMixes(array('active' => 1), array('name' => $sName))) {
 		    $this->clearCache();
 
-			$aResult = array('eval' => $this->getPageJsObject() . '.onMixSelect(oData);');
+                    $aResult = array('eval' => $this->getPageJsObject() . '.onMixSelect(oData);');
 		}
 		else 
-    		$aResult = array('message' => _t('_adm_stg_err_cannot_perform')); 
+                    $aResult = array('message' => _t('_adm_stg_err_cannot_perform')); 
 
     	return $aResult;
     }
@@ -337,7 +337,10 @@ class BxDolStudioSettings extends BxTemplStudioPage
     protected function clearCache()
     {
         BxDolDb::getInstance()->cacheParams(true, true);
-        BxDolCacheUtilities::getInstance()->clear('css');
+
+        $oCacheUtilities = BxDolCacheUtilities::getInstance();
+        $oCacheUtilities->clear('db');
+        $oCacheUtilities->clear('css');
     }
 }
 

template/_header_js_custom.html

@@ -2,4 +2,4 @@
     $(document).ready(function () {
         bx_activate_anim_icons('#3e8685');
     });
-</script>
+</script>

template/css/general.css

@@ -94,11 +94,54 @@
     vertical-align:middle;
 }
 
-/* --------------- submenu */
+/* --------------- Submenu */
+.bx-menu-main-bar-gap {
+    position: relative;
+}
 .bx-media-tablet .bx-menu-main-bar-gap.bx-def-page-width,
 .bx-media-phone .bx-menu-main-bar-gap.bx-def-page-width {
     width: 100%;
 }
+.bx-media-phone .bx-menu-main-bar-gap {
+    padding-left: 0;
+    padding-right: 0;
+}
+.bx-menu-main-bar-wrapper {
+    position: relative;
+
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.bx-menu-main-bar-wrapper.bx-menu-main-bar-hide-shadow-before:before,
+.bx-menu-main-bar-wrapper.bx-menu-main-bar-hide-shadow-after:after {
+    display:none !important;
+}
+.bx-menu-main-bar-wrapper:before,
+.bx-menu-main-bar-wrapper:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 1.5rem;
+    height: 100%;
+    z-index: 1;
+}
+.bx-menu-main-bar-wrapper:before {
+    left: 0px;
+}
+.bx-menu-main-bar-wrapper:after {
+    right: 0px;
+}
+.bx-media-phone .bx-menu-main-bar-wrapper {
+    border-left-width: 0;
+    border-right-width: 0;
+}
+.bx-media-phone .bx-menu-main-bar-wrapper:before {
+    border-bottom-left-radius: 0;
+}
+.bx-media-phone .bx-menu-main-bar-wrapper:after {
+    border-bottom-right-radius: 0;
+}
 
 .bx-menu-main-bar {
     text-align:center;

template/menu_main_submenu.html

@@ -2,4 +2,4 @@
     <bx_repeat:menu_items>
         <li class="bx-def-padding-sec-right bx-def-padding-sec-left bx-def-color-bg-hl-hover __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a></li>
     </bx_repeat:menu_items>
-</ul>
+</ul>

template/scripts/BxBaseConfig.php

@@ -24,7 +24,7 @@ class BxBaseConfig extends BxDol implements iBxDolSingleton
 
             'bx-font-family' => 'Helvetica, Arial, sans-serif',
 
-            'bx-size-avatar' => '96px',
+            'bx-size-avatar' => '200px',
             'bx-size-thumb' => '48px',
             'bx-size-icon' => '32px',
 
@@ -215,6 +215,23 @@ class BxBaseConfig extends BxDol implements iBxDolSingleton
         return ($aMatches[2] - $aReductor[$aMatches[4]]) . $aMatches[4];
     }
 
+    protected function _getColorFromRgba($sKey, $sDefault = '')
+    {
+        if(empty($sDefault))
+            $sDefault = '51, 51, 51';
+
+        $sPattern = "/rgba?\s*\(\s*(([0-9]{1,3}\s*,?\s*){3})\s*([0-9\.]+)?\s*\)/";
+
+        $aMatch = array();
+        $sValue = trim(getParam($sKey));
+        if(!$this->_isModule || empty($sValue) || !preg_match($sPattern, $sValue, $aMatch) || empty($aMatch[1]))
+            $sValue = $sDefault;
+        else 
+            $sValue = trim($aMatch[1], ', ');
+
+        return $sValue;
+    }
+
     protected function _setMargin($sKey, $sDefault = '')
     {
         if(empty($sDefault))
@@ -257,6 +274,20 @@ class BxBaseConfig extends BxDol implements iBxDolSingleton
         return $sValue;
     }
 
+    protected function _setGradientMenuPageLeft($sKey, $sDefault = '')
+    {
+        $sValue = $this->_getColorFromRgba($sKey, $sDefault);
+
+        return "linear-gradient(to right, rgba(" . $sValue . ", 1) 0%, rgba(" . $sValue . ", 0) 100%)";
+    }
+
+    protected function _setGradientMenuPageRight($sKey, $sDefault = '')
+    {
+        $sValue = $this->_getColorFromRgba($sKey, $sDefault);
+
+        return "linear-gradient(to right, rgba(" . $sValue . ", 0) 0%, rgba(" . $sValue . ", 1) 100%)";
+    }
+
     protected function _setBgUrl($sKey, $oStorage = null)
     {
         if(empty($oStorage))

template/scripts/BxBaseMenuSubmenu.php

@@ -18,9 +18,13 @@ class BxBaseMenuSubmenu extends BxTemplMenu
     protected $_sObjectSubmenu = false;
     protected $_mixedMainMenuItemSelected = false;
 
+    protected $_sJsObject;
+
     public function __construct ($aObject, $oTemplate)
     {
         parent::__construct ($aObject, $oTemplate);
+
+        $this->_sJsObject = 'o' . bx_gen_method_name($this->_sObject);
     }
 
     /**
@@ -77,16 +81,15 @@ class BxBaseMenuSubmenu extends BxTemplMenu
     public function getCode ()
     {
         $aMenuItemSelected = $this->getSelectedMenuItem ();
-        if (isset($aMenuItemSelected['set_name']) && 'sys_site' == $aMenuItemSelected['set_name'] && 'home' == $aMenuItemSelected['name'])
+        if(isset($aMenuItemSelected['set_name']) && 'sys_site' == $aMenuItemSelected['set_name'] && 'home' == $aMenuItemSelected['name'])
             return '';
 
-        $this->_addJsCss();
-
         $oMenuSubmenu = BxDolMenu::getObjectInstance($this->_sObjectSubmenu);
-        if ($oMenuSubmenu && $oMenuSubmenu->isVisible())
-            return $oMenuSubmenu->getCode();
+        if(!$oMenuSubmenu || !$oMenuSubmenu->isVisible())
+            return '';
 
-        return '';
+        $this->_addJsCss();
+        return $oMenuSubmenu->getCode() . $this->_getJsCode();
     }
 
     public function getPageCoverParams ()
@@ -154,6 +157,22 @@ class BxBaseMenuSubmenu extends BxTemplMenu
 
         return false;
     }
+
+    protected function _getJsCode($aParams = array())
+    {
+        $aParams = array_merge(array(
+            'sObject' => $this->_sObject
+        ), $aParams);
+
+        return $this->_oTemplate->_wrapInTagJsCode("if(!" . $this->_sJsObject . ") var " . $this->_sJsObject . " = new BxDolMenuSubmenu(" . json_encode($aParams) . "); " . $this->_sJsObject . ".init();");
+    }
+
+    protected function _addJsCss()
+    {
+        parent::_addJsCss();
+
+        $this->_oTemplate->addJs(array('BxDolMenuSubmenu.js'));
+    }
 }
 
 /** @} */