From ff582ae5128165914aa020d7f1b05f3c8b638884 Mon Sep 17 00:00:00 2001
From: Barbara Ramiro <barbara@moodle.com>
Date: Thu, 16 Mar 2017 19:56:52 +0800
Subject: [PATCH] MDL-57585 block_myoverview: responsive layout for course
 summary

This is for the 'Sort by courses' view.

Part of MDL-55611 epic.
---
 .../templates/course-summary.mustache         | 40 ++++++++++++-------
 .../templates/progress-chart.mustache         |  2 +-
 theme/boost/scss/moodle/blocks.scss           |  2 +-
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/blocks/myoverview/templates/course-summary.mustache b/blocks/myoverview/templates/course-summary.mustache
index 8421ea27cf2..9ee9b6d611d 100644
--- a/blocks/myoverview/templates/course-summary.mustache
+++ b/blocks/myoverview/templates/course-summary.mustache
@@ -28,20 +28,32 @@
         "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
     }
 }}
-<div class="d-inline-block m-x-1">
-    <div class="course-info-container" id="course-info-container-{{id}}">
-        <div class="row m-b-1">
-            {{> block_myoverview/progress-chart}}
-        </div>
-        <div class="row m-b-1">
-            <h3><a href="{{viewurl}}">{{fullnamedisplay}}</a></h3>
-        </div>
-        <div class="row text-muted m-b-1">
-            {{#userdate}}{{startdate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}} -
-            {{#userdate}}{{enddate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}}
-        </div>
-        <div class="row text-muted">
-            {{#shortentext}} 140, {{{summary}}}{{/shortentext}}
+<div class="course-info-container" id="course-info-container-{{id}}">
+    <div class="hidden-sm-up">
+        {{> block_myoverview/progress-chart}}
+        <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
+    </div>
+    <div class="hidden-sm-down">
+        {{> block_myoverview/progress-chart}}
+        <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
+    </div>
+    <div class="hidden-xs-down hidden-md-up">
+        <div class="media">
+            <div class="media-left">
+                <div class="media-object">
+                    {{> block_myoverview/progress-chart}}
+                </div>
+            </div>
+            <div class="media-body">
+                <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
+            </div>
         </div>
     </div>
+    <p class="text-muted">
+        {{#userdate}}{{startdate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}} -
+        {{#userdate}}{{enddate}}, {{#str}}strftimedate, langconfig{{/str}}{{/userdate}}
+    </p>
+    <p class="text-muted">
+        {{#shortentext}} 140, {{{summary}}}{{/shortentext}}
+    </p>
 </div>
diff --git a/blocks/myoverview/templates/progress-chart.mustache b/blocks/myoverview/templates/progress-chart.mustache
index fd35184978c..cab65d6613a 100644
--- a/blocks/myoverview/templates/progress-chart.mustache
+++ b/blocks/myoverview/templates/progress-chart.mustache
@@ -24,7 +24,7 @@
         "progress": "60",
     }
 }}
-<div class="progress-chart-container">
+<div class="progress-chart-container m-b-1">
     {{#hasprogress}}
     <div class="progress-doughnut">
         <div class="progress-text {{#progress}}has-percent{{/progress}}">{{progress}}&#37;</div>
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index be5d12f38f7..68b6faa94df 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -71,7 +71,7 @@ $blocks-plus-gutter: $blocks-column-width + $grid-gutter-width;
     }
 }
 
-$chart-size: 80px;
+$chart-size: 70px;
 $doughnut-border-size: 15px;
 $doughnut-dasharray: 204;
 $doughnut-empty-colour: $gray-lighter;