From ac00aec239af7d8b1b5725cb6d6bf603b2f21e00 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Tue, 14 Apr 2020 14:58:02 +0200
Subject: [PATCH] MDL-68383 contentbank: improve css for content bank

---
 contentbank/templates/bankcontent.mustache | 33 +++++-----
 contentbank/templates/toolbar.mustache     |  2 +-
 lib/outputrenderers.php                    |  2 +-
 theme/boost/scss/moodle/contentbank.scss   | 72 ++++-----------------
 theme/boost/scss/moodle/core.scss          | 11 ++++
 theme/boost/scss/preset/default.scss       |  6 --
 theme/boost/style/moodle.css               | 75 ++++++----------------
 theme/classic/style/moodle.css             | 71 ++++++--------------
 8 files changed, 81 insertions(+), 191 deletions(-)

diff --git a/contentbank/templates/bankcontent.mustache b/contentbank/templates/bankcontent.mustache
index 5b1a1dd3f46..2212b81f1ad 100644
--- a/contentbank/templates/bankcontent.mustache
+++ b/contentbank/templates/bankcontent.mustache
@@ -44,27 +44,28 @@
 
 }}
 {{>core_contentbank/toolbar}}
-<div class="content-bank-container card">
+<div class="content-bank-container pb-3 border">
     <div class="content-bank">
