MDL-75684 mod_data: Add metadata to templates

Each template should display at the top the information about the
user who has created the entry, when it was created and modified.

Apart from that, this commit also includes:
- For the Journal preset, a link on each card entry title has been
added, to open the Single view.
- For the Resources preset, the Author field has been renamed to
"Author of resource" and the Description to "Content".
- For the Resources preset, the Author and Type fields will be
hidden in the List view for small devices.

lib/outputcomponents.php

@@ -167,9 +167,8 @@ class user_picture implements renderable {
     public $link = true;
 
     /**
-     * @var int Size in pixels. Special values are (true/1 = 100px) and
-     * (false/0 = 35px)
-     * for backward compatibility.
+     * @var int Size in pixels. Special values are (true/1 = 100px) and (false/0 = 35px) for backward compatibility.
+     * Recommended values (supporting user initials too): 16, 35, 64 and 100.
      */
     public $size = 35;
 

mod/data/classes/template.php

@@ -503,7 +503,7 @@ class template {
         if (!isset($user->picture)) {
             $user = core_user::get_user($entry->userid);
         }
-        return $OUTPUT->user_picture($user, ['courseid' => $cm->course]);
+        return $OUTPUT->user_picture($user, ['courseid' => $cm->course, 'size' => 64]);
     }
 
     /**
@@ -551,7 +551,11 @@ class template {
      * @return string the tag replacement
      */
     protected function get_tag_timeadded_replacement(stdClass $entry, bool $canmanageentry): string {
-        return userdate($entry->timecreated);
+        return html_writer::tag(
+            'span',
+            userdate($entry->timecreated, get_string('strftimedatemonthabbr', 'langconfig')),
+            ['title' => userdate($entry->timecreated)]
+        );
     }
 
     /**
@@ -562,7 +566,11 @@ class template {
      * @return string the tag replacement
      */
     protected function get_tag_timemodified_replacement(stdClass $entry, bool $canmanageentry): string {
-        return userdate($entry->timemodified);
+        return html_writer::tag(
+            'span',
+            userdate($entry->timemodified, get_string('strftimedatemonthabbr', 'langconfig')),
+            ['title' => userdate($entry->timecreated)]
+        );
     }
 
     /**

mod/data/lang/en/data.php

@@ -27,7 +27,6 @@ $string['action'] = 'Action';
 $string['actionsmenu'] = 'Actions menu';
 $string['add'] = 'Add entry';
 $string['addcomment'] = 'Add comment';
-$string['addedby'] = 'Added by';
 $string['addentries'] = 'Add entries';
 $string['addtemplate'] = 'Add entry template';
 $string['advancedsearch'] = 'Advanced search';
@@ -107,9 +106,8 @@ $string['data:viewrating'] = 'View the total rating you received';
 $string['data:writeentry'] = 'Write entries';
 $string['data:view'] = 'View database activity';
 $string['date'] = 'Date';
-$string['dateadded'] = 'Date added';
 $string['dateentered'] = 'Date entered';
-$string['datemodified'] = 'Date modified';
+$string['datemodified'] = 'Last modified: ';
 $string['defaultfielddelimiter'] = '(default is the comma character)';
 $string['defaultfieldenclosure'] = '(default is none)';
 $string['defaultsortfield'] = 'Default sort field';
@@ -459,3 +457,4 @@ $string['nolisttemplate'] = 'List template is not yet defined';
 $string['nosingletemplate'] = 'Single template is not yet defined';
 $string['blank'] = 'Blank';
 $string['savetemplate'] = 'Save template';
+$string['addedby'] = 'Added by';

mod/data/lang/en/deprecated.txt

@@ -4,3 +4,4 @@ nosingletemplate,mod_data
 nolisttemplate,mod_data
 blank,mod_data
 savetemplate,mod_data
+addedby,mod_data

mod/data/preset/imagegallery/rsstemplate.html

@@ -1,13 +1,30 @@
 <div class="imagegallery-rss">
-    <div class="d-flex">
-        <h2 class="card-title">[[title]]</h2>
-    </div>
-    <div class="imagegallery-single-body">
-        <div class="row singleentry-image">
-            <div class="col">[[image]]</div>
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
         </div>
+    </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[title]]</h2>
+
+    <div class="imagegallery-single-body">
         <div class="row singleentry-caption">
             <div class="col">[[description]]</div>
         </div>
+        <div class="row singleentry-image">
+            <div class="col">[[image]]</div>
+        </div>
     </div>
 </div>

mod/data/preset/imagegallery/singletemplate.html

@@ -1,27 +1,31 @@
 <div class="imagegallery-single">
-    <div class="d-flex">
-        <h2 class="card-title">[[title]]</h2>
-        <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
-        <div class="my-auto">##actionsmenu##</div>
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div>##actionsmenu##</div>
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
+        </div>
     </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[title]]</h2>
+
     <div class="imagegallery-single-body">
-        <div class="row">
-          <div class="col col-3 col-md-1"><strong>Author</strong></div>
-          <div class="col">##userpicture## ##user##</div>
-        </div>
-        <div class="row">
-            <div class="col col-3 col-md-1"><strong>Date added</strong></div>
-            <div class="col">##timeadded##</div>
-        </div>
-        <div class="row">
-            <div class="col col-3 col-md-1"><strong>Date modified</strong></div>
-            <div class="col">##timemodified##</div>
+        <div class="row singleentry-caption">
+            <div class="col">[[description]]</div>
         </div>
         <div class="row singleentry-image">
             <div class="col">[[image]]</div>
         </div>
-        <div class="row singleentry-caption">
-            <div class="col">[[description]]</div>
-        </div>
     </div>
 </div>

mod/data/preset/journal/listtemplate.html

@@ -1,12 +1,28 @@
 <div class="card my-3">
     <div class="card-body">
-        <div class="d-flex">
-            <h2 class="card-title">[[Title]]</h2>
-            <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
-            <div class="my-auto">##actionsmenu##</div>
+        <div class="row">
+            <div class="col-4 col-sm-8 my-auto">
+                <h2 class="card-title"><a href="##moreurl##">[[Title]]</a></h2>
+            </div>
+            <div class="col-auto ml-auto d-flex flex-row-reverse">
+                <div>##actionsmenu##</div>
+                <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+            </div>
         </div>
+
         <div class="card-text truncate-overflow mb-4">[[Content]]</div>
-        <p class="card-text">##userpicture## ##user##</p>
-        <p class="card-text">##timeadded##</p>
+        <div class="row my-4 mr-1">
+            <div class="col-auto">##userpicture##</div>
+            <div class="col">
+                <div class="row h-100">
+                    <div class="col-4 col-md-3 align-self-center">
+                        ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                    </div>
+                    <div class="col-8 col-md-6 text-right align-self-center data-timeinfo">
+                        <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
   </div>

mod/data/preset/journal/rsstemplate.html

@@ -1,20 +1,27 @@
-<div class="journal-single">
-    <div class="d-flex">
-        <h2 class="card-title">[[Title]]</h2>
-    </div>
-    <div class="journal-single-body">
-        <div class="row">
-          <div class="col col-3 col-md-1"><strong>Author</strong></div>
-          <div class="col">##userpicture## ##user##</div>
-        </div>
-        <div class="row">
-            <div class="col col-3 col-md-1"><strong>Status</strong></div>
-            <div class="col">[[Content status]]</div>
-        </div>
-        <div class="row singleentry-content">
-            <div class="col">
-                [[Content]]
+<div class="journal-rss my-5">
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
             </div>
         </div>
     </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[title]]</h2>
+
+    <div class="journal-single-body my-5">
+        <div class="singleentry-content">
+            [[Content]]
+        </div>
+    </div>
 </div>

mod/data/preset/journal/singletemplate.html

@@ -1,22 +1,28 @@
 <div class="journal-single my-5">
-    <div class="d-flex">
-        <h2 class="card-title">[[Title]]</h2>
-        <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
-        <div class="my-auto">##actionsmenu##</div>
-    </div>
-    <div class="journal-single-body my-5">
-        <div class="row">
-          <div class="col-3 col-md-1"><strong>Author</strong></div>
-          <div class="col">##userpicture## ##user##</div>
-        </div>
-        <div class="row">
-            <div class="col-3 col-md-1"><strong>Date</strong></div>
-            <div class="col">##timeadded##</div>
-        </div>
-        <div class="row singleentry-content">
-            <div class="col my-5">
-                [[Content]]
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div>##actionsmenu##</div>
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
             </div>
         </div>
     </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[title]]</h2>
+
+    <div class="journal-single-body my-5">
+        <div class="singleentry-content">
+            [[Content]]
+        </div>
+    </div>
 </div>

mod/data/preset/proposals/listtemplate.html

@@ -2,16 +2,15 @@
     <div class="card-header" role="tab" id="entry-##id##">
         <div>
             <div class="row align-middle">
-                <div class="col-4 my-auto">
+                <div class="col-4 col-sm-8 my-auto">
                     <a data-toggle="collapse" data-parent="#proposals-list" href="#collapseentry-##id##" aria-expanded="true" aria-controls="collapseentry-##id##" class="d-block">
                         <i class="fa fa-chevron-down"></i> [[Title]]
                     </a>
                  </div>
-                <div class="col-3 push my-auto">[[Status]]</div>
-                <div class="col-2 my-auto">##userpicture## ##user##</div>
-                <div class="col-3 d-flex justify-content-end">
-                    <div class="my-auto ##approvalstatusclass##">##approvalstatus##</div>
-                    <div class="ml-auto my-auto">##actionsmenu##</div>
+                <div class="col-4 col-sm-2 ml-auto my-auto">##userpicture## ##user##</div>
+                <div class="col-4 col-sm-2 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div>##actionsmenu##</div>
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
                 </div>
             </div>
         </div>

mod/data/preset/proposals/rsstemplate.html

@@ -1,24 +1,38 @@
-<div class="proposals-single">
-    <div class="d-flex">
-        <h2 class="card-title">[[Title]]</h2>
-    </div>
-    <div class="proposals-single-body">
-        <div class="row">
-          <div class="col col-3 col-md-1"><strong>Author</strong></div>
-          <div class="col">##userpicture## ##user##</div>
+<div class="proposals-rss my-5">
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
         </div>
-        <div class="row">
-            <div class="col col-3 col-md-1"><strong>Status</strong></div>
+    </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[Title]]</h2>
+
+    <div class="proposals-single-body">
+        <div class="row my-3">
+            <div class="col-3 col-md-1"><strong>Status</strong></div>
             <div class="col">[[Status]]</div>
         </div>
         <div class="row singleentry-summary">
             <div class="col">
-                <h3>Summary</h3>
+                <h3 class="my-5">Summary</h3>
                 [[Summary]]
             </div>
-        </div>        <div class="row singleentry-content">
+        </div>
+        <div class="row singleentry-content">
             <div class="col">
-                <h3>Description</h3>
+                <h3 class="my-5">Content</h3>
                 [[Content]]
             </div>
         </div>

mod/data/preset/proposals/singletemplate.html

@@ -1,25 +1,31 @@
 <div class="proposals-single my-5">
-    <div class="d-flex">
-        <h2 class="card-title">[[Title]]</h2>
-        <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
-        <div class="my-auto">##actionsmenu##</div>
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div>##actionsmenu##</div>
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
+        </div>
     </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[Title]]</h2>
+
     <div class="proposals-single-body">
-        <div class="row my-3">
-            <div class="col-3 col-md-1"><strong>Author</strong></div>
-          <div class="col">##userpicture## ##user##</div>
-        </div>
-        <div class="row my-3">
-            <div class="col-3 col-md-1"><strong>Status</strong></div>
-            <div class="col">[[Status]]</div>
-        </div>
-        <div class="row my-3">
-            <div class="col-3 col-md-1"><strong>Date added</strong></div>
-            <div class="col">##timeadded##</div>
-        </div>
-        <div class="row my-3">
-            <div class="col-3 col-md-1"><strong>Date modified</strong></div>
-            <div class="col">##timemodified##</div>
+        <div class="row singleentry-status">
+            <div class="col">
+                <h3 class="my-5">Status</h3>
+                [[Status]]
+            </div>
         </div>
         <div class="row singleentry-summary">
             <div class="col">

mod/data/preset/proposals/tests/behat/proposals_preset.feature

@@ -32,11 +32,9 @@ Feature: Users can use the Proposals preset
   Scenario: Proposals. Users view entries
     When I am on the "Student projects" "data activity" page logged in as student1
     Then I should see "Project created by student"
-    And I should see "Pending"
     And "Summary 1" "text" should exist
     And "Actions" "icon" should exist in the "#proposals-list" "css_element"
     And I should see "Project created by teacher"
-    And I should see "Rejected"
     And "Summary 2" "text" should exist
     And I click on "Project created by student" "link"
     And I click on "Project created by teacher" "link"

mod/data/preset/resources/addtemplate.html

@@ -4,7 +4,7 @@
         [[Title]]
     </div>
     <div class="form-group">
-        <div class="font-weight-bold">Author</div>
+        <div class="font-weight-bold">Author of resource</div>
         [[Author]]
     </div>
     <div class="form-group">

mod/data/preset/resources/asearchtemplate.html

@@ -14,11 +14,11 @@
             [[Title]]
         </div>
         <div class="form-group col">
-            <div class="font-weight-bold mb-2">Author</div>
+            <div class="font-weight-bold mb-2">Author of resource</div>
             [[Author]]
         </div>
         <div class="form-group col">
-            <div class="font-weight-bold mb-2">Description</div>
+            <div class="font-weight-bold mb-2">Content</div>
             [[Description]]
         </div>
         <div class="form-group col">

mod/data/preset/resources/listtemplate.html

@@ -1,7 +1,7 @@
     <tr>
       <th scope="row"><a href="##moreurl##">[[Title]]</a></th>
-      <td>[[Type]]</td>
-      <td>[[Author]]</td>
+      <td class="d-none d-md-table-cell">[[Type]]</td>
+      <td class="d-none d-md-table-cell">[[Author]]</td>
       <td>[[Web link]]</td>
       <td>##actionsmenu##</td>
     </tr>

mod/data/preset/resources/listtemplateheader.html

@@ -2,8 +2,8 @@
     <thead>
         <tr>
             <th scope="col">Title</th>
-            <th scope="col">Type</th>
-            <th scope="col">Author</th>
+            <th class="d-none d-md-table-cell" scope="col">Type</th>
+            <th class="d-none d-md-table-cell" scope="col">Author of resource</th>
             <th scope="col">Link</th>
             <th scope="col"></th>
         </tr>

mod/data/preset/resources/rsstemplate.html

@@ -1,10 +1,29 @@
-<div class="resources-single my-5">
-    <h2 class="card-title">[[Title]]</h2>
+<div class="resources-rss my-5">
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[Title]]</h2>
+
     <div class="resources-single-body my-5">
-        <div class="d-flex">
-            <div class="single-entry-header w-100">
+        <div class="d-flex flex-column flex-md-row">
+            <div class="single-entry-header w-100 pr-2">
                 <div class="row my-3">
-                    <div class="col-3 col-md-1"><strong>Author</strong></div>
+                    <div class="col-3 col-md-1"><strong>Author of resource</strong></div>
                     <div class="col-9 col-md-11">[[Author]]</div>
                   </div>
                   <div class="row my-3">
@@ -21,7 +40,7 @@
 
         <div class="row singleentry-content">
             <div class="col">
-                <h3 class="my-5">Description</h3>
+                <h3 class="my-5">Content</h3>
                 [[Description]]
             </div>
         </div>

mod/data/preset/resources/singletemplate.html

@@ -1,22 +1,39 @@
 <div class="resources-single my-5">
-    <div class="d-flex">
-        <h2 class="card-title">[[Title]]</h2>
-        <div class="ml-auto">##actionsmenu##</div>
+    <div class="row my-4">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">Last edited:</span> ##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div>##actionsmenu##</div>
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
+        </div>
     </div>
+    <hr/>
+
+    <h2 class="card-title mt-4">[[Title]]</h2>
+
     <div class="resources-single-body my-5">
         <div class="d-flex flex-column flex-md-row">
             <div class="single-entry-header w-100 pr-2">
                 <div class="row my-3">
-                    <div class="col-3 col-md-1"><strong>Author</strong></div>
-                    <div class="col-9 col-md-11">[[Author]]</div>
+                    <div class="col-3 col-md-2 font-weight-bold">Author of resource</div>
+                    <div class="col-9 col-md-auto">[[Author]]</div>
                   </div>
                   <div class="row my-3">
-                      <div class="col-3 col-md-1"><strong>Type</strong></div>
-                      <div class="col-9 col-md-11">[[Type]]</div>
+                      <div class="col-3 col-md-2 font-weight-bold">Type</div>
+                      <div class="col-9 col-md-auto">[[Type]]</div>
                   </div>
                   <div class="row my-3">
-                      <div class="col-3 col-md-1"><strong>Link</strong></div>
-                      <div class="col-9 col-md-11">[[Web link]]</div>
+                      <div class="col-3 col-md-2 font-weight-bold">Link</div>
+                      <div class="col-9 col-md-auto">[[Web link]]</div>
                   </div>
             </div>
             <div class="img-wrapper">[[Cover]]</div>
@@ -24,7 +41,7 @@
 
         <div class="row singleentry-content">
             <div class="col">
-                <h3 class="my-5">Description</h3>
+                <h3 class="my-5">Content</h3>
                 [[Description]]
             </div>
         </div>

mod/data/styles.css

@@ -162,6 +162,11 @@
     max-width: 100%;
 }
 
+/* Date information displayed in templates/presets */
+.data-timeinfo {
+    color: var(–gray);
+}
+
 /* Legacy icons */
 .dataicon,
 .portfolio-add-icon {

mod/data/templates/defaulttemplate_listtemplate.mustache

@@ -34,10 +34,25 @@
     }
 }}
 <div class="defaulttemplate-listentry my-5 p-5 card">
