Schedule Form: Reminder and Criteria input UI fix

relates to xibosignageltd/xibo-private#928
xibosignage · Feb 5, 2025 · 0340ba5 · 0340ba5
1 parent 4ad890a
commit 0340ba5
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 22 deletions.
diff --git a/ui/src/templates/schedule/reminder-event.hbs b/ui/src/templates/schedule/reminder-event.hbs
@@ -1,12 +1,12 @@
-<div class="form-group row">
+<div class="form-group reminder-event-row">
     <input class="form-control" name="reminder_scheduleReminderId[]" type="hidden" value="{{ scheduleReminderId }}" />
 
-    <div class="col-sm-2">
+    <div class="reminder-event-cell reminder-event-value">
         <label for="reminder_value[]">
             <input class="form-control" name="reminder_value[]" type="number" value="{{ value }}" />
         </label>
     </div>
-    <div class="col-sm-2">
+    <div class="reminder-event-cell reminder-event-type">
         <label for="reminder_type[]">
             <select class="form-control" name="reminder_type[]">
                 <option value="1" {{#eq type 1}}selected{{/eq}}>{{ trans.type.minute }}</option>
@@ -17,7 +17,7 @@
             </select>
         </label>
     </div>
-    <div class="col-sm-3">
+    <div class="reminder-event-cell reminder-event-option">
         <label for="reminder_option[]">
             <select class="form-control" name="reminder_option[]">
                 <option value="1" {{#eq option 1}}selected{{/eq}}>{{ trans.option.beforeScheduleStarts }}</option>
@@ -27,14 +27,14 @@
             </select>
         </label>
     </div>
-    <div class="col-sm-3">
+    <div class="reminder-event-cell reminder-event-email">
         <label for="reminder_isEmail[]">
             <input type="checkbox" name="reminder_isEmail[]" {{#eq isEmail 1}}checked{{/eq}}/>
             {{ trans.notifyByEmail }}
             <input type="hidden" name="reminder_isEmailHidden[]" />
         </label>
     </div>
-    <div class="col-sm-2">
+    <div class="reminder-event-cell reminder-event-btn">
         <button class="btn btn-white"><i class="fa {{ buttonGlyph }}"></i></button>
     </div>
 </div>
diff --git a/ui/src/templates/schedule/schedule-criteria-fields.hbs b/ui/src/templates/schedule/schedule-criteria-fields.hbs
@@ -1,18 +1,18 @@
-<div class="form-group row">
+<div class="form-group schedule-criteria-row">
     <input class="form-control" name="criteria_id[]" type="hidden" value="{{ id }}" />
-    <div class="col-sm-2">
+    <div class="schedule-criteria-cell schedule-criteria-type">
         <label for="criteria_type[]">
             <select class="form-control" name="criteria_type[]">
                 <option value="custom" {{#eq type "custom"}}selected{{/eq}}>{{ trans.custom }}</option>
             </select>
         </label>
     </div>
-    <div class="col-sm-2">
+    <div class="schedule-criteria-cell schedule-criteria-metric">
         <label for="criteria_metric[]">
             <input class="form-control" name="criteria_metric[]" type="text" value="{{ metric }}" />
         </label>
     </div>
-    <div class="col-sm-3">
+    <div class="schedule-criteria-cell schedule-criteria-condition">
         <label for="criteria_condition[]">
             <select class="form-control" name="criteria_condition[]">
                 <option value="set" {{#eq condition "set"}}selected{{/eq}}>{{ trans.isSet }}</option>
@@ -27,12 +27,12 @@
             </select>
         </label>
     </div>
-    <div class="col-sm-2">
+    <div class="schedule-criteria-cell schedule-criteria-value">
         <label for="criteria_value[]">
             <input class="form-control" name="criteria_value[]" type="text" value="{{ value }}" />
         </label>
     </div>
-    <div class="col-sm-2">
+    <div class="schedule-criteria-cell schedule-criteria-btn">
         <button class="btn btn-white" data-is-add="{{isAdd}}"><i class="fa {{#if isAdd}}fa-plus{{else}}fa-minus{{/if}}"></i></button>
     </div>
 </div>
diff --git a/views/schedule-form-add.twig b/views/schedule-form-add.twig
@@ -332,11 +332,11 @@
                         {{ forms.message(message) }}
 
                         <div class="form-criteria-field-headings">
-                            <div class="form-group row">
-                                <div class="col-form-label col-sm-2">{{ "Type"|trans }}</div>
-                                <div class="col-form-label col-sm-2">{{ "Metric"|trans }}</div>
-                                <div class="col-form-label col-sm-3">{{ "Condition"|trans }}</div>
-                                <div class="col-form-label col-sm-2">{{ "Value"|trans }}</div>
+                            <div class="form-group schedule-criteria-row">
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-type">{{ "Type"|trans }}</div>
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-metric">{{ "Metric"|trans }}</div>
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-condition">{{ "Condition"|trans }}</div>
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-value">{{ "Value"|trans }}</div>
                             </div>
                         </div>
 

diff --git a/views/schedule-form-edit.twig b/views/schedule-form-edit.twig
@@ -346,11 +346,11 @@
                         {{ forms.message(message) }}
 
                         <div class="form-criteria-field-headings">
-                            <div class="form-group row">
-                                <div class="col-form-label col-sm-2">{{ "Type"|trans }}</div>
-                                <div class="col-form-label col-sm-2">{{ "Metric"|trans }}</div>
-                                <div class="col-form-label col-sm-3">{{ "Condition"|trans }}</div>
-                                <div class="col-form-label col-sm-2">{{ "Value"|trans }}</div>
+                            <div class="form-group schedule-criteria-row">
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-type">{{ "Type"|trans }}</div>
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-metric">{{ "Metric"|trans }}</div>
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-condition">{{ "Condition"|trans }}</div>
+                                <div class="col-form-label schedule-criteria-cell schedule-criteria-value">{{ "Value"|trans }}</div>
                             </div>
                         </div>
 

diff --git a/web/theme/default/css/xibo.css b/web/theme/default/css/xibo.css
@@ -1874,3 +1874,77 @@ div.dataTables_wrapper div.dataTables_info {
     right: 0;
     z-index: 3;
 }
+
+/* Reminder Events and Schedule Criteria */
+.reminder-event-row, .schedule-criteria-row {
+    display: inline-flex !important;
+    width: 100%;
+    gap: 12px;
+    padding: 0 15px;
+    margin-bottom: 8px;
+}
+
+.reminder-event-cell label, .schedule-criteria-cell label {
+    width: 100%;
+}
+
+.reminder-event-btn, .schedule-criteria-btn {
+    flex-grow: 1;
+    text-align: right;
+}
+
+.schedule-criteria-type, .schedule-criteria-condition, .schedule-criteria-metric {
+    flex-basis: 165px;
+}
+
+.schedule-criteria-value {
+    flex-basis: 130px;
+}
+
+.reminder-event-value {
+    flex-basis: 100px;
+}
+
+.reminder-event-type {
+    flex-basis: 120px;
+}
+
+.reminder-event-option {
+    flex-basis: 200px;
+}
+
+.reminder-event-email {
+    flex-basis: 180px;
+}
+
+@media screen and (max-width: 992px) {
+    .reminder-event-row, .schedule-criteria-row {
+        gap: 8px;
+        padding: 0;
+    }
+
+    .schedule-criteria-type, .schedule-criteria-condition, .schedule-criteria-metric {
+        flex-basis: 95px;
+    }
+
+    .schedule-criteria-value {
+        flex-basis: 85px;
+    }
+
+    .reminder-event-value {
+        flex-basis: 60px;
+    }
+
+    .reminder-event-type {
+        flex-basis: 85px;
+    }
+
+    .reminder-event-option {
+        flex-basis: 140px;
+    }
+
+    .reminder-event-email {
+        flex-basis: 80px;
+        line-height: 1.2rem;
+    }
+}