Ticket #4980 - Studio: Layout changes.

modules/boonex/developer/template/css/main.css

@@ -1,7 +1,4 @@
 /*--- Overwrite ---*/
-body.bx-dev-page-body-columns div.bx-std-page-column.bx-std-page-content .bx-std-page-column-cnt {
-    padding: 4.0rem 0 0 0;
-}
 body.bx-dev-page-body-single div.bx-std-page-menu,
 body.bx-dev-page-body-columns div.bx-std-page-menu {
     -webkit-flex-basis: 67px;
@@ -132,7 +129,4 @@ div.bx-dev-page-column.bx-dev-page-content {
 
     overflow-x: hidden;
     overflow-y: auto;
-}
-div.bx-dev-page-column.bx-dev-page-content .bx-dev-page-column-cnt {
-    padding: 1.0rem;
 }

modules/boonex/developer/template/page_content.html

@@ -1,6 +1,6 @@
-<div class="bx-dev-page-columns-cnt">
-    <div class="bx-dev-page-column bx-dev-page-menu">
-        <div class="bx-dev-page-column-cnt p-4" id="bx-dev-pc-menu">__page_menu_code__</div>
+<div class="bx-dev-page-columns-cnt space-x-2">
+    <div class="bx-dev-page-column bx-dev-page-menu bg-white/90 dark:bg-gray-900/90 rounded-xl">
+        <div class="bx-dev-page-column-cnt p-2" id="bx-dev-pc-menu">__page_menu_code__</div>
     </div>
     <div class="bx-dev-page-column bx-dev-page-content">
         <div class="bx-dev-page-column-cnt" id="bx-dev-pc-content">__page_main_code__</div>

studio/js/launcher.js

@@ -194,6 +194,14 @@ BxDolStudioLauncher.prototype.featured = function(sPageName, oLink) {
                 if($this.bInit)
                     oBxDolStudioLauncher.enableJitter();
             }
+            
+            var sClassStatic = 'bx-menu-item-static';
+            var sClassDivider = 'bx-menu-item-divider';
+            var oItem = $('ul.bx-menu-top-center li.bx-menu-tab-active').toggleClass(sClassStatic + ' bx-menu-item-dynamic');
+            if(oItem.hasClass(sClassStatic))
+                $(oItem).insertBefore(oItem.siblings('.' + sClassDivider));
+            else
+                $(oItem).insertAfter(oItem.siblings(':last'));
         },
         'json'
     );
@@ -217,6 +225,14 @@ BxDolStudioLauncher.prototype.bookmark = function(sPageName, oLink) {
                 bx_alert(oData.message);
                 return;
             }
+            
+            var sClassStatic = 'bx-menu-item-static';
+            var sClassDivider = 'bx-menu-item-divider';
+            var oItem = $('ul.bx-menu-top-center li.bx-menu-tab-active').toggleClass(sClassStatic + ' bx-menu-item-dynamic');
+            if(oItem.hasClass(sClassStatic))
+                $(oItem).insertBefore(oItem.siblings('.' + sClassDivider));
+            else
+                $(oItem).insertAfter(oItem.siblings(':last'));
         },
         'json'
     );

studio/template/block_caption.html

@@ -1,4 +1,4 @@
-<div class="bx-std-block-caption">
+<div class="bx-std-block-caption border-b border-gray-200 dark:border-gray-700">
     <div class="bx-std-bcap-text">__caption__</div>
     <bx_if:show_actions>
         <div class="bx-std-bcap-actions">

studio/template/css/general.css

@@ -51,7 +51,7 @@ div.bx-std-content-wrp {
     height: 100vh;
 }
 div.bx-std-content-wrp.bx-std-one-col {
-    padding-top: 5rem;
+    padding-top: 4rem;
 
     overflow-y: auto;
 }

studio/template/css/launcher.css

