From 9aa3a11d0ecd3613eeff36d6a36a2d6662a2e5a9 Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Thu, 10 Oct 2019 13:08:36 +0800
Subject: [PATCH] MDL-66770 mod_forum: change columns in discussion list table

Show the last post user, remove discussion author image, and fix
column widths to the size of the content.
---
 mod/forum/templates/discussion_list.mustache | 63 ++++++++++++--------
 theme/boost/scss/moodle/modules.scss         | 20 +++++++
 theme/boost/style/moodle.css                 | 12 ++++
 theme/classic/style/moodle.css               | 12 ++++
 4 files changed, 82 insertions(+), 25 deletions(-)

diff --git a/mod/forum/templates/discussion_list.mustache b/mod/forum/templates/discussion_list.mustache
index 30bf5791c92..8ae2552a39c 100644
--- a/mod/forum/templates/discussion_list.mustache
+++ b/mod/forum/templates/discussion_list.mustache
@@ -42,12 +42,13 @@
     }}data-gradable-itemtype="forum" {{!
     }}{{#firstgradeduserid}}data-initialuserid="{{firstgradeduserid}}" {{/firstgradeduserid}}{{!
     }}>
-    {{{groupchangemenu}}}
 
     {{#notifications}}
         {{> core/notification}}
     {{/notifications}}
 
+    {{{groupchangemenu}}}
+
     {{#forum.capabilities.create}}
         <div class="p-t-1 p-b-1">
             <a class="btn btn-primary" data-toggle="collapse" href="#collapseAddForm">
@@ -81,7 +82,7 @@
                 {{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}
             </span>
             <table
-                class="table table-hover discussion-list"
+                class="table discussion-list"
                 aria-label='{{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}'
                 aria-describedby="discussion-table-description-{{uniqid}}"
             >
@@ -105,7 +106,7 @@
                             {{/state.sortorder.isdiscussiondesc}}
                         </th>
                         {{#forum.state.groupmode}}
-                        <th scope="col" class="group">
+                        <th scope="col" class="group px-3">
                             {{#state.sortorder.isgroupdesc}}
                                 <a href="{{{forum.urls.sortgroupasc}}}" aria-label="{{#str}}discussionlistsortbygroupasc, mod_forum{{/str}}">{{#str}}group{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
                             {{/state.sortorder.isgroupdesc}}
@@ -119,7 +120,7 @@
                             {{/state.sortorder.isgroupdesc}}
                         </th>
                         {{/forum.state.groupmode}}
-                        <th scope="col" class="author">
+                        <th scope="col" class="author px-3">
                             {{#state.sortorder.isstarterdesc}}
                                 <a href="{{{forum.urls.sortstarterasc}}}" aria-label="{{#str}}discussionlistsortbystarterasc, mod_forum{{/str}}">{{#str}}startedby, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
                             {{/state.sortorder.isstarterdesc}}
@@ -132,7 +133,7 @@
                                 {{/state.sortorder.isstarterasc}}
                             {{/state.sortorder.isstarterdesc}}
                         </th>
-                        <th scope="col" class="lastpost">
+                        <th scope="col" class="lastpost px-3">
                             {{#state.sortorder.islastpostdesc}}
                                 <a href="{{{forum.urls.sortlastpostasc}}}" aria-label="{{#str}}discussionlistsortbylastpostasc, mod_forum{{/str}}">{{#str}}lastpost, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
                             {{/state.sortorder.islastpostdesc}}
@@ -146,7 +147,7 @@
                             {{/state.sortorder.islastpostdesc}}
                         </th>
                         {{#forum.capabilities.viewdiscussions}}
-                            <th scope="col" class="text-center">
+                            <th scope="col" class="text-center px-2">
                                 {{#state.sortorder.isrepliesdesc}}
                                     <a href="{{{forum.urls.sortrepliesasc}}}" aria-label="{{#str}}discussionlistsortbyrepliesasc, mod_forum{{/str}}">{{#str}}replies, mod_forum{{/str}}</a> <span class="text-primary">{{#pix}}t/downlong, core, {{#str}}desc, core{{/str}}{{/pix}}</span>
                                 {{/state.sortorder.isrepliesdesc}}
@@ -164,7 +165,7 @@
                             </th>
                         {{/forum.capabilities.viewdiscussions}}
                         {{#forum.capabilities.subscribe}}
-                            <th scope="col" class="text-center">{{#str}} subscribed, mod_forum {{/str}}</th>
+                            <th scope="col" class="text-center px-2">{{#str}} notsubscribed, mod_forum {{/str}}</th>
                         {{/forum.capabilities.subscribe}}
                         <th scope="col" class="discussionsubscription">
                             <span class="accesshide">{{#str}}actions{{/str}}</span>
@@ -213,7 +214,7 @@
                                 </div>
                             </th>
                             {{#forum.state.groupmode}}
-                                <td class="group align-middle">
+                                <td class="group align-middle fit-content limit-width px-3">
                                     {{#discussion.group}}
                                         <img alt="{{#str}} pictureof, core, {{name}} {{/str}}"
                                              class="border rounded h-auto rounded-circle grouppicture"
@@ -231,35 +232,47 @@
                                     {{/discussion.group}}
                                 </td>
                             {{/forum.state.groupmode}}
-                            <td class="author align-middle">
+                            <td class="author align-middle fit-content limit-width px-3">
                                 {{#firstpostauthor}}
-                                    <div class="d-flex flex-row">
+                                    <div class="d-flex">
                                         <div class="align-middle p-0">
                                             <img class="rounded-circle userpicture" src="{{urls.profileimage}}"
                                                  alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
                                                  title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}" >
                                         </div>
-                                        <div class="align-middle">
-                                            <div>{{fullname}}</div>
-                                            <div>
-                                                <small>{{#userdate}}{{discussion.times.created}}, {{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdate}}</small>
+                                        <div class="author-info align-middle">
+                                            <div class="mb-1 line-height-3 text-truncate">{{fullname}}</div>
+                                            <div class="line-height-3">
+                                                {{#userdate}}{{discussion.times.created}}, {{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdate}}
                                             </div>
                                         </div>
                                     </div>
                                 {{/firstpostauthor}}
                             </td>
-                            <td class="text-left align-middle">
+                            <td class="text-left align-middle fit-content limit-width px-3">
                                 {{! TODO Check q&a, eachuser }}
-                                {{#latestpostid}}
-                                    <a href="{{{discussion.urls.viewlatest}}}" title="{{#userdate}}{{discussion.times.modified}},{{#str}}strftimerecentfull{{/str}}{{/userdate}}">
-                                        {{#userdate}}
-                                            {{discussion.times.modified}}, {{#str}}strftimedateshortmonthabbr, langconfig{{/str}}
-                                        {{/userdate}}
-                                    </a>
-                                {{/latestpostid}}
+                                {{#latestpostauthor}}
+                                    <div class="d-flex">
+                                        <div class="align-middle p-0">
+                                            <img class="rounded-circle userpicture" src="{{urls.profileimage}}"
+                                                 alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
+                                                 title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}" >
+                                        </div>
+                                        <div class="author-info align-middle">
+                                            <div class="mb-1 line-height-3 text-truncate">{{fullname}}</div>
+                                            <div class="line-height-3">
+                                                {{#latestpostid}}
+                                                    <a href="{{{discussion.urls.viewlatest}}}" title="{{#userdate}}{{discussion.times.modified}},{{#str}}strftimerecentfull{{/str}}{{/userdate}}">
+                                                        {{#userdate}}{{discussion.times.created}}, {{#str}}strftimedatemonthabbr, langconfig{{/str}}{{/userdate}}
+                                                    </a>
+                                                {{/latestpostid}}
+                                            </div>
+                                        </div>
+                                    </div>
+                                {{/latestpostauthor}}
                             </td>
                             {{#forum.capabilities.viewdiscussions}}
-                                <td class="p-0 text-center align-middle">
+                                <td class="p-0 text-center align-middle fit-content px-2">
                                     <span>{{replies}}</span>
                                     {{#forum.userstate.tracked}}
                                         {{#unread}}
@@ -275,7 +288,7 @@
                                 </td>
                             {{/forum.capabilities.viewdiscussions}}
                             {{#forum.capabilities.subscribe}}
-                                <td class="text-center align-middle">
+                                <td class="text-center align-middle fit-content px-2">
                                     {{#discussion}}
                                         <span class="switch">
                                             <input
@@ -300,7 +313,7 @@
                                     {{/discussion}}
                                 </td>
                             {{/forum.capabilities.subscribe}}
-                            <td class="p-0 align-middle" data-container="discussion-summary-actions" style="width: 1px;">
+                            <td class="p-0 align-middle fit-content" data-container="discussion-summary-actions">
                                 {{#discussion}}
                                     <div class="d-flex flex-wrap justify-content-end icon-no-margin">
                                         {{#hasanyactions}}
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 2525dadc461..8fad103429e 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -174,6 +174,26 @@ select {
     margin-bottom: 0;
 }
 
+#page-mod-forum-view {
+    table {
+        .fit-content {
+            width: 1px;
+            white-space: nowrap;
+        }
+
+        .limit-width {
+            max-width: 200px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+
+            .author-info {
+                max-width: calc(100% - 35px - .5rem);
+            }
+        }
+    }
+}
+
 #page-mod-forum-discuss .discussioncontrols {
     width: auto;
     margin: 0;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 20aed1df789..8a7532858d7 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -16305,6 +16305,18 @@ select {
 .forumsearch input[type=text] {
   margin-bottom: 0; }
 
+#page-mod-forum-view table .fit-content {
+  width: 1px;
+  white-space: nowrap; }
+
+#page-mod-forum-view table .limit-width {
+  max-width: 200px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden; }
+  #page-mod-forum-view table .limit-width .author-info {
+    max-width: calc(100% - 35px - .5rem); }
+
 #page-mod-forum-discuss .discussioncontrols {
   width: auto;
   margin: 0; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 06f6444369d..0a47e472861 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -16577,6 +16577,18 @@ select {
 .forumsearch input[type=text] {
   margin-bottom: 0; }
 
+#page-mod-forum-view table .fit-content {
+  width: 1px;
+  white-space: nowrap; }
+
+#page-mod-forum-view table .limit-width {
+  max-width: 200px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden; }
+  #page-mod-forum-view table .limit-width .author-info {
+    max-width: calc(100% - 35px - .5rem); }
+
 #page-mod-forum-discuss .discussioncontrols {
   width: auto;
   margin: 0; }