TUM-Dev / gocast

TUMs lecture streaming service.
https://live.rbg.tum.de/
MIT License
178 stars 42 forks source link

Fixed and optimized several issues in the front end of the course settings page #1245

Closed YiranDuan721 closed 6 months ago

YiranDuan721 commented 7 months ago

1. Reset error state upon update of the "New Lecture" panel

Before: If anything failed when creating a new lecture, the alert banner "Something went wrong." will always be shown in the form, which is ambiguous.

A picture showing the wrong behaviour of the alert banner, which doesn't disappear after already left the page where the error has occurred.
Example: After a user fails to upload a VoD, they are returned to the first step of the settings, but the error message does not disappear, causing confusion.

After: The error banner disappears upon each update.

2. Correct the style of the buttons in the create-lecture-form

Before: In light mode, the button looks the same whether it is selected or not, making it difficult to notice changes after altering the options for creating a new lecture.

Button \ Button \ Button \

After: The change of style when selected can be correctly displayed in light mode.

Button \ Button \ Button \

3. On the edit-course page:

Change the style of the "continue" button when disabled to make it more obvious that it is disabled; Provide reasons for why the 'continue' button is disabled.

Before: Hard to distinct whether the "continue" button is disabled or not, in both light and dark mode.

The continue button is disabled, but not obvious - in light mode
The continue button is disabled, but not obvious - in dark mode

After: When the button is disabled, it is clearly visible; at the same time, display the reason why the button cannot be clicked above it.

The continue button is disabled, reasons shown - in light mode, 1/3 The continue button is disabled, reasons shown - in light mode, 2/3 The continue button is disabled, reasons shown - in light mode, 3/3

The continue button is disabled, reasons shown - in dark mode, 1/3 The continue button is disabled, reasons shown - in dark mode, 2/3 The continue button is disabled, reasons shown - in dark mode, 3/3

4. On edit-course page:

When copying a course, ensure the correct display of yearW for winter semesters.

Before:

After:

5. After course copy:

Add a tooltip to explain that the current page is the setting page of the newly copied course, not the original one.

Before:

After:

6. Search course on the create-course page:

Hide the search result list if the input box is then emptied, and when the input box loses focus.

7. Reset yearW to empty string when year < 2000

Before: The yearW won't be reset until another valid year (>2000) is input. The following picture shows the case when the user first inputs 2077 and then changed the value to 0.

After: Problem solved. When the year is invalid, yearW will be emptied. Also, the placeholder "25" will only be shown if "year" is displaying the placeholder "2024".

8. Placeholder of "year" for a semester-selection:

When the input field "year" gets focused when it's empty, set the placeholder as the input. This also allows the value to change from what the placeholder shows instead of 0, when the value is directly adjusted using the number increase/decrease button in the number-input field.

9. On create-course page, mark necessary field with red border if empty

This was not functioning because the line-width of the border had been incorrectly set to 0.

10. Ensure the slug of new courses is url-safe

On create-course page, restrict the characters input to the field "slug" to [a-zA-Z0-9-_.+()~] (Numbers, English characters and 7 special characters). This could prevent the course from having an invalid url.

github-actions[bot] commented 7 months ago

Your Testserver will be ready at https://1245.test.live.mm.rbg.tum.de in a few minutes.

Logins | Kurs1 | Kurs2 | Kurs3 | Kurs4 | | ---------------------------------------- | ------------------------- | ------------------------- | ------------------------- | | public | public | loggedin | enrolled | | prof1 | prof1 | prof2 | prof1
prof2 | | student1
student2
student3 | student1
student2 | student2
student3 | student1
student2 |
alexanderstephan commented 7 months ago

Looks very good so far! 👍 I still have to check the code edge cases tomorrow.

YiranDuan721 commented 6 months ago

No worries at all! Thank you for the review, Merry Christmas & have a nice holiday!