-        <div class="cb-navbar">
+        <div class="cb-navbar bg-light p-2 border-bottom">
             {{#pix}} i/folder {{/pix}}
         </div>
-        <div class="cb-content-wrapper">
+        <div class="cb-content-wrapper d-flex flex-wrap p-2">
         {{#contents}}
-            <div class="cb-content">
-                <div class="cb-iconview">
-                    <div class="cb-file text-center position-relative">
-                        {{#link}}<a href="{{{ link }}}">{{/link}}
-                            <div style="position:relative;">
-                                <div class="cb-thumbnail text-center d-block" style="width: 110px; height: 110px;">
-                                    {{{ icon }}}
-                                </div>
-                            </div>
-                            <div class="cb-contentname-field position-absolute overflow-visible">
-                                <div class="cb-contentname text-truncate" style="width: 112px;">{{{ name }}}</div>
-                            </div>
-                        {{#link}}</a>{{/link}}
+            <div class="cb-file position-relative mb-2">
+                <div class="p-2">
+                    <div class="cb-thumbnail mb-1 text-center">
+                        {{{ icon }}}
                     </div>
+
+                    {{#link}}
+                        <a href="{{{ link }}}" class="stretched-link" title="{{{name}}}">
+                    {{/link}}
+                            <span class="cb-name word-break-all clamp-2 text-center" >
+                                {{{ name }}}
+                            </span>
+                    {{#link}}
+                        </a>
+                    {{/link}}
                 </div>
             </div>
         {{/contents}}
diff --git a/contentbank/templates/toolbar.mustache b/contentbank/templates/toolbar.mustache
index 7a041a6a6aa..9ab8024b112 100644
--- a/contentbank/templates/toolbar.mustache
+++ b/contentbank/templates/toolbar.mustache
@@ -37,7 +37,7 @@
         <div class="cb-toolbar float-sm-right">
         {{#tools}}
             {{#link}}<a href="{{{ link }}}" title="{{{ name }}}">{{/link}}
-                <div class="cb-tool btn btn-secondary btn-sm">
+                <div class="cb-tool icon-no-margin btn btn-secondary btn-lg">
                     {{#pix}} {{{ icon }}} {{/pix}}
                 </div>
             {{#link}}</a>{{/link}}
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index e4d617c1401..81e2995da32 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -2683,7 +2683,7 @@ $iconprogress
 EOD;
         if ($options->env != 'url') {
             $html .= <<<EOD
-    <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist" style="position: relative">
+    <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist border" style="position: relative">
     <div class="filepicker-filename">
         <div class="filepicker-container">$currentfile<div class="dndupload-message">$strdndenabled <br/><div class="dndupload-arrow"></div></div></div>
         <div class="dndupload-progressbars"></div>
diff --git a/theme/boost/scss/moodle/contentbank.scss b/theme/boost/scss/moodle/contentbank.scss
index 0ff38a3e543..4b075cb2cad 100644
--- a/theme/boost/scss/moodle/contentbank.scss
+++ b/theme/boost/scss/moodle/contentbank.scss
@@ -1,64 +1,16 @@
-/* Use a variable for the drawer background colors. */
-$navbar-bg: darken($body-bg, 5%) !default;
+@include media-breakpoint-down(sm) {
+    .content-bank-container .cb-file {
+        flex-basis: 50%;
+    }
+}
+
+@include media-breakpoint-up(sm) {
+    .content-bank-container .cb-file {
+        max-width: 120px;
+        min-width: 120px;
+    }
+}
 
-// Content bank
 .content-bank-container {
     min-height: 140px;
-    padding-bottom: 15px;
-    overflow: hidden;
-}
-.cb-navbar {
-    border-bottom: 1px solid #e5e5e5;
-    background-color: $navbar-bg;
-    min-height: 40px;
-    padding: 10px;
-}
-// Icon view (Content bank)
-.cb-iconview .cb-file {
-    float: left;
-    margin: 10px 10px 35px;
-}
-.cb-iconview .cb-thumbnail {
-    min-width: 110px;
-    min-height: 110px;
-    line-height: 110px;
-    border: 1px solid #fff;
-    .icon {
-        margin: 0;
-    }
-    img {
-        padding: 3px;
-        vertical-align: middle;
-    }
-}
-.cb-iconview .cb-thumbnail:hover {
-    background: #fff;
-    border: 1px solid #ddd;
-    @include box-shadow(inset 0 0 10px0 #ccc);
-}
-.cb-iconview .cb-contentname-field {
-    height: 33px;
-    word-wrap: break-word;
-    overflow: hidden;
-    .cb-contentname {
-        background: #fff;
-        padding: 5px 10px 12px;
-        min-width: 112px;
-    }
-}
-.cb-iconview .cb-file:focus,
-.cb-iconview .cb-file:hover {
-    // Undo truncating of text on hover.
-    .cb-contentname-field {
-        overflow: visible;
-        z-index: 1000;
-    }
-    .cb-contentname {
-        overflow: inherit;
-        white-space: normal;
-        text-overflow: inherit;
-    }
-}
-.content-bank-toolbar .cb-tool .icon {
-    margin: 0.5em;
 }
\ No newline at end of file
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 1334e163d39..b6f91f185f0 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2348,6 +2348,17 @@ body.h5p-embed {
     float: right !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.clamp-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+.word-break-all {
+    word-break: break-all;
+}
+
 // Emoji picker.
 $picker-width: 350px !default;
 $picker-width-xs: 320px !default;
diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
index b31e52541a3..6c6aaa03594 100644
--- a/theme/boost/scss/preset/default.scss
+++ b/theme/boost/scss/preset/default.scss
@@ -97,12 +97,6 @@ body {
     box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
 }
 
-.filemanager-container,
-.filepicker-filelist,
-.content-bank-container {
-    @extend .border;
-}
-
 // Rounded user pictures
 .userpicture {
     border-radius: 50%;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index ce4c1469ced..f4b57575757 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -6746,9 +6746,7 @@ button.bg-dark:focus {
 .bg-transparent {
   background-color: transparent !important; }
 
-.border, .filemanager-container,
-.filepicker-filelist,
-.content-bank-container {
+.border {
   border: 1px solid #dee2e6 !important; }
 
 .border-top {
@@ -11306,6 +11304,15 @@ body.h5p-embed .h5pmessages {
   float: right !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden; }
+
+.word-break-all {
+  word-break: break-all; }
+
 .emoji-picker {
   width: 350px;
   height: 400px; }
@@ -12539,59 +12546,17 @@ table.calendartable caption {
 .cal_courses_flt {
   color: #868e96; }
 
-/* Use a variable for the drawer background colors. */
+@media (max-width: 767.98px) {
+  .content-bank-container .cb-file {
+    flex-basis: 50%; } }
+
+@media (min-width: 576px) {
+  .content-bank-container .cb-file {
+    max-width: 120px;
+    min-width: 120px; } }
+
 .content-bank-container {
-  min-height: 140px;
-  padding-bottom: 15px;
-  overflow: hidden; }
-
-.cb-navbar {
-  border-bottom: 1px solid #e5e5e5;
-  background-color: #f2f2f2;
-  min-height: 40px;
-  padding: 10px; }
-
-.cb-iconview .cb-file {
-  float: left;
-  margin: 10px 10px 35px; }
-
-.cb-iconview .cb-thumbnail {
-  min-width: 110px;
-  min-height: 110px;
-  line-height: 110px;
-  border: 1px solid #fff; }
-  .cb-iconview .cb-thumbnail .icon {
-    margin: 0; }
-  .cb-iconview .cb-thumbnail img {
-    padding: 3px;
-    vertical-align: middle; }
-
-.cb-iconview .cb-thumbnail:hover {
-  background: #fff;
-  border: 1px solid #ddd; }
-
-.cb-iconview .cb-contentname-field {
-  height: 33px;
-  word-wrap: break-word;
-  overflow: hidden; }
-  .cb-iconview .cb-contentname-field .cb-contentname {
-    background: #fff;
-    padding: 5px 10px 12px;
-    min-width: 112px; }
-
-.cb-iconview .cb-file:focus .cb-contentname-field,
-.cb-iconview .cb-file:hover .cb-contentname-field {
-  overflow: visible;
-  z-index: 1000; }
-
-.cb-iconview .cb-file:focus .cb-contentname,
-.cb-iconview .cb-file:hover .cb-contentname {
-  overflow: inherit;
-  white-space: normal;
-  text-overflow: inherit; }
-
-.content-bank-toolbar .cb-tool .icon {
-  margin: 0.5em; }
+  min-height: 140px; }
 
 /* course.less */
 /* COURSE CONTENT */
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 3ec06ae9779..59ba8cb6b9f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11516,6 +11516,15 @@ body.h5p-embed .h5pmessages {
   float: right !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden; }
+
+.word-break-all {
+  word-break: break-all; }
+
 .emoji-picker {
   width: 350px;
   height: 400px; }
@@ -12750,59 +12759,17 @@ table.calendartable caption {
 .cal_courses_flt {
   color: #868e96; }
 
-/* Use a variable for the drawer background colors. */
+@media (max-width: 767.98px) {
+  .content-bank-container .cb-file {
+    flex-basis: 50%; } }
+
+@media (min-width: 576px) {
+  .content-bank-container .cb-file {
+    max-width: 120px;
+    min-width: 120px; } }
+
 .content-bank-container {
-  min-height: 140px;
-  padding-bottom: 15px;
-  overflow: hidden; }
-
-.cb-navbar {
-  border-bottom: 1px solid #e5e5e5;
-  background-color: #f2f2f2;
-  min-height: 40px;
-  padding: 10px; }
-
-.cb-iconview .cb-file {
-  float: left;
-  margin: 10px 10px 35px; }
-
-.cb-iconview .cb-thumbnail {
-  min-width: 110px;
-  min-height: 110px;
-  line-height: 110px;
-  border: 1px solid #fff; }
-  .cb-iconview .cb-thumbnail .icon {
-    margin: 0; }
-  .cb-iconview .cb-thumbnail img {
-    padding: 3px;
-    vertical-align: middle; }
-
-.cb-iconview .cb-thumbnail:hover {
-  background: #fff;
-  border: 1px solid #ddd; }
-
-.cb-iconview .cb-contentname-field {
-  height: 33px;
-  word-wrap: break-word;
-  overflow: hidden; }
-  .cb-iconview .cb-contentname-field .cb-contentname {
-    background: #fff;
-    padding: 5px 10px 12px;
-    min-width: 112px; }
-
-.cb-iconview .cb-file:focus .cb-contentname-field,
-.cb-iconview .cb-file:hover .cb-contentname-field {
-  overflow: visible;
-  z-index: 1000; }
-
-.cb-iconview .cb-file:focus .cb-contentname,
-.cb-iconview .cb-file:hover .cb-contentname {
-  overflow: inherit;
-  white-space: normal;
-  text-overflow: inherit; }
-
-.content-bank-toolbar .cb-tool .icon {
-  margin: 0.5em; }
+  min-height: 140px; }
 
 /* course.less */
 /* COURSE CONTENT */