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

Improve activity card styling including rounded corners, background colour, less padding, activity name tooltip for teachers

XMLWordPrintable

    • MOODLE_403_STABLE
    • MOODLE_403_STABLE
    • MDL-78199-master
    • Hide

      Setup

      1. Download and restore the backup file
        1. This will help to check different activity layout examples.
      2. Create a user and enrol into the course as student.
      3. Create a user and enrol into the course as teacher.

      Teacher view (prototype)

      1. Login as teacher user and access the course.
      2. Confirm that elements in the activity card are displayed in the same layout/position as the prototype (both Activity cards and Text and media cards).
      3. Turn editing on and confirm that elements in the activity card are displayed in the same layout/position as the prototype.
      4. Hover/click an activity icon and confirm that a tooltip with the plugin name is displayed.
      5. Resize the browser window to a small screen size (< 576 px).
      6. Confirm that elements in activity card are displayed in the same layout position as the responsive prototype.

      Student view (prototype)

      1. Login as student user and access the course.
      2. Confirm that elements in the activity card are displayed in the same layout/position as the prototype (both Activity cards and Text and media cards).
      3. Confirm that images in the course are displayed with rounded borders.
      4. Resize the browser window to a small screen size (< 576 px).
      5. Confirm that elements in activity card are displayed in the same layout position as the responsive prototype.
      Show
      Setup Download and restore the backup file This will help to check different activity layout examples. Create a user and enrol into the course as student. Create a user and enrol into the course as teacher. Teacher view ( prototype ) Login as teacher user and access the course. Confirm that elements in the activity card are displayed in the same layout/position as the prototype (both Activity cards and Text and media cards ). Turn editing on and confirm that elements in the activity card are displayed in the same layout/position as the prototype. Hover/click an activity icon and confirm that a tooltip with the plugin name is displayed. Resize the browser window to a small screen size (< 576 px). Confirm that elements in activity card are displayed in the same layout position as the responsive prototype . Student view ( prototype ) Login as student user and access the course. Confirm that elements in the activity card are displayed in the same layout/position as the prototype (both Activity cards and Text and media cards). Confirm that images in the course are displayed with rounded borders. Resize the browser window to a small screen size (< 576 px). Confirm that elements in activity card are displayed in the same layout position as the responsive prototype .
    • 2
    • HQ 2023 Sprint i2.2 Moppies

      Implement the new proposed activity cards styles to match the prototype. This include the smaller padding, the background color, the radius of the card and any possible border color.

      This issue does not include the availability dropdown (with chevron) and the group mode icon because they will be done in a separate issue.

      Ui style

      Card border
      Color: Secondary/Gray-300 (Default) Content/Primary (Hover, Selected)
      Stroke: 1px
      Rounded borders: 16px

      Card fill
      Color: Secondary/White (Default) Secondary/Gray-100 (Hidden, Stealth) Content/Primary-light (Hover, Selected)

      Card margins
      16px (Left, right, top and bottom margins)

      Card height
      64px (Min-height)

      Text
      Activity title: Content/Copy
      File extension: Secondary/Gray-700
      Dates: Secondary/Gray-700
      Description: Content/Copy
      File info: Secondary/Gray-700

      Availability badge
      Text: Content/Copy
      Badge background: Secondary/Gray-300

      Restrictions
      Text: Content/Copy (Icon and Restrictions text), Content/Primary (Show more/less button)
      Container background: Secondary/Gray-200
      Container rounded borders: 16px

            mikelmartíncorrales Mikel Martín Corrales
            tusefomal Ferran Recio
            Amaia Anabitarte Amaia Anabitarte
            Ilya Tregubov Ilya Tregubov
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 weeks, 4 hours, 56 minutes
                2w 4h 56m

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