Teammates: Improve UI for Mobile Compatibility

[madanalogy]

Several pages within TEAMMATES are not optimised for mobile screen widths. Text gets truncated or content goes missing. This epic is aimed at improving the mobile compatibility of UI across the web application through small but many front-end edits.

• Environment: v7 Dev Environment

First Timers Only
Only first timers should be submitting PRs for this epic. Additionally, in the spirit of our contributing guidelines we will only be accepting one PR per person addressing this issue. Submitted PRs should target not more than one component (i.e. only one html file or set of html/scss/ts depending on the nature of the fix) along with any associated tests if necessary (e.g. snapshots or changes to spec.ts). An example of such a PR is #10037

Expectations
Submitted PRs should minimally include a screenshot for manual verification of the fix. Please refer to our development guideline on how to work with your copy of TEAMMATES to achieve this. PRs addressing this epic should not "Resolve" the issue but rather be "Part of" the issue (i.e. do not use GitHub auto-closing keywords with your PR). An example of this is #10052

Please also try to run the component tests locally. If the file you're working on has a snapshot, you will need to update that snapshot to pass the CI check. You can refer to the testing guide here and more information about snapshot testing here. You can refer to https://github.com/TEAMMATES/teammates/pull/9997#issuecomment-605014375 for a more involved guide if you're still encountering problems, or just put up a draft PR and ask for help :)

Working List
This list tracks the pages or components we are aware of that need mobile UI optimisation. It is not a comprehensive list, and if you find something not on this list, feel free to submit a PR or comment here in this issue for feedback! :)

• [x] Instructor Pages: Edit Feedback Session Page
• [x] Instructor Pages: Add Feedback Session Page
• [x] Instructor Pages: Course Details & Edit Pages
• [x] Instructor Pages: Course Enrol Students Page
• [x] Student Pages: Feedback Session Result Page
• [x] Session Submission Page
• [x] MCQ Single Answer Question
• [x] Rank Options Question
• [x] Webpage Bottom Banner

[Aliki-Ntouzgou]

Hello! I would like to optimize the mobile UI for the Instructor Pages: Edit Feedback Session Page!

[t-cheepeng]

Will try to do Instructor Pages: Add Feedback Session Page if no one is doing it.

[altynbeq]

I will do Instructor pages:Course details & Edit Pages

[madanalogy]

I will do Instructor pages:Course details & Edit Pages

I believe this might have been settled with #10056, so pull the latest changes and run your developer environment first to verify that there indeed is a problem before you start working :)

[altynbeq]

I have found everything, it is all ok

сб, 16 мая 2020 г. в 04:22, Altynbek Stark [e-mail]:

Hi, this might sound stupid but anyways, i have copied the latest changes
and start working on Atom, but the problem is that there are too many files
and it looks like it will take too much time till i will find the right
part that i have to fix. Could you please help me out?:) I really want to
do my best and make my contribution.

сб, 16 мая 2020 г. в 03:43, Ahmed Bahajjaj [e-mail]:

I will do Instructor pages:Course details & Edit Pages

I believe this might have been settled with #10056
https://github.com/TEAMMATES/teammates/pull/10056, so pull the latest
changes and run your developer environment first to verify that there
indeed is a problem before you start working :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/TEAMMATES/teammates/issues/10042#issuecomment-629570536,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APSXZVRVX5FKZRTUIXWV5OLRRXVS3ANCNFSM4M6OFGHA
.

[madanalogy]

at the picture one i have marked some problems with the UI, on laptops it is fine, but on a mobile and other devices all the buttons get too tine. Do you want me to fix it? сб, 16 мая 2020 г. в 04:37, Altynbek Stark [e-mail]

I don't understand what you mean by this. If you'd like, you can put up a draft PR for review to help clarify matters and also receive feedback.

[altynbeq]

Please do not pay attention to the previous emails , I have made notes with
screenshot , where I potentially see a problem. Just need your confirmation.

On Sat, May 16, 2020 at 8:19 AM Ahmed Bahajjaj [e-mail]
wrote:

