Replace KResponseWindow with useKResponseWindow in Device plugin

[thesujai]

Summary

I searched for all .vue in kolibri/plugins/device, and i started to replace KResponsiveWindow with useKResponsiveWindow

For testing:

1. First Identified where ResponsiveWindow elements are are used
2. Then play with CSS class of components that will be used when windowBreakpoint is reached.
3. Then verify that the CSS tweaks is consistent with both KResponsiveWindow and userKResponsiveWindow
4. Roll back the CSS tweaks made while testing

Page Affected

• en/device/#/content
• en/device/#/content/manage_tasks
• en/device/#/content/manage_channel
• en/device/#/content/channels
• en/device/#/facilities
• en/device/#/info

…

References

Fixes #11322

Reviewer guidance

Would it be possible to add a hacktoberfest-accepted label in this PR?
Here is the link: https://hacktoberfest.com/participation/#maintainers
Its fine if for some reasons you aren't able to do so:)
…

---

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

[thesujai]

@MisRob please have a look

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b6.dev0_git.500.gab6db4aa.pex
Windows Installer (EXE)	kolibri-0.16.0b6.dev0+git.500.gab6db4aa-unsigned.exe
Debian Package	kolibri_0.16.0b6.dev0+git.500.gab6db4aa-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b6.dev0+git.500.gab6db4aa-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b6.dev0+git.500.gab6db4aa-0.1.0-debug.apk
TAR file	kolibri-0.16.0b6.dev0+git.500.gab6db4aa.tar.gz
WHL file	kolibri-0.16.0b6.dev0+git.500.gab6db4aa-py2.py3-none-any.whl

[MisRob]

@thesujai Thanks! I will review code in more detail later on, but briefly skimmed through it and looks great.

Can you recall which pages are affected? For our QA team, it'd be helpful to have a list of pages from the user-point of view, for example their URLs

[MisRob]

^ This would also helps us in your other PRs

[MisRob]

Here's a nice example #11346 (comment)

[thesujai]

Yes sure

[thesujai]

@MisRob For few changes which I did, I was not able to visually find the page in which it is reflected due to my less familiarity with the codeabse. Like file device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue and device/assets/src/views/SelectContentPage/index.vue.

[MisRob]

Thank you @thesujai, it's okay especially when you mentioned the places that you couldn't locate. I will try it out.

[MisRob]

@thesujai Could you please rebase on top of the latest develop? That should hopefully resolve failing test check.

[thesujai]

Hey @MisRob, can say a suitable method for rebasing it, last time i tried in another pr and it got messed up

[MisRob]

@thesujai Here are the guidelines #11361.

However, let's wait, we figured out meanwhile that there's more things that need to be fixed so rebase wouldn't help at this point. I will review and eventually rebase this later on.

[thesujai]

Okay @MisRob

[MisRob]

Great work @thesujai.

Code is fine, I tested all the places and haven't observed any regressions or console errors.

[MisRob]

Let's hold merging though for some time. As soon as tests are fixed on develop, I will rebase this PR and merge it.