sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-05-19 20:28:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

WIP Fix flicker when user mouses over the very leftmost edge of party member avatar (#10407)

Browse source 
* added 1px margin-right to .member-stats

* added unit test for flicker prevention style

* remove .only() from unit test

* rewrote margin test using computed style
This commit is contained in:
Hayden Betts 2018-06-27 10:07:21 -07:00 committed by Matteo Pagliazzi
parent bd5c4a08e2
commit 61001d0e9a
2 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
test/client/unit/specs/components/memberDetails.js Normal file
View file

@ -0,0 +1,23 @@
import Vue from 'vue';
import MemberDetailsComponent from 'client/components/memberDetails.vue';
describe('Members Details Component', () => {
let CTor;
let vm;
beforeEach(() => {
CTor = Vue.extend(MemberDetailsComponent);
vm = new CTor().$mount();
});
afterEach(() => {
vm.$destroy();
});
it('prevents flickering by setting a 1px margin-right on elements of class member-stats', () => {
const memberstats = vm.$el.querySelector('.member-stats');
const style = window.getComputedStyle(memberstats, null);
const marginRightProp = style.getPropertyValue('margin-right');
expect(marginRightProp).to.equal('1');
});
});

1
website/client/components/memberDetails.vue
View file

@ -48,6 +48,7 @@
.member-stats {
padding-left: 12px;
padding-right: 24px;
margin-right: 1px;
opacity: 1;
transition: width 0.15s ease-out;
}