Fix easy-to-fix usability issues (layout on mobile, number of messages UI string, colortag behavior)

[etanttila]

Description

What?

Fix several issues that came up during last summer and fall, which are simple to fix: (1) Fix conversation panel layout on mobile (2) Fix the conversation count to include conversations from all pages, change wording order to have conversation count first, and clarify wording to better communicate that message count includes only the student messages that fit search criteria. (3) Make colortag button elements actually buttons, and add onClick-events to only those buttons

Why?

(1) Usability on mobile was bad, due to bug of conversation panel and tag panel being next to each other (2) When conversations were paginated, the conversation count calculated only those displayed on the page; the wording was also clumsy and misleading. (3) Colortag buttons in the conversation panel were spans, so they had the incorrect element type and weren't focusable (problem in keyboard navigation). Also onClick-events were added to all colortags, leading to warnings and errors when unclickable colortags were pressed.

How?

(1) Ensure that on smaller screens the conversation panel takes up the full width of the screen (i.e. fix styling), by setting flex to none and ensuring max-width is 100%. (2) Provide actual conversation count (via context) and clarify wording (3) Provide element=button as an argument to the colortag_button template tag, and add onClick event to only colortag buttons

Fixes #90 Fixes #94 Fixes #63

Testing

Remember to add or update unit tests for new features and changes.

• How to test your changes in A-plus
• How to test accessibility

What type of test did you run?

• [x] Accessibility test using the WAVE extension.
  • It doesn't add any new accessibility issues (removes some), but of course there are a ton left
• [ ] Django unit tests.
• [ ] Selenium tests.
• [ ] Other test. (Add a description below)
• [x] Manual testing.

Tested keyboard navigation, that message counts work also with pagination, and

Did you test the changes in

• [ ] Chrome
• [x] Firefox
• [ ] This pull request cannot be tested in the browser.

Think of what is affected by these changes and could become broken

Translation

• [x] Did you modify or add new strings in the user interface? (Read about how to create translation)

Programming style

• [x] Did you follow our style guides?
• [x] Did you use Python type hinting in all functions that you added or edited? (type hints for function parameters and return values)

Have you updated the README or other relevant documentation?

• [ ] documents inside the doc directory.
• [ ] README.md.
• [ ] Aplus Manual.
• [ ] Other documentation (mention below which documentation).

Is it Done?

• [ ] Reviewer has finished the code review
• [ ] After the review, the developer has made changes accordingly
• [ ] Customer/Teacher has accepted the implementation of the feature

Clean up your git commit history before submitting the pull request!