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

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

@@ -206,7 +206,7 @@
  </NavTabs>
  </div>
 
- <div class="tab-content grid">
+ <div class="tab-content grid h-full pt-3">
  <StatisticList
  class="grid-cell"
  @data={{this.data}}