[Rt-commit] rt branch, 4.6/two-col-in-widget, created. rt-5.0.0alpha1-56-gbcc4286b23

[? sunnavy]

The branch, 4.6/two-col-in-widget has been created
        at  bcc4286b23f389ea61cbfb45cba4fd9334e169b9 (commit)

- Log -----------------------------------------------------------------
commit bcc4286b23f389ea61cbfb45cba4fd9334e169b9
Author: sunnavy <sunnavy at bestpractical.com>
Date:   Tue Oct 22 05:25:31 2019 +0800

    Automatically render 2 columns for common ticket widgets on large screen
    
    For text/wikitext type of cfs, as they are supposed to contain quite a
    few content, we intentionally let them take up the whole row.
    
    People can add "two-col-left" or "two-col-right" css class to control
    the position of fields, and "two-col-full" is to take up the whole row.

diff --git a/share/html/Elements/ShowCustomFields b/share/html/Elements/ShowCustomFields
index c5211fa52c..9915ada4e9 100644
--- a/share/html/Elements/ShowCustomFields
+++ b/share/html/Elements/ShowCustomFields
@@ -48,7 +48,7 @@
 % $m->callback( CallbackName => 'BeforeCustomFields', Object => $Object,
 %               Grouping => $Grouping, ARGSRef => \%ARGS, CustomFields => $CustomFields, Table => $Table );
 % if ($Table) {
-<div>
+<div class="two-col">
 % }
 % while ( my $CustomField = $CustomFields->Next ) {
 % my $Values = $Object->CustomFieldValues( $CustomField->Id );
@@ -63,6 +63,7 @@
 %   'custom-field-'.$CustomFieldName,
 % );
 % push @classes, 'unset-field' if not $count;
+% push @classes, 'two-col-full' if $CustomField->Type =~ /^(?:Text|Wikitext)$/;
 % $m->callback( CallbackName => 'ModifyFieldClasses', CustomField => $CustomField,
 %               Object => $Object, Classes => \@classes, Grouping => $Grouping );
   <div class="form-row <% join(' ', @classes) %>" id="CF-<%$CustomField->id%>-ShowRow">
diff --git a/share/html/Ticket/Elements/ShowBasics b/share/html/Ticket/Elements/ShowBasics
index 46c68a12b6..b27e50ff49 100644
--- a/share/html/Ticket/Elements/ShowBasics
+++ b/share/html/Ticket/Elements/ShowBasics
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div>
+<div class="two-col">
   <div class="id form-row">
     <div class="label col-md-3"><&|/l&>Id</&>:</div>
     <div class="value col-md-9"><span><%$Ticket->Id %></span></div>
diff --git a/share/html/Ticket/Elements/ShowDates b/share/html/Ticket/Elements/ShowDates
index 1823413bce..cb531ba168 100644
--- a/share/html/Ticket/Elements/ShowDates
+++ b/share/html/Ticket/Elements/ShowDates
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div>
+<div class="two-col">
   <div class="date form-row created">
     <div class="label col-md-3"><&|/l&>Created</&>:</div>\
     <div class="value col-md-9"><span class="current-value"><% $Ticket->CreatedObj->AsString %></span></div>
diff --git a/share/html/Ticket/Elements/ShowPeople b/share/html/Ticket/Elements/ShowPeople
index 953cd807ab..f55736ad94 100644
--- a/share/html/Ticket/Elements/ShowPeople
+++ b/share/html/Ticket/Elements/ShowPeople
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div>
+<div class="two-col">
   <div class="form-row owner">
     <div class="label col-md-3"><&|/l&>Owner</&>:</div>
 % my $owner = $Ticket->OwnerObj;
diff --git a/share/static/css/elevator-light/ticket.css b/share/static/css/elevator-light/ticket.css
index fbc1456d55..d7548f1197 100644
--- a/share/static/css/elevator-light/ticket.css
+++ b/share/static/css/elevator-light/ticket.css
@@ -152,3 +152,15 @@ ul.select-queue li a:visited {
 #create-linked-ticket {
     padding-top: 15px;
 }
+
+ at media (min-width: 1200px) {
+    .two-col-full > .label.col-md-3 {
+        max-width: 12.5%;
+        flex: 0 0 12.5%;
+    }
+
+    .two-col-full > .col-md-9 {
+        max-width: 87.5%;
+        flex: 0 0 87.5%;
+    }
+}
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 6ee838aa63..6dde6cf4af 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -293,6 +293,57 @@ jQuery(function() {
         jQuery(this).hide();
         return false;
     });
+
+    jQuery('div.two-col').each(function() {
+        var container = jQuery(this);
+        var divs = container.children('div.form-row');
+
+        var left_divs = [];
+        var right_divs = [];
+        var full_count = 0;
+
+        for( var i = 0; i < divs.length; i++ ) {
+            var div = divs.eq(i);
+            if ( div.hasClass('two-col-full') ) {
+                left_divs.push(div);
+                full_count++;
+            }
+            else if ( div.hasClass('two-col-left') ) {
+                left_divs.push(div);
+            }
+            else if ( div.hasClass('two-col-right') ) {
+                right_divs.push(div);
+            }
+            else if ( left_divs.length - full_count > right_divs.length ) {
+                right_divs.push(div);
+            }
+            else {
+                left_divs.push(div);
+            }
+        }
+
+        while ( left_divs.length ) {
+            var row = jQuery('<div class="form-row"></div>').appendTo(container);
+            var left_div = left_divs.shift();
+            left_div.detach().appendTo(row);
+
+            if ( left_div.hasClass('two-col-full') ) {
+                left_div.wrap('<div class="col-xl-12"></div>');
+            }
+            else {
+                left_div.wrap('<div class="col-xl-6"></div>');
+                var right_div = right_divs.shift();
+                if ( right_div ) {
+                    right_div.detach().appendTo(row).wrap('<div class="col-xl-6"></div>');
+                }
+            }
+        }
+
+        while ( right_divs.length ) {
+            var row = jQuery('<div class="form-row"></div>').appendTo(container);
+            right_divs.shift().detach().appendTo(row).wrap('<div class="col-xl-6 offset-xl-6"></div>');
+        }
+    });
 });
 
 function textToHTML(value) {

-----------------------------------------------------------------------