MDL-35816 - User - Modify the profile page to use semantic HTML rathe…

…r than tables for layout
tombola · Mar 7, 2013 · ae18db7 · ae18db7
1 parent cce0d9a
commit ae18db7
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 62 deletions.
diff --git a/theme/base/style/user.css b/theme/base/style/user.css
@@ -1,9 +1,11 @@
 /*$$$$$$$$$$$$$$$$$ User $$$$$$$$$$$$$$$$$$$$*/
-
 .userprofile .fullprofilelink {text-align:center; margin:10px;}
 .userprofile .profilepicture {float:left; margin-right:20px;}
 .userprofile .description {margin-bottom:20px;}
-.userprofile .label {font-weight:normal;text-align:left;}
+.userprofile dl {margin-top:10px;  margin-left:0px;  width:100%;}
+.userprofile dl dt, .userprofile dl dd {padding-top:3px;  padding-bottom:3px;}
+.userprofile dl dt {margin:0px;  font-weight:bold;  display:block; float:left; width:110px; margin-right:10px;}
+.userprofile dl dd {display:block; margin:0px; margin-left:120px;}
 
 .user-box {margin:8px;width:115px;height:160px;text-align:center;float:left;clear: none;}
 
@@ -31,7 +33,6 @@
 .userinfobox .list td {padding: 3px;}
 .userinfobox .username {padding-bottom: 20px;font-weight: bold;}
 .userinfobox td.label {text-align:right;white-space: nowrap;vertical-align: top;font-weight:bold;}
-
 .groupinfobox {border:1px solid;}
 .groupinfobox .left {padding: 10px;width: 100px;vertical-align: top;}
 
@@ -57,9 +58,9 @@
 
 /** Overide for RTL layout **/
 .dir-rtl .userprofile .profilepicture {float:right; margin-left:20px;margin-right:0px;}
-.dir-rtl .descriptionbox {margin-right: 110px;margin-left: 0px; }
 .dir-rtl .userlist table#participants td,
 .dir-rtl .userlist table#participants th {text-align: right;}
 .dir-rtl .userlist table#participants {margin: 0 auto;}
-
+.dir-rtl .userprofile dl dt {float:right; width:110px; margin-left:10px;}
+.dir-rtl .userprofile dl dd {margin-right: 120px;}
 #page-my-index.dir-rtl .block h3.main { text-align: right;}
diff --git a/theme/canvas/style/core.css b/theme/canvas/style/core.css
@@ -268,25 +268,47 @@ input[type="radio"] {
     margin-left: 110px;
     border: 1px solid #ddd;
     padding: 10px;
+    width: 80%;
 }
 
 .path-user .description {
     padding-bottom: 15px;
     border-bottom: 1px solid #eee;
 }
 
