From 2c98bfc4f41cd9f54afeeb795eb62f4ea7b35c3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20B=C3=B6sch?= <luca.boesch@bfh.ch>
Date: Thu, 15 Oct 2020 07:33:42 +0200
Subject: [PATCH] MDL-69945 core_calendar: let circles appear as circles

---
 calendar/templates/month_detailed.mustache |  2 +-
 theme/boost/scss/moodle/calendar.scss      | 59 +++++++++++-----------
 theme/boost/style/moodle.css               | 17 ++++---
 theme/classic/style/moodle.css             | 17 ++++---
 4 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache
index ba01dfef09b..e815134fc0a 100644
--- 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
index 94197890927..5d00eaf2e3e 100644
--- 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-circle {
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 6px;
+                        vertical-align: middle;
+                        display: inline-block;
 
-                            &.calendar_event_category {
-                                background-color: $calendarEventCategoryColor;
-                                border: $calendarEventCategoryBorder;
-                            }
-                            &.calendar_event_course {
-                                background-color: $calendarEventCourseColor;
-                                border: $calendarEventCourseBorder;
-                            }
+                        &.calendar_event_category {
+                            background-color: $calendarEventCategoryColor;
+                            border: $calendarEventCategoryBorder;
+                        }
+                        &.calendar_event_course {
+                            background-color: $calendarEventCourseColor;
+                            border: $calendarEventCourseBorder;
+                        }
 
-                            &.calendar_event_site {
-                                background-color: $calendarEventGlobalColor;
-                                border: $calendarEventGlobalBorder;
-                            }
+                        &.calendar_event_site {
+                            background-color: $calendarEventGlobalColor;
+                            border: $calendarEventGlobalBorder;
+                        }
 
-                            &.calendar_event_group {
-                                background-color: $calendarEventGroupColor;
-                                border: $calendarEventGroupBorder;
-                            }
+                        &.calendar_event_group {
+                            background-color: $calendarEventGroupColor;
+                            border: $calendarEventGroupBorder;
+                        }
 
-                            &.calendar_event_user {
-                                background-color: $calendarEventUserColor;
-                                border: $calendarEventUserBorder;
-                            }
+                        &.calendar_event_user {
+                            background-color: $calendarEventUserColor;
+                            border: $calendarEventUserBorder;
+                        }
 
-                            &.calendar_event_other {
-                                background-color: $calendarEventOtherColor;
-                                border: $calendarEventOtherBorder;
-                            }
+                        &.calendar_event_other {
+                            background-color: $calendarEventOtherColor;
+                            border: $calendarEventOtherBorder;
                         }
                     }
                 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 82cbcd9dc07..0873b586a99 100644
--- 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
index 95385c80b28..7f0aa129295 100644
--- 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 {