luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

style: add styling icons and padding to table footer buttons

Browse source
This commit is contained in:
Jai Bhagat 2021-12-23 12:23:18 -05:00
parent e5b154e295
commit 3eb34a577e
3 changed files with 40 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/app/styles/charts/colors.scss
View file

@ -6,6 +6,8 @@ $failed: $danger;
$lost: $dark; $lost: $dark;
$not-scheduled: $blue-200; $not-scheduled: $blue-200;
$degraded: $warning; $degraded: $warning;
$blocked: $danger;
$canceled: $dark;
.chart { .chart {
.queued { .queued {
@ -120,6 +122,14 @@ $degraded: $warning;
background: $degraded; background: $degraded;
} }
&.canceled {
background: $canceled;
}
&.blocked {
background: $blocked;
}
@each $name, $pair in $colors { @each $name, $pair in $colors {
$color: nth($pair, 1); $color: nth($pair, 1);

4
ui/app/styles/core/table.scss
View file

@ -269,6 +269,10 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&.with-padding {
padding: 6px;
}
.pagination { .pagination {
padding: 0; padding: 0;
margin: 0; margin: 0;

50
ui/app/templates/evaluations/index.hbs
View file

@ -1,7 +1,7 @@
{{page-title "Evaluations"}} {{page-title "Evaluations"}}
<section class="section"> <section class="section">
<div class="toolbar"> <div class="toolbar">
<div class="toolbar-item"> <div class="toolbar-item is-right-aligned">
<SingleSelectDropdown <SingleSelectDropdown
data-test-evaluation-status-facet data-test-evaluation-status-facet
@label="Status" @label="Status"
@ -85,27 +85,32 @@
</tr> </tr>
</t.body> </t.body>
</ListTable> </ListTable>
<div class="table-foot"> <div class="table-foot with-padding">
<PageSizeSelect data-test-per-page @onChange={{this.onChange}} /> <PageSizeSelect data-test-per-page @onChange={{this.onChange}} />
<button data-test-eval-refresh type="button" {{on "click" this.refresh}}> <div>
Refresh <button class="button" data-test-eval-refresh type="button" {{on "click" this.refresh}}>
</button> {{x-icon "refresh-default" class="is-text"}}
<button Refresh
data-test-eval-pagination-prev </button>
type="button" <button
disabled={{this.shouldDisablePrev}} data-test-eval-pagination-prev
{{on "click" (fn this.onPrev this.lastToken)}} type="button"
> class="button is-text is-borderless"
Prev disabled={{this.shouldDisablePrev}}
</button> {{on "click" (fn this.onPrev this.lastToken)}}
<button >
data-test-eval-pagination-next {{x-icon "chevron-left" class="is-large"}}
type="button" </button>
disabled={{this.shouldDisableNext}} <button
{{on "click" (fn this.onNext @model.meta.nextToken)}} data-test-eval-pagination-next
> type="button"
Next > class="button is-text is-borderless"
</button> disabled={{this.shouldDisableNext}}
{{on "click" (fn this.onNext @model.meta.nextToken)}}
>
{{x-icon "chevron-right" class="is-large"}}
</button>
</div>
</div> </div>
{{else}} {{else}}
<div class="boxed-section-body"> <div class="boxed-section-body">
@ -121,9 +126,6 @@
{{this.status}} {{this.status}}
</strong> </strong>
</span> </span>
<button type="button" {{on "click" this.refresh}}>
Show all evaluations
</button>
{{else}} {{else}}
<span data-test-no-eval> <span data-test-no-eval>
There are no evaluations There are no evaluations