From 7e0e5b02c59412d627ee8a6ab73461a813657566 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Wed, 15 Aug 2018 11:07:46 +0800
Subject: [PATCH 1/3] MDL-62395 tool_dataprivacy: Use BS4 table classes

* Use standard Bootstrap4 table classes for the categories and purposes
  tables.
* Set w-25 for the name and description columns of the purposes table.
* Set w-50 for the description column of the categories table.
* Set a minimum width for the actions column of these tables.
---
 .../dataprivacy/templates/categories.mustache |  4 +--
 .../dataprivacy/templates/purposes.mustache   | 30 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/admin/tool/dataprivacy/templates/categories.mustache b/admin/tool/dataprivacy/templates/categories.mustache
index 523a56b1990..6ddb7f1fd97 100644
--- a/admin/tool/dataprivacy/templates/categories.mustache
+++ b/admin/tool/dataprivacy/templates/categories.mustache
@@ -56,12 +56,12 @@
             {{#pix}}t/add, moodle, {{#str}}addcategory, tool_dataprivacy{{/str}}{{/pix}}
         </button>
     </div>
-    <table class="generaltable fullwidth">
+    <table class="table table-striped table-hover">
         <caption class="accesshide">{{#str}}categorieslist, tool_dataprivacy{{/str}}</caption>
         <thead>
             <tr>
                 <th scope="col">{{#str}}name{{/str}}</th>
-                <th scope="col">{{#str}}description{{/str}}</th>
+                <th scope="col" class="w-50">{{#str}}description{{/str}}</th>
                 <th scope="col">{{#str}}actions{{/str}}</th>
             </tr>
         </thead>
diff --git a/admin/tool/dataprivacy/templates/purposes.mustache b/admin/tool/dataprivacy/templates/purposes.mustache
index fe254405606..a99589b722e 100644
--- a/admin/tool/dataprivacy/templates/purposes.mustache
+++ b/admin/tool/dataprivacy/templates/purposes.mustache
@@ -63,25 +63,25 @@
             {{#pix}}t/add, moodle, {{#str}}addpurpose, tool_dataprivacy{{/str}}{{/pix}}
         </button>
     </div>
-    <table class="generaltable fullwidth">
+    <table class="table table-striped table-hover">
         <caption class="accesshide">{{#str}}purposeslist, tool_dataprivacy{{/str}}</caption>
         <thead>
             <tr>
-                <th scope="col" class="col-md-2">{{#str}}name{{/str}}</th>
-                <th scope="col" class="col-md-3">{{#str}}description{{/str}}</th>
-                <th scope="col" class="col-md-2">{{#str}}lawfulbases, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-2">{{#str}}sensitivedatareasons, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-1">{{#str}}retentionperiod, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-1">{{#str}}protected, tool_dataprivacy{{/str}}</th>
-                <th scope="col" class="col-md-1">{{#str}}actions{{/str}}</th>
+                <th scope="col" class="w-25">{{#str}}name{{/str}}</th>
+                <th scope="col" class="w-25">{{#str}}description{{/str}}</th>
+                <th scope="col">{{#str}}lawfulbases, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}sensitivedatareasons, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}retentionperiod, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}protected, tool_dataprivacy{{/str}}</th>
+                <th scope="col">{{#str}}actions{{/str}}</th>
             </tr>
         </thead>
         <tbody>
             {{#purposes}}
             <tr data-purposeid="{{id}}">
-                <td class="col-md-2">{{{name}}}</td>
-                <td class="col-md-3">{{{description}}}</td>
-                <td class="col-md-2">
+                <td>{{{name}}}</td>
+                <td>{{{description}}}</td>
+                <td>
                     <ul>
                         {{#formattedlawfulbases}}
                             <li>
@@ -90,7 +90,7 @@
                         {{/formattedlawfulbases}}
                     </ul>
                 </td>
-                <td class="col-md-2">
+                <td>
                     <ul>
                         {{#formattedsensitivedatareasons}}
                             <li>
@@ -99,8 +99,8 @@
                         {{/formattedsensitivedatareasons}}
                     </ul>
                 </td>
-                <td class="col-md-1">{{formattedretentionperiod}}</td>
-                <td class="col-md-1">
+                <td>{{formattedretentionperiod}}</td>
+                <td>
                     {{#protected}}
                         {{#pix}}i/checked, core, {{#str}}yes{{/str}}{{/pix}}
                     {{/protected}}
@@ -108,7 +108,7 @@
                         {{#str}}no{{/str}}
                     {{/protected}}
                 </td>
-                <td class="col-md-1">
+                <td>
                     {{#actions}}
                         {{> core/action_menu}}
                     {{/actions}}

From a779b53b2fa18ad9f66887ba14503fc5514c7491 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Tue, 21 Aug 2018 17:02:39 +0800
Subject: [PATCH 2/3] MDL-62395 bootstrapbase: Add more w-XX classes for BS4
 compatibility

I added w-25, w-50 and w-75.
---
 theme/bootstrapbase/less/moodle/bs4-compat.less | 12 ++++++++++++
 theme/bootstrapbase/style/moodle.css            |  9 +++++++++
 2 files changed, 21 insertions(+)

diff --git a/theme/bootstrapbase/less/moodle/bs4-compat.less b/theme/bootstrapbase/less/moodle/bs4-compat.less
index b7a22236ea7..3fd60ca87de 100644
--- a/theme/bootstrapbase/less/moodle/bs4-compat.less
+++ b/theme/bootstrapbase/less/moodle/bs4-compat.less
@@ -312,3 +312,15 @@
 .w-100 {
     width: 100%;
 }
+
+.w-75 {
+    width: 75%;
+}
+
+.w-50 {
+    width: 50%;
+}
+
+.w-25 {
+    width: 25%;
+}
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index da4d2efb358..460e6812db3 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -22080,3 +22080,12 @@ ul.indented-list {
 .w-100 {
   width: 100%;
 }
+.w-75 {
+  width: 75%;
+}
+.w-50 {
+  width: 50%;
+}
+.w-25 {
+  width: 25%;
+}

From 20d47f1b5fe16cdf300a6ac87f8b5aced675bdc0 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Tue, 2 Oct 2018 14:43:38 +0800
Subject: [PATCH 3/3] MDL-62395 tool_dataprivacy: Purpose name and description
 in one column

* Show the purpose's name and description under one column.
---
 .../dataprivacy/templates/purposes.mustache     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/admin/tool/dataprivacy/templates/purposes.mustache b/admin/tool/dataprivacy/templates/purposes.mustache
index a99589b722e..64085300628 100644
--- a/admin/tool/dataprivacy/templates/purposes.mustache
+++ b/admin/tool/dataprivacy/templates/purposes.mustache
@@ -68,7 +68,6 @@
         <thead>
             <tr>
                 <th scope="col" class="w-25">{{#str}}name{{/str}}</th>
-                <th scope="col" class="w-25">{{#str}}description{{/str}}</th>
                 <th scope="col">{{#str}}lawfulbases, tool_dataprivacy{{/str}}</th>
                 <th scope="col">{{#str}}sensitivedatareasons, tool_dataprivacy{{/str}}</th>
                 <th scope="col">{{#str}}retentionperiod, tool_dataprivacy{{/str}}</th>
@@ -79,10 +78,18 @@
         <tbody>
             {{#purposes}}
             <tr data-purposeid="{{id}}">
-                <td>{{{name}}}</td>
-                <td>{{{description}}}</td>
                 <td>
-                    <ul>
+                    <dl>
+                        <dt>
+                            {{{name}}}
+                        </dt>
+                        <dd>
+                            {{{description}}}
+                        </dd>
+                    </dl>
+                </td>
+                <td>
+                    <ul class="list-unstyled">
                         {{#formattedlawfulbases}}
                             <li>
                                 <span>{{name}}{{# pix }} i/info, core, {{description}} {{/ pix }}</span>
@@ -91,7 +98,7 @@
                     </ul>
                 </td>
                 <td>
-                    <ul>
+                    <ul class="list-unstyled">
                         {{#formattedsensitivedatareasons}}
                             <li>
                                 <span>{{name}}{{# pix }} i/info, core, {{description}} {{/ pix }}</span>