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

Improve clean theme calendar styling

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.6.1
    • Fix Version/s: 2.7
    • Component/s: Calendar, Themes
    • Labels:
    • Testing Instructions:
      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.
    • Difficulty:
      Moderate
    • Affected Branches:
      MOODLE_26_STABLE
    • Fixed Branches:
      MOODLE_27_STABLE
    • Pull Master Branch:
      MDL-44328-M27

      Description

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

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                10 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  12/May/14