MDL-50983 templates: Create core template "columns-autoflow-1to1to1"

lib/templates/columns-autoflow-1to1to1.mustache

@@ -0,0 +1,40 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/columns-autoflow-1to1to1
+
+    Moodle columns-autoflow-1to1to1 template.
+
+    The purpose of this template is to render a template with 3 columns where the content automatically
+    flows from one column to the next in order to balance all 3 columns. Based on CSS3.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * message Content that will be displayed in three columns.
+
+    Example context (json):
+    {
+        "message": "<div class='alert alert-info'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt interdum tellus, id ullamcorper magna fringilla nec. Mauris lacinia ipsum vel mollis vehicula. Vivamus hendrerit lacinia efficitur. Sed feugiat nunc condimentum dui faucibus, nec facilisis ipsum egestas. Proin venenatis turpis nec felis molestie porttitor. Nulla et orci lectus.</div>"
+    }
+
+}}
+<div class="columns-autoflow-1to1to1">{{$ content }}{{{ message }}}{{/ content }}</div>

theme/base/style/templates.css

@@ -47,6 +47,16 @@
     margin-right: 0;
 }
 
+/* Style for template columns-autoflow-1to1to1. */
+.columns-autoflow-1to1to1 {
+    -moz-column-count: 3;
+    -webkit-column-count: 3;
+    column-count: 3;
+    -moz-column-gap: 20px;
+    -webkit-column-gap: 20px;
+    column-gap: 20px;
+}
+
 /* Responsive styles for smaller screens. */
 @media (max-width: 767px) {
     /* For column templates. */
@@ -60,4 +70,14 @@
     .dir-rtl .row-fluid [class*="span"] {
         margin-right: 0;
     }
+
+    /* Change to a single column for smaller screens.*/
+    .columns-autoflow-1to1to1 {
+        -moz-column-count: 1;
+        -webkit-column-count: 1;
+        column-count: 1;
+        -moz-column-gap: 0;
+        -webkit-column-gap: 0;
+        column-gap: 0;
+    }
 }

theme/bootstrapbase/less/moodle/templates.less

@@ -21,6 +21,18 @@
   }
 }
 
+// Style for template 3 columns auto.
+.columns-autoflow-1to1to1 {
+  .content-columns(3);
+}
+
+@media(max-width: 767px) {
+  // Change to a single column for smaller screens.
+  .columns-autoflow-1to1to1 {
+    .content-columns(1, 0);
+  }
+}
+
 @media (min-width: 768px) and (max-width: 979px) {
   // Include fluid-rtl mixin from grid namespace.
   #grid > .fluid-rtl(@fluidGridColumnWidth768, @fluidGridGutterWidth768);