Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quiz rebase regression fixes #11661

Conversation

nucleogenesis
Copy link
Member

Summary

Fixes the "SectionEditor" side panel not displaying

Some issues w/ .value removal seem to have been the culprit here. I've also reworked some of the local state management for the form.

Fixes section tab styles

Artifact of mistaken conflict resolution.

Before image
After image

Re-applies styles from @AllanOXDi 's previous work styling the "No questions" view

Another artifact of mistakes in conflict resolution / rebasing.

Before image
After image

Reviewer guidance

QA @radinamatic

  • Tabs a11y still works as expected including:
    • Tab navigation
    • Add section button accessible
  • Post-tabs navigation
    • Options dropdown menu accessible, buttons open "Section Editor" and delete the section per their labels
    • When no questions present: The information is read out / focused appropriately
    • When no questions present: Add questions button opens a currently non-functional side panel

NOTE: The alternative "when questions are present" is not necessary to be tested here for two reasons: 1) there is no way to add questions w/out altering the code and 2) it has been tested locally and works as it did previously so it can wait for more robust testing

Code Review

Does everything make sense?


Testing checklist

  • Contributor has fully tested the PR manually
  • If there are any front-end changes, before/after screenshots are included

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

@nucleogenesis nucleogenesis added the TODO: needs review Waiting for review label Dec 19, 2023
@github-actions github-actions bot added APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend labels Dec 19, 2023
Comment on lines +110 to +131
<KGrid v-if="!activeQuestions.length" class="questions-list-label-row">
<KGridItem
class="right-side-heading"
style="padding: 0.7em 0.75em;"
>
<KButton
primary
:text="coreString('optionsLabel')"
>
<KButton
primary
:text="coreString('optionsLabel')"
>
<template #menu>
<KDropdownMenu
:primary="false"
:disabled="false"
:hasIcons="true"
:options="activeSectionActions"
@tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
@select="handleActiveSectionAction"
/>
</template>
</KButton>
</KGridItem>
</KGrid>
<template #menu>
<KDropdownMenu
:primary="false"
:disabled="false"
:hasIcons="true"
:options="activeSectionActions"
@tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
@select="handleActiveSectionAction"
/>
</template>
</KButton>
</KGridItem>
</KGrid>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: I moved this outside of the div in order to put the styles below onto that div without affecting this [Options] dropdown menu. Then I put the same v-if condition on it as the same [Options] button is displayed a little differently below.

<!-- TODO This should be a separate component like "empty section container" or something -->
<div
v-if="!activeQuestions.length"
style="text-align: center; padding: 0 0 1em 0; max-width: 350px; margin: 0 auto;"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

max-width: 350px here is to accommodate the styles represented in the Figma so that the text remains at a readable length across languages as the same text in other languages may take up much more horizontal space

Copy link
Member

@AllanOXDi AllanOXDi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@nucleogenesis nucleogenesis merged commit c372cd0 into learningequality:develop Dec 21, 2023
31 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend SIZE: medium TODO: needs review Waiting for review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants