MDL-80396 theme: Refactor media helper class dropped in BS5

abgreeve · Jan 19, 2024 · d98c7ed · d98c7ed
1 parent 810554e
commit d98c7ed
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 85 deletions.
diff --git a/admin/tool/dataprivacy/templates/request_details.mustache b/admin/tool/dataprivacy/templates/request_details.mustache
@@ -54,13 +54,13 @@
     }
 }}
 <div class="container"  data-requestid="{{id}}">
-    <div class="media">
-        <div class="media-left">
+    <div class="d-flex">
+        <div class="flex-shrink-0">
             <img class="userpicture" src="{{foruser.profileimageurl}}"
                  alt="{{#str}}pictureof, moodle, {{foruser.fullname}}{{/str}}"
                  title="{{#str}}pictureof, moodle, {{foruser.fullname}}{{/str}}" />
         </div>
-        <div class="media-body">
+        <div class="flex-grow-1 ml-3">
             <h4 class="mt-0 mb-1">
                 <a href="{{foruser.profileurl}}" title="{{#str}}viewprofile{{/str}}">{{foruser.fullname}}</a>
             </h4>

diff --git a/course/format/templates/local/content/cm/cmname.mustache b/course/format/templates/local/content/cm/cmname.mustache
@@ -55,21 +55,19 @@
     {{/activityicon}}
 
     {{! Name & Badge}}
