darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-18 05:30:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make the UI more performant by not reflowing

Browse Source 
Fixes the height of the component until it’s loaded so that it doesn’t
causes the page to reflow while it’s rendering the buttons.

Stops the options being shown and then immediately hiding on initial
page load.
This commit is contained in:
Chris Hill-Scott
2016-10-11 18:11:20 +01:00
parent 8a01e6af36
commit 103e09e3a0
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/radioSelect.js
View File

@@ -5,7 +5,7 @@
let states = {
'initial': Hogan.compile(`
<div class="radio-select-column">
<label class="block-label" for="{{name}}-0">
<label class="block-label js-block-label" for="{{name}}-0">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value=""> Now
</label>
</div>
@@ -17,13 +17,13 @@
`),
'choose': Hogan.compile(`
<div class="radio-select-column">
<label class="block-label" for="{{name}}-0">
<label class="block-label js-block-label" for="{{name}}-0">
<input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now
</label>
</div>
<div class="radio-select-column">
{{#choices}}
<label class="block-label" for="{{id}}">
<label class="block-label js-block-label" for="{{id}}">
<input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" class="js-option" />
{{label}}
</label>
@@ -32,13 +32,13 @@
`),
'chosen': Hogan.compile(`
<div class="radio-select-column">
<label class="block-label" for="{{name}}-0">
<label class="block-label js-block-label" for="{{name}}-0">
<input id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now
</label>
</div>
<div class="radio-select-column">
{{#choices}}
<label class="block-label" for="{{id}}">
<label class="block-label js-block-label" for="{{id}}">
<input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
{{label}}
</label>
@@ -139,6 +139,8 @@
'name': name
});
$component.css({'height': 'auto'});
};
};