fix(frontend): style /statistics (not finished)

Author: c0rydoras

frontend/app/components/statistic-list/bar/component.js

@@ -15,11 +15,11 @@ export default class StatisticListBar extends Component {
 
   get spentEffortsBarColor() {
     if (this.didFinishEffortsInBudget) {
-      return "strong-success";
+      return "before:bg-success";
     }
     if (this.didFinishEffortsOverBudget) {
-      return "strong-danger";
+      return "before:bg-danger";
     }
-    return "";
+    return "before:bg-primary";
   }
 }

frontend/app/components/statistic-list/bar/template.hbs

@@ -1,23 +1,22 @@
-<div class="statistic-list-bar-wrapper">
-
+<div class="statistic-list-bar-wrapper h-5 [&>*]:w-full [&>*]:h-5 [&>*]:overflow-hidden [&>*]:before:block [&>*]:before:h-full [&>*]:before:w-full [&>*]:before:-translate-x-[calc((1-var(--value))*100%)] relative [&>*]:absolute">
   <div
     ...attributes
-    class="statistic-list-bar {{ this.spentEffortsBarColor }}"
+    class="statistic-list-bar {{ this.spentEffortsBarColor }} before:rounded-r z-10"
     {{style --value=(concat @value)}}
   ></div>
   {{#if (and @remaining (lte @remaining 1))}}
     <div
       ...attributes
-      class="statistic-list-bar remaining
-        {{if (gt @remaining @goal) 'danger' 'success'}}"
+      class="statistic-list-bar remaining before:rounded-r
+        {{if (gt @remaining @goal) 'before:bg-danger' 'before:bg-success'}}"
       {{style --value=(concat @remaining)}}
     ></div>
   {{/if}}
   {{#if @goal}}
     <div
       ...attributes
-      class="statistic-list-bar-goal"
-      {{style --goal=(concat (min "0.99" @goal))}}
+      class="statistic-list-bar-goal before:border-dotted before:border-danger before:border-r-2"
+      {{style --value=(concat (min "0.99" @goal))}}
     ></div>
   {{/if}}
 </div>

frontend/app/components/statistic-list/template.hbs

@@ -1,10 +1,10 @@
 <div ...attributes>
   {{#if @data.isRunning}}
-    <div class="empty">
+    <Empty>
       <LoadingIcon />
-    </div>
+    </Empty>
   {{else if @data.last.isError}}
-    <div class="empty">
+    <Empty>
       <div>
         <FaIcon @icon="bolt" @prefix="fas" />
         <h3>Oops... Something went wrong</h3>
@@ -14,25 +14,23 @@
           Please try refreshing the page.
         </p>
       </div>
-    </div>
+    </Empty>
   {{else if @missingParams}}
-    <div class="empty">
-      <div>
-        <FaIcon @icon="magnifying-glass" @prefix="fas" />
-        <h3>Missing filter parameters</h3>
-        <p>{{this.missingParamsMessage}}</p>
-      </div>
-    </div>
+    <Empty>
+      <FaIcon @icon="magnifying-glass" @prefix="fas" />
+      <h3>Missing filter parameters</h3>
+      <p>{{this.missingParamsMessage}}</p>
+    </Empty>
   {{else if (not @data.last.value)}}
-    <div class="empty">
-      <div>
-        <FaIcon @icon="chart-bar" />
-        <h3>No statistics to display</h3>
-        <p>Maybe try loosening your filters</p>
-      </div>
-    </div>
+    <Empty>
+      <FaIcon @icon="chart-bar" />
+      <h3>No statistics to display</h3>
+      <p>Maybe try loosening your filters</p>
+    </Empty>
   {{else}}
-    <table class="table table-striped table--statistics">
+    <table
+      class="table table-striped table--statistics w-full table-collapse"
+    >
       <thead>
         <tr>
           {{#each this.columns as |column|}}
@@ -59,15 +57,18 @@
         @containerSelector=".page-content--scroll"
         as |row|
       >
-        <tr data-test-statistic-list-row>
+        <tr
+          data-test-statistic-list-row
+          class="striped [&>*]:p-2 [&>*]:align-top [&>*]:leading-5"
+        >
           {{#each this.columns as |column|}}
             <StatisticList::Column
               data-test-statistic-list-column
               @layout={{column.layout}}
               @value={{get row column.path}}
             />
           {{/each}}
-          <td>
+          <td class="w-1/2">
             {{#let
               (or row.totalRemainingEffort row.mostRecentRemainingEffort)
               as |remainingEffort|
@@ -90,15 +91,14 @@
       <tfoot>
         <tr>
           {{#each this.columns as |column index|}}
-            <td>
+            <td class="p-2">
               <strong>
                 {{#if (not index)}}
                   Total:
                 {{else if (eq column.title "Duration")}}
-                  <span class="total">{{humanize-duration
-                      this.total
-                      false
-                    }}</span>
+                  <span
+                    class="total border-double border-b-4"
+                  >{{humanize-duration this.total false}}</span>
                 {{/if}}
               </strong>
             </td>
@@ -108,4 +108,4 @@
       </tfoot>
     </table>
   {{/if}}
-</div>
+</div>

frontend/app/statistics/template.hbs

@@ -191,23 +191,22 @@
     </TaskSelection>
 
     <div>
-      <ul class="nav-tabs">
+      <NavTabs class="flex">
         {{#each this.types as |t|}}
-          <li>
-            <a
-              href="#"
+          <NavTabs::Item>
+            <NavTabs::A
               class={{if (eq t this.type) "active"}}
               {{on "click" (fn this.updateParam "type" t)}}
             >
               By
               {{t}}
-            </a>
-          </li>
+            </NavTabs::A>
+          </NavTabs::Item>
         {{/each}}
-      </ul>
+      </NavTabs>
     </div>
 
-    <div class="tab-content grid">
+    <div class="tab-content grid h-full pt-3">
       <StatisticList
         class="grid-cell"
         @data={{this.data}}
@@ -218,4 +217,4 @@
       />
     </div>
   </PagePermission>
-{{/if}}
+{{/if}}