Improved design of 'Switched role to' infobox.

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2018-01-31 - Improved design of "Switched role to" infobox.
 * 2018-01-30 - Added CSS rules for .fa-pull-left/right because of a core bug (MDL-xxxxxx)
 * 2018-01-29 - Setting to show a hint in hidden courses.
 

classes/output/core_renderer.php

@@ -250,14 +250,14 @@ class core_renderer extends \theme_boost\output\core_renderer {
                                           array('id'        => $COURSE->id, 'sesskey' => sesskey(), 'switchrole' => 0,
                                                 'returnurl' => $this->page->url->out_as_local_url(false)));
                     $html .= html_writer::start_tag('div', array('class' => 'switched-role-infobox alert alert-info'));
-                    $html .= html_writer::start_tag('div', array());
+                    $html .= html_writer::tag('i', null, array('class' => 'fa fa-user-circle fa-3x fa-pull-left'));
+                    $html .= html_writer::start_tag('div');
                     $html .= get_string('switchedroleto', 'theme_boost_campus');
                     // Give this a span to be able to address via CSS.
                     $html .= html_writer::tag('span', $role, array('class' => 'switched-role'));
                     $html .= html_writer::end_tag('div');
                     // Return to normal role link.
-                    $html .= html_writer::start_tag('div', array('class' => 'switched-role-back col-6'));
-                    $html .= html_writer::empty_tag('img', array('src' => $this->pix_url('a/logout', 'moodle')));
+                    $html .= html_writer::start_tag('div');
                     $html .= html_writer::tag('a', get_string('switchrolereturn', 'core'),
                                                array('class' => 'switched-role-backlink', 'href' => $url));
                     $html .= html_writer::end_tag('div'); // Return to normal role link: end div.

scss/post.scss

@@ -272,26 +272,14 @@ body.loginbackgroundimage {
 
 /*
  * If set in showswitchedroleincourse, the switched role information will be displayed
- * in the course header instead of ben the user name.
+ * in the course header instead of next to the user name.
  */
 
-.switched-role-infobox {
-
-    span.switched-role {
+.switched-role-infobox span.switched-role {
     font-weight: bold;
     padding-left: 0.5em;
 }
 
-    .switched-role-back {
-        padding-top: 10px;
-    }
-
-    .switched-role-backlink {
-        padding-left: 0.5em;
-        vertical-align: middle;
-    }
-}
-
 /* If showsettingsincourse is enabled, we have to style the cog icon a bit different. */
 @if variable-exists(showsettingsincourse) {
     @if $showsettingsincourse == 'yes' {
@@ -861,7 +849,8 @@ a[href^="mailto"]::before {
 
 /* Setting to show a hint for hidden courses. */
 /* Because the Font Awesome icon is set to fa-3x, we need a minimum size for the container. */
-.course-hidden-infobox {
+.course-hidden-infobox,
+.switched-role-infobox {
     min-height: 5rem;
 }