Improve layout of x-axis options

bestpractical · Apr 10, 2024 · a1a982c · a1a982c
1 parent 0c5e8d2
commit a1a982c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/share/html/Search/Chart.html b/share/html/Search/Chart.html
@@ -277,10 +277,12 @@
         <label class="custom-control-label" for="ChartStyleIncludeSQL"><&|/l&>Include TicketSQL query</&></label>
       </div>
 
+      <div class="form-row sorting">
+        <h5 class="titlebox-inner-heading mt-2 ml-2">X-Axis</h5>
+      </div>
       <div class="form-row sorting">
         <div class="label col-auto">
-          <span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<&|/l&>Value only works for count calculations</&>"></span>
-          <&|/l&>Order by</&>:
+          <&|/l&>Order by</&>:<span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<&|/l&>Value only works for count calculations</&>"></span>
         </div>
         <div class="value col-auto">
           <select name="ChartOrderBy" class="form-control selectpicker">
@@ -290,22 +292,20 @@
         </div>
         <div class="value col-auto">
           <select name="ChartOrder" class="form-control selectpicker">
-            <option value="ASC" <% $query{ChartOrder} eq 'ASC' ? 'selected="selected"' : '' |n %>><&|/l&>ASC</&></option>
-            <option value="DESC" <% $query{ChartOrder} eq 'DESC' ? 'selected="selected"' : '' |n %>><&|/l&>DESC</&></option>
+            <option value="ASC" <% $query{ChartOrder} eq 'ASC' ? 'selected="selected"' : '' |n %>><&|/l&>Ascending</&></option>
+            <option value="DESC" <% $query{ChartOrder} eq 'DESC' ? 'selected="selected"' : '' |n %>><&|/l&>Descending</&></option>
           </select>
         </div>
-        <div class="label col-auto"><&|/l&>Limit</&>:</div>
+        <div class="label col-auto"><&|/l&>Limit chart to</&>:</div>
         <div class="value col-auto">
           <div class="input-group">
             <div class="input-group-prepend">
               <span class="input-group-text"><&|/l&>top</&></span>
             </div>
             <input name="ChartLimit" size="3" class="form-control" value="<% $query{ChartLimit} // '' %>" />
-            <div class="input-group-append">
-              <span class="input-group-text"><&|/l&>items</&></span>
-            </div>
           </div>
         </div>
+          <span class="label col-auto"><&|/l&>items</&></span>
       </div>
     </&>
 

diff --git a/share/static/css/elevator-light/boxes.css b/share/static/css/elevator-light/boxes.css
@@ -60,6 +60,10 @@
     border-radius: 0 0.25em 0 0.25em;
 }
 
+.titlebox-inner-heading {
+    color: #3858a3
+}
+
 .titlebox:hover .titlebox-title .right a,
 .titlebox:active .titlebox-title .right a {
     color: #000