Tests passing with redesign

Improved layout slightly to match grid

app/assets/javascripts/application.js.coffee

@@ -9,7 +9,7 @@
 //= require_self
 
 $ ->
-  $('logout').click ->
+  $('#logout').click ->
     $(this).closest('form').submit()
 
   $('select').each (i, el) ->

app/assets/stylesheets/_variables.scss

@@ -2,12 +2,15 @@
   Neat Overrides
 */
 
-@import "neat-helpers";
+$max-width: em(1200);
 
-$column: 90px;
+/*
-$gutter: 30px;
+  Grid Debugging
-$grid-columns: 12;
+*/
-$max-width: em(1180);
+
+// $visual-grid: true;
+// $visual-grid-index: 10000;
+// $visual-grid-opacity: 0.5;
 
 /*
   Neat Breakpoints

app/assets/stylesheets/application.css.scss

@@ -5,6 +5,7 @@
 @import "bourbon";
 @import "variables";
 @import "neat";
+@import "neat-helpers";
 @import "font-awesome";
 
 /*
@@ -14,6 +15,18 @@
 @import "mixins/buttons";
 @import "mixins/flashes";
 
+/*
+  Layout
+*/
+
+@import "layout/body";
+@import "layout/typography";
+@import "layout/header";
+@import "layout/navigation";
+@import "layout/sidebar";
+@import "layout/footer";
+@import "layout/helpers";
+
 /*
   Components
 */
@@ -29,18 +42,6 @@
 @import "components/tabs";
 @import "components/shoutbox";
 
-/*
-  Layout
-*/
-
-@import "layout/typography";
-@import "layout/header";
-@import "layout/navigation";
-@import "layout/body";
-@import "layout/sidebar";
-@import "layout/footer";
-@import "layout/helpers";
-
 /*
   Pages
 */

app/assets/stylesheets/components/_comments.scss

