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.

Sign up for GitHub

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

Jump to bottom

Instructor home page: Improve display of card header on mobile #12279

Closed
zhaojj2209 opened this issue Mar 28, 2023 · 19 comments · Fixed by #12567
Closed

Instructor home page: Improve display of card header on mobile #12279

zhaojj2209 opened this issue Mar 28, 2023 · 19 comments · Fixed by #12567
Labels
a-UIX User Interface, User eXperience, responsiveness c.Bug Bug/defect report good first issue Easy; restricted for first-time contributors p.VeryLow Just cosmetic value only. Do only if we have spare resources.

Comments

@zhaojj2209
Copy link
Contributor

zhaojj2209 commented Mar 28, 2023 •
edited
Loading

The row display format of the card header for each course works well on desktop, but not on mobile:
photo_2023-03-28 14 00 02

Suggestion: switch to column format on mobile screen sizes, similar to the card headers for the instructor edit page (example below).
Screenshot 2023-03-28 at 15 07 46

The card header should also be changed to be buttons semantically so that they can be picked up by screen readers. For the approach, do refer to the card headers in the instructor edit sessions page.
@zhaojj2209 zhaojj2209 added a-UIX User Interface, User eXperience, responsiveness good first issue Easy; restricted for first-time contributors c.Bug Bug/defect report p.VeryLow Just cosmetic value only. Do only if we have spare resources. labels Mar 28, 2023
@ArslanYM

This comment was marked as outdated.

Sign in to view
@mud1tx
Copy link

mud1tx commented Apr 19, 2023

@zhaojj2209 I can work on this issue please assign it to me.

@zhaojj2209
Copy link
Contributor Author

@mud1tx You have requested to work on multiple issues with the good first issue label. Please choose only one issue with the good first issue label to work on, and pick issues without the label if you would like to work on subsequent issues.

We do not assign issues to contributors, feel free to submit a PR.

@mud1tx
Copy link

mud1tx commented Apr 19, 2023

@mud1tx You have requested to work on multiple issues with the good first issue label. Please choose only one issue with the good first issue label to work on, and pick issues without the label if you would like to work on subsequent issues.

We do not assign issues to contributors, feel free to submit a PR.

@zhaojj2209 I can work on this issue.

@mud1tx
Copy link

mud1tx commented Apr 19, 2023

@zhaojj2209 Can you please tell me where I can find these card codes and where can I see these cards in the localhost environment? I have already started the localhost.

@cedricongjh cedricongjh mentioned this issue Apr 19, 2023
Closed
@weiquu
Copy link
Contributor

weiquu commented Apr 19, 2023

Hi @mud1tx, as mentioned in the issue title, the cards can be found in the instructor home page (log in as instructor and click on the Home tab). Regarding the code itself, do try inspecting the webpage to find out what component is causing the issue, and afterwards find the relevant files.

Do let us know if you run into any further issues, as well as what you've tried to resolve them so that we can better assist.

@aorlandou
Copy link
Contributor

Hello, if this issue is still open can I create a PR for fixing it?

@jasonqiu212
Copy link
Contributor

@aorlandou Thank you for your interest in contributing to TEAMMATES! Someone has started working on this issue. Thus, I would suggest that you pick another good first issue to work on 👍🏻

@matiasJoao
Copy link

hi, this issue still open?

@github-actions github-actions bot mentioned this issue Jun 21, 2023
Open
@weiquu
Copy link
Contributor

weiquu commented Jun 21, 2023

Hi @matiasJoao, feel free to submit a PR for this issue

@matiasJoao
Copy link

@weiquu Thank you, i will do it

@matiasJoao
Copy link

hi, i have a question,
in several components it imports a file called api-output, however this file that would be located in types does not exist.
does anyone know anything about it?

@weiquu
Copy link
Contributor

weiquu commented Jun 26, 2023

Hi @matiasJoao, sorry for the late reply. If you've still facing this issue, could you open a discussion and post the error message? Thanks!

@zhaojj2209
Copy link
Contributor Author

zhaojj2209 commented Jun 27, 2023 •
edited
Loading

hi, i have a question, in several components it imports a file called api-output, however this file that would be located in types does not exist. does anyone know anything about it?

The file will be auto-generated once you set up the frontend dev server.

As @weiquu has mentioned, please open a discussion thread for help requests next time instead of commenting on an issue.

@AnkitaPatil2002
Copy link

if this issue is still open can i create a PR ?

@weiquu
Copy link
Contributor

weiquu commented Jul 12, 2023

Hi @AnkitaPatil2002, sure feel free to submit a PR for this issue

@Venkateeshh
Copy link

Anyone working on this issue ??