-    <div class="d-flex">
-        <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
-        <div>##actionsmenu##</div>
+    <div class="row my-6">
+        <div class="col-auto">##userpicture##</div>
+        <div class="col">
+            <div class="row h-100">
+                <div class="col-3 align-self-center">
+                    ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                </div>
+                <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                    <span class="font-weight-bold ">{{#str}}datemodified, mod_data{{/str}}</span>##timemodified##
+                </div>
+                <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                    <div>##actionsmenu##</div>
+                    <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                </div>
+            </div>
+        </div>
     </div>
+    <hr/>
+
     <div class="defaulttemplate-list-body">
         {{#fields}}
             <div class="row my-3 align-items-start justify-content-start">

mod/data/templates/defaulttemplate_singletemplate.mustache

@@ -34,24 +34,27 @@
     }
 }}
 <div id="defaulttemplate-single" class="my-5">
-    <div class="d-flex mt-n6">
-        <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
-        <div>##actionsmenu##</div>
-    </div>
     <div class="defaulttemplate-single-body my-5">
-        <div class="mt-4">
-            <span class="font-weight-bold">{{#str}}addedby, mod_data{{/str}}</span>
-            <p class="mt-2">##userpicture## ##user##</p>
-        </div>
-        <div class="mt-4">
-            <span class="font-weight-bold">{{#str}}dateadded, mod_data{{/str}}</span>
-            <p class="mt-2">##timeadded##</p>
-        </div>
-        <div class="mt-4">
-            <span class="font-weight-bold">{{#str}}datemodified, mod_data{{/str}}</span>
-            <p class="mt-2">##timemodified##</p>
+        <div class="row my-6">
+            <div class="col-auto">##userpicture##</div>
+            <div class="col">
+                <div class="row h-100">
+                    <div class="col-3 align-self-center">
+                        ##user##<br/><span class="data-timeinfo">##timeadded##</span>
+                    </div>
+                    <div class="col-4 col-md-6 text-right align-self-center data-timeinfo">
+                        <span class="font-weight-bold ">{{#str}}datemodified, mod_data{{/str}}</span>##timemodified##
+                    </div>
+                    <div class="col-4 col-md-3 ml-auto align-self-center d-flex flex-row-reverse">
+                        <div>##actionsmenu##</div>
+                        <div class="ml-auto my-auto ##approvalstatusclass##">##approvalstatus##</div>
+                    </div>
+                </div>
+            </div>
         </div>
+        <hr/>
 
+        <div class="my-6">
         {{#fields}}
             <div class="mt-4">
                 <span class="font-weight-bold">{{fieldname}}</span>
@@ -64,5 +67,6 @@
                 <p class="mt-2">{{.}}</p>
             </div>
         {{/tags}}
+        </div>
     </div>
 </div>

mod/data/tests/template_test.php

@@ -146,8 +146,8 @@ class template_test extends \advanced_testcase {
         // Some cooked variables for the regular expression.
         $replace = [
             '{authorfullname}' => fullname($author),
-            '{timeadded}' => userdate($entry->timecreated),
-            '{timemodified}' => userdate($entry->timemodified),
+            '{timeadded}' => userdate($entry->timecreated, get_string('strftimedatemonthabbr', 'langconfig')),
+            '{timemodified}' => userdate($entry->timemodified, get_string('strftimedatemonthabbr', 'langconfig')),
             '{fieldid}' => $field->field->id,
             '{entryid}' => $entry->id,
             '{cmid}' => $cm->id,
@@ -256,12 +256,12 @@ class template_test extends \advanced_testcase {
             ],
             'Teacher timeadded tag' => [
                 'templatecontent' => 'Some ##timeadded## tag',
-                'expected' => '|Some {timeadded} tag|',
+                'expected' => '|Some <span.*>{timeadded}</span> tag|',
                 'rolename' => 'editingteacher',
             ],
             'Teacher timemodified tag' => [
                 'templatecontent' => 'Some ##timemodified## tag',
-                'expected' => '|Some {timemodified} tag|',
+                'expected' => '|Some <span.*>{timemodified}</span> tag|',
                 'rolename' => 'editingteacher',
             ],
             'Teacher approve tag approved entry' => [
@@ -552,12 +552,12 @@ class template_test extends \advanced_testcase {
             ],
             'Student timeadded tag' => [
                 'templatecontent' => 'Some ##timeadded## tag',
-                'expected' => '|Some {timeadded} tag|',
+                'expected' => '|Some <span.*>{timeadded}</span> tag|',
                 'rolename' => 'student',
             ],
             'Student timemodified tag' => [
                 'templatecontent' => 'Some ##timemodified## tag',
-                'expected' => '|Some {timemodified} tag|',
+                'expected' => '|Some <span.*>{timemodified}</span> tag|',
                 'rolename' => 'student',
             ],
             'Student approve tag approved entry' => [

theme/boost/scss/moodle/modules.scss

@@ -1177,6 +1177,10 @@ div#dock {
         width: 35px;
         height: 35px;
     }
+    &.size-64 {
+        width: 64px;
+        height: 64px;
+    }
     &.size-100 {
         width: 100px;
         height: 100px;

theme/boost/style/moodle.css

@@ -18595,6 +18595,9 @@ div#dock {
   .userinitials.size-35 {
     width: 35px;
     height: 35px; }
+  .userinitials.size-64 {
+    width: 64px;
+    height: 64px; }
   .userinitials.size-100 {
     width: 100px;
     height: 100px;

theme/classic/style/moodle.css

@@ -18595,6 +18595,9 @@ div#dock {
   .userinitials.size-35 {
     width: 35px;
     height: 35px; }
+  .userinitials.size-64 {
+    width: 64px;
+    height: 64px; }
   .userinitials.size-100 {
     width: 100px;
     height: 100px;