search

hkajava / s2g

Students2Groups Meteor application. Noticed in Spanish conversation class that the teacher doesn't have a good method to divide students into small groups for conversation so this application will provide easy way to do that. Also testing Meteor/React technologies with this application.
MIT License
1 stars 0 forks source link

BUG: alignment of students inside small groups breaks after sign-in #93

Open hkajava opened 6 years ago

hkajava commented 6 years ago

For some weird reason the student names get misaligned after login like this (group 3): image.png

hkajava commented 6 years ago

get rid of this in RandomizeStudentGroup.jsx // TODO: get rid of this!. For some bizarre reason there is vertical offset when rendering // actual groups with a logged-in user and students coming from database... // UPDATE 2018-04-24: investigated for an hour. no luck. for some reason GSAP // does wrong transform matrix when user is logged-in. Did debug a little inside // GSAP but no luck yet. Somehow the coordinate system context gets switched // inside GSAP if (this.props.currentUser.user !== 'exampleUser') { newRelativeStudentNamePositionY -= globalAwfulHackOffsetY; }

hkajava commented 6 years ago

Made a workaround. Root cause to be found. A very nice challenge!!

This part of RandomizeStudentGroup should be fixed: // TODO: get rid of this!. For some bizarre reason there is vertical offset when rendering // actual groups with a logged-in user and students coming from database... // UPDATE 2018-04-24: investigated for an hour. no luck. for some reason GSAP // does wrong transform matrix when user is logged-in. Did debug a little inside // GSAP but no luck yet. Somehow the coordinate system context gets switched // inside GSAP if (this.props.currentUser.user !== 'exampleUser') { newRelativeStudentNamePositionY -= globalAwfulHackOffsetY;

  const longestArrayIndex =
  this.state.randomizedStudentArrayOfArrays.reduce(function(maxI, el, i, arr) {
    return el.length > arr[maxI].length ? i : maxI;
  }, 0);
  const longestArrayLength =
    this.state.randomizedStudentArrayOfArrays[longestArrayIndex].length;
  if (this.state.randomizedStudentArrayOfArrays[smallGroupNbr - 1].length < longestArrayLength) {
    // TODO: get rid of this! another horrible hack, root cause probably related
    newRelativeStudentNamePositionY += 50;
  }
}
hkajava commented 6 years ago

moving this ticket forward into Iteration 2/2018