@weiquu
Copy link
Contributor

weiquu commented Jul 13, 2023

Anyone working on this issue ??

Hi, @AnkitaPatil2002 has already expressed interest, so do find another issue to work on

AnkitaPatil2002 added a commit to AnkitaPatil2002/teammates that referenced this issue Jul 13, 2023
@AnkitaPatil2002
fixed issue TEAMMATES#12279
11a0e32
@AnkitaPatil2002 AnkitaPatil2002 mentioned this issue Jul 13, 2023
Closed
AnkitaPatil2002 added a commit to AnkitaPatil2002/teammates that referenced this issue Jul 13, 2023
@AnkitaPatil2002
fixed issue TEAMMATES#12279
a0dc938
AnkitaPatil2002 added a commit to AnkitaPatil2002/teammates that referenced this issue Jul 13, 2023
@AnkitaPatil2002
fixed issue TEAMMATES#12279
9458496
AnkitaPatil2002 added a commit to AnkitaPatil2002/teammates that referenced this issue Jul 14, 2023
@AnkitaPatil2002
fixed issue on card-header(TEAMMATES#12279)
4a8fdd6
AnkitaPatil2002 added a commit to AnkitaPatil2002/teammates that referenced this issue Jul 14, 2023
@AnkitaPatil2002
fixed issue on card-header(TEAMMATES#12279)
30034c7
AnkitaPatil2002 added a commit to AnkitaPatil2002/teammates that referenced this issue Jul 14, 2023
@AnkitaPatil2002
fixed issue on card-header(TEAMMATES#12279)
bdd011a
@Mex7180
Copy link
Contributor

Mex7180 commented Aug 23, 2023

Hi, I'd be interested in tackling this issue. Is it still open? I saw that @AnkitaPatil2002 created a PR but closed it without merging it.
Greetings

@github-actions github-actions bot mentioned this issue Aug 23, 2023
Open
@Mex7180 Mex7180 mentioned this issue Aug 24, 2023
Merged
Mex7180 added a commit to Mex7180/teammates that referenced this issue Sep 12, 2023
@Mex7180
Merge branch 'master' into TEAMMATES#12279-mobile-display-course-card…
6a5b8e4 
…-header
Mex7180 added a commit to Mex7180/teammates that referenced this issue Sep 12, 2023
@Mex7180
Merge branch 'TEAMMATES#12279-mobile-display-course-card-header' of h…
686b41b 
…ttps://github.com/Mex7180/teammates into TEAMMATES#12279-mobile-display-course-card-header
Mex7180 added a commit to Mex7180/teammates that referenced this issue Sep 13, 2023
@Mex7180
Merge branch 'master' into TEAMMATES#12279-mobile-display-course-card…
d22211b 
…-header
Mex7180 added a commit to Mex7180/teammates that referenced this issue Sep 15, 2023
@Mex7180
Merge branch 'master' into TEAMMATES#12279-mobile-display-course-card…
fe9ee97 
…-header
Mex7180 added a commit to Mex7180/teammates that referenced this issue Sep 17, 2023
@Mex7180
Merge branch 'master' into TEAMMATES#12279-mobile-display-course-card…
44c879d 
…-header
cedricongjh pushed a commit that referenced this issue Sep 20, 2023
@Mex7180
[#12279] Instructor home page: Improve display of card header on mobi…
b23d47f 
…le (#12567)

* Update instructor-home-page.component.scss

Change to the mobile look. Displaying the options under the course title.

* Update instructor-home-page.component.html

* Update instructor-home-page.component.scss

* Update instructor-home-page.component.html

* Update instructor-home-page.component.html

remove border-0 class (included as div was changed to button)

* Changed card-header to button and tm-panel-chevron inside toolbar with styling

* Refactor code for lint tests and update snapshots

* Change header back to div

* Update snapshots

* Update panel-chevron.component.html

- change to button
- add accessibility attributes

* Add type attribute and update snapshots

* Update tests

- card-header to div (nested interactivity)
- remove invalid aria-attr.

* Resolve axe-tests

* Update snapshots

* Change button styling and aria-label

- set background color to inherit
- change aria-label
- update snapshots for testing

* Change active styling

* tm-rich-text-editor add role and aria-labels
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a-UIX User Interface, User eXperience, responsiveness c.Bug Bug/defect report good first issue Easy; restricted for first-time contributors p.VeryLow Just cosmetic value only. Do only if we have spare resources.
Projects
None yet
Milestone
No milestone
10 participants
@jasonqiu212 @weiquu @zhaojj2209 @aorlandou @mud1tx @Mex7180 @matiasJoao @AnkitaPatil2002 @ArslanYM @Venkateeshh