Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dropdown list item spacing and a couple minor spacing corrections #2140

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 10 additions & 27 deletions frontend/public/components/modals/_modals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,35 +93,18 @@
margin-top: 0;
}

.toleration-modal, .taint-modal {
&__field {
padding-top: 5px;
padding-right: 0;
}

&__delete-icon {
height: 29px;
margin-top: 7px;
@media(max-width: $screen-sm-max) {
padding: 0;
}
}
.toleration-modal__field, .taint-modal__field {
padding-top: 5px;
padding-right: 0;
}

&__dropdown {
.btn {
height: 29px;
}
li {
height: 23px;
}
}
.toleration-modal__heading, .taint-modal__heading {
margin-bottom: 0;
}

.row {
margin-bottom: 16px;
}
.toleration-modal__row, .taint-modal__row {
margin-bottom: 16px;
@media(max-width: $screen-sm-max) {
.row {
margin-bottom: 24px;
}
margin-bottom: 24px;
}
}
4 changes: 2 additions & 2 deletions frontend/public/components/modals/taints-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,14 @@ class TaintsModal extends PromiseComponent<TaintsModalProps, TaintsModalState> {
{_.isEmpty(taints)
? <EmptyBox label="Taints" />
: <React.Fragment>
<div className="row hidden-sm hidden-xs">
<div className="row taint-modal__heading hidden-sm hidden-xs">
<div className="col-sm-4 text-secondary text-uppercase">Key</div>
<div className="col-sm-3 text-secondary text-uppercase">Value</div>
<div className="col-sm-4 text-secondary text-uppercase">Effect</div>
<div className="col-sm-1 co-empty__header"></div>
</div>
{_.map(taints, (c, i) =>
<div className="row" key={i}>
<div className="row taint-modal__row" key={i}>
<div className="col-md-4 col-sm-6 col-xs-6 taint-modal__field">
<div className="hidden-md hidden-lg text-secondary text-uppercase">Key</div>
<input type="text" className="pf-c-form-control" value={c.key} onChange={(e) => this._change(e, i, 'key')} required />
Expand Down
4 changes: 2 additions & 2 deletions frontend/public/components/modals/tolerations-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ class TolerationsModal extends PromiseComponent<TolerationsModalProps, Toleratio
{_.isEmpty(tolerations)
? <EmptyBox label="Tolerations" />
: <React.Fragment>
<div className="row hidden-sm hidden-xs">
<div className="row toleration-modal__heading hidden-sm hidden-xs">
<div className="col-md-4 text-secondary text-uppercase">Key</div>
<div className="col-md-2 text-secondary text-uppercase">Operator</div>
<div className="col-md-3 text-secondary text-uppercase">Value</div>
Expand All @@ -119,7 +119,7 @@ class TolerationsModal extends PromiseComponent<TolerationsModalProps, Toleratio
</div>
{_.map(tolerations, (t, i) => {
const { key, operator, value, effect = '' } = t;
return <div className="row" key={i}>
return <div className="row toleration-modal__row" key={i}>
<div className="col-md-4 col-sm-5 col-xs-5 toleration-modal__field">
<div className="hidden-md hidden-lg text-secondary text-uppercase">Key</div>
<input type="text" className="pf-c-form-control" value={key} onChange={(e) => this._change(e, i, 'key')} readOnly={!this._isEditable(t)} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ export const MatchExpressions: React.FC<MatchExpressionsProps> = (props) => {
const changeValue = (value: string, index: number) => onChangeMatchExpressions(matchExpressions.map((exp, i) => i === index ? _.set(exp, 'value', value) : exp));

return <React.Fragment>
<div className="row hidden-sm hidden-xs">
<div className="row toleration-modal__heading hidden-sm hidden-xs">
<div className="col-md-4 text-secondary text-uppercase">Key</div>
<div className="col-md-2 text-secondary text-uppercase">Operator</div>
<div className="col-md-3 text-secondary text-uppercase">Value</div>
<div className="col-md-1"></div>
</div>
{ props.matchExpressions.map((expression, i) => <div className="row" key={i}>
{ props.matchExpressions.map((expression, i) => <div className="row toleration-modal__row" key={i}>
<div className="col-md-4 col-sm-5 col-xs-5 toleration-modal__field">
<div className="hidden-md hidden-lg text-secondary text-uppercase">Key</div>
<input
Expand Down