-    <div class="activity-name-area activity-instance d-flex flex-column mr-2 ">
-        <div class="activitytitle media {{textclasses}} modtype_{{modname}} position-relative align-self-start">
-            <div class="media-body align-self-center">
-                <div class="activityname">
-                    {{#activityname}}
-                        {{$ core/inplace_editable }}
-                            {{> core/inplace_editable }}
-                        {{/ core/inplace_editable }}
-                    {{/activityname}}
-                    {{#activitybadge}}
-                        {{$ core_courseformat/local/content/cm/activitybadge }}
-                            {{> core_courseformat/local/content/cm/activitybadge }}
-                        {{/ core_courseformat/local/content/cm/activitybadge }}
-                    {{/activitybadge}}
-                </div>
+    <div class="activity-name-area activity-instance d-flex flex-column mr-2">
+        <div class="activitytitle {{textclasses}} modtype_{{modname}} position-relative align-self-start">
+            <div class="activityname">
+                {{#activityname}}
+                    {{$ core/inplace_editable }}
+                        {{> core/inplace_editable }}
+                    {{/ core/inplace_editable }}
+                {{/activityname}}
+                {{#activitybadge}}
+                    {{$ core_courseformat/local/content/cm/activitybadge }}
+                        {{> core_courseformat/local/content/cm/activitybadge }}
+                    {{/ core_courseformat/local/content/cm/activitybadge }}
+                {{/activitybadge}}
             </div>
         </div>
     </div>

diff --git a/course/format/templates/local/courseindex/placeholders.mustache b/course/format/templates/local/courseindex/placeholders.mustache
@@ -23,27 +23,27 @@
     {}
 }}
 <div data-region="loading-placeholder-content" aria-hidden="true" id="course-index-placeholder">
-    <ul class="media-list">
-        <li class="media">
-            <div class="media-body col-md-6 p-0 d-flex align-items-center">
+    <ul class="placeholders list-unstyled px-5">
+        <li>
+            <div class="col-md-6 p-0 d-flex align-items-center">
                 <div class="bg-pulse-grey rounded-circle mr-2"></div>
                 <div class="bg-pulse-grey w-100"></div>
             </div>
         </li>
-        <li class="media">
-            <div class="media-body col-md-6 p-0 d-flex align-items-center">
+        <li>
+            <div class="col-md-6 p-0 d-flex align-items-center">
                 <div class="bg-pulse-grey rounded-circle mr-2"></div>
                 <div class="bg-pulse-grey w-100"></div>
             </div>
         </li>
-        <li class="media">
-            <div class="media-body col-md-6 p-0 d-flex align-items-center">
+        <li>
+            <div class="col-md-6 p-0 d-flex align-items-center">
                 <div class="bg-pulse-grey rounded-circle mr-2"></div>
                 <div class="bg-pulse-grey w-100"></div>
             </div>
         </li>
-        <li class="media">
-            <div class="media-body col-md-6 p-0 d-flex align-items-center">
+        <li>
+            <div class="col-md-6 p-0 d-flex align-items-center">
                 <div class="bg-pulse-grey rounded-circle mr-2"></div>
                 <div class="bg-pulse-grey w-100"></div>
             </div>

diff --git a/lib/templates/local/notification/cta.mustache b/lib/templates/local/notification/cta.mustache
@@ -50,11 +50,11 @@
 }}
 
 <div class="cta alert alert-primary alert-block fade in {{ extraclasses }}" {{# region }}data-region="{{ region }}"{{/ region}}>
-    <div class="media">
-        <div class="cta-icon mr-2 icon-size-5">
+    <div class="d-flex">
+        <div class="cta-icon mr-2 icon-size-5 flex-shrink-0">
             {{# pix }} {{ icon.pix }}, {{ icon.component }} {{/ pix }}
         </div>
-        <div class="media-body align-self-center">
+        <div class="align-self-center flex-grow-1">
             {{{ message }}}<br>
             {{# actions }}
                 <a href="{{ url }}" class="link-underline aalink"

diff --git a/tag/templates/tagfeed.mustache b/tag/templates/tagfeed.mustache
@@ -38,17 +38,17 @@
     }
 
 }}
-<ul class="tag_feed media-list">
+<ul class="tag_feed">
     {{#items}}
-        <li class="media">
+        <li class="d-flex mb-1">
             {{#img}}
-                <div class="itemimage">
+                <div class="flex-shrink-0">
                     {{{img}}}
                 </div>
             {{/img}}
-            <div class="media-body">
+            <div class="flex-grow-1 px-2">
                 {{#heading}}
-                    <div class="media-heading">
+                    <div class="item-heading">
                         {{{heading}}}
                     </div>
                 {{/heading}}

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -869,21 +869,12 @@ tr.flagged-tag a {
     padding-left: 17px;
 }
 
-.tag_feed.media-list .media .itemimage {
-    float: left;
-}
-
-.tag_feed.media-list .media .itemimage img {
-    height: 35px;
-    width: 35px;
-}
-
-.tag_feed.media-list .media .media-body {
-    padding-right: 10px;
-    padding-left: 10px;
+.tag_feed img {
+    max-height: 35px;
+    max-width: 35px;
 }
 
-.tag_feed .media .muted a {
+.tag_feed .muted a {
     color: $text-muted;
 }
 

diff --git a/theme/boost/scss/moodle/courseindex.scss b/theme/boost/scss/moodle/courseindex.scss
@@ -189,7 +189,7 @@ $courseindex-item-current: $primary !default;
     }
 
     // Placeholders.
-    .media-list {
+    .placeholders {
         .rounded-circle {
             height: 1rem;
             width: 1rem;

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -23756,21 +23756,12 @@ tr.flagged-tag a {
   padding-left: 17px;
 }
 
-.tag_feed.media-list .media .itemimage {
-  float: left;
-}
-
-.tag_feed.media-list .media .itemimage img {
-  height: 35px;
-  width: 35px;
-}
-
-.tag_feed.media-list .media .media-body {
-  padding-right: 10px;
-  padding-left: 10px;
+.tag_feed img {
+  max-height: 35px;
+  max-width: 35px;
 }
 
-.tag_feed .media .muted a {
+.tag_feed .muted a {
   color: #6a737b;
 }
 
@@ -38329,11 +38320,11 @@ div.editor_atto_toolbar button .icon {
 .courseindex.editing .d-flex-noedit {
   display: flex;
 }
-.courseindex .media-list .rounded-circle {
+.courseindex .placeholders .rounded-circle {
   height: 1rem;
   width: 1rem;
 }
-.courseindex .media-list .w-100 {
+.courseindex .placeholders .w-100 {
   height: 1rem;
   margin: 0.5rem 0;
 }

diff --git a/theme/boost/templates/flat_navigation.mustache b/theme/boost/templates/flat_navigation.mustache
@@ -69,13 +69,13 @@
             <li>
                 <a class="list-group-item list-group-item-action {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" href="{{{action}}}" data-key="{{key}}" data-isexpandable="{{isexpandable}}" data-indent="{{get_indent}}" data-showdivider="{{showdivider}}" data-type="{{type}}" data-nodetype="{{nodetype}}" data-collapse="{{collapse}}" data-forceopen="{{forceopen}}" data-isactive="{{isactive}}" data-hidden="{{hidden}}" data-preceedwithhr="{{preceedwithhr}}" {{#parent.key}}data-parent-key="{{.}}"{{/parent.key}}>
                     <div class="ml-{{get_indent}}">
-                        <div class="media">
+                        <div class="d-flex">
                             {{#icon.pix}}
-                                <span class="media-left">
+                                <span class="flex-shrink-0">
                                     {{#pix}}{{{icon.pix}}}, {{{icon.component}}}, {{{icon.alt}}}{{/pix}}
                                 </span>
                             {{/icon.pix}}
-                            <span class="media-body {{#isactive}}font-weight-bold{{/isactive}}">{{{text}}}</span>
+                            <span class="flex-grow-1 ml-3 {{#isactive}}font-weight-bold{{/isactive}}">{{{text}}}</span>
                         </div>
                     </div>
                 </a>
@@ -85,13 +85,13 @@
             <li>
                 <div class="list-group-item {{#classes}}{{.}} {{/classes}}" data-key="{{key}}" data-isexpandable="{{isexpandable}}" data-indent="{{get_indent}}" data-showdivider="{{showdivider}}" data-type="{{type}}" data-nodetype="{{nodetype}}" data-collapse="{{collapse}}" data-forceopen="{{forceopen}}" data-isactive="{{isactive}}" data-hidden="{{hidden}}" data-preceedwithhr="{{preceedwithhr}}" {{#parent.key}}data-parent-key="{{.}}"{{/parent.key}}>
                     <div class="ml-{{get_indent}}">
-                        <div class="media">
+                        <div class="d-flex">
                             {{#icon.pix}}
-                                <span class="media-left">
+                                <span class="flex-shrink-0">
                                     {{#pix}}{{{icon.pix}}}, {{{icon.component}}}, {{{icon.alt}}}{{/pix}}
                                 </span>
                             {{/icon.pix}}
-                            <span class="media-body">{{{text}}}</span>
+                            <span class="flex-grow-1 ml-3">{{{text}}}</span>
                         </div>
                     </div>
                 </div>

diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt
@@ -1,6 +1,9 @@
 This file describes API changes in /theme/boost
 information provided here is intended especially for theme designers.
 
+=== 4.4 ===
+* The bootstrap ´.media´ helper class has been replaced with utility classes (´d-flex´, ´flex-shrink-´, ´flex-grow-´, ...)
+
 === 4.3 ===
 * The $activity-iconcontainer-height and $activity-iconcontainer-width variables have been changed from 50px to 52px.
 * New SCSS mixin optional_animate to animate an element unless if the user has reduced motion in their preferences.

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -23756,21 +23756,12 @@ tr.flagged-tag a {
   padding-left: 17px;
 }
 
-.tag_feed.media-list .media .itemimage {
-  float: left;
-}
-
-.tag_feed.media-list .media .itemimage img {
-  height: 35px;
-  width: 35px;
-}
-
-.tag_feed.media-list .media .media-body {
-  padding-right: 10px;
-  padding-left: 10px;
+.tag_feed img {
+  max-height: 35px;
+  max-width: 35px;
 }
 
-.tag_feed .media .muted a {
+.tag_feed .muted a {
   color: #6a737b;
 }
 
@@ -38263,11 +38254,11 @@ div.editor_atto_toolbar button .icon {
 .courseindex.editing .d-flex-noedit {
   display: flex;
 }
-.courseindex .media-list .rounded-circle {
+.courseindex .placeholders .rounded-circle {
   height: 1rem;
   width: 1rem;
 }
-.courseindex .media-list .w-100 {
+.courseindex .placeholders .w-100 {
   height: 1rem;
   margin: 0.5rem 0;
 }