diff options
| author | Ian Wienand <iwienand@redhat.com> | 2022-09-19 09:18:09 +1000 |
|---|---|---|
| committer | Ian Wienand <iwienand@redhat.com> | 2022-09-19 10:59:21 +1000 |
| commit | d055bc8e73fb60969656e768fa5246dc32a511e1 (patch) | |
| tree | cd23fea5f6590239a362d8df3c7d32959ad51bab | |
| parent | f1c4e3d871fa403137ecff8ee710607ac348f2fe (diff) | |
| download | zuul-d055bc8e73fb60969656e768fa5246dc32a511e1.tar.gz | |
web: Differentiate console entries
I've noticed that when making the console page very narrow (mobile)
the entries are difficult to differentiate in their compressed form.
This proposes adding alternating colors on the play entries to
differentiate them. Since the grey is used between elements, the
highlight is modified to the the lightest blue in the PF family.
Putting a small border-radius on this makes it look a bit more
differentiated.
Change-Id: I7afcb64a5e41348f14bd297c8c8bde27312dff97
| -rw-r--r-- | web/src/containers/build/Console.jsx | 5 | ||||
| -rw-r--r-- | web/src/index.css | 7 |
2 files changed, 10 insertions, 2 deletions
diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx index 8fa79a125..94c5f6f07 100644 --- a/web/src/containers/build/Console.jsx +++ b/web/src/containers/build/Console.jsx @@ -428,7 +428,10 @@ class PlayBook extends React.Component { <DataListContent isHidden={!this.state.expanded}> {playbook.plays.map((play, idx) => ( - <DataList isCompact={true} key={this.makePlayId(play, idx)} style={{ fontSize: 'var(--pf-global--FontSize--md)' }}> + <DataList isCompact={true} + key={this.makePlayId(play, idx)} + className="zuul-console-plays" + style={{ fontSize: 'var(--pf-global--FontSize--md)' }}> <DataListItem isExpanded={this.state.playsExpanded.includes(this.makePlayId(play, idx))}> <DataListItemRow> <DataListToggle diff --git a/web/src/index.css b/web/src/index.css index 380598f95..ce5470357 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -315,9 +315,14 @@ pre.version { border: none } +.zuul-console-plays .pf-c-data-list__item:nth-child(even) { + background: var(--pf-global--BackgroundColor--200); + border-radius: 5px; +} + .zuul-console .pf-c-data-list__item:hover { - background: var(--pf-global--BackgroundColor--light-200); + background: var(--pf-global--palette--blue-50); } .zuul-console .pf-c-data-list__item:hover::before |