First pass at user profile formatting updates. Moved buttons to the top, simplified HTML and CSS.

3 files changed, 62 insertions, 58 deletions

diff --git a/modules/gallery/css/gallery.css b/modules/gallery/css/gallery.css
index e06c4dd9..f3e5ec6d 100644
--- a/modules/gallery/css/gallery.css
+++ b/modules/gallery/css/gallery.css
@@ -55,6 +55,34 @@
   margin: 0;
 }
 
+/* User profile ~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+#g-user-profile h1 {
+  margin: 1em 0;
+}
+
+#g-user-profile .g-avatar {
+  margin-right: .6em;
+}
+
+#g-user-profile .g-block {
+  margin-top: 0;
+}
+
+#g-user-profile .g-block-content {
+  margin-top: 0;
+}
+
+#g-user-profile th,
+#g-user-profile td {
+  border: none;
+}
+
+#g-user-profile th {
+  white-space: nowrap;
+  width: 1%;
+}
+
 /** *******************************************************************
  * 2) Admin
  **********************************************************************/
@@ -96,4 +124,8 @@
 .rtl #g-block-admin .g-left {
   margin-left: 1em;
   margin-right: 0;
-}
\ No newline at end of file
+}
+
+.rtl #g-user-profile .g-avatar {
+  margin-left: .6em;
+}
diff --git a/modules/gallery/views/user_profile.html.php b/modules/gallery/views/user_profile.html.php
index 1c346c26..53e8dc1e 100644
--- a/modules/gallery/views/user_profile.html.php
+++ b/modules/gallery/views/user_profile.html.php
@@ -1,27 +1,4 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-  #g-user-profile div {
-    margin-top: 1em;
-  }
-
-  #g-user-profile fieldset {
-    border: 1px solid #CCCCCC;
-    padding: 0 1em 0.8em;
-  }
-
-  #g-user-profile fieldset label {
-    font-weight: bold;
-  }
-
-  #g-user-profile fieldset div {
-    padding-left: 1em;
-  }
-
-  #g-user-profile td {
-    border: none;
-    padding: 0;
-  }
-</style>
 <script type="text/javascript">
   $(document).ready(function() {
     $("#g-profile-return").click(function(event) {
@@ -31,45 +8,40 @@
   });
 </script>
 <div id="g-user-profile">
-  <h1>
-    <a href="#">
-      <img src="<?= $user->avatar_url(40, $theme->url("images/avatar.jpg", true)) ?>"
-           alt="<?= html::clean_attribute($user->display_name()) ?>"
-           class="g-avatar" width="40" height="40" />
-    </a>
-    <?= t("%name Profile", array("name" => $user->display_name())) ?>
-  </h1>
-  <? foreach ($info_parts as $info): ?>
-  <div>
-    <fieldset>
-    <label><?= html::purify($info->title) ?></label>
-    <div>
-    <?= $info->view ?>
-    </div>
-    </fieldset>
-  </div>
-  <? endforeach ?>
-  <div id="g-profile-buttons" class="ui-helper-clearfix g-right">
-    <? if (!$user->guest && $not_current && !empty($user->email)): ?>
-    <a class="g-button ui-icon-right ui-state-default ui-corner-all g-dialog-link"
-       href="<?= url::site("user_profile/contact/{$user->id}") ?>">
-      <?= t("Contact") ?>
+  <div class="ui-helper-clearfix">
+    <a id="g-profile-return" class="g-button g-right ui-state-default ui-corner-all" href="#">
+      <?= t("Return") ?>
     </a>
-    <? endif ?>
-    <? if ($editable): ?>
-    <a class="g-button ui-icon-right ui-state-default ui-corner-all g-dialog-link" href="<?= url::site("form/edit/users/{$user->id}") ?>">
-      <?= t("Edit") ?>
+    <a class="g-button g-right ui-state-default ui-corner-all g-dialog-link" href="<?= url::site("users/form_change_email/{$user->id}") ?>">
+      <?= t("Change email") ?>
     </a>
-    <a class="g-button ui-icon-right ui-state-default ui-corner-all g-dialog-link" href="<?= url::site("users/form_change_password/{$user->id}") ?>">
+    <a class="g-button g-right ui-state-default ui-corner-all g-dialog-link" href="<?= url::site("users/form_change_password/{$user->id}") ?>">
       <?= t("Change password") ?>
     </a>
-    <a class="g-button ui-icon-right ui-state-default ui-corner-all g-dialog-link" href="<?= url::site("users/form_change_email/{$user->id}") ?>">
-      <?= t("Change email") ?>
+    <? if ($editable): ?>
+    <a class="g-button g-right ui-state-default ui-corner-all g-dialog-link" href="<?= url::site("form/edit/users/{$user->id}") ?>">
+      <?= t("Edit") ?>
     </a>
     <? endif ?>
-
-    <a id="g-profile-return" class="g-button ui-icon-right ui-state-default ui-corner-all" href="#">
-      <?= t("Return") ?>
+    <? if (!$user->guest && $not_current && !empty($user->email)): ?>
+    <a class="g-button g-right ui-state-default ui-corner-all g-dialog-link"
+       href="<?= url::site("user_profile/contact/{$user->id}") ?>">
+      <?= t("Contact") ?>
     </a>
+    <? endif ?>
   </div>
+  <h1>
+    <img src="<?= $user->avatar_url(40, $theme->url("images/avatar.jpg", true)) ?>"
+       alt="<?= html::clean_attribute($user->display_name()) ?>"
+       class="g-avatar g-left" width="40" height="40" />
+    <?= t("User profile: %name", array("name" => $user->display_name())) ?>
+  </h1>
+  <? foreach ($info_parts as $info): ?>
+  <div class="g-block">
+    <h2><?= html::purify($info->title) ?></h2>
+    <div class="g-block-content">
+    <?= $info->view ?>
+    </div>
+  </div>
+  <? endforeach ?>
 </div>
diff --git a/modules/gallery/views/user_profile_info.html.php b/modules/gallery/views/user_profile_info.html.php
index 58e134bb..e559abda 100644
--- a/modules/gallery/views/user_profile_info.html.php
+++ b/modules/gallery/views/user_profile_info.html.php
@@ -2,7 +2,7 @@
 <table>
   <? foreach ($user_profile_data as $label => $value): ?>
   <tr>
-    <td><?= html::clean($label) ?></td>
+    <th><?= html::clean($label) ?></th>
     <td><?= html::purify($value) ?></td>
   </tr>
   <? endforeach ?>