@@ -1,4 +1,4 @@
-#comments {
+#comments-thread {
   @include span-columns(12);
   
   h3 {

app/assets/stylesheets/components/_forms.scss

@@ -252,7 +252,7 @@ form.square {
 form.search {
 
   .query {
-    @include span-columns(9);
+    @include span-columns(7 of 9);
 
     input {
       width: 100%;
@@ -260,7 +260,7 @@ form.search {
   }
 
   .controls {
-    @include span-columns(3);
+    @include span-columns(2 of 9);
     @include shift(0);
     @include omega;
 

app/assets/stylesheets/components/_gather.scss

@@ -168,5 +168,5 @@
   padding: em(14);
   text-align: center;
   margin-left: - em(20);
-  width: $max-width;
+  width: $max-width + $container-padding*2;
 }

app/assets/stylesheets/layout/_body.scss

@@ -2,6 +2,8 @@
   Main Containers
 */
 
+$container-padding: em(20);
+
 html,
 body {
   margin: 0;
@@ -20,22 +22,15 @@ body {
   min-height: 100%;
 }
 
-%container-padded {
-  padding: 0 em(20);
-}
-
 .wrapper {
   @include outer-container;
-}
+  max-width: $max-width + $container-padding*2;
-
-#content {
-  @extend %container-padded;
 }
 
 #content {
   @include span-columns(12);
   background: $light-blue;
-  padding-top: em(20);
+  padding: $container-padding $container-padding 0 $container-padding;
 }
 
 #forums {
@@ -43,11 +38,11 @@ body {
 }
 
 #main {
-  @include span-columns(9);
+  @include span-columns(9 of 12);
 }
 
 #sidebar {
-  @include span-columns(3);
+  @include span-columns(3 of 12);
   @include omega();
 }
 

app/assets/stylesheets/layout/_footer.scss

@@ -6,11 +6,10 @@
 
   @include outer-container;
   background: $footer-background;
-  padding: $base-line-height*2 $gutter;
+  max-width: $max-width + $container-padding*2;
-  width: 100%;
 
-  .wrapper {
+  .content {
-    @extend %container-padded;
+    padding: $container-padding*2 $container-padding;
   }
 
   .footer-links {
@@ -32,7 +31,7 @@
     text-align: center;
 
     @include media($medium-screen) {
-      text-align: left;
+      text-align: center;
     }
   }
 

app/assets/stylesheets/layout/_header.scss

@@ -13,7 +13,6 @@ nav.top {
 
   .menu-wrapper {
     @include outer-container;
-    @extend %container-padded;
     position: relative;
     z-index: 9999;
   }
@@ -111,6 +110,8 @@ nav.top {
 }
 
 header .banner {
+  padding: 0 $container-padding;
+  
   #logo {
     @include span-columns(8);
     min-height: em(200);

app/assets/stylesheets/layout/_navigation.scss

@@ -3,6 +3,7 @@
 */
 
 #menu {
+  @include span-columns(12);
   font-family: $montserrat;
   background-color: $background-primary;
   height: em(60);

app/assets/stylesheets/pages/_users.scss

@@ -71,6 +71,28 @@
   #user-data {
     @include span-columns(12);
     margin-bottom: em(20);
+
+    h2,
+    h3,
+    h4 {
+      margin-bottom: 1em;
+    }
+
+    .group {
+      @include span-columns(6);
+
+      dd a {
+        float: none;
+        display: block;
+      }
+    }
+
+    tbody td {
+      &:first-child,
+      &:nth-child(2) {
+        text-align: left;
+      }
+    }
   }
 }
 

app/helpers/application_helper.rb

@@ -93,10 +93,10 @@ module ApplicationHelper
       end
 
       item << content_tag(:dt) do
-        "#{name.to_s.capitalize.gsub(/_s/, '').gsub(/_/, ' ')}"
+        "#{name.to_s.capitalize.gsub(/_s/, '').gsub(/_/, ' ')}".html_safe
       end
       item << content_tag(:dd) do
-        result
+        result.html_safe
       end
 
       item
@@ -165,6 +165,10 @@ module ApplicationHelper
   end
 
   def latest_rules
+    if Contest.last
       Contest.last.rules
+    else
+      article_path(Article::RULES)
+    end
   end
 end

app/views/application/_footer.html.erb

@@ -1,5 +1,5 @@
 <footer class="footer">
-  <div class="wrapper">
+  <div class="content">
     <div class="footer-links">
       <ul>
         <li><h3><%= link_to "Contests", controller: "contests", action: "current" %></h3></li>

app/views/comments/_index.html.erb

@@ -1,4 +1,4 @@
-<div id="comments">
+<div id="comments-thread">
   <h3>Comments</h3>
   <%= render partial: "comments/comment", collection: @comments %>
   <%= render partial: "comments/new" %>

app/views/comments/create.js.erb

@@ -1,2 +1,2 @@
 $(".comment-form").hide();
-$("#comments").append("<%= escape_javascript(render("comment", comment: @comment)) %>");
+$("#comments-thread").append("<%= escape_javascript(render("comment", comment: @comment)) %>");

app/views/users/_computer.html.erb

@@ -1,8 +0,0 @@
-<h2>
-  Computer
-</h2>
-
-<div class="userFields">
-  <%= cascade @user.profile, ["cpu", "gpu", "ram", "psu", "motherboard", "soundcard", "hdd", "case", "monitor", "mouse"] %>
-  <%= cascade @user.profile, ["mouse_pad", "keyboard", "head_phones", "res", "sensitivity", "monitor_hz", "scripts"] %>
-</div>

app/views/users/_favorites.html.erb

@@ -1,7 +0,0 @@
-<h2>
-  Favorites
-</h2>
-
-<div class="userFields">
-  <%= cascade @user.profile, ["hobby", "singleplayer", "multiplayer", "food", "beverage", "music", "book", "movie", "tvseries"] %>
-</div>

app/views/users/_general.html.erb

@@ -1,87 +1,85 @@
 <div class="group">
   <h4>General information</h4>
   
-  <%= cascade @user, ["steamid"] %> 
+  <dl>
-  <%= link_to "http://steamidfinder.com/?STEAM_#{@user.steamid}" do %>
+    <dt>Age</dt>
-    <small>Search for corresponding Steam account</small>
+    <dd><%= @user.age %></dd>
+    <dt>Country</dt>
+    <dd><%= @user.country %></dd>
+    <dt>Town</dt>
+    <dd><%= @user.profile.town %></dd>
+    <dt>SteamID</dt>
+    <dd>
+      <%= @user.steamid %>
+      <%= link_to "Search for Steam Account", "http://steamidfinder.com/?STEAM_#{@user.steamid}" %>
+    </dd>
+  </dl>
+
+  <h4>Contact</h4>
+
+  <dl>
+    <% if !@user.profile.web.blank? %>
+      <dt>Web</dt>
+      <dd><%= @user.profile.web %></dd>
     <% end %>
-  <%= cascade @user, ["age"] %>
-  <%= cascade @user, ["country"] %>
-  <%= cascade @user.profile, ["town"] %>
-</div>
-
-
-
-<div class="group">
-  <h4>Miscellaneous</h4>
-  
-  <p>
-    <strong>Joined:</strong> <%= longtime @user.created_at %>
-  </p>
-
-  <p>
-    <strong>Last visit:</strong> <%= longtime @user.lastvisit %>
-  </p>
-
-  <% if cuser and cuser.admin? %>
-    <p>
-      <b>Last ip</b> <%= @user.lastip %>
-  </p>
-<% end %>
-
-<%= cascade @user, [["Comments", "posted_comments.count"], ["Matches", "matches.count"]] %>
-
-<% if @user.groups.count > 0 %>
-  <p>
-    <b>Groups:</b>
-    <% for group in @user.groups.all %>
-      <%= namelink group %>
-    <% end %>
-  </p>
-<% end %>
-
-<% if @user.teamers.active.count > 0 %>
-  <p>
-    Teams:
-    <% @user.teamers.active.each do |teamer| %>
-      <%= namelink teamer.team %>
-    <% end %>
-  </p>
-<% end %>
-</div>
-
-<h3>
-  Contact
-</h3>
-
-<div class="group">
-  <%= cascade @user.profile, ["web"] %>
 
     <% if cuser and cuser.admin? or @user.public_email %>
-    <%= cascade @user, ["email_s"] %>
+      <dt>Email</dt>
+      <dd><%= @user.email_s %></dd>
     <% end %>
+
     <% if @user.profile.steam_profile and @user.profile.steam_profile != "" %>
-    <p>
+      <dt>Steam</dt>
-      <b>Steam:</b>
+      <dd>
         <% if @user.profile.steam_profile.match(/\A[0-9]*\z/) %>
           <%= link_to @user.profile.steam_profile, "http://steamcommunity.com/profiles/#{@user.profile.steam_profile}" %>
         <% elsif @user.profile.steam_profile.match(/\A[A-Za-z0-9_\-\+]{1,40}\z/) %>
           <%= link_to @user.profile.steam_profile, "http://steamcommunity.com/id/#{@user.profile.steam_profile}" %>
         <% end %>
-    </p>
+      </dd>
+    <% end %>
+  </dl>
+
+  <% if @user.profile.achievements and !@user.profile.achievements.empty? %>
+    <h4>Achievements</h4>
+    <%= @user.profile.achievements_parsed.html_safe %>
   <% end %>
 
-  <p>
+  <%= link_to "Send PM", { controller: "messages", action: "new", id: "User", id2: @user }, { class: 'button tiny' } %>
-    <%= link_to "Send PM", :controller => "messages", :action => "new", :id => "User", :id2 => @user %>
-  </p>
 </div>
 
-<% if @user.profile.achievements and !@user.profile.achievements.empty? %>
+<div class="group">
-  <h3>
+  <h4>Statistics</h4>
-    Achievements
-  </h3>
   
-  <div class="group">
+  <dl>
-    <%= raw @user.profile.achievements_parsed %>
+    <dt>Joined</dt>
-  </div>
+    <dd><%= longtime @user.created_at %></dd>
-<% end %>
+    <dt>Last visit</dt>
+    <dd><%= longtime @user.lastvisit %></dd>
+    <dt></dt>  
+
+    <% if cuser and cuser.admin? %>
+      <dt>Last IP</dt>
+      <dd><%= @user.lastip %></dd>
+    <% end %>
+
+    <dt>Comments</dt>
+    <dd><%= @user.posted_comments.count %></dd>
+    <dt>Matches</dt>
+    <dd><%= @user.matches.count %></dd>
+
+    <% if @user.groups.count > 0 %>
+      <dt>Groups</dt>
+      <% for group in @user.groups.all %>
+        <dd><%= namelink group %></dd>
+      <% end %>
+    <% end %>
+
+    <% if @user.teamers.active.count > 0 %>
+      <dt>Teams</dt>
+      <% @user.teamers.active.each do |teamer| %>
+        <dd><%= namelink teamer.team %></dd>
+      <% end %>
+    <% end %>
+  </dl>
+</div>

app/views/users/_matches.html.erb

@@ -1,11 +1,6 @@
-<h2>
+<h4>Match History</h4>
-  Match History
-</h2>
 
 <% @user.match_teams.each do |team| %>
-  <h3>
+  <h4><%= namelink team %></h4>
-    <%= namelink team %>
+  <%= render partial: "matches/list", locals: { matches: Match.finished.ordered.of_userteam(@user, team), friendly: team, contest: true, exclude_maps: true } %>
-  </h3>
-
-  <%= render :partial => "matches/list", :locals => {:matches => Match.finished.ordered.of_userteam(@user, team), :friendly => team, :contest => true, :exclude_maps => true} %>
 <% end %>

app/views/users/agenda.html.erb

@@ -26,8 +26,8 @@
             <td class="<%= 'current' if teamer.team == @user.team %>">
               <%= link_to (h teamer.team.name), teamer.team %>
             </td>
-            <td><%= h teamer.comment %></td>
+            <td><%=h teamer.comment %></td>
-            <td><%= h teamer.ranks[teamer.rank] %></td>
+            <td><%=h teamer.ranks[teamer.rank] %></td>
             <td>
               <% if @user.team != teamer.team %>
                 <%= form_for @user do |u| %>

spec/features/calendar/google_calendar_widget_spec.rb

@@ -70,7 +70,7 @@ feature 'Google Calendar widget' do
   private
 
   def first_event
-    page.find(:xpath, "//div[@id = 'index-calendar']/div/div[@class = 'content'][1]")
+    first ".widget.calendar .entry"
   end
 
   def timezone_adjusted

spec/features/users/case_insensitive_login_spec.rb

@@ -15,7 +15,10 @@ feature 'Case insensitive login' do
       click_button submit(:user, :login)
       
       expect(page).to have_content(I18n.t('login_successful'))
-      expect(page).to have_content("Logged in as: #{username}")
+      
+      within user_status do
+        expect(page).to have_content(username)
+      end
     end
 
     scenario 'with a non-matching case allows the user to sign in' do
@@ -23,7 +26,10 @@ feature 'Case insensitive login' do
       click_button submit(:user, :login)
       
       expect(page).to have_content(I18n.t('login_successful'))
-      expect(page).to have_content("Logged in as: #{username}")
+
+      within user_status do
+        expect(page).to have_content(username)
+      end
     end
   end
 

spec/features/users/user_signs_up_spec.rb

@@ -8,29 +8,37 @@ feature 'Visitor signs up' do
   end
 
   scenario 'with valid Username, Email, Password and Steam ID' do
+    within registration_form do
       fill_form(:user, user.slice(*sign_up_attributes))
       click_button submit(:user, :create)
+    end
     
-    expect(page).to have_content("Logged in as: #{user[:username]}")
+    expect(user_status).to have_content(user[:username])
   end
 
   scenario 'with invalid Email' do
+    within registration_form do
       fill_form(:user, user.slice(*sign_up_attributes).merge({ email: "invalid" }))
       click_button submit(:user, :create)
+    end
 
     expect(page).to have_content(error_message('email.invalid'))
   end
 
   scenario 'with blank Password' do
+    within registration_form do
       fill_form(:user, user.slice(*sign_up_attributes).merge({ raw_password: "" }))
       click_button submit(:user, :create)
+    end
 
     expect(page).to have_content(error_message('raw_password.blank'))
   end
 
   scenario 'with invalid Steam ID' do
+    within registration_form do
       fill_form(:user, user.slice(*sign_up_attributes).merge({ steamid: "invalid" }))
       click_button submit(:user, :create)
+    end
 
     expect(page).to have_content(error_message('steamid.invalid'))
   end

spec/support/features/session_helpers.rb

@@ -17,5 +17,13 @@ module Features
       
       click_button I18n.t('helpers.submit.user.update')
     end
+
+    def user_status
+      find "#authentication"
+    end
+
+    def registration_form
+      find "#new_user"
+    end
   end
 end