MDL-69945 core_calendar: let circles appear as circles

mvaraujo · Oct 16, 2020 · 32be54d · 32be54d
1 parent 149fdcf
commit 32be54d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 48 deletions.
diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache
@@ -112,7 +112,7 @@
                                                 {{/draggable}}>
 
                                                 <a data-action="view-event" data-event-id="{{id}}" href="{{url}}" title="{{name}}">
-                                                    <span class="badge badge-circle calendar_event_{{normalisedeventtype}}">
+                                                    <span class="calendar-circle calendar_event_{{normalisedeventtype}}">
                                                         &nbsp;
                                                     </span>
                                                     {{> core_calendar/event_icon}}

diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss
@@ -159,41 +159,40 @@ $calendarEventColor: #0d5ca1 !default;
                         vertical-align: initial;
                     }
 
-                    .badge {
-                        &.badge-circle {
-                            width: 12px;
-                            height: 12px;
-                            border-radius: 6px;
-                            vertical-align: middle;
-
-                            &.calendar_event_category {
-                                background-color: $calendarEventCategoryColor;
-                                border: $calendarEventCategoryBorder;
-                            }
-                            &.calendar_event_course {
-                                background-color: $calendarEventCourseColor;
-                                border: $calendarEventCourseBorder;
-                            }
+                    .calendar-circle {
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 6px;
+                        vertical-align: middle;
+                        display: inline-block;
 
-                            &.calendar_event_site {
-                                background-color: $calendarEventGlobalColor;
-                                border: $calendarEventGlobalBorder;
-                            }
+                        &.calendar_event_category {
+                            background-color: $calendarEventCategoryColor;
+                            border: $calendarEventCategoryBorder;
+                        }
+                        &.calendar_event_course {
+                            background-color: $calendarEventCourseColor;
+                            border: $calendarEventCourseBorder;
+                        }
 
-                            &.calendar_event_group {
-                                background-color: $calendarEventGroupColor;
-                                border: $calendarEventGroupBorder;
-                            }
+                        &.calendar_event_site {
+                            background-color: $calendarEventGlobalColor;
+                            border: $calendarEventGlobalBorder;
+                        }
 
-                            &.calendar_event_user {
-                                background-color: $calendarEventUserColor;
-                                border: $calendarEventUserBorder;
-                            }
+                        &.calendar_event_group {
+                            background-color: $calendarEventGroupColor;
+                            border: $calendarEventGroupBorder;
+                        }
 
-                            &.calendar_event_other {
-                                background-color: $calendarEventOtherColor;
-                                border: $calendarEventOtherBorder;
-                            }
+                        &.calendar_event_user {
+                            background-color: $calendarEventUserColor;
+                            border: $calendarEventUserBorder;
+                        }
+
+                        &.calendar_event_other {
+                            background-color: $calendarEventOtherColor;
+                            border: $calendarEventOtherBorder;
                         }
                     }
                 }

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -12840,27 +12840,28 @@ input[disabled] {
           margin-left: 0.25em;
           margin-right: 0.25em;
           vertical-align: initial; }
-        .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle {
+        .path-calendar .maincalendar .calendarmonth ul li .calendar-circle {
           width: 12px;
           height: 12px;
           border-radius: 6px;
-          vertical-align: middle; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_category {
+          vertical-align: middle;
+          display: inline-block; }
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_category {
             background-color: #e0cbe0;
             border: 2px solid #9e619f; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_course {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_course {
             background-color: #ffd3bd;
             border: 2px solid #d34600; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_site {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_site {
             background-color: #d6f8cd;
             border: 2px solid #2b8713; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_group {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_group {
             background-color: #fee7ae;
             border: 2px solid #9a6e02; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_user {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_user {
             background-color: #dce7ec;
             border: 2px solid #4e7c91; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_other {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_other {
             background-color: #ced4da;
             border: 2px solid #687889; }
     .path-calendar .maincalendar .calendarmonth td {

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -13054,27 +13054,28 @@ input[disabled] {
           margin-left: 0.25em;
           margin-right: 0.25em;
           vertical-align: initial; }
-        .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle {
+        .path-calendar .maincalendar .calendarmonth ul li .calendar-circle {
           width: 12px;
           height: 12px;
           border-radius: 6px;
-          vertical-align: middle; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_category {
+          vertical-align: middle;
+          display: inline-block; }
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_category {
             background-color: #e0cbe0;
             border: 2px solid #9e619f; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_course {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_course {
             background-color: #ffd3bd;
             border: 2px solid #d34600; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_site {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_site {
             background-color: #d6f8cd;
             border: 2px solid #2b8713; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_group {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_group {
             background-color: #fee7ae;
             border: 2px solid #9a6e02; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_user {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_user {
             background-color: #dce7ec;
             border: 2px solid #4e7c91; }
-          .path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event_other {
+          .path-calendar .maincalendar .calendarmonth ul li .calendar-circle.calendar_event_other {
             background-color: #ced4da;
             border: 2px solid #687889; }
     .path-calendar .maincalendar .calendarmonth td {