MDL-60515 groups: Group details template change.

The group details template has been changed to be simpler and is styled a bit nicer.
andelacruz · Nov 1, 2017 · 6b839f3 · 6b839f3
1 parent c550fd0
commit 6b839f3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 25 deletions.
diff --git a/group/templates/group_details.mustache b/group/templates/group_details.mustache
@@ -40,26 +40,14 @@
     }
 }}
 {{#name}}
-<div class="groupinfobox container-fluid p-y-1">
-    <div class="row-fluid">
-        {{#pictureurl}}
-        <div class="group-image col-sm-1 span1">{{{pictureurl}}}</div>
-        {{/pictureurl}}
-        <div {{#pictureurl}}class="col-sm-11 span11"{{/pictureurl}}{{^pictureurl}}class="col"{{/pictureurl}}>
-            <div class="container-fluid">
-                <div class="row-fluid">
-                    <div class="col">
-                        <h3 class="d-inline-block">{{name}}</h3>
-                        {{#editurl}}
-                        <span class="group-edit"><a href="{{editurl}}">{{#pix}}t/edit, core, {{#str}}editgroupprofile{{/str}}{{/pix}}</a></span>
-                        {{/editurl}}
-                    </div>
-                </div>
-                <div class="row-fluid">
-                    <div class="group-description col">{{{description}}}</div>
-                </div>
-            </div>
-        </div>
-    </div>
+<div class="groupinfobox container-fluid p-x-1 p-y-1">
+    {{#pictureurl}}
+    <div class="group-image"><img class="grouppicture" src="{{{pictureurl}}}" alt="{{{name}}}" title="{{{name}}}"/></div>
+    {{/pictureurl}}
+    {{#editurl}}
+    <div class="group-edit"><a href="{{editurl}}">{{#pix}}t/edit, core, {{#str}}editgroupprofile{{/str}}{{/pix}}</a></div>
+    {{/editurl}}
+    <h3 class="">{{{name}}}</h3>
+    <div class="group-description">{{{description}}}</div>
 </div>
 {{/name}}
diff --git a/theme/boost/scss/moodle/user.scss b/theme/boost/scss/moodle/user.scss
@@ -200,8 +200,20 @@
     font-weight: bold;
 }
 
+.group-edit {
+    position: absolute;
+    right: 0;
+    margin-right: 0.6em;
+}
+
 .group-image {
-    min-width: 93px;
+    display: block;
+    float: left;
+    margin-right: 1em;
+
+    .grouppicture {
+        border-radius: 50%;
+    }
 }
 
 .groupinfobox {

diff --git a/theme/bootstrapbase/less/moodle/user.less b/theme/bootstrapbase/less/moodle/user.less
@@ -195,16 +195,30 @@
     font-weight: bold;
 }
 .groupinfobox {
-    .well
+    .well;
+    position: relative;
+
+    h3 {
+        margin-top: 0px;
+    }
 }
+
 .groupinfobox .left {
     padding: 10px;
     width: 100px;
     vertical-align: top;
 }
 
 .group-image {
-    min-width: 60px;
+    display: block;
+    float: left;
+    margin-right: 1em;
+}
+
+.group-edit {
+    position: absolute;
+    right: 0;
+    margin-right: 0.6em;
 }
 
 .course-participation #showall {

diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
@@ -9885,18 +9885,29 @@ body.path-question-type .mform fieldset.hidden {
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   border-color: #e3e3e3;
+  position: relative;
 }
 .groupinfobox blockquote {
   border-color: #ddd;
   border-color: rgba(0, 0, 0, 0.15);
 }
+.groupinfobox h3 {
+  margin-top: 0px;
+}
 .groupinfobox .left {
   padding: 10px;
   width: 100px;
   vertical-align: top;
 }
 .group-image {
-  min-width: 60px;
+  display: block;
+  float: left;
+  margin-right: 1em;
+}
+.group-edit {
+  position: absolute;
+  right: 0;
+  margin-right: 0.6em;
 }
 .course-participation #showall {
   text-align: center;