Initial changes to user show page

app/assets/javascripts/local.js

@@ -152,8 +152,8 @@ $(function() {
   });
 
   // User page
-  $("td#userNavi > div > a").click(function(){
-    $("td#userData").fadeOut("fast");
+  $("#user-profile li a").click(function(){
+    $("#user-data").fadeOut("fast");
     $.ajax({
       type: "GET",
       url: window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + ".js?page=" + $(this).attr('id'),

app/assets/stylesheets/layout/_body.scss

@@ -8,6 +8,7 @@ body {
   padding: 0;
   width: 100%;
   min-height: 100%;
+  background-color: transparent;
 }
 
 body {

app/assets/stylesheets/pages/_contests.scss

@@ -2,7 +2,7 @@
   Contester
 */
 
-#matches {
+div#matches {
   @include span-columns(12);
   margin: em(20) 0;
 }

app/assets/stylesheets/pages/_matches.scss

@@ -2,7 +2,7 @@
   Matches Listing
 */
 
-#matches {
+table#matches {
   width: 100%;
   display: table;
   table-layout: auto;

app/assets/stylesheets/pages/_users.scss

@@ -54,6 +54,26 @@
   }
 }
 
+#user-profile {
+
+  .photo {
+    @include span-columns(12);
+    margin: em(20) 0;
+    text-align: center;
+
+    img {
+      display: inline-block;
+      float: none;
+      width: auto;
+    }
+  }
+
+  #user-data {
+    @include span-columns(12);
+    margin-bottom: em(20);
+  }
+}
+
 /*
   Agenda
 */

app/helpers/application_helper.rb

@@ -54,18 +54,19 @@ module ApplicationHelper
 
   def printtime time, format
     return unless time
+
     out = ""
     out << '<span style="font-style: italic; ">'
     out <<  time.strftime(format)
     out << '</span>'
-    raw out
+
+    out.html_safe
   end
 
   def cascade model, list
-    out = ""
-
-    list.each do |element|
+    out = list.map do |element|
       name = key = element
+      item = ""
       result = ""
 
       if element.instance_of?(Array)
@@ -91,12 +92,19 @@ module ApplicationHelper
         result << h(str)
       end
 
-      out << "<p>"
-      out << "<b>#{name.to_s.capitalize.gsub(/_s/, '').gsub(/_/, ' ')}</b>: "
-      out << result
-      out << "</p>"
+      item << content_tag(:dt) do
+        "#{name.to_s.capitalize.gsub(/_s/, '').gsub(/_/, ' ')}"
+      end
+      item << content_tag(:dd) do
+        result
+      end
+
+      item
+    end
+
+    content_tag(:dl) do
+      out.join.html_safe
     end
-    raw out
   end
 
   def abslink text, url

app/views/users/_general.html.erb

@@ -1,8 +1,6 @@
-<h2>
-  General information
-</h2>
+<div class="group">
+  <h4>General information</h4>
 
-<div class="userFields">
   <%= cascade @user, ["steamid"] %> 
   <%= link_to "http://steamidfinder.com/?STEAM_#{@user.steamid}" do %>
     <small>Search for corresponding Steam account</small>
@@ -12,17 +10,17 @@
   <%= cascade @user.profile, ["town"] %>
 </div>
 
-<h3>
-  Miscellaneous
-</h3>
 
-<div class="userFields">
+
+<div class="group">
+  <h4>Miscellaneous</h4>
+  
   <p>
-    <b>Joined:</b> <%= longtime @user.created_at %>
-</p>
+    <strong>Joined:</strong> <%= longtime @user.created_at %>
+  </p>
 
-<p>
-  <b>Lastvisit:</b> <%= longtime @user.lastvisit %>
+  <p>
+    <strong>Last visit:</strong> <%= longtime @user.lastvisit %>
   </p>
 
   <% if cuser and cuser.admin? %>
@@ -31,7 +29,7 @@
   </p>
 <% end %>
 
-<%= cascade @user, [ ["Comments", "posted_comments.count"], ["Matches", "matches.count"]] %>
+<%= cascade @user, [["Comments", "posted_comments.count"], ["Matches", "matches.count"]] %>
 
 <% if @user.groups.count > 0 %>
   <p>
@@ -56,8 +54,8 @@
   Contact
 </h3>
 
-<div class="userFields">
-  <%= cascade @user.profile, ["irc", "msn", "icq", "web"] %>
+<div class="group">
+  <%= cascade @user.profile, ["web"] %>
 
   <% if cuser and cuser.admin? or @user.public_email %>
     <%= cascade @user, ["email_s"] %>
@@ -83,7 +81,7 @@
     Achievements
   </h3>
 
-  <div class="userFields">
+  <div class="group">
     <%= raw @user.profile.achievements_parsed %>
   </div>
 <% end %>

app/views/users/show.html.erb

@@ -1,72 +1,47 @@
-<table>
-  <tr>
-    <td id="userNavi">
-      <div class="box">
-        <%= image_tag @user.profile.avatar.url, :id => "user" %>
+<div id="user-profile">
+  <h1 class="fancy">
+    <span><%= @user.username %></span>
+  </h1>
 
-        <div class="center bold">
-          <%= @user.username %>
-        </div>
-      </div>
+  <div class="photo">
+    <%= image_tag @user.profile.avatar.url %>
+  </div>
 
-      <br />
-
-      <div class="box center">
-        <a href="javascript:;" id="general">General</a>
-      </div>
-
-      <div class="box center">
-        <a href="javascript:;" id="favorites">Favorites</a>
-      </div>
-
-      <div class="box center">
-        <a href="javascript:;" id="computer">Computer</a>
-      </div>
-
-      <% if @user.articles.count > 0 %>
-        <div class="box center">
-          <a href="javascript:;" id="articles">Articles</a>
-        </div>
-      <% end %>
-
-      <% if @user.movies.count > 0 %>
-        <div class="box center">
-          <a href="javascript:;" id="movies">Movies</a>
-        </div>
-      <% end %>
+  <div class="tabs tabbed">
+    <ul id="user-nav" class="tabs">
+      <li><a id="general">General</a></li>
 
       <% if @user.teamers.past.count > 0 %>
-        <div class="box center">
-          <a href="javascript:;" id="teams">Teams</a>
-        </div>
+        <li><a id="teams">Teams</a></li>
       <% end %>
 
       <% if @user.match_teams.count > 0 %>
-        <div class="box center">
-          <a href="javascript:;" id="matches">Matches</a>
-        </div>
+        <li><a id="matches">Matches</a></li>
       <% end %>
 
       <% if @user.predictions.count > 0 %>
-        <div class="box center">
-          <a href="javascript:;" id="predictions">Predictions</a>
-        </div>
+        <li><a id="predictions">Predictions</a></li>
       <% end %>
 
-      <div class="box center">
-        <a href="javascript:;" id="comments">Comments</a>
-      </div>
+      <% if @user.articles.count > 0 %>
+        <li><a id="articles">Articles</a></li>
+      <% end %>
 
-      <div class="center">
-        <% if cuser and @user.can_update? cuser %>
-          <%= link_to 'Edit', edit_user_path(@user) %>
-          <%= link_to 'My Agenda', "/users/agenda/#{cuser.id}" %>
-        <% end %>
-      </div>
-    </td>
+      <% if @user.movies.count > 0 %>
+        <li><a id="movies">Movies</a></li>
+      <% end %>
 
-    <td id="userData" class="box">
+      <li><a id="comments">Comments</a></li>
+    </ul>
+
+    <div id="user-data" class="tabbed-contents">
       <%= render :partial => "general" %>
-    </td>
-  </tr>
-</table>
+    </div>
+  </div>
+
+  <% if cuser and @user.can_update? cuser %>
+    <%= link_to 'Edit', edit_user_path(@user), class: 'button' %>
+    <%= link_to 'My Agenda', "/users/agenda/#{cuser.id}", class: 'button' %>
+  <% end %>
+</div>
+

app/views/users/show.js.erb

@@ -1,7 +1,8 @@
-$("td#userData").fadeIn("fast");
-$("td#userData").html("<%= escape_javascript(render(:partial => @page)) %>");
+$("#user-data").fadeIn("fast");
+$("#user-data").html("<%= escape_javascript(render(:partial => @page)) %>");
+
 <% if ["comments", "matches", "predictions", "teams"].include? @page %>
-  $("td#userData").removeClass("box");
+  $("#user-data").removeClass("box");
 <% else %>
-$("td#userData").addClass("box");
+  $("#user-data").addClass("box");
 <% end %>