@@ -80,8 +80,8 @@ div.bx-std-widget-cont {
     position: relative;
 }
 div.bx-std-widget-empty {
-    width: 5.0rem;
-    height: 6.25rem;
+    width: 4.5rem;
+    height: 5.75rem;
 }
 
 .bx-std-widget-dragging {
@@ -94,19 +94,19 @@ div.bx-std-widget-empty {
 .bx-std-widget-icon {
     position: relative;
     top: 0px;
-    width: 5.0rem;
-    height: 5.0rem;
+    width: 4.5rem;
+    height: 4.5rem;
 
     background-color: transparent;
 
-    line-height: 5.0rem;
+    line-height: 4.5rem;
 }
 
 .bx-std-widget-icon i.sys-icon {
     position: absolute;
     z-index: 2;
     left: 0px;
-    width: 5.0rem;
+    width: 4.5rem;
 
     font-size: 48px;
     text-align: center;
@@ -126,8 +126,8 @@ div.bx-std-widget-empty {
     position: relative;
     z-index: -1;
 
-    width: 5.0rem;
-    height: 5.0rem;
+    width: 4.5rem;
+    height: 4.5rem;
 
     background-color: transparent;
     background-position: 0px 0px;
@@ -138,8 +138,8 @@ div.bx-std-widget-icon-jitter {
     position: absolute;
     top: 0;
     left: 0;
-    width: 5.0rem;
-    height: 5.0rem;
+    width: 4.5rem;
+    height: 4.5rem;
     z-index: 5;
 
     background-color: transparent;
@@ -229,7 +229,7 @@ div.bx-std-widget-action i.sys-icon {
     display: none;
     position: absolute;
     bottom: -2.0rem;
-    width: 5.0rem;
+    width: 4.5rem;
     height: 2.0rem;
 
     background-image: url(../images/loading.gif);
@@ -242,7 +242,7 @@ div.bx-std-widget-action i.sys-icon {
 }
 div.bx-std-widget-caption {
     position: relative;
-    width: 5.0rem;
+    width: 4.5rem;
     height: 2rem;
 
     line-height: 2rem;

studio/template/css/menu_top.css

@@ -1,17 +1,13 @@
 div.bx-std-menu-top-wrp {
     position: relative;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-flex-wrap: nowrap;
+    display: flex;    
+    align-items: flex-start;
     flex-wrap: nowrap;
 
     width: 100%;
-    height: 4rem;
-
+    height: 4.5rem;
+}
+div.bx-std-menu-top-gap {
     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
     backdrop-filter: blur(16px);
 }
@@ -34,8 +30,8 @@ div.bx-std-menu-top.bx-std-menu-top-right {
 }
 div.bx-std-menu-top.bx-std-menu-top-center {    
     z-index: 1;
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
     height: 3.5rem;
 }
 div.bx-std-menu-top:nth-child(1).bx-std-menu-top-center {
@@ -59,13 +55,13 @@ div.bx-std-menu-top-center ul {
     
 }
 div.bx-std-menu-top-left {
-    padding-left: 1rem;
+    padding-left: 0.25rem;
     line-height: 4rem;
     text-align: left;
     font-size: 1.5rem;
 }
 div.bx-std-menu-top-right {
-    padding-right: 1rem;
+    padding-right: 0.75rem;
     text-align: right;
 }
 
@@ -103,7 +99,7 @@ div.bx-std-menu-top .bx-menu-top-center li {
     -webkit-align-items: center;
     align-items: center;
 
-    width: 3.5rem;
+    width: 3.0rem;
     height: 3.5rem;
 }
 
@@ -141,8 +137,8 @@ div.bx-std-menu-top .bx-menu-top-center li a {
     z-index: 2;
     box-sizing: content-box;
 
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 2.25rem;
+    height: 2.25rem;
 }
 .bx-menu-breadcrumb li.bx-menu-bc-item > a {
     display: -webkit-flex;
@@ -174,8 +170,8 @@ div.bx-std-menu-top .bx-menu-top-center li .sys-icon {
     display: block;
     box-sizing: content-box;
 
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 2.25rem;
+    height: 2.25rem;
 
     margin: 0;
 }
@@ -272,12 +268,12 @@ div.bx-std-menu-top .bx-menu-toolbar li {
     float: none;
     display: block;
 
-    height: 2.5rem;
-    min-width: 2.5rem;
+    height: 2.25rem;
+    min-width: 2.25rem;
     
     border-radius: 0.5rem;
 
-    line-height: 2.5rem;
+    line-height: 2.25rem;
     overflow: hidden;
 }
 div.bx-std-menu-top .bx-menu-toolbar li:not(.bx-menu-tab-search) a {

studio/template/css/page.css

@@ -37,7 +37,7 @@ div.bx-std-block-caption {
     -webkit-align-items: center;
     align-items: center;
 
-    padding: 1.25rem 1.5rem 0 1.5rem;
+    padding: 0.625rem 0.5rem 0.625rem 1.0rem;
 }
 div.bx-std-bcap-text {
     -webkit-flex: 1 1 auto;
@@ -73,7 +73,7 @@ div.bx-std-block-panel-top .bx-std-pt-cnt {
 }
 
 div.bx-std-block-content {
-    padding: 1.5rem;
+    padding: 0.5rem;
 }
 div.bx-std-block-content div.bx-grid-header {
     margin-top: 0px;

studio/template/css/page_columns.css

@@ -14,13 +14,10 @@
 
 div.bx-std-page-columns-cnt {
     position: relative;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: stretch;
     align-items: stretch;
-/*
-    height: calc(100vh - 5rem);
-    */
+
+    padding: 4.5rem 0.5rem 0.5rem 0.5rem;
 }
 
 /*--- Page Menu ---*/
@@ -44,7 +41,7 @@ div.bx-std-page-column.bx-std-page-menu div.bx-std-page-column-cnt {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
-    padding-top: 5rem;
+    padding-top: 0.5rem;
 }
 
 /*--- Page Content ---*/
@@ -64,5 +61,5 @@ div.bx-std-page-column.bx-std-page-content::-webkit-scrollbar {
 div.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
     width: 100%;
     height: max-content;
-    padding: 5.0rem 1.0rem  1.0rem  1.0rem;
+    padding-left: 0.5rem;
 }

studio/template/css/settings.css

@@ -1,7 +1,3 @@
-div.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
-    padding: 5rem 0  0  0;
-}
-
 .bx-std-block .bx-std-block-content {
     padding: 0;
 }
@@ -16,7 +12,7 @@ div.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
 }
 #adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper,
 #adm-settings-form-categorized .bx-form-advanced-wrapper .bx-form-section-wrapper {
-    padding: 0 1.0rem;
+    padding: 0 0.5rem 0 0;
 }
 #adm-settings-form-categorized .bx-form-advanced-wrapper .bx-form-section-wrapper:last-child {
     position: absolute;
@@ -27,7 +23,9 @@ div.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
     padding: 1.25rem 1.5rem;
 }
 
-#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child,
+#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
+    padding-top: 0.5rem;
+}
 #adm-settings-form-categorized .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
-    padding-top: 1rem;
+    padding-top: 0;
 }

studio/template/menu_top.html

@@ -5,8 +5,10 @@ var oBxDolStudioMenuTop = new BxDolStudioMenuTop({
 });
 -->
 </script>
-<div class="bx-std-menu-top-wrp bg-white/90 dark:bg-gray-900/90">
-    <bx_repeat:menus>
-        <div id="bx-std-menu-top bx-std-menu-top-__name__" class="bx-std-menu-top bx-std-menu-top-__name__ bx-def-box-sizing">__content__</div>
-    </bx_repeat:menus>
+<div class="bx-std-menu-top-wrp">
+    <div class="bx-std-menu-top-gap flex justify-between items-center flex-1 mt-2 mx-2 bg-white/90 dark:bg-gray-900/90 rounded-xl">
+        <bx_repeat:menus>
+            <div id="bx-std-menu-top bx-std-menu-top-__name__" class="bx-std-menu-top bx-std-menu-top-__name__ bx-def-box-sizing">__content__</div>
+        </bx_repeat:menus>
+    </div>
 </div>

studio/template/menu_top_center.html

@@ -3,7 +3,7 @@
         <bx_repeat:menu_items>
             <li id="bx-menu-item-__name__" class="__class__ bx-def-box-sizing __class_add__">
                 <a href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> __attrs__>
-                    <div class="bx-mi-icon rounded-lg hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-offset-black active:opacity-80 duration-300">
+                    <div class="bx-mi-icon rounded-lg hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-1 hover:ring-offset-white dark:hover:ring-offset-black active:opacity-80 duration-300">
                         <div class="block ring-white/5 ring-1 ring-inset rounded-lg">
                             <bx_include_auto:menu_icon.html />
                         </div>

studio/template/menu_top_toolbar.html

@@ -1,4 +1,4 @@
-<ul class="bx-menu-toolbar gap-x-4">
+<ul class="bx-menu-toolbar gap-x-3">
     <bx_if:show_search>
         <li class="bx-menu-tab-search<bx_if:show_active> bx-mt-active</bx_if:show_active> flex-auto">
             <div class="bx-menu-tab-item">

studio/template/page_content_2_col.html

@@ -1,6 +1,6 @@
 <div class="bx-std-page-columns-cnt bx-std-pc-stretch">
-    <div class="bx-std-page-column bx-std-page-menu bg-white/90 dark:bg-gray-900/90">
-        <div class="bx-std-page-column-cnt px-4 space-y-4">__page_menu_code__</div>
+    <div class="bx-std-page-column bx-std-page-menu bg-white/90 dark:bg-gray-900/90 rounded-xl">
+        <div class="bx-std-page-column-cnt px-2 space-y-4">__page_menu_code__</div>
     </div>
     <div class="bx-std-page-column bx-std-page-content bx-std-pc-stretch">
         <div class="bx-std-page-column-cnt flex flex-col gap-6" id="bx-std-pc-content">__page_main_code__</div>

template/css/tailwind.css

@@ -1364,7 +1364,7 @@
     }
 
     .bx-std .bx-menu-top-center .bx-menu-tab-active .bx-mi-icon {
-        @apply ring-4 ring-blue-500/50 ring-offset-2 ring-offset-white dark:ring-offset-black;
+        @apply ring-4 ring-blue-500/50 ring-offset-1 ring-offset-white dark:ring-offset-black;
     }
     .bx-std .bx-menu-top-center .bx-menu-item-divider {
         @apply border-l border-black/10 dark:border-white/10;
@@ -1384,13 +1384,13 @@
         @apply rounded-lg;
     }
 
-    .bx-menu-toolbar .bx-menu-tab-item {
+    .bx-std .bx-menu-toolbar .bx-menu-tab-item {
         @apply bg-gray-200 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
         @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
-        @apply border border-black/10 dark:border-white/10 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-offset-black;
+        @apply border border-black/10 dark:border-white/10 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800 hover:ring-offset-1 hover:ring-offset-white dark:hover:ring-offset-black;
         @apply active:opacity-80 duration-300;
     }
-    .bx-menu-toolbar .bx-menu-tab-item a {
+    .bx-std .bx-menu-toolbar .bx-menu-tab-item a {
         @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
     }
 
@@ -1476,11 +1476,11 @@
     
     /* Studio: Launcher */
     .bx-std-bg.bx-std-page-launcher {
-        @apply bg-gray-200 dark:bg-black;
+        @apply bg-gray-100 dark:bg-black;
     }
 
     .bx-std .bx-std-widgets .bx-std-widget {
-        @apply px-6 pt-6 pb-3 sm:px-10 sm:pt-10 sm:pb-4;
+        @apply px-3 pt-3 pb-1.5 sm:px-4 sm:pt-4 sm:pb-2 lg:px-6 lg:pt-6 lg:pb-3;
     }
 
     /* Studio: Settings */