Ticket #3399 - Profile Cover, Page Submenu, etc.

modules/boonex/artificer/data/template/mod_general/css/main.css

@@ -14,31 +14,32 @@
 .bx-base-pofile-unit-with-cover .bx-base-general-unit-meta ul.bx-menu-custom.bx-menu-custom-hor > li.bx-menu-item-nl {
     display: block;
 }
-.bx-base-general-unit-meta ul.bx-menu-custom li:first-child .bx-base-general-unit-meta-div {
+.bx-base-general-unit-meta ul.bx-menu-custom li:first-child .bx-base-general-unit-meta-div,
+.bx-base-profile-cover-meta ul.bx-menu-custom li:first-child .sys-meta-div {
     display: none;
 }
 
 
 /* badges */
 div.bx-badges-list {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content:center;
 }
 div.bx-badge {
-	display: flex;
+    display: flex;
     align-items:center;
-	text-align: center;
+    text-align: center;
     color:#fff;	
-	max-width: 9rem;
+    max-width: 9rem;
     min-width: 1.25rem;
-	vertical-align: middle;
-	height: 1.25rem;
-	line-height: 1.25rem;
-	padding: 0 0.5rem ;
-	border-radius: 2em;
-	white-space: nowrap; 
-	text-overflow: ellipsis; 
+    vertical-align: middle;
+    height: 1.25rem;
+    line-height: 1.25rem;
+    padding: 0 0.5rem ;
+    border-radius: 2em;
+    white-space: nowrap; 
+    text-overflow: ellipsis; 
     overflow: hidden;
 }
 div.bx-badges-list div.bx-badge{
@@ -51,27 +52,27 @@ img.bx-badge-icon {
 }
 div.bx-badge img{
 
-	margin-right: 0.5rem;
+    margin-right: 0.5rem;
 }
 div.bx-badge span{
-	text-overflow: ellipsis; 
+    text-overflow: ellipsis; 
     overflow: hidden;
 }
 div.bx-badge:not(.bx-badge-compact-to) .sys-icon,
 div.bx-badge:not(.bx-badge-compact-to) span{
-	color: inherit !important;
-	margin-right: 0.5rem;
+    color: inherit !important;
+    margin-right: 0.5rem;
 }
 div.bx-badge.bx-badge-compact{
-	width: 1.25rem;
-	text-align: center;
+    width: 1.25rem;
+    text-align: center;
 }
 div.bx-badge.bx-badge-compact-to{
-	padding: 0;
-	width: auto;
+    padding: 0;
+    width: auto;
 }
 div.bx-badge.bx-badge-compact .sys-icon{
-	width: 1.25rem;
+    width: 1.25rem;
 }
 div.bx-badge.bx-badge-compact .sys-icon,
 div.bx-badge.bx-badge-compact img{

modules/boonex/artificer/data/template/mod_groups/unit.html

@@ -0,0 +1 @@
+<bx_include_auto_mod_profile:unit_with_cover.html />

modules/boonex/artificer/data/template/mod_groups/unit_with_cover_showcase.html

@@ -0,0 +1 @@
+<bx_include_auto_mod_groups:unit.html />

modules/boonex/artificer/data/template/mod_profile/cover.html

@@ -29,12 +29,15 @@
                             </bx_if:show_online>
                         </div>
                     </bx_if:show_avatar>
+                    <bx_if:show_avatar_placeholder>
+                        <div class="bx-base-pofile-cover-thumb-placeholder h-24 lg:h-36"></div>
+                    </bx_if:show_avatar_placeholder>
                     <div class="bx-base-pofile-cover-user relative mt-6 flex flex-col lg:flex-row lg:flex-1 lg:items-center lg:justify-end lg:space-x-6 sm:pb-1">
                         <div class="bx-base-profile-cover-title-bages min-w-0 flex-1 lg:mt-6">
                             <h1 class="bx-def-unit-info text-3xl font-bold leading-7 text-gray-900 text-center dark:text-gray-100 sm:leading-9 sm:truncate lg:text-left">__title__ </h1>
-                            <div class="bx-base-profile-cover-bages bx-base-bages-container flex flex-row flex-wrap justify-center mt-8 -ml-1 sm:mt-1 lg:justify-start">__badges__</div>
+                            <div class="bx-base-profile-cover-meta flex flex-row flex-wrap justify-center mt-8 -ml-1 sm:mt-1 lg:justify-start">__meta__</div>
                         </div>
-                        <div class="bx-base-pofile-cover-actions relative flex lg:flex-1 h-8 mt-8" onclick="event.stopPropagation();">__action_menu__</div>
+                        <div class="bx-base-pofile-cover-actions relative flex lg:flex-1 h-14 md:h-8 mt-8" onclick="event.stopPropagation();">__action_menu__</div>
                     </div>
                 </div>
             </div>

modules/boonex/artificer/data/template/mod_profile/css/main.css

@@ -92,6 +92,10 @@ p.bx-base-pofile-unit-thumb.bx-def-ava-big-size {
 
 
 /*--- Profile Cover ---*/
+.bx-base-profile-cover-meta .bx-menu-custom.bx-menu-custom-hor {
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
 .bx-base-pofile-cover-actions div.bx-base-general-entity-actions {
     position: absolute;
     width: 100%;

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

@@ -15,7 +15,7 @@ import url(../../../../../../../template/css/general.css);
 
 /*--- Page Submenu ---*/
 .bx-menu-main-bar-cnt {
-    height: 3.25rem;
+    height: 3.375rem;
 }
 
 

modules/boonex/artificer/data/template/system/css/media-phone.css

@@ -1,12 +1,152 @@
-@import url(../../../../../../../template/css/media-phone.css);
+/*
+import url(../../../../../../../template/css/media-phone.css);
+*/
 
 html.bx-media-phone {
     font-size:100%;
 }
 
+/* never visible - used to check MQ */
+.bx-media-phone body::before {
+  display: none;
+  content: 'mobile';
+}
+
+.bx-media-phone .bx-def-media-phone-hide {
+    display:none !important;
+}
+.bx-media-phone .bx-def-media-phone-show-block {
+    display:block;
+}
+
+.bx-media-phone .bx-def-constraint-all *,
+.bx-media-phone .bx-def-constraint-list ol, .bx-def-constraint-list ul,
+.bx-media-phone .bx-def-constraint-pre pre,
+.bx-media-phone .bx-def-constraint-object object,
+.bx-media-phone .bx-def-constraint-iframe iframe,
+.bx-media-phone .bx-def-constraint-img img {
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    max-width:100% !important;
+    overflow:hidden !important;
+}
+.bx-media-phone .bx-def-constraint-img img {
+    height:auto !important;
+}
+.bx-media-phone .bx-def-constraint-pre pre {
+    overflow:scroll !important;
+}
+
+
+/*--- default.css ---*/ 
+.bx-media-phone .bx-def-page-width {
+    width:auto;
+}
+
 
-/* --- General ---*/
+/*--- general.css ---*/
 .bx-media-phone #bx-toolbar-content .bx-toolbar-item.bx-ti-logo {
     margin-left: 0;
     margin-right: 0;
+}
+.bx-media-phone #bx-footer-wrapper {
+    height: auto;
+}
+
+.bx-media-phone .sys-cpf-submenu .sys-cpf-submenu-item > div {
+    display: block;
+    text-align: center;
+}
+
+
+/*--- common.css ---*/
+.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper:not(.bx-popup-image-wrapper),
+.bx-media-phone .bx-popup-responsive:not(.bx-popup-image-wrapper) .bx-popup-trans,
+.bx-media-phone .bx-popup-responsive:not(.bx-popup-image-wrapper):not(.bx-popup-chain).bx-popup-applied,
+.bx-media-phone .bx-popup-responsive .bx-popup-box {
+    position:fixed !important;
+    top:0 !important;
+    left:0 !important;
+    bottom:0 !important;
+    right:0 !important;
+    width:100%;
+    width:100vw;
+    height:100%;
+    height:100vh;
+    overflow:auto;
+}
+
+.bx-media-phone .bx-popup-responsive,
+.bx-media-phone .bx-popup-responsive .bx-popup-trans > div,
+.bx-media-phone .bx-popup-responsive .bx-popup-box > div {
+    border-radius:0;
+    -moz-border-radius:0;
+    -webkit-border-radius:0;
+}
+
+.bx-media-phone .bx-popup-responsive.bx-popup-image-wrapper:not(.foo) .bx-popup-border,
+.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper:not(.foo) .bx-popup-border,
+.bx-media-phone .bx-popup-responsive.bx-popup-box-wrapper:not(.foo) .bx-popup-border {
+    border:none;
+    border-radius:0;
+    -moz-border-radius:0;
+    -webkit-border-radius:0;
+}
+
+.bx-media-phone .bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
+.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
+.bx-media-phone .bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
+    -moz-box-shadow:none;
+    -webkit-box-shadow:none;
+    box-shadow:none;
+}
+
+.bx-media-phone .bx-popup-width {
+    width:100%;
+}
+
+.bx-media-phone .bx-popup-responsive#bx-popup-alert,
+.bx-media-phone .bx-popup-responsive#bx-popup-confirm,
+.bx-media-phone .bx-popup-responsive#bx-popup-prompt {
+    max-width: none;
+}
+
+
+/*--- menu.css ---*/
+.bx-media-phone ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title,
+.bx-media-phone #bx-menu-toolbar-2-container ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title {
+    display:none;
+}
+
+
+/*--- loading indicator ---*/
+.bx-media-phone .bx-btn .bx-loading-ajax-btn {
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+.bx-media-phone .bx-btn.bx-btn-small .bx-loading-ajax-btn {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+
+/*--- grid.css ---*/
+html.bx-media-phone .bx-grid-table-wrapper-responsive .bx-grid-table-wrapper {
+    overflow-x:scroll;
+}
+html.bx-media-phone .bx-grid-table-wrapper-responsive .bx-grid-table {
+    min-width:720px;
+}
+html.bx-media-phone .bx-grid-table-wrapper-responsive.bx-grid-table-wrapper2:before,
+html.bx-media-phone .bx-grid-table-wrapper-responsive.bx-grid-table-wrapper2:after {
+    display:block;
+}
+
+
+/*--- score.css ---*/
+.bx-media-phone div.bx-score-by-list div.bx-score-by-list-cnt {
+    max-height: none;
 }

modules/boonex/artificer/data/template/system/menu_main_submenu.html

@@ -1,5 +1,5 @@
-<ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ flex justify-center py-2 overflow-x-auto">
+<ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ flex items-stretch space-x-8 overflow-x-auto">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-2 rounded text-sm font-medium whitespace-nowrap"><a href="__link__" onclick="__onclick__"__attrs__>__title__</a></li>
+        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"><a href="__link__" onclick="__onclick__"__attrs__>__title__</a></li>
     </bx_repeat:menu_items>
 </ul>

modules/boonex/artificer/data/template/system/menu_main_submenu_bar.html

@@ -1,6 +1,6 @@
 <div id="bx-menu-main-bar-wrapper" class="bg-white dark:bg-gray-900 pt-5 border-b border-gray-200 dark:border-gray-800">
     <div id="bx-menu-main-bar" class="bx-menu-main-bar __class__ bx-def-page-width mx-auto px-4 sm:px-6 lg:px-8 box-border">
-        <div class="bx-menu-main-bar-cnt relative">
+        <div class="bx-menu-main-bar-cnt relative -mb-px">
             <div class="absolute w-full">
                 <bx_injection:injection_top_menu_before />
                 __code__

modules/boonex/artificer/data/template/system/menu_main_submenu_more_auto.html

@@ -1,6 +1,6 @@
-<ul id="__html_id__" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex justify-center py-2 bx-clearfix">
+<ul id="__html_id__" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ flex items-stretch space-x-8">
     <bx_repeat:menu_items>
-        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-2 rounded text-sm font-medium whitespace-nowrap"><a href="__link__" onclick="__onclick__"__attrs__>__title__</a>__popup__</li>
+        <li class="bx-menu-item bx-menu-item-__name__ __class_add__ border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"><a href="__link__" onclick="__onclick__"__attrs__>__title__</a>__popup__</li>
     </bx_repeat:menu_items>
 </ul>
 __js_code__

modules/boonex/artificer/template/css/tailwind.css

@@ -19,7 +19,7 @@
     }
 
     .bx-def-font-grayed {
-        @apply text-gray-700 dark:text-gray-500 text-opacity-50;
+        @apply text-gray-700 dark:text-gray-500 text-opacity-60;
     }
 
     /* Common elements: Buttons */
@@ -73,6 +73,7 @@
     }
     
     /* Common elements: Menus */
+    /* Horizontal menu */
     .bx-menu-hor li.bx-menu-tab-active a,
     .bx-menu-custom-hor li.bx-menu-tab-active a {
         @apply text-gray-700 dark:text-gray-200 font-medium;
@@ -82,6 +83,7 @@
         @apply rounded ring-1 ring-gray-200 dark:ring-gray-800;
     }
     
+    /* Vertical menu in Popup */
     .bx-popup .bx-menu-ver > li:hover {
         @apply group hover:text-gray-900 dark:hover:text-gray-100;
     }
@@ -90,6 +92,11 @@
         @apply group bg-white ring-1 ring-gray-200 dark:ring-gray-700 dark:bg-gray-900 shadow-sm text-gray-900 dark:text-white rounded;
     }
 
+    /* Page Submenu */
+    .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active {
+        @apply border-blue-500 text-gray-900 dark:text-gray-100;
+    }
+
     /* Timeline */
     .bx-menu-custom-hor.bx-menu-object-bx_timeline_menu_view li.bx-menu-tab-active a {
         @apply rounded ring-1 ring-gray-200 dark:ring-gray-800;

modules/boonex/organizations/template/unit_with_cover.html

@@ -1 +1 @@
-<bx_include_auto_mod_profile:unit_with_cover.html />
+<bx_include_auto_mod_profile:unit_with_cover.html />