[Rt-commit] rt branch, 4.4/wip-timer-vertical-resize, created. rt-4.4.2-99-g63e7a22ba

Brian Duggan brian at bestpractical.com
Thu Mar 15 17:54:28 EDT 2018


The branch, 4.4/wip-timer-vertical-resize has been created
        at  63e7a22ba2d34572704adb4fa8347b01500beb70 (commit)

- Log -----------------------------------------------------------------
commit 63e7a22ba2d34572704adb4fa8347b01500beb70
Author: Brian C. Duggan <brian at bestpractical.com>
Date:   Thu Mar 15 16:55:53 2018 -0400

    WIP: Make the ticket timer window vertical resize work
    
    Use 'display: table*' styled divs. This allows top and bottom edges of
    table-cell styled divs to "stick" to each other, regardless of viewport
    height.
    
    Normally, we might use JavaScript to update the the viewport height as the
    user resizes the window. But a new-ish CSS length measurement, "vh",
    allows divs to change their heights in relation to the viewport height
    automatically. This change also converts the ticket timer to use that
    length measurement.
    
    The vertical resizing component of this change works well. But
    converting the ticket timer divs to use table display style required
    breaking the existing styling, like borders and background color. Those
    could probably be split up in to gutter-top, gutter-middle, and
    gutter-bottom classes to apply to the 'table-header-row',
    'table-row', and 'table-footer-row' styled divs.

diff --git a/share/html/Helpers/TicketTimer b/share/html/Helpers/TicketTimer
index f1dd69df8..a1e4be308 100644
--- a/share/html/Helpers/TicketTimer
+++ b/share/html/Helpers/TicketTimer
@@ -189,23 +189,58 @@ jQuery( function() {
 });
 </script>
 
-<div class="ticket-timer">
-    <div class="ticket-link">
-        <a target="_blank" href="<%RT->Config->Get('WebPath')%>/Ticket/Display.html?id=<%$Ticket->Id%>">
-            <img src="<% RT->Config->Get('WebPath') %>/static/images/stopwatch.png" alt="<% loc('Stopwatch') %>" />
-            <%$Ticket->Id%>: <%$Ticket->Subject%>
-        </a>
+%#<div style="height: 100vh; display: table; width: 100%; background-color: gray">
+%#  <div style="display: table-header-group">
+%#    <div style="height: 30px; background-color: red; display: table-cell">
+%#      Completely unrelated content.
+%#    </div>
+%#  </div>
+%#  <div style="display: table-row">
+%#    <div style="height: 2em; background-color: blue; display: table-cell">
+%#      Its full of starts!
+%#    </div>
+%#  </div>
+%#  <div style="display: table-row">
+%#    <div style="background-color: green; display: table-cell">
+%#      Oh, hi, Mark.
+%#    </div>
+%#  </div>
+%#  <div style="display: table-footer-group">
+%#    <div style="height: 30px; background-color: red; display table-cell">
+%#      More unrelated content.
+%#    </div>
+%#  </div>
+%#</div>
+
+  <div class="ticket-timer">
+    <div style="display: table-header-group">
+        <div class="ticket-link">
+            <a target="_blank" href="<%RT->Config->Get('WebPath')%>/Ticket/Display.html?id=<%$Ticket->Id%>">
+                <img src="<% RT->Config->Get('WebPath') %>/static/images/stopwatch.png" alt="<% loc('Stopwatch') %>" />
+                <%$Ticket->Id%>: <%$Ticket->Subject%>
+            </a>
+        </div>
     </div>
 
-    <div class="gutter">
-        <div class="readout"></div>
+    <div style="display: table-row">
+        <div class="readout" style="display: table-cell; height: 1em"></div>
+    </div>
 
+    <div style="display: table-row; height: 24px">
         <div class="control-line">
             <a href="#" class="playpause"><img src="<% $PauseImg %>" alt="<% loc('Pause Timer') %>" data-toggle-alt="<% loc('Resume Timer') %>" title="<% loc('Pause Timer') %>" /></a>
             <a href="#" class="submit-time"><img src="<% RT->Config->Get('WebPath') %>/static/images/submit.png" alt="<% loc('Submit Timer') %>" title="<% loc('Submit Timer') %>" /></a>
             <a href="#" class="close-popup hidden"><img src="<% RT->Config->Get('WebPath') %>/static/images/close.png" alt="<% loc('Close Window') %>" title="<% loc('Close Window') %>" /></a>
         </div>
+    </div>
 
+    <div style="display: table-row">
+        <style>
+            textarea {
+                height: 100%;
+                resize: none;
+            }
+        </style>
         <& /Elements/MessageBox,
             Name => 'Comment',
             Type => 'text/plain',
@@ -218,13 +253,16 @@ jQuery( function() {
         &>
     </div>
 
-    <div class="extra"><&|/l, $Now->AsString &>Started at [_1].</&></div>
-
+    <div style="display: table-footer-group">
+        <div style="display: table-cell">
+            <div class="extra"><&|/l, $Now->AsString &>Started at [_1].</&></div>
+    
 % if ($Ticket->TimeEstimated) {
-    <div class="extra"><&|/l&>Time estimated</&>: <& /Ticket/Elements/ShowTime, minutes => $Ticket->TimeEstimated &></div>
+            <div class="extra"><&|/l&>Time estimated</&>: <& /Ticket/Elements/ShowTime, minutes => $Ticket->TimeEstimated &></div>
 % }
-
-    <div class="on-error"><&|/l&>An error occurred while submitting time. Please submit your time manually.</&></div>
+            <div class="on-error"><&|/l&>An error occurred while submitting time. Please submit your time manually.</&></div>
+        </div>
+    </div>
 
 </div>
 
diff --git a/share/static/css/base/ticket-timer.css b/share/static/css/base/ticket-timer.css
index 14498a9bf..d0e038f31 100644
--- a/share/static/css/base/ticket-timer.css
+++ b/share/static/css/base/ticket-timer.css
@@ -1,5 +1,9 @@
 .ticket-timer {
     padding: 1em;
+    height: 100vh;
+    width: 100vw;
+    display: table;
+    table-layout: fixed;
 }
 
 .ticket-timer img {
@@ -19,12 +23,15 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: table-cell;
 }
 
 .ticket-timer .readout {
     font-size: 2em;
     text-align: center;
+    height: 1em;
     width: 100%;
+    display: table-cell;
 }
 
 .ticket-timer .control-line {

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


More information about the rt-commit mailing list