at the picture one i have marked some problems with the UI, on laptops it
is fine, but on a mobile and other devices all the buttons get too tine. Do
you want me to fix it? сб, 16 мая 2020 г. в 04:37, Altynbek Stark
[email protected]:
… <#m_1894614388756091090_>
I have found everything, it is all ok сб, 16 мая 2020 г. в 04:22, Altynbek
Stark @.>: > Hi, this might sound stupid but anyways, i have copied
the latest changes > and start working on Atom, but the problem is that
there are too many files > and it looks like it will take too much time
till i will find the right > part that i have to fix. Could you please help
me out?:) I really want to > do my best and make my contribution. > > сб,
16 мая 2020 г. в 03:43, Ahmed Bahajjaj @.>: > >> I will do Instructor
pages:Course details & Edit Pages >> >> I believe this might have been
settled with #10056 https://github.com/TEAMMATES/teammates/pull/10056

<#10056 https://github.com/TEAMMATES/teammates/pull/10056>, so pull
the latest >> changes and run your developer environment first to verify
that there >> indeed is a problem before you start working :) >> >> — >>
You are receiving this because you commented. >> Reply to this email
directly, view it on GitHub >> <#10042 (comment)
https://github.com/TEAMMATES/teammates/issues/10042#issuecomment-629570536>,
or unsubscribe >>
https://github.com/notifications/unsubscribe-auth/APSXZVRVX5FKZRTUIXWV5OLRRXVS3ANCNFSM4M6OFGHA
. >> >

I don't understand what you mean by this. If you'd like, you can put up a
draft PR for review to help clarify matters and also receive feedback.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/TEAMMATES/teammates/issues/10042#issuecomment-629595766,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APSXZVSLSS7DKECFH2JI5T3RRYWAJANCNFSM4M6OFGHA
.

[zishxn]

Hi, I am interested in solving a part of this issue, if available.

[madanalogy]

Hi, I am interested in solving a part of this issue, if available.

Most of the components identified in the issue description appear to have been (or are going to be) resolved. I'd recommend exploring the application with mobile width in your developer environment with an eye out for incompatible UI

[acomanzo]

Hello, I'll work on the session submission page if it's still available.
EDIT: Since I am new to this project, can someone help me understand where this page will go and how/when the user would interact with it?

[madanalogy]

Hello, I'll work on the session submission page if it's still available.
EDIT: Since I am new to this project, can someone help me understand where this page will go and how/when the user would interact with it?

It might be worth your while to go through a typical use case with the application in your developer environment. Pretend you are an instructor with students and simulate the process of getting them to give feedback :)

[altynbeq]

have made some changes on "Instructor pages:Course details", could you please tell how to submit them or send for the review?

[madanalogy]

have made some changes on "Instructor pages:Course details", could you please tell how to submit them or send for the review?

Refer to step 4 of the fixing issues section in our development workflow

[pablo-arroyo]

Hi all, first timer here,

It seems the individual question components is still left to do,

I'd love to try to contribute on fixing this, here's a screenshot of what I believe I'd be working on :)

(I just did a pull on master and it seems this is the most recent version)

Please let me know if it's available,

[madanalogy]

Please let me know if it's available,

I don't think anyone's working on it right now, feel free to take a shot at it, let us know if you need any help yea :)

[manzurayusup]

Hi,
I see that the Session Submission Page and Individual Question Components are still not resolved. My team and I would like to take on the Submission Page part of the issue, if no one else is working on it. @madanalogy

[madanalogy]

Hi,
I see that the Session Submission Page and Individual Question Components are still not resolved. My team and I would like to take on the Submission Page part of the issue, if no one else is working on it. @madanalogy

Yeap go for it. Just some advice, I would recommend you set up the developer environment first and manually navigate to the pages to verify that they are indeed not mobile optimised. You can refer to the screenshot in https://github.com/TEAMMATES/teammates/issues/10042#issuecomment-633171425 as an example. Once you've verified the page/component in question, go ahead and submit a PR fix as per our contribution process. Keep in mind the expectations outlined in this issue's opening comment. Thank you for your effort and good luck! :)

[nodermatt]

I would pick the last remaining two components MCQ Single Answer Question and Rank Options Question if no one else is already working on them.