[Rt-commit] rt branch, 4.6/update-styling-of-reminders, created. rt-4.4.4-721-ge8601eae72

[Blaine Motsinger]

The branch, 4.6/update-styling-of-reminders has been created
        at  e8601eae728a784677ff3f9f4c45a7b36c3607ea (commit)

- Log -----------------------------------------------------------------
commit e8601eae728a784677ff3f9f4c45a7b36c3607ea
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Fri Jan 31 13:54:13 2020 -0600

    Fix styling for reminders
    
    Updated pages include My and Tickets reminders pages and portlets.

diff --git a/share/html/Ticket/Elements/Reminders b/share/html/Ticket/Elements/Reminders
index 945c44e768..981d6ab697 100644
--- a/share/html/Ticket/Elements/Reminders
+++ b/share/html/Ticket/Elements/Reminders
@@ -73,7 +73,7 @@ my $reminder_collection = $count_reminders->Collection;
 <input type="hidden" class="hidden" name="update-reminders" value="1" />
 % my $editable = 0;
 % if ($has_reminders) {
-<div class="form-row">
+<div class="form-row reminder-headers">
 % if ( $Edit ) {
   <&|/l&>Reminders</&>
 % } else {
@@ -107,7 +107,9 @@ my $reminder_collection = $count_reminders->Collection;
 </div>
 % }
 % if ( $editable ) {
-<i><&|/l&>(Check box to complete)</&></i>
+<div class="form-row">
+  <i><&|/l&>(Check box to complete)</&></i>
+</div>
 % }
 <hr>
 % } else {
@@ -173,23 +175,24 @@ $Reminder
 $Ticket
 $Index
 </%args>
-
   <div class="col-md-12 <% $Index%2 ? 'oddline' : 'evenline' %>" id="reminder-<% $Reminder->id %>">
 % unless ( $Reminder->CurrentUserHasRight('ModifyTicket') ) {
       <input class="custom-control-input" name="Complete-Reminder-<% $Reminder->id %>" type="hidden"
         value=<% $Reminder->Status eq $Reminder->LifecycleObj->ReminderStatusOnResolve ? 1 : 0 %>
       />
 % }
-      <div class="custom-control custom-checkbox">
-        <input class="custom-control-input" type="checkbox" value="1" id="Complete-Reminder-<% $Reminder->id %>" name="Complete-Reminder-<% $Reminder->id %>" <% $Reminder->Status eq $Reminder->LifecycleObj->ReminderStatusOnResolve ? 'checked="checked"' : '' |n %>
+      <div class="form-row">
+      <div class="col-md-1">
+        <div class="custom-control custom-checkbox">
+          <input class="custom-control-input" type="checkbox" value="1" id="Complete-Reminder-<% $Reminder->id %>" name="Complete-Reminder-<% $Reminder->id %>" <% $Reminder->Status eq $Reminder->LifecycleObj->ReminderStatusOnResolve ? 'checked="checked"' : '' |n %>
 % unless ( $Reminder->CurrentUserHasRight('ModifyTicket') ) {
 disabled="disabled"
 % }
-        />
-        <label class="custom-control-label" for="Complete-Reminder-<% $Reminder->id %>"></label>
+          />
+          <label class="custom-control-label" for="Complete-Reminder-<% $Reminder->id %>"></label>
+        </div>
       </div>
-      <div class="form-row">
-        <div class="label col-md-3">
+        <div class="label col-md-2">
           <&|/l&>Subject</&>:
         </div>
         <div class="value col-md-9">
@@ -200,29 +203,33 @@ readonly="readonly"
           />
         </div>
       </div>
-      <div class="form-row <% $Index%2 ? 'oddline' : 'evenline' %>">
+
+      <div class="form-row">
         <div class="label col-md-3">
           <&|/l&>Owner</&>:
         </div>
         <div class="value col-md-9">
-          <& /Elements/SelectOwner, Name => 'Reminder-Owner-'.$Reminder->id, QueueObj => $Ticket->QueueObj, Default => $Reminder->Owner, DefaultValue => 0  &>
-        </div>
-        <div class="label col-md-3">
-          <&|/l&>Due</&>:
-        </div>
-        <div class="value col-md-9">
-% if ( $Reminder->CurrentUserHasRight('ModifyTicket') ) {
-          <div class="form-row">
-            <div class="col-auto">
-              <& /Elements/SelectDate, Name => 'Reminder-Due-'.$Reminder->id &>
+          <div class="row">
+            <div class="col-md-3">
+              <& /Elements/SelectOwner, Name => 'Reminder-Owner-'.$Reminder->id, QueueObj => $Ticket->QueueObj, Default => $Reminder->Owner, DefaultValue => 0  &>
             </div>
-            <div class="col-auto">
-              <span class="current-value form-control">(<% $Reminder->DueObj->AsString %>)</span>
+            <div class="label col-auto">
+              <&|/l&>Due</&>:
             </div>
-          </div>
+            <div class="value">
+% if ( $Reminder->CurrentUserHasRight('ModifyTicket') ) {
+              <div class="float-left">
+                <& /Elements/SelectDate, Name => 'Reminder-Due-'.$Reminder->id &>
+              </div>
+              <div class="float-left ml-3">
+                <span class="current-value form-control">(<% $Reminder->DueObj->AsString %>)</span>
+              </div>
 % }
+            </div>
+          </div>
         </div>
       </div>
+
     </div>
 </%method>
 <%method ShowEntry>
diff --git a/share/static/css/elevator-light/forms.css b/share/static/css/elevator-light/forms.css
index e422e40bab..cfab61d55b 100644
--- a/share/static/css/elevator-light/forms.css
+++ b/share/static/css/elevator-light/forms.css
@@ -393,3 +393,36 @@ textarea.code {
 #EditConfig ul.plugins {
     margin: 0;
 }
+
+/* reminders */
+#UpdateReminders .form-row {
+    margin-top: 0;
+}
+
+#UpdateReminders .form-row .oddline .form-row, #UpdateReminders .form-row .evenline .form-row {
+    margin: 0;
+    padding: 0.5rem 0;
+}
+
+#UpdateReminders .form-row.reminder-headers {
+    padding: 0.5rem;
+    border-bottom: 1px solid #dee2e6;
+}
+
+#UpdateReminders [id^=reminder-] {
+    border-bottom: 1px solid #dee2e6;
+}
+
+#UpdateReminders i {
+    margin-top: 0.5rem;
+    margin-left: 0.5rem;
+}
+
+#UpdateReminders hr {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+#UpdateReminders .current-value {
+    background-color: unset;
+}
diff --git a/share/static/css/elevator-light/misc.css b/share/static/css/elevator-light/misc.css
index f5e0d21cc0..30ed80c798 100644
--- a/share/static/css/elevator-light/misc.css
+++ b/share/static/css/elevator-light/misc.css
@@ -126,7 +126,7 @@ svg.icon-helper {
 
 /* row colouring */
 .oddline {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(242, 242, 242);
 }
 
 .cke_toolgroup a.cke_button {

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