Ticket #3399 - Profile cover and related changes.

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

@@ -16,4 +16,72 @@
 }
 .bx-base-general-unit-meta ul.bx-menu-custom li:first-child .bx-base-general-unit-meta-div {
     display: none;
-}
+}
+
+
+/* badges */
+div.bx-badges-list {
+    display: flex;
+    align-items: center;
+    justify-content:center;
+}
+div.bx-badge {
+	display: flex;
+    align-items:center;
+	text-align: center;
+    color:#fff;	
+	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; 
+    overflow: hidden;
+}
+div.bx-badges-list div.bx-badge{
+    margin:0 0.25rem;
+}
+
+img.bx-badge-icon {
+    width: 14px;
+    height: 14px;
+}
+div.bx-badge img{
+
+	margin-right: 0.5rem;
+}
+div.bx-badge span{
+	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;
+}
+div.bx-badge.bx-badge-compact{
+	width: 1.25rem;
+	text-align: center;
+}
+div.bx-badge.bx-badge-compact-to{
+	padding: 0;
+	width: auto;
+}
+div.bx-badge.bx-badge-compact .sys-icon{
+	width: 1.25rem;
+}
+div.bx-badge.bx-badge-compact .sys-icon,
+div.bx-badge.bx-badge-compact img{
+    margin:0px auto;
+}
+#bx-popup-ajax-wrapper-sys_set_badges li span{
+    display: flex;
+    margin-left: 0px;
+    align-items: baseline;
+}
+#bx-popup-ajax-wrapper-sys_set_badges li INPUT[type="checkbox"] {
+    margin-right: 0.5rem;
+}

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

@@ -1,22 +1,25 @@
 <div class="bx-menu-toolbar-padding">
-    <div class="bx-base-pofile-cover-wrapper __class__ bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
-        <div class="bx-base-pofile-cover box-border">
-            <div class="bx-base-pofile-cover-image">
+    <div class="bx-base-pofile-cover-wrapper __class__ relative bg-gradient-to-b from-gray-100 to-white dark:from-black dark:to-gray-900">
+        <div class="bx-base-pofile-cover">
+            <div class="absolute w-full h-2/3 overflow-hidden">
+                <div class="absolute top-6 -left-1/4 w-2/3 h-2/3 bg-blue-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
+                <div class="absolute top-6 -right-1/4 w-2/3 h-2/3 bg-green-700 filter blur-3xl z-0 opacity-50 animate-goo"></div>
+            </div>
+            <div class="bx-base-pofile-cover-image bx-def-page-width relative max-w-7xl mx-auto opacity-100">
                 <a class="bx-base-pofile-cover-image box-border" href="__cover_href__" onclick="$('#__cover_popup_id__').dolPopupImage('__cover_url__', this)">
-                    <img class="bx-base-pofile-cover-image" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />"/>
+                    <img class="bx-base-pofile-cover-image h-64 w-full object-cover lg:h-80 xl:rounded-b-lg z-10" style="background-image:url(__cover_url__)" src="<bx_icon_url:spacer.gif />"/>
                 </a>
-                <div class="bx-cover-gradient"></div>
             </div>
-            <div class="bx-base-pofile-cover-info">
-                <div class="bx-base-pofile-ci-cnt px-3 md:px-4 lg:px-6">
+            <div class="bx-base-pofile-cover-info bx-def-page-width relative mx-auto px-6 lg:px-8">
+                <div class="bx-base-pofile-ci-cnt relative flex flex-col -mt-16 lg:flex-row lg:items-end lg:space-x-6">
                     <bx_if:show_avatar>
-                        <div class="bx-base-pofile-cover-thumb">
+                        <div class="bx-base-pofile-cover-thumb flex justify-center lg:flex-none">
                             <a class="bx-base-pofile-cover-thumb" href="__picture_href__" onclick="$('#__picture_popup_id__').dolPopupImage('__picture_url__', $(this).parent()); event.stopPropagation();">
                                 <bx_if:show_ava_image>
-                                    <img class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size" src="__ava_url__" />
+                                    <img class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size rounded-full ring-4 mx-auto ring-white dark:ring-gray-900 h-32 w-32" src="__ava_url__" />
                                 </bx_if:show_ava_image>
                                 <bx_if:show_ava_letter>
-                                    <p class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size ring-1 ring-gray-200 dark:ring-gray-800" style="background-color:rgba(__color__)">__letter__</p>
+                                    <p class="bx-base-pofile-unit-thumb bx-def-ava-big bx-def-ava-big-size rounded-full ring-4 mx-auto ring-white dark:ring-gray-900 h-32 w-32" style="background-color:rgba(__color__)">__letter__</p>
                                 </bx_if:show_ava_letter>
                             </a>
                             <bx_if:show_online>
@@ -24,12 +27,12 @@
                             </bx_if:show_online>
                         </div>
                     </bx_if:show_avatar>
