Misc Perseus renderer style fixes #8714

nucleogenesis · 2021-11-16T23:10:23Z

Summary

Fix error indicated by KFixedGridItem re: too-big span (the red error rectangle)
CSS was left behind when the LearningActivityBar was moved to AssessmentWrapper - bringing it over fixes the hint tooltip going off screen and aligns the tooltip
Fix letter-spacing being set to some silly number by Perseus, resulting in smushed letters
#solutionarea is 100% width now to avoid horizontal overflow (it would be larger for no apparent reason)
Some unnecessary vertical padding removed from .problem-area

BEFORE

before.1.mp4

AFTER

after.mp4

References

No related issues (that I know of or have seen) - but spurred by notes in Slack from @radinamatic

Reviewer guidance

How does it look? Are there any kinds of exercise that I should review specifically? Some of these issues only affect those which have a grid of options and I saw no other issues with the fill-in-the-blank or drag and drop ones I have locally.

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Critical and brittle code paths are covered by unit tests

PR process

PR has the correct target branch and milestone
PR has 'needs review' or 'work-in-progress' label
If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
If this is an important user-facing change, PR or related issue has a 'changelog' label
If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

- Fix error indicated by KFixedGridItem re: too-big span (the red error rectangle) - CSS was left behind when the LearningActivityBar was moved to AssessmentWrapper - bringing it over fixes the hint tooltip going off screen and aligns the tooltip - Fix `letter-spacing` being set to some silly number by Perseus, resulting in smushed letters - #solutionarea is 100% width now to avoid horizontal overflow (it would be larger for no apparent reason) - Some unnecessary vertical padding removed from .problem-area

rtibbles

Nothing blocking - just some questions!

rtibbles · 2021-11-17T00:50:00Z

kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue

@@ -615,9 +617,10 @@
    padding-right: 16px;
  }

-  .hint-btn-container {
+  /deep/ .hint-btn-container {


Is this class still relevant any more? We've moved it out of the perseus renderer, so this might just be left over from my failing to clean it up?

Ah yep I copied this over but ought to have cut, will remove shortly

rtibbles · 2021-11-17T00:50:44Z

kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue

@@ -15,7 +15,7 @@
          />
        </div>
        <KGrid>
-          <KGridItem :layout="{ span: 8 }">
+          <KGridItem :layout="{ span: 4 }">


This does seem to produce quite a narrow display on a fairly wide screen from your animation - maybe we should conditionalize these values for different aspect ratios?

I've revised the layouts now to go :layout12={ span: 8 } to get a ~66% width on larger screens. Then the default to 100% on medium or smaller which seems to avoid having too-squished on tablet & mobile without having it too wide on a larger screens.

The below video goes from ~1100px wide down to like ~200px wide at smallest. I then show it with the hints enabled because the layout affects it.

Previously the :layout="{ span: 4 }" would be 4/12 at large, 4/8 at tablet and 4/4 at mobile - so when it was set to :layout="{span: 8}" it complained about the span exceeding the num cols available (4 at mobile size).

better-layout.mp4

radinamatic · 2021-11-18T04:33:01Z

Latest APK asset installed on Motorola G6 (Android 9):

Error	Fix	Comment	Screenshot
the red error rectangle	✔️	...	...
hint tooltip going off screen and aligns the tooltip	✅	Tooltip itself is not responsive
smushed letters	✔️	...	...
avoid horizontal overflow	⁉️	Still some overflow in other resources, not sure if it's supposed to remain in some cases
vertical padding removed	⁉️	I find that the padding around the problem area still wastes a lot of space... If margins for the rest are (around) 40px, why does the actual assessment have this huge white space around?

radinamatic · 2021-11-18T06:40:56Z

I'm also still seeing the title of the exercise being cut out and not using all the available space in the row:

1	2

nucleogenesis · 2021-11-19T23:11:40Z

@radinamatic

Improved Padding on Mobile
Title gets squished and stays that way - this is out of scope here and is more of a bug with TextTruncator that it isn't responsive. If it gets truncated too far it's always going to be that truncated until page refresh if you widen your viewport.
Horizontal overflow - I cannot replicate this with a similar exercise in the QA channel. I suspect this is going to be unique to certain questions. Hopefully the padding reduction mitigates the issue as well.

rtibbles

I don't think exercises have ever looked so good! As long as @radinamatic greenlights this, we're good to go!

radinamatic · 2021-11-19T23:35:54Z

Ooohhh, can't wait to test this on my phone... 😍
Thank you so much for making a better use of the available space!

@MisRob already took care of the squished title in #8678, so as @rtibbles said, exercises are looking goooooood!!! 🙂

rtibbles

Going to approve this to get it in, if any more issues do pop up in testing, let's open follow ups.

radinamatic · 2021-11-23T21:43:26Z

Was going to suggest exactly that, thank you! 🙏🏽

nucleogenesis added the TODO: needs review Waiting for review label Nov 16, 2021

nucleogenesis added this to the 0.15.0 milestone Nov 16, 2021

nucleogenesis requested review from radinamatic and rtibbles November 16, 2021 23:10

rtibbles reviewed Nov 17, 2021

View reviewed changes

nucleogenesis added 2 commits November 17, 2021 10:55

better layout & remove dead css

d7e7450

math fix in comment

15e4697

radinamatic mentioned this pull request Nov 18, 2021

Android App - Learn UI responsive design issues #8722

Closed

nucleogenesis added 2 commits November 18, 2021 09:42

side-by-side hint and exercise on lg screen

9937b1a

improved mobile padding on perseus renderer

40f2142

rtibbles reviewed Nov 19, 2021

View reviewed changes

rtibbles approved these changes Nov 23, 2021

View reviewed changes

rtibbles merged commit 9b9d7a3 into learningequality:release-v0.15.x Nov 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Misc Perseus renderer style fixes #8714

Misc Perseus renderer style fixes #8714

nucleogenesis commented Nov 16, 2021 •

edited

rtibbles left a comment

rtibbles Nov 17, 2021

nucleogenesis Nov 17, 2021

rtibbles Nov 17, 2021

nucleogenesis Nov 17, 2021

radinamatic commented Nov 18, 2021

radinamatic commented Nov 18, 2021

nucleogenesis commented Nov 19, 2021

rtibbles left a comment

radinamatic commented Nov 19, 2021

rtibbles left a comment

radinamatic commented Nov 23, 2021

Misc Perseus renderer style fixes #8714

Misc Perseus renderer style fixes #8714

Conversation

nucleogenesis commented Nov 16, 2021 • edited

Summary

References

Reviewer guidance

Testing checklist

PR process

Reviewer checklist

rtibbles left a comment

Choose a reason for hiding this comment

rtibbles Nov 17, 2021

Choose a reason for hiding this comment

nucleogenesis Nov 17, 2021

Choose a reason for hiding this comment

rtibbles Nov 17, 2021

Choose a reason for hiding this comment

nucleogenesis Nov 17, 2021

Choose a reason for hiding this comment

radinamatic commented Nov 18, 2021

radinamatic commented Nov 18, 2021

nucleogenesis commented Nov 19, 2021

rtibbles left a comment

Choose a reason for hiding this comment

radinamatic commented Nov 19, 2021

rtibbles left a comment

Choose a reason for hiding this comment

radinamatic commented Nov 23, 2021

nucleogenesis commented Nov 16, 2021 •

edited