Merge branch 'MDL-50980-master' of git://github.com/junpataleta/moodle

lib/templates/columns-2to1.mustache

@@ -0,0 +1,44 @@
+{{!
+    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-2to1
+
+    Moodle columns-2to1 template.
+
+    The purpose of this template is to render 2 columns where the first column has twice the width of the second one.
+    On mobile the second column collapses underneath the first.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * col1content Column 1 contents.
+    * col2content Column 2 contents.
+
+    Example context (json):
+    {
+        "col1content": "<div class='alert alert-info'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor vulputate turpis, quis tempor arcu.</div>",
+        "col2content": "<div class='alert alert-success'>Vivamus ac orci in velit fringilla aliquam a a nisl. Cras luctus quam laoreet magna pulvinar aliquet.</div>"
+    }
+}}
+<div class="row-fluid rtl-compatible">
+    <div class="span8">{{$ column1 }}{{{ col1content }}}{{/ column1 }}</div>
+    <div class="span4">{{$ column2 }}{{{ col2content }}}{{/ column2 }}</div>
+</div>

theme/base/config.php

@@ -49,7 +49,8 @@ $THEME->sheets = array(
     'question',
     'user',
     'tabs',
-    'filemanager'
+    'filemanager',
+    'templates'
 );
 
 $THEME->editor_sheets = array('editor');

theme/base/style/templates.css

@@ -0,0 +1,63 @@
+/* Template styles for base theme. */
+
+/* Styles for column templates. */
+.row-fluid {
+    width: 100%;
+}
+
+.row-fluid::before {
+    display: table;
+    content: "";
+    line-height: 0;
+}
+
+.row-fluid::after {
+    display: table;
+    content: "";
+    line-height: 0;
+    clear: both;
+}
+
+.row-fluid [class*="span"] {
+    float: left;
+    margin-left: 1%;
+    margin-right: 0;
+}
+
+.row-fluid [class*="span"]:first-child {
+    margin-left: 0;
+}
+
+.row-fluid .span4 {
+    width: 32.666666667%;
+}
+
+.row-fluid .span8 {
+    width: 66%;
+}
+
+/* RTL styles for column templates. */
+.dir-rtl .row-fluid [class*="span"] {
+    float: right;
+    margin-left: 0;
+    margin-right: 1%;
+}
+
+.dir-rtl .row-fluid [class*="span"]:first-child {
+    margin-right: 0;
+}
+
+/* Responsive styles for smaller screens. */
+@media (max-width: 767px) {
+    /* For column templates. */
+    .row-fluid [class*="span"] {
+        width: 100%;
+        float: none;
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .dir-rtl .row-fluid [class*="span"] {
+        margin-right: 0;
+    }
+}

theme/bootstrapbase/less/moodle.less

@@ -58,6 +58,9 @@ body {
 @import "moodle/grade";
 @import "moodle/dock";
 
+// Styles for mustache templates.
+@import "moodle/templates";
+
 // Anything below this line is considered expendable,
 // so it doesn't matter if it doesn't show up in ie < 9
 // though at current time (2013-03-13) the whole file is

theme/bootstrapbase/less/moodle/templates.less

@@ -0,0 +1,37 @@
+/* Styling for mustache templates */
+
+// RTL styles for column templates.
+#grid {
+  // A mixin to set styles for the fluid row when RTL language enabled.
+  .fluid-rtl(@fluidGridColumnWidth, @fluidGridGutterWidth) {
+    .dir-rtl {
+      .row-fluid.rtl-compatible {
+        [class*="span"] {
+          float: right;
+          margin-left: 0;
+          *margin-left: 0;
+          margin-right: @fluidGridGutterWidth;
+          *margin-right: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
+        }
+        [class*="span"]:first-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+  // Include fluid-rtl mixin from grid namespace.
+  #grid > .fluid-rtl(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
+}
+
+@media (min-width: 980px) and (max-width: 1199px) {
+  // Include fluid-rtl mixin from grid namespace.
+  #grid > .fluid-rtl(@fluidGridColumnWidth, @fluidGridGutterWidth);
+}
+
+@media (min-width: 1200px) {
+  // Include fluid-rtl mixin from grid namespace.
+  #grid > .fluid-rtl(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+}