-.userprofile .list {
+.userprofile dl {
     margin-top: 10px;
 }
 
-.userprofile .list td {
+.userprofile dl dt, .userprofile dl dd {
     padding-top: 3px;
     padding-bottom: 3px;
+    float: left;
+}
+
+.dir-rtl .userprofile dl dt, .dir-rtl  .userprofile dl dd {
+    float: right;
 }
 
-.userprofile .list .c0 {
+.userprofile dl dt {
     padding-left: 0;
     font-weight: bold;
+    display: inline-block;
+    padding-right: 2%;
+    min-width: 100px;
+    width: 15%;
+    clear: both;
+}
+
+.dir-rtl .userprofile dl dt {
+    padding-left: 2%;
+    padding-right: 0;
+}
+
+.userprofile dl dd {
+    display: inline-block;
+    margin: 0px;
+    width: 75%;
 }
 
 #page-user-view .buttons {

diff --git a/theme/upgrade.txt b/theme/upgrade.txt
@@ -5,6 +5,7 @@ information provided here is intended especially for theme designer.
 
 DOM changes:
 * changed the h1 title in the help popup to a h2.
+* Re-wrote the user profile views to definition lists.
 
 === 2.4 ===
 

diff --git a/user/profile.php b/user/profile.php
@@ -243,76 +243,100 @@
 
 // Print all the little details in a list
 
-echo '<table class="list" summary="">';
-
-if (! isset($hiddenfields['country']) && $user->country) {
-    print_row(get_string('country') . ':', get_string($user->country, 'countries'));
+echo html_writer::start_tag('dl', array('class'=>'list'));
+if (!isset($hiddenfields['country']) && $user->country) {
+    echo html_writer::tag('dt', get_string('country'));
+    echo html_writer::tag('dd', get_string($user->country, 'countries'));
 }
 
-if (! isset($hiddenfields['city']) && $user->city) {
-    print_row(get_string('city') . ':', $user->city);
+if (!isset($hiddenfields['city']) && $user->city) {
+    echo html_writer::tag('dt', get_string('city'));
+    echo html_writer::tag('dd', $user->city);
 }
 
 if (isset($identityfields['address']) && $user->address) {
-    print_row(get_string("address").":", "$user->address");
+    echo html_writer::tag('dt', get_string('address'));
+    echo html_writer::tag('dd', $user->address);
 }
 
 if (isset($identityfields['phone1']) && $user->phone1) {
-    print_row(get_string("phone").":", "$user->phone1");
+    echo html_writer::tag('dt', get_string('phone'));
+    echo html_writer::tag('dd', $user->phone1);
 }
 
 if (isset($identityfields['phone2']) && $user->phone2) {
-    print_row(get_string("phone2").":", "$user->phone2");
+    echo html_writer::tag('dt', get_string('phone2'));
+    echo html_writer::tag('dd', $user->phone2);
 }
 
 if (isset($identityfields['institution']) && $user->institution) {
-    print_row(get_string("institution").":", "$user->institution");
+    echo html_writer::tag('dt', get_string('institution'));
+    echo html_writer::tag('dd', $user->institution);
 }
 
 if (isset($identityfields['department']) && $user->department) {
-    print_row(get_string("department").":", "$user->department");
+    echo html_writer::tag('dt', get_string('department'));
+    echo html_writer::tag('dd', $user->department);
 }
 
 if (isset($identityfields['idnumber']) && $user->idnumber) {
-    print_row(get_string("idnumber").":", "$user->idnumber");
+    echo html_writer::tag('dt', get_string('idnumber'));
+    echo html_writer::tag('dd', $user->idnumber);
 }
 
 if (isset($identityfields['email']) and ($currentuser
   or $user->maildisplay == 1
   or has_capability('moodle/course:useremail', $context)
   or ($user->maildisplay == 2 and enrol_sharing_course($user, $USER)))) {
-    print_row(get_string("email").":", obfuscate_mailto($user->email, ''));
+    echo html_writer::tag('dt', get_string('email'));
+    echo html_writer::tag('dd', obfuscate_mailto($user->email, ''));
 }
 
 if ($user->url && !isset($hiddenfields['webpage'])) {
     $url = $user->url;
     if (strpos($user->url, '://') === false) {
         $url = 'http://'. $url;
     }
-    print_row(get_string("webpage") .":", '<a href="'.s($url).'">'.s($user->url).'</a>');
+    $webpageurl = new moodle_url($url);
+    echo html_writer::tag('dt', get_string('webpage'));
+    echo html_writer::tag('dd', html_writer::link($webpageurl, s($user->url)));
 }
 
 if ($user->icq && !isset($hiddenfields['icqnumber'])) {
-    print_row(get_string('icqnumber').':',"<a href=\"http://web.icq.com/wwp?uin=".urlencode($user->icq)."\">".s($user->icq)." <img src=\"http://web.icq.com/whitepages/online?icq=".urlencode($user->icq)."&amp;img=5\" alt=\"\" /></a>");
+    $imurl = new moodle_url('http://web.icq.com/wwp', array('uin'=>$user->icq) );
+    $iconurl = new moodle_url('http://web.icq.com/whitepages/online', array('icq'=>$user->icq, 'img'=>'5'));
+    $statusicon = html_writer::tag('img', '', array('src'=>$iconurl, 'class'=>'icon icon-post', 'alt'=>get_string('status')));
+    echo html_writer::tag('dt', get_string('icqnumber'));
+    echo html_writer::tag('dd', html_writer::link($imurl, s($user->icq) . $statusicon));
 }
 
 if ($user->skype && !isset($hiddenfields['skypeid'])) {
+    $imurl = 'skype:'.urlencode($user->skype).'?call';
+    $iconurl = new moodle_url('http://mystatus.skype.com/smallicon/'.$user->skype);
     if (strpos($CFG->httpswwwroot, 'https:') === 0) {
         // Bad luck, skype devs are lazy to set up SSL on their servers - see MDL-37233.
         $statusicon = '';
     } else {
-        $statusicon = ' '.html_writer::empty_tag('img', array('src'=>'http://mystatus.skype.com/smallicon/'.urlencode($user->skype), 'alt'=>get_string('status')));
+        $statusicon = html_writer::empty_tag('img', array('src'=>$iconurl, 'class'=>'icon icon-post', 'alt'=>get_string('status')));
     }
-    print_row(get_string('skypeid').':','<a href="skype:'.urlencode($user->skype).'?call">'.s($user->skype).$statusicon.'</a>');
+    echo html_writer::tag('dt', get_string('skypeid'));
+    echo html_writer::tag('dd', html_writer::link($imurl, s($user->skype) . $statusicon));
 }
 if ($user->yahoo && !isset($hiddenfields['yahooid'])) {
-    print_row(get_string('yahooid').':', '<a href="http://edit.yahoo.com/config/send_webmesg?.target='.urlencode($user->yahoo).'&amp;.src=pg">'.s($user->yahoo)." <img src=\"http://opi.yahoo.com/online?u=".urlencode($user->yahoo)."&m=g&t=0\" alt=\"\"></a>");
+    $imurl = new moodle_url('http://edit.yahoo.com/config/send_webmesg', array('.target'=>$user->yahoo, '.src'=>'pg'));
+    $iconurl = new moodle_url('http://opi.yahoo.com/online', array('u'=>$user->yahoo, 'm'=>'g', 't'=>'0'));
+    $statusicon = html_writer::tag('img', '', array('src'=>$iconurl, 'class'=>'iconsmall icon-post', 'alt'=>get_string('status')));
+    echo html_writer::tag('dt', get_string('yahooid'));
+    echo html_writer::tag('dd', html_writer::link($imurl, s($user->yahoo) . $statusicon));
 }
 if ($user->aim && !isset($hiddenfields['aimid'])) {
-    print_row(get_string('aimid').':', '<a href="aim:goim?screenname='.urlencode($user->aim).'">'.s($user->aim).'</a>');
+    $imurl = 'aim:goim?screenname='.urlencode($user->aim);
+    echo html_writer::tag('dt', get_string('aimid'));
+    echo html_writer::tag('dd', html_writer::link($imurl, s($user->aim)));
 }
 if ($user->msn && !isset($hiddenfields['msnid'])) {
-    print_row(get_string('msnid').':', s($user->msn));
+    echo html_writer::tag('dt', get_string('msnid'));
+    echo html_writer::tag('dd', s($user->msn));
 }
 
 /// Print the Custom User Fields
@@ -342,7 +366,8 @@
                 break;
             }
         }
-        print_row(get_string('courseprofiles').':', rtrim($courselisting,', '));
+        echo html_writer::tag('dt', get_string('courseprofiles'));
+        echo html_writer::tag('dd', rtrim($courselisting,', '));
     }
 }
 if (!isset($hiddenfields['firstaccess'])) {
@@ -351,32 +376,36 @@
     } else {
         $datestring = get_string("never");
     }
-    print_row(get_string("firstaccess").":", $datestring);
+    echo html_writer::tag('dt', get_string('firstaccess'));
+    echo html_writer::tag('dd', $datestring);
 }
 if (!isset($hiddenfields['lastaccess'])) {
     if ($user->lastaccess) {
         $datestring = userdate($user->lastaccess)."&nbsp; (".format_time(time() - $user->lastaccess).")";
     } else {
         $datestring = get_string("never");
     }
-    print_row(get_string("lastaccess").":", $datestring);
+    echo html_writer::tag('dt', get_string('lastaccess'));
+    echo html_writer::tag('dd', $datestring);
 }
 
 /// Printing tagged interests
 if (!empty($CFG->usetags)) {
     if ($interests = tag_get_tags_csv('user', $user->id) ) {
-        print_row(get_string('interests') .": ", $interests);
+        echo html_writer::tag('dt', get_string('interests'));
+        echo html_writer::tag('dd', $interests);
     }
 }
 
 if (!isset($hiddenfields['suspended'])) {
     if ($user->suspended) {
-        print_row('', get_string('suspended', 'auth'));
+        echo html_writer::tag('dt', '&nbsp;');
+        echo html_writer::tag('dd', get_string('suspended', 'auth'));
     }
 }
 
