Move budget actions out of the form
Since we aren't very consistent in the styles for submit buttons in the
admin section, it was possible to accidentally press the "Calculate
Winner Investments" link after filling in the form. This wouldn't submit
the form and so the changes wouldn't be saved.
It's also a bit confusing for users. After filling in a form, users
expect a submit button. When finding two buttons, they've got to stop to
think which one is the one they've got to press.
Furthermore, the "Calculate Winner Investments" link would work better
as a button instead of a link, for the reasons mentioned in commit
5311daadf. Since HTML forms can't be nested, that would mean treating
this button in a different way than the rest of the buttons in the
application.
Moving the link before the form solves the issue.
Since now we've got the budget actions before the budget form, we're
grouping these actions together with the "Preview" action. We're not
adding the "Publish budget" button as well to this group because it's
got an associated message.
This commit is contained in:
27
app/assets/stylesheets/admin/budgets/actions.scss
Normal file
27
app/assets/stylesheets/admin/budgets/actions.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.admin .budgets-actions {
|
||||
$gap: $line-height;
|
||||
@include flex-with-gap($gap);
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -$gap;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
margin-top: $gap;
|
||||
}
|
||||
|
||||
+ * {
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
.preview-link {
|
||||
@include has-fa-icon(eye, regular);
|
||||
@include hollow-button;
|
||||
margin-left: $gap;
|
||||
margin-top: $gap;
|
||||
|
||||
&::before {
|
||||
margin-#{$global-right}: $font-icon-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user