Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-44328

Improve clean theme calendar styling

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • 2.7
    • 2.6.1
    • Calendar, Themes
    • MOODLE_26_STABLE
    • MOODLE_27_STABLE
    • MDL-44328-M27
    • Moderate
    • Hide

      Event Colour Codes:

      1. Using Clean theme, and logged in as Admin, ADD a Calendar block to the front page.
      2. If not already created, create a course and a group in that course.
      3. Create 4 different events, ie., Site, Course, Group, User, adding some text to the description. It is important that a description is added, since this helps later when testing how the event listings display.
      4. Observe that the Event's form page looks OK (there shouldn't be any differences, but check all the same).
      5. Back to the Front page observe that the block calendar shows the different events each with a different coloured background and that the date is in the center. This is how it has always looked and should not differ.
      6. Still in the block calendar, hover over each event and note that the pop-up is NOT the ugly YUI widget it was, but a nicely styled box where the title font is smaller but readable.
      7. Confirm that the pop-up displays the date and event type(s) with icon(s) and link(s) relevant to the event, and that the small icons have a gap between it and its associated link.
      8. Click on the month in the block calendar to view the Main Calendar page. Here you should see the events, in the main calendar (center page), highlighted with same colour coded backgrounds. Whereas the 'fake' blocks should have solid coloured squares same as the front page block calendar.
      9. Clicking on the event should take you a page displaying the event listings for that day.
      10. Clarify that each event listed is in a separate table that has a pale greyish background with rounded corners, and a slightly darker border.
      11. Clarify that the event description box, which used to have a solid colour, is now white with with a colour-coded border, made up of a 12px border to the left (right in RTL) and a 1px border to the remaining three sides, all in the same colour.
      12. Note the change in appearance with respect to the heading of each event, lighter font colour and slightly larger font size more in keeping with bootstrap. Note too that the control icons are top right in the header, whereas previously they where bottom right in the description box.
      13. TEST that the edit and delete controls work.
      14. Test for responsiveness. (Firefox: Tools > Web Developer > Responsive Design View). The calender should resize easily right down to about 240px width depending on the number of events.
      15. TEST as above in RTL language too.
      Show
      Event Colour Codes: Using Clean theme, and logged in as Admin, ADD a Calendar block to the front page. If not already created, create a course and a group in that course. Create 4 different events, ie., Site, Course, Group, User, adding some text to the description. It is important that a description is added, since this helps later when testing how the event listings display. Observe that the Event's form page looks OK (there shouldn't be any differences, but check all the same). Back to the Front page observe that the block calendar shows the different events each with a different coloured background and that the date is in the center. This is how it has always looked and should not differ. Still in the block calendar, hover over each event and note that the pop-up is NOT the ugly YUI widget it was, but a nicely styled box where the title font is smaller but readable. Confirm that the pop-up displays the date and event type(s) with icon(s) and link(s) relevant to the event, and that the small icons have a gap between it and its associated link. Click on the month in the block calendar to view the Main Calendar page. Here you should see the events, in the main calendar (center page), highlighted with same colour coded backgrounds. Whereas the 'fake' blocks should have solid coloured squares same as the front page block calendar. Clicking on the event should take you a page displaying the event listings for that day. Clarify that each event listed is in a separate table that has a pale greyish background with rounded corners, and a slightly darker border. Clarify that the event description box, which used to have a solid colour, is now white with with a colour-coded border, made up of a 12px border to the left (right in RTL) and a 1px border to the remaining three sides, all in the same colour. Note the change in appearance with respect to the heading of each event, lighter font colour and slightly larger font size more in keeping with bootstrap. Note too that the control icons are top right in the header, whereas previously they where bottom right in the description box. TEST that the edit and delete controls work. Test for responsiveness. (Firefox: Tools > Web Developer > Responsive Design View). The calender should resize easily right down to about 240px width depending on the number of events. TEST as above in RTL language too.

      As done for the moodle.org theme - see MDLSITE-2735.

            lazydaisy Mary Evans
            tsala Helen Foster
            Sam Hemelryk Sam Hemelryk
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Petr Skoda Petr Skoda
            Votes:
            1 Vote for this issue
            Watchers:
            10 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.