-echo "</table></div></div>";
-
+echo html_writer::end_tag('dl');
+echo "</div></div>"; // Closing desriptionbox and userprofilebox.
 echo '<div id="region-content" class="block-region"><div class="region-content">';
 echo $OUTPUT->blocks_for_region('content');
 echo '</div></div>';
@@ -396,9 +425,4 @@
 }
 
 echo '</div>';  // userprofile class
-echo $OUTPUT->footer();
-
-
-function print_row($left, $right) {
-    echo "\n<tr><th class=\"label c0\">$left</th><td class=\"info c1\">$right</td></tr>\n";
-}
+echo $OUTPUT->footer();
diff --git a/user/profile/lib.php b/user/profile/lib.php
@@ -452,7 +452,8 @@ function profile_display_fields($userid) {
                     $newfield = 'profile_field_'.$field->datatype;
                     $formfield = new $newfield($field->id, $userid);
                     if ($formfield->is_visible() and !$formfield->is_empty()) {
-                        print_row(format_string($formfield->field->name.':'), $formfield->display_data());
+                        echo html_writer::tag('dt', format_string($formfield->field->name));
+                        echo html_writer::tag('dd', $formfield->display_data());
                     }
                 }
             }

diff --git a/user/view.php b/user/view.php
@@ -231,8 +231,7 @@
 
 // Print all the little details in a list
 
