Cleans up articles, comments and widget styling

app/assets/stylesheets/application.css.scss

@@ -40,4 +40,5 @@
   Pages
 */
 
+@import "pages/news";
 @import "pages/contests";

app/assets/stylesheets/components/_comments.scss

@@ -1,3 +1,24 @@
+#comments {
+  @include span-columns(12);
+  
+  h3 {
+    margin: 1em 0;
+  }
+
+  .comment-form {
+    @include span-columns(12);
+    margin-bottom: em(20);
+
+    h3 {
+      margin-top: 0;
+    }
+
+    .fields {
+      margin-bottom: em(20);
+    }    
+  }
+}
+
 .comment {
   $comment-gutter: 1.4em;
   $comment-image-padding: .7em;

app/assets/stylesheets/components/_forms.scss

@@ -12,7 +12,8 @@ form {
 
     > .field_with_errors {
 
-      input {
+      input,
+      textarea {
         border: $input-border-width solid $flash-error;
 
         &:hover,
@@ -26,7 +27,8 @@ form {
       }
     }
 
-    input {
+    input,
+    textarea {
       background-color: $input-primary;
       color: $input-text;
       font-size: em(16);
@@ -36,10 +38,12 @@ form {
 
       &:hover {
         border: $input-border-width solid lighten($input-secondary, 20%);
+        padding: $input-padding ($input-padding - $input-border-width);
       }
 
       &:focus {
         border: $input-border-width solid $input-secondary;
+        padding: $input-padding ($input-padding - $input-border-width);
         color: $input-secondary;
         outline: none;
         background: transparent;
@@ -68,10 +72,12 @@ form.dark {
 
       &:hover {
         border: $input-dark-border-width solid $input-dark-border-hover-colour;
+        padding: $input-padding ($input-padding - $input-dark-border-width);
       }
 
       &:focus {
         border: $input-dark-border-width solid $input-dark-border-focus-colour;
+        padding: $input-padding ($input-padding - $input-dark-border-width);
       }
 
       &:-webkit-autofill {

app/assets/stylesheets/layout/_sidebar.scss

@@ -1,6 +1,7 @@
 #sidebar {
 
   .widget {
+    @include span-columns(12);
     margin-bottom: em(20);
     padding: em(20);
     background: $light-gray;
@@ -10,13 +11,9 @@
     }
 
     .widget-content-wrapper {
+      @include span-columns(12);
       font-size: em(14);
     }
-  }
-
-  .calendar {
-    max-height: 500px;
-    overflow-x: scroll;
 
     .separator {
       color: white;
@@ -26,4 +23,53 @@
       margin-bottom: em(12);
     }
   }
+
+  .calendar {
+    max-height: 500px;
+    overflow-x: scroll;
+  }
+
+  .shoutbox {
+    .transcript {
+      margin-bottom: 20px;
+    }
+
+    input {
+      @include span-columns(12);
+      margin-bottom: em(10);
+    }
+  }
+
+  .highlights,
+  .posts {
+
+    ol {
+      margin-bottom: em(20);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .poll {
+    .question {
+      @include span-columns(12);
+      margin-bottom: em(20);
+
+      h5 {
+        margin-bottom: 1em;
+      }
+    }
+
+    .bar {
+      display: block;
+      background: $green;
+      height: 10px;
+    }
+
+    .button {
+      margin-bottom: 0;
+    }
+  }
 }

app/assets/stylesheets/pages/_news.scss

@@ -0,0 +1,31 @@
+div.article {
+  @include span-columns(12);
+  border-bottom: 1px solid rgba(35, 35, 35, 0.1);
+  padding-bottom: em(20);
+
+  h1 {
+    margin: 1em 0;
+  }
+
+  .content {
+    @include span-columns(12);
+    margin-bottom: em(20);
+  }
+
+  .author {
+    @include span-columns(6);
+  }
+
+  .actions {
+    @include span-columns(6);
+    @include omega;
+    text-align: right;
+  }
+
+  &:first-child {
+  
+    h1 {
+      margin-top: 0;
+    }    
+  }
+}

app/views/articles/_article.html.erb

@@ -1,7 +1,7 @@
-<div class="article wide">
+<div class="article">
   <h1><%= namelink article %></h1>
 
-  <div class="clear content">
+  <div class="content">
     <% if article.text_coding == Article::CODING_HTML %>
       <%= article.text.html_safe %>
     <% else %>
@@ -9,9 +9,9 @@
     <% end %>
   </div>
 
-  <h4 class="author">
+  <div class="author">
-    <%= namelink article.user %> on <%= longtime article.created_at %>
+    <%= flag(article.user.country) %> <%= namelink(article.user) %> on <%= longtime article.created_at %>
-  </h4>
+  </div>
 
   <div class="actions">
     <% if article.can_update? cuser %>

app/views/comments/_index.html.erb

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

app/views/comments/_new.html.erb

@@ -1,10 +1,8 @@
-<div class="commentNew center centered">
+<div class="comment-form">
-  <h3>
+  <h3>New comment</h3>
-    New comment
-  </h3>
 
   <% if cuser %>
-    <%= form_for(@comment, :remote => true) do |f| %>
+    <%= form_for(@comment, remote: true) do |f| %>
       <ul>
         <% @comment.errors.full_messages.each do |msg| %>
           <li><%= msg %></li>
@@ -12,12 +10,12 @@
       </ul>
       <%= f.hidden_field :commentable_id %>
       <%= f.hidden_field :commentable_type %>
-      <p>
+      <div class="fields">
-        <%= f.text_area :text, :rows => 5, :cols => 40, :id => "textArea" %>
+        <%= f.text_area :text, rows: 5, cols: 40, id: "textArea" %>
-      </p>
+      </div>
-      <p>
+      <div class="controls">
         <%= f.submit 'Post Comment' %>
-      </p>
+      </div>
     <% end %>
   <% else %>
     Please log in or <%= link_to "register", new_user_path %> to post comments.

app/views/polls/_show.html.erb

@@ -1,19 +1,21 @@
-<h5><%= @poll.question %></h5>
+<div class="widget-content-wrapper">
+  <div class="question">
+    <h5><%= @poll.question %></h5>
 
-<div>
     <% @poll.options.all.each do |opt| %>
-    <p>
+      <p class="option">
         <% if cuser and !@poll.voted?(cuser) %>
-        <%= link_to (h opt), :controller => "votes", :action => "create", :vote => {:votable_id => opt.id, :votable_type => "Option"} %>
+          <%= link_to (h opt), controller: "votes", action: "create", vote: { votable_id: opt.id, votable_type: "Option" } %>
         <% else %>
           <%= opt.option %> <br />
         <% end %>
         <% if opt.votes > 0 %>
-        <%= image_tag "/images/icons/poll.png", :class => "bar", :height => 6, :width => opt.votes*100/@poll.votes %>
+          <%= content_tag :div, "", { class: "bar", style: "width: #{opt.votes*100/@poll.votes}%;" } %>
         <% end %>
         <span><%= opt.votes %></span>
       </p>
     <% end %>
+  </div>
 </div>
 
-<p><%= link_to "Archive..", polls_path %></p>
+<%= link_to "Archive", polls_path, class: "button" %>

app/views/shoutmsgs/_new.html.erb

@@ -3,15 +3,17 @@
     You have been muted.
   <% else %>
     <% scroll = shoutmsg.domain == "shoutbox" ? "" : "$('#{shoutmsg.domain}').scrollTop = $('#{shoutmsg.domain}').scrollHeight;" %>
-    <%= form_for(shoutmsg, :remote => true, :html => {:id => "new_#{shoutmsg.domain}"}) do |f| %>
+    <%= form_for(shoutmsg, remote: true, html: { id: "new_#{shoutmsg.domain}" }) do |f| %>
       <% if shoutmsg.shoutable %>
         <%= f.hidden_field :shoutable_type %>
         <%= f.hidden_field :shoutable_id %>
       <% end %>
-      <p>
+      <div class="fields">
         <%= f.text_field :text, size: 12, id: "#{shoutmsg.domain}_text", class: "shout_input" %>
+      </div>
+      <div class="controls">
         <%= submit_tag "Shout!" %>
-      </p>
+      </div>
     <% end %>
   <% end %>
 <% end %>

app/views/widgets/_highlights.html.erb

@@ -1,12 +1,12 @@
 <div class="widget highlights">
   <h4><%= t('widget.highlights') %></h4>
-  <div class="body">
+
-    <div class="content">
+  <div class="widget-content-wrapper">
     <% if cuser and cuser.active_contests.count != 0 then %>
-        <h3>
+      <div class="separator">
         Your contests
-          <%= link_to "(More)", :controller => :matches, :matchesTab => "YourTab" %>
+        <%= link_to "(More)", controller: :matches, matchesTab: "YourTab" %>
-        </h3>
+      </div>
       <ol>
         <% cuser.active_contests.each do |contest| %>
           <li>
@@ -18,16 +18,16 @@
     <% end %>
 
     <% if Match.recent.count != 0 then %>
-        <h5>
+      <div class="separator">
         Latest Matches
-          <%= link_to "(More)", :controller => :matches, :matchesTab => "RecentTab" %>
+        <%= link_to "(More)", controller: :matches, matchesTab: "RecentTab" %>
-        </h5>
+      </div>
       <ol>
         <% Match.realfinished.reverse_order.recent.chrono.each do |match| %>
           <li>
             <%= link_to match, :class => "bold #{match.score_color}" do %>
               <%= h match.score1 %> - <%= h match.score2 %>
-                <%= link_to match.contester1.team.tag, :controller => :contesters, :action => :show, :id => match.contester1 %> <%= if match.score1 > match.score2 then ">>" elsif match.score2 > match.score1 then "<<" else "==" end %> <%= link_to match.contester2.team.tag, :controller => :contesters, :action => :show, :id => match.contester2 %>
+              <%= link_to match.contester1.team.tag, controller: :contesters, action: :show, id: match.contester1 %> <%= if match.score1 > match.score2 then ">>" elsif match.score2 > match.score1 then "<<" else "==" end %> <%= link_to match.contester2.team.tag, controller: :contesters, action: :show, id: match.contester2 %>
                 (<%= link_to match.contest.short_name, :controller => :contests, :action => :show, :id => match.contest.id %>)
             <% end %>
             <br />
@@ -37,19 +37,20 @@
     <% end %>
 
     <% if Match.future5.count != 0 then %>
-        <h5>
+      <div class="separator">
         Upcoming matches
-          <%= link_to "(More)", :controller => :matches, :matchesTab => "UpcomingTab" %>
+        <%= link_to "(More)", controller: :matches, matchesTab: "UpcomingTab" %>
-        </h5>
+      </div>
       <ol>
         <% Match.future5.chrono.each do |match| %>
           <li>
-              <%= namelink match, 50 %> (<%= link_to match.contest.short_name, :controller => :contests, :action => :show, :id => match.contest.id %>)<br />
+            <%= namelink match, 50 %><br>
-              <%= shorttime match.match_time %> (<%= match.predictions.count %> preds : <%= match.preds(1) %>% - <%= match.preds(2) %>%)
+            [<%= link_to match.contest.short_name, controller: :contests, action: :show, id: match.contest.id %>]
+            <%= shorttime match.match_time %><br>
+            <em><%= match.predictions.count %> preds : <%= match.preds(1) %>% - <%= match.preds(2) %>%</em>
           </li>
         <% end %>
       </ol>
     <% end %>
   </div>
-  </div>
 </div>

app/views/widgets/_poll.html.erb

@@ -1,11 +1,8 @@
 <% if @current_action == "news_index" %>
   <div class="widget poll">
     <h4><%= t('widget.poll') %></h4>
-    <div class="body">
+
-      <div class="content">
     <% @poll = Poll.first(order: "created_at DESC") %>
     <%= render(partial: "polls/show") if @poll %>
   </div>
-    </div>
-  </div>
 <% end %>

app/views/widgets/_posts.html.erb

@@ -1,25 +1,24 @@
 <div class="widget posts">
   <h4><%= t('widget.posts') %></h4>
-  <div class="body">
+
-    <div class="content">
+  <div class="widget-content-wrapper">
-      <h5>Latest forum posts</h3>
+    <div class="separator">Latest forum posts</div>
     <ol>
       <% Topic.basic.recent.latest_page(1).each do |topic| %>
         <li>
-            <%= link_to shorten(topic, 35), lastpost(topic) %>
+          <%= link_to shorten(topic, 28), lastpost(topic) %>
         </li>
       <% end %>
     </ol>
 
-      <h5>Latest comments</h5>
+    <div class="separator">Latest comments</div>
     <ol>
       <% Comment.recent.filtered.each do |comment| %>
         <li>
           <%= namelink comment.commentable, 15 %>
-            by <%= namelink comment.user, 15 %>
+          by <%= namelink comment.user, 10 %>
         </li>
       <% end %>
     </ol>
   </div>
-  </div>
 </div>

app/views/widgets/_shoutbox.html.erb

@@ -6,8 +6,6 @@
     </div>
   </div>
   <%= render :partial => "shoutmsgs/new", :locals => { :shoutmsg => Shoutmsg.new } %>
-  <p>
   <%= link_to "Shoutbox Recent History", :controller => :shoutmsgs, :action => "index" %><br/>
   <%= link_to "Shoutbox Rules", article_path(Article::SB_RULES) %>
-  </p>
 </div>