Index: lams_learning/web/css/kumalive.scss =================================================================== diff -u -r375a15822889954a22d95bd07cd97a1c6e4c3d97 -r73ede1d25edfa50fa65a795350daf356ef5ba06a --- lams_learning/web/css/kumalive.scss (.../kumalive.scss) (revision 375a15822889954a22d95bd07cd97a1c6e4c3d97) +++ lams_learning/web/css/kumalive.scss (.../kumalive.scss) (revision 73ede1d25edfa50fa65a795350daf356ef5ba06a) @@ -31,43 +31,38 @@ #learnersCell { width: 100%; + padding: 0; } -@media (min-width : $screen-sm-min) { - #actionCell { - width: 350px; - height: 100vh; - border-bottom: none; - border-right: $border-thin-black; - } - #learnersCell { - width: calc(100% - 350px); - } -} - #actionCell button { width: 70%; margin-top: 10px; } +#learnersContainer { + padding-left: 15px; +} + #raiseHandContainer { display: none; margin-bottom : 10px; + padding-left: 15px; border-bottom: $border-thin-black; } .learner { display: inline-block; width: 80px; - height: 120px; - margin: 5px 5px 0 5px; + height: 80px; + margin: 5px 5px 0 0; text-align: center; display: none; } .learner .profilePictureWrapper { - width: 80px; - height: 80px; + width: 40px; + height: 40px; + margin-left: 20px; } .profilePicture { @@ -79,8 +74,8 @@ } .profilePictureHidden { - top: 40px; - left: 40px; + top: 20px; + left: 20px; width: 0; height: 0; font-size: 0; @@ -89,37 +84,29 @@ .profilePictureShown { top: 0; left: 0; - width: 80px; - height: 80px; - font-size: 80px; + width: 40px; + height: 40px; + font-size: 40px; } .name { + height: 40px; + padding-top: 5px; overflow: hidden; text-overflow: ellipsis; - padding-top: 5px; } -.learner .name { - font-size: 12px; -} - .speaker { text-align: center; - margin-bottom: 10px; } -.speaker .profilePicture{ - width: 200px; - height: 200px; - font-size: 200px; +.speaker .profilePicture { + width: 80px; + height: 80px; + font-size: 80px; margin: auto; } -.speaker .name { - font-size: 18px; -} - #teacher { display: none; } @@ -131,7 +118,7 @@ } #raiseHandPrompt i { - font-size: 140px; + font-size: 80px; } .score { @@ -144,7 +131,7 @@ } .score i { - font-size: 70px; + font-size: 40px; margin-right: 15px; cursor: pointer; } @@ -163,4 +150,60 @@ .scoreNone { color: gray; +} + +@media (min-width : $screen-sm-min) { + #actionCell { + width: 350px; + height: 100vh; + border-bottom: none; + border-right: $border-thin-black; + } + #learnersCell { + width: calc(100% - 350px); + } + + .learner { + height: 120px; + margin-right: 20px; + } + + .learner .name { + font-size: 12px; + } + + .learner .profilePictureWrapper { + width: 80px; + height: 80px; + margin-left: 0; + } + + .profilePictureHidden { + top: 40px; + left: 40px; + } + + .profilePictureShown { + width: 80px; + height: 80px; + font-size: 80px; + } + + .speaker .profilePicture { + width: 200px; + height: 200px; + font-size: 200px; + } + + .speaker .name { + font-size: 18px; + } + + #raiseHandPrompt i { + font-size: 140px; + } + + .score i { + font-size: 70px; + } } \ No newline at end of file Index: lams_learning/web/includes/javascript/kumalive.js =================================================================== diff -u -r90cfb30014e1e92e632b2d3f278c1647887a7073 -r73ede1d25edfa50fa65a795350daf356ef5ba06a --- lams_learning/web/includes/javascript/kumalive.js (.../kumalive.js) (revision 90cfb30014e1e92e632b2d3f278c1647887a7073) +++ lams_learning/web/includes/javascript/kumalive.js (.../kumalive.js) (revision 73ede1d25edfa50fa65a795350daf356ef5ba06a) @@ -420,13 +420,13 @@ .css({ 'position' : 'fixed' }).offset(profilePicture.offset()) - // animate moving speaker from learners to right panel + // animate moving speaker from learners to speaker panel .animate({ - 'left' : targetOffset.left, - 'top' : targetOffset.top, - 'width' : '200px', - 'height' : '200px', - 'font-size' : '200px' + 'left' : targetOffset.left, + 'top' : targetOffset.top, + 'width' : targetProfilePicture.css('width'), + 'height' : targetProfilePicture.css('height'), + 'font-size' : targetProfilePicture.css('font-size') }, ANIMATION_DURATION, function(){ speaker.css('visibility', 'visible'); transitionCopy.remove();