#43 - account super popup: fixing popup on mobile devices

install/sql/system.sql

@@ -2858,7 +2858,7 @@ INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `tit
 
 -- member toolbar menu
 INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES
-('sys_toolbar_member', 'system', 'account', '_sys_menu_item_title_system_account_menu', '_sys_menu_item_title_account_menu', 'javascript:void(0);', 'bx_menu_popup(''sys_account_popup'', this);', '', 'user', 'a:3:{s:6:"module";s:6:"system";s:6:"method";s:21:"profile_notifications";s:5:"class";s:20:"TemplServiceProfiles";}', 'sys_account_popup', 510, 1, 0, 1),
+('sys_toolbar_member', 'system', 'account', '_sys_menu_item_title_system_account_menu', '_sys_menu_item_title_account_menu', 'javascript:void(0);', 'bx_menu_popup(''sys_account_popup'', this, {pointer:{align:''right''}});', '', 'user', 'a:3:{s:6:"module";s:6:"system";s:6:"method";s:21:"profile_notifications";s:5:"class";s:20:"TemplServiceProfiles";}', 'sys_account_popup', 510, 1, 0, 1),
 ('sys_toolbar_member', 'system', 'login', '_sys_menu_item_title_system_login', '', 'page.php?i=login', '', '', 'user', '', '', 1, 1, 0, 2);
 
 -- simple menu in account popup

template/css/default.less

@@ -67,6 +67,9 @@
 .bx-def-margin-sec {
     .margin(@bx-margin-sec);
 }
+.bx-def-margin-sec-neg {
+    .margin(-@bx-margin-sec);
+}
 .bx-def-margin-sec-rightbottomleft {
     .margin-right(@bx-margin-sec);
     .margin-bottom(@bx-margin-sec);
@@ -460,7 +463,7 @@ h3,
 .bx-def-unit-alert-middle {
     .min-width(@bx-font-size-middle + 2);
     .height(@bx-font-size-middle + 2);
-    .line-height(@bx-font-size-middle + 3);
+    .line-height(@bx-font-size-middle + 1);
     .radius(@bx-font-size-middle);
     .font-size(@bx-font-size-middle);
     .padding(3px);

template/css/menu.css

@@ -82,8 +82,11 @@ ul.bx-menu-ver {
 .bx-menu-ver li img,
 .bx-menu-ver li .sys-icon {
     width:20px;
+    width:1.25rem;
     height:20px;
+    height:1.25rem;
     margin-right:2px;
+    margin-right:0.125rem;
     text-align:center;
 }
 
@@ -94,13 +97,18 @@ ul.bx-menu-ver {
 
 .bx-menu-ver li .sys-icon {
     font-size:20px;
+    font-size:1.25rem;
 }
 
 .bx-menu-notif li .sys-icon {
     font-size:24px;
+    font-size:1.5rem;
     width:24px;
+    width:1.5rem;
     height:24px;
+    height:1.5rem;
     margin-right:5px;
+    margin-right:0.3rem;
 }
 
 .bx-menu-ver .bx-def-hr {
@@ -109,7 +117,9 @@ ul.bx-menu-ver {
 
 .bx-menu-verlit li img {
     width:24px;
+    width:1.5rem;
     height:24px;
+    height:1.5rem;
     background-position:center center;
     background-repeat:no-repeat;
     vertical-align:middle;
@@ -187,13 +197,6 @@ ul.bx-menu-main {
 
 /* --------------- toolbar menu */
 
-#bx-popup-ajax-wrapper-sys_site .bx-popup-content-indent {
-    padding:12px;
-    padding:0.75rem;
-    width:134px;
-    width:8.375rem;
-}
-
 #bx-menu-toolbar-1-container .bx-menu-toolbar {
     float:left;
 }
@@ -258,6 +261,11 @@ ul.bx-menu-toolbar li .sys-icon {
 
 /* --------------- floating blocks menu */
 
+.bx-popup-content .bx-menu-floating-blocks {
+    width:128px;
+    width:8rem;
+}
+
 ul.bx-menu-floating-blocks {
     padding:0;
     margin:0;
@@ -272,7 +280,9 @@ ul.bx-menu-floating-blocks {
     vertical-align:top;    
 
     width:64px;
+    width:4rem;
     height:64px;
+    height:4rem;
 }
 
 .bx-menu-floating-blocks li:hover {
@@ -297,9 +307,11 @@ ul.bx-menu-floating-blocks {
 .bx-menu-floating-blocks li .sys-icon {
     display:block;
     width:32px;
+    width:2rem;
     height:32px;
+    height:2rem;
     margin:8px 16px 3px 16px;
-
+    margin:0.5rem 1rem 0.2rem 1rem;
 }
 
 .bx-menu-floating-blocks li img {
@@ -309,9 +321,11 @@ ul.bx-menu-floating-blocks {
 
 .bx-menu-floating-blocks li .sys-icon {
     line-height:32px;
+    line-height:2rem;
     text-align:center;
     vertical-align:bottom;
     font-size:32px;
+    font-size:2rem;
 }
 
 .bx-menu-floating-blocks-title {
@@ -407,4 +421,9 @@ ul.bx-menu-btns-hor li {
     display:inline-block;
 }
 
+/* --------------- account popup menu */
+
+.bx-popup-content .bx-menu-account-popup {
+    min-width:17em;
+}
 

template/menu_floating_blocks.html

@@ -1,16 +1,16 @@
-<ul class="bx-menu-floating-blocks bx-menu-object-__object__ bx-clearfix">
-    <bx_repeat:menu_items>
-        <li class="bx-def-round-corners bx-def-color-bg-hl-hover __class_add__">
+<div class="bx-def-margin-sec-neg">
+    <ul class="bx-menu-floating-blocks bx-menu-object-__object__ bx-clearfix">
+        <bx_repeat:menu_items><li class="bx-def-round-corners bx-def-color-bg-hl-hover bx-def-box-sizing __class_add__">
             <a href="__link__" target="__target__" onclick="__onclick__">
-                    <div class="bx-menu-floating-blocks-icon">
-                        <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-                        <bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                    </div>
-                    <div class="bx-menu-floating-blocks-title">__title__</div>
+                <div class="bx-menu-floating-blocks-icon">
+                    <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
+                    <bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
+                </div>
+                <div class="bx-menu-floating-blocks-title">__title__</div>
             </a>                
-        </li>                
-    </bx_repeat:menu_items>
-</ul>
+        </li></bx_repeat:menu_items>
+    </ul>
+<div>
 <script language="javascript">
     $(document).ready(function () {
         // add default class to active menu items