-echo '<table class="list" summary="">';
-
+echo html_writer::start_tag('dl', array('class'=>'list'));
 // Show email if any of the following conditions match.
 // 1. User is viewing his own profile.
 // 2. Has allowed everyone to see email
@@ -243,7 +242,8 @@
    or ($user->maildisplay == 2 && is_enrolled($coursecontext, $USER))
    or has_capability('moodle/course:viewhiddenuserfields', $coursecontext)
    or has_capability('moodle/site:viewuseridentity', $coursecontext)) {
-    print_row(get_string("email").":", obfuscate_mailto($user->email, ''));
+    echo html_writer::tag('dt', get_string('email'));
+    echo html_writer::tag('dd', obfuscate_mailto($user->email, ''));
 }
 
 // Show last time this user accessed this course
@@ -253,12 +253,14 @@
     } else {
         $datestring = get_string("never");
     }
-    print_row(get_string("lastaccess").":", $datestring);
+    echo html_writer::tag('dt', get_string('lastaccess'));
+    echo html_writer::tag('dd', $datestring);
 }
 
 // Show roles in this course
 if ($rolestring = get_user_roles_in_course($id, $course->id)) {
-    print_row(get_string('roles').':', $rolestring);
+    echo html_writer::tag('dt', get_string('roles'));
+    echo html_writer::tag('dd', $rolestring);
 }
 
 // Show groups this user is in
@@ -280,7 +282,8 @@
             }
         }
         if ($groupstr !== '') {
-            print_row(get_string("group").":", rtrim($groupstr, ', '));
+            echo html_writer::tag('dt', get_string('group'));
+            echo html_writer::tag('dd', rtrim($groupstr, ', '));
         }
     }
 }
@@ -316,18 +319,19 @@
                 break;
             }
         }
-        print_row(get_string('courseprofiles').':', rtrim($courselisting,', '));
+        echo html_writer::tag('dt', get_string('courseprofiles'));
+        echo html_writer::tag('dd', rtrim($courselisting,', '));
     }
 }
 
 if (!isset($hiddenfields['suspended'])) {
     if ($user->suspended) {
-        print_row('', get_string('suspended', 'auth'));
+        echo html_writer::tag('dt', "&nbsp;");
+        echo html_writer::tag('dd', get_string('suspended', 'auth'));
     }
 }
-
-echo "</table></div></div>";
-
+echo html_writer::end_tag('dl');
+echo "</div></div>"; // Closing desriptionbox and userprofilebox.
 // Print messaging link if allowed
 if (isloggedin() && has_capability('moodle/site:sendmessage', $usercontext)
     && !empty($CFG->messaging) && !isguestuser() && !isguestuser($user) && ($USER->id != $user->id)) {
@@ -354,12 +358,4 @@
 
 echo '</div>';  // userprofile class
 
-echo $OUTPUT->footer();
-
-/// Functions ///////
-
-function print_row($left, $right) {
-    echo "\n<tr><th class=\"label c0\">$left</th><td class=\"info c1\">$right</td></tr>\n";
-}
-
-
+echo $OUTPUT->footer();