CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 worker section margin and reduce layout shift (#1610)

Browse Source
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2023-01-27 08:34:51 -06:00
1 parent d7f54af7e4
commit f71418732e
3 files changed
+48 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/admin/app/components/form/target/details/index.hbs
+22 -22
View File
@@ -189,28 +189,28 @@
{{#if this.showDeprecationMessage}} {{#if this.showDeprecationMessage}}
<F.Control> <F.Control>
<Hds::Alert @color='highlight' @type='inline' as |A|> <div class='migration-wrapper'>
<A.Title>{{t <Hds::Alert @color='highlight' @type='inline' as |A|>
'resources.target.workers.deprecation_message.title' <A.Title>{{t
}}</A.Title> 'resources.target.workers.deprecation_message.title'
<A.Description>{{t }}</A.Title>
'resources.target.workers.deprecation_message.description' <A.Description>{{t
}}</A.Description> 'resources.target.workers.deprecation_message.description'
</Hds::Alert> }}</A.Description>
</F.Control> </Hds::Alert>
<F.Control> <Hds::Form::TextInput::Field
<Hds::Form::TextInput::Field @value={{@model.worker_filter}}
@value={{@model.worker_filter}} @isInvalid={{@model.errors.worker_filter}}
@isInvalid={{@model.errors.worker_filter}} @type='text'
@type='text' name='worker_filter'
name='worker_filter' disabled={{true}}
disabled={{true}} {{on 'input' (set-from-event @model 'worker_filter')}}
{{on 'input' (set-from-event @model 'worker_filter')}} as |F|
as |F| >
> <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
<F.Label>{{t 'form.worker_filter.label'}}</F.Label> <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
<F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText> </Hds::Form::TextInput::Field>
</Hds::Form::TextInput::Field> </div>
</F.Control> </F.Control>
{{/if}} {{/if}}
ui/admin/app/components/ordered-series-diagram/index.hbs
+10 -8
View File
@@ -1,8 +1,10 @@
<ol ...attributes class='ordered-series-diagram'> <div class='worker-wrapper'>
{{yield <ol ...attributes class='ordered-series-diagram'>
(hash {{yield
Item=(component 'ordered-series-diagram/item') (hash
Group=(component 'ordered-series-diagram/group') Item=(component 'ordered-series-diagram/item')
) Group=(component 'ordered-series-diagram/group')
}} )
</ol> }}
</ol>
</div>
ui/admin/app/styles/app.scss
+16 -6
View File
@@ -667,14 +667,18 @@
// target worker filters // target worker filters
.target-workers { .target-workers {
margin-top: sizing.rems(xxl); margin-top: sizing.rems(xxl);
margin-bottom: sizing.rems(xxl) + sizing.rems(l); margin-bottom: sizing.rems(xl);
.hds-form-legend { .hds-form-legend {
font-size: sizing.rems(l) - sizing.rems(xxs); // 20 font-size: sizing.rems(l) - sizing.rems(xxs); // 20
} }
.hds-alert { .hds-alert {
margin-bottom: sizing.rems(l); margin-bottom: sizing.rems(l); // 16
}
.migration-wrapper {
margin: sizing.rems(m) 0 sizing.rems(m) 0;
} }
// note re Button margin: this is a temp solution, // note re Button margin: this is a temp solution,
@@ -692,9 +696,15 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
}
.target-worker-filter-explainer { .target-worker-filter-explainer {
min-height: 1rem; min-height: 4rem; // 1
margin: 1.125rem 0 1.5rem; }
.worker-wrapper {
display: flex;
align-items: center;
min-height: 11rem;
margin-top: sizing.rems(xs) - sizing.rems(xxxxs); // 10
}
} }