-                    <div class="bx-base-pofile-cover-user py-2">
-                        <div class="bx-base-profile-cover-title-bages">
-                            <h1 class="bx-def-unit-info">__title__ </h1>
-                            <div class="bx-base-profile-cover-bages bx-base-bages-container">__badges__</div>
+                    <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>
-                        <div class="bx-base-pofile-cover-actions" onclick="event.stopPropagation();">__action_menu__</div>
+                        <div class="bx-base-pofile-cover-actions relative flex lg:flex-1 h-8 mt-8" onclick="event.stopPropagation();">__action_menu__</div>
                     </div>
                 </div>
             </div>

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

@@ -1,4 +1,4 @@
-/* units */
+/*--- Units ---*/
 .bx-base-pofile-units-wrapper {
     display: -webkit-flex;
     display: flex;
@@ -13,7 +13,7 @@
     justify-content: flex-start;
 }
 
-/* MEDIA: tablet2 */
+/*+++ MEDIA: tablet2 +++*/
 .bx-media-tablet2 .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
 .bx-media-tablet2 #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
 .bx-media-tablet2 .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
@@ -36,7 +36,7 @@
     width:calc(16.6%);
 }
 
-/* MEDIA: desktop */
+/*+++ MEDIA: desktop +++*/
 .bx-media-desktop .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
     -webkit-flex: 0 0 49.8%;
     -ms-flex: 0 0 49.8%;
@@ -69,7 +69,7 @@
     width:calc(10.0%);
 }
 
-/* unit */
+/*--- Unit ---*/
 p.bx-base-pofile-unit-thumb {
     display: -webkit-flex;
     display: flex;
@@ -88,8 +88,39 @@ p.bx-base-pofile-unit-thumb {
 }
 
 
-/* unit meta */
+/*--- Unit Meta ---*/
 .bx-base-pofile-unit-with-cover .bx-base-general-unit-meta ul.bx-menu-custom.bx-menu-custom-hor {
     -webkit-justify-content: center;
     justify-content: center;
 }
+
+
+/*--- Profile Cover ---*/
+.bx-base-pofile-cover-actions div.bx-base-general-entity-actions {
+    position: absolute;
+    width: 100%;
+}
+.bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline {
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+.bx-media-phone .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline,
+.bx-media-tablet .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline {
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+.bx-media-phone .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline {
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.bx-media-phone .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline .bx-btn,
+.bx-media-phone .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline .sys-action-do {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    
+    height: auto;
+}
+.bx-media-phone .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline .bx-btn span {
+    margin: 0;
+}

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

@@ -13,6 +13,12 @@ import url(../../../../../../../template/css/general.css);
 }
 
 
+/*--- Page Submenu ---*/
+.bx-menu-main-bar-cnt {
+    height: 3.25rem;
+}
+
+
 /*--- Profile Avatar ---*/
 #bx-profile-switcher .bx-def-hr {
     display: none;

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

@@ -1,4 +1,4 @@
-<ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ flex py-2 overflow-x-auto">
+<ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-menu-object-__object__ flex justify-center py-2 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>
     </bx_repeat:menu_items>

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

@@ -1,9 +1,11 @@
-<div id="bx-menu-main-bar-wrapper">
-    <div id="bx-menu-main-bar" class="bx-menu-main-bar __class__ bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
-        <div class="bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
-            <bx_injection:injection_top_menu_before />
-            __code__
-            <bx_injection:injection_top_menu_after />
+<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="absolute w-full">
+                <bx_injection:injection_top_menu_before />
+                __code__
+                <bx_injection:injection_top_menu_after />
+            </div>
         </div>
     </div>
 </div>

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

@@ -1,4 +1,4 @@
-<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 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 justify-center py-2 bx-clearfix">
     <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>
     </bx_repeat:menu_items>

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

@@ -0,0 +1,11 @@
+<div id="__html_id__" class="sys-action __style_prefix__ __class__ flex items-center whitespace-nowrap" bx_view_data_count="__count__">
+    <div class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center bx-clearfix">
+        <bx_if:show_do_view>
+            <div class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</div>
+        </bx_if:show_do_view>
+        <bx_if:show_counter>
+            <div class="sys-action-counter-holder __style_prefix__-counter-holder bx-def-margin-sec-left-auto bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
+        </bx_if:show_counter>
+    </div>
+    __script__
+</div>

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

@@ -0,0 +1,3 @@
+<span id="__html_id__" class="sys-action __style_prefix__ __class__ flex items-center whitespace-nowrap" bx_view_data_count="__count__">
+    <span class="sys-action-cnt __style_prefix__-cnt bx-def-valign-center"><bx_if:show_do_view><span class="sys-action-element-holder __style_prefix__-element-holder">__do_view__</span></bx_if:show_do_view><bx_if:show_counter><span class="sys-action-counter-holder __style_prefix__-counter-holder bx-def-margin-thd-left-auto bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</span></bx_if:show_counter></span>__script__
+</span>

modules/boonex/organizations/template/unit.html

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