darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 15:57:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Move cancel buttons alongside submit buttons

Browse Source 
This is better because it saves vertical space for the contents of the
pop-up menu.

This commit also adds some padding to the cancel and clear buttons, to
make them easier targets to hit.
This commit is contained in:
Chris Hill-Scott
2018-12-10 17:07:30 +00:00
parent 4b305376f7
commit 0c71ca0f0e
3 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/templateFolderForm.js
View File

@@ -52,7 +52,7 @@
this.selectActionButtons(); this.selectActionButtons();
}); });
state.$el.append($cancel); state.$el.find('[type=submit]').after($cancel);
}; };
this.addClearButton = function(state) { this.addClearButton = function(state) {
@@ -71,7 +71,7 @@
this.makeButton = (text, fn) => $('<a></a>') this.makeButton = (text, fn) => $('<a></a>')
.html(text) .html(text)
.addClass('page-footer-js-cancel') .addClass('js-cancel')
.attr('tabindex', '0') .attr('tabindex', '0')
.on('click keydown', event => { .on('click keydown', event => {
event.preventDefault(); event.preventDefault();
@@ -136,7 +136,7 @@
<button class="button-secondary" value="move-to-existing-folder">Move</button> <button class="button-secondary" value="move-to-existing-folder">Move</button>
<button class="button-secondary" value="move-to-new-folder">Add to a new folder</button> <button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
<div class="template-list-selected-counter"> <div class="template-list-selected-counter">
<span class="template-list-selected-counter-count">1</span> selected &ensp; <span class="template-list-selected-counter-count">1</span> selected
</div> </div>
</div> </div>
`; `;

22
app/assets/stylesheets/components/page-footer.scss
View File

@@ -67,6 +67,10 @@
padding: 0.52632em 0.78947em 0.26316em 0.78947em; padding: 0.52632em 0.78947em 0.26316em 0.78947em;
} }
.js-cancel {
margin: 0;
}
} }
.align-button-with-textbox { .align-button-with-textbox {
@@ -86,21 +90,3 @@
} }
} }
.page-footer-js-cancel {
text-decoration: underline;
color: $govuk-blue;
cursor: pointer;
&:hover {
color: $link-hover-colour;
}
&:focus,
&:active, {
background: $yellow;
color: $govuk-blue;
outline: 3px solid $yellow;
}
}

23
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -122,3 +122,26 @@
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.js-cancel {
display: inline-block;
padding: 10px 10px 5px 10px;
margin-top: -10px;
margin-right: -10px;
text-decoration: underline;
color: $govuk-blue;
cursor: pointer;
&:hover {
color: $link-hover-colour;
}
&:focus,
&:active, {
background: $yellow;
color: $govuk-blue;
outline: none;
}
}