Improve news page layout

Fix forums unread icon
Fix double linebreaks in BBcode
Increase colour darkness

app/assets/stylesheets/_variables.scss

@@ -59,7 +59,7 @@ $dark-gray: #21262A;
 $medium-gray: #2F383D;
 
 $light-blue: darken(#2FB0E7, 10);
-$light-gray: #ECF1F5;
+$light-gray: darken(#ECF1F5, 10);
 $light-red: #e56c69;
 $light-yellow: #FFF6BF;
 $light-green: #1f7f5c;
@@ -106,3 +106,4 @@ $button-text: white;
 */
 
 $content-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
+$light-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);

app/assets/stylesheets/components/_breadcrumbs.scss

@@ -8,6 +8,7 @@
 
   a {
     display: inline-block;
+    font-size: $base-font-size + 2px;
   }
 
   .fa {

app/assets/stylesheets/components/_forms.scss

@@ -42,7 +42,7 @@ form {
     }
 
     .select-wrapper {
-      $select-padding: 7px;
+      $select-padding: 6px;
       $select-height: $input-height - 4px;
 
       border-radius: $input-border-radius;

app/assets/stylesheets/components/_gather.scss

@@ -103,13 +103,12 @@
 #gather-area {
   @include span-columns(12);
 
-  $column-border-width: 15px;
+  $column-border-width: 10px;
   $column-border-radius: 5px;
 
   .gather-columns {
     @include span-columns(12);
     @include row(table);
-    margin-bottom: 20px;
     margin-left: - $column-border-width;
     width: $max-width - ($column-border-width*2);
   }
@@ -119,7 +118,7 @@
     @include pad;
     border-radius: $column-border-width + $column-border-radius;
     padding-bottom: 20px;
-    background: $light-gray;
+    background: lighten($light-gray, 5%);
     padding: 20px;
     border: $column-border-width solid white;
 

app/assets/stylesheets/components/_tables.scss

@@ -39,7 +39,7 @@ table.striped > tbody {
   }
 
   > tr:nth-child(2n) td {
-    background-color: transparentize($light-blue, 0.95);
+    background-color: transparentize($light-blue, 0.8);
   }
 
   .actions {

app/assets/stylesheets/mixins/_flashes.scss

@@ -34,11 +34,12 @@
 */
 
 .highlight {
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 18px;
   border-radius: 3px;
   background: $blue;
   color: white;
   display: inline-block;
   font-style: italic;
-  padding: 0 6px;
+  padding: 0 3px;
 }

app/assets/stylesheets/pages/_forums.scss

@@ -34,7 +34,7 @@ div#categories {
       repeat: no-repeat;
     }
 
-    &.highlight {
+    &.updated {
       background-image: image-url('layout/forum-category-highlight.png');
     }
   }

app/assets/stylesheets/pages/_news.scss

@@ -15,6 +15,10 @@ div.article {
     @include span-columns(12);
     margin-bottom: 40px;
 
+    * {
+      font-family: $open-sans !important;
+    }
+
     ul {
       @extend ul.disc;
     }
@@ -44,11 +48,20 @@ div.article {
     margin-top: 10px;
   }
 
-  &:first-child {
+  &.preview {
-  
+    border-radius: $base-border-radius;
+    background: lighten($light-gray, 5%);
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: $light-shadow;
+
+    .content {
+      margin-bottom: 10px;
+    }
+
     h1 {
-      margin-top: 0;
+      margin: 0 0 .5em 0;
-    }    
+    }
   }
 }
 

app/controllers/articles_controller.rb

@@ -6,7 +6,7 @@ class ArticlesController < ApplicationController
   end
 
   def news_index
-    @news = Article.with_comments.ordered.limited.nodrafts.onlynews
+    @news = Article.with_comments.ordered.nodrafts.onlynews.limit(10)
     @categories = Category.ordered.domain(Category::DOMAIN_NEWS)
     @nobody = true
   end

app/helpers/application_helper.rb

@@ -40,6 +40,10 @@ module ApplicationHelper
     printtime time, "%d %B %y %H:%M"
   end
 
+  def longertime time
+    printtime time, "%e %B %Y - %H:%M %Z"
+  end
+
   def shorttime time
     printtime time, "%d/%b/%y %H:%M"
   end
@@ -55,12 +59,9 @@ module ApplicationHelper
   def printtime time, format
     return unless time
 
-    out = ""
+    content_tag(:span, style: 'font-style: italic') do
-    out << '<span style="font-style: italic; ">'
+      Time.use_zone(timezone_offset) { time.strftime(format) }
-    out <<  time.strftime(format)
+    end
-    out << '</span>'
-
-    out.html_safe
   end
 
   def cascade model, list

app/models/concerns/extra.rb

@@ -26,7 +26,7 @@ module Extra
     end
 
     def bbcode_to_html(text)
-      Sanitize.clean(text.to_s).bbcode_to_html.gsub(/\n|\r\n/, "<br>").html_safe
+      Sanitize.clean(text.to_s).bbcode_to_html.gsub(/\r/, "<br>").html_safe
     end
 
     def move_up(scope, column = "position")

app/views/articles/_preview.html.erb

@@ -0,0 +1,31 @@
+<div class="article preview">
+  <h1><%= namelink article %></h1>
+
+  <div class="content">
+    <% if article.text_coding == Article::CODING_HTML %>
+      <% 
+        content = article.text.html_safe
+        content = truncate(raw(strip_tags(article.text)), length: 200) if !expanded
+      %>
+
+      <%= content %>
+    <% else %>
+      <% 
+        content = article.text_parsed.html_safe
+        content = truncate(raw(strip_tags(article.text_parsed)), length: 200) if !expanded
+      %>
+
+      <%= content %>
+    <% end %>
+  </div>
+
+  <div class="author">
+    <%= namelink(article.user) %> on <%= longertime article.created_at %>
+  </div>
+
+  <div class="comments">
+    <%= link_to article do %>
+      <%= icon 'comments' %> Comments (<%= article.comments.count %>)
+    <% end %>
+  </div>
+</div>

app/views/articles/news_index.html.erb

@@ -1,11 +1,11 @@
 <div id="news">
-  <% @news.each do |item| %>
+  <% @news.each_with_index do |item, i| %>
-    <%= render partial: "article", locals: { article: item } %>
+    <%= render partial: 'preview', locals: { article: item, expanded: (true if i == 0) } %>
   <% end %>
 </div>
 
 <div class="actions-bottom">
-  <%= link_to t('news.archive'), '/news/archive', class: "button" %>
+  <%= link_to t('news.archive'), '/news/archive', class: 'button' %>
 
   <% if cuser and cuser.admin? %>
     <%= link_to t('helpers.submit.post.new'), new_article_path, class: "button" %>

app/views/forums/index.html.erb

@@ -16,7 +16,7 @@
 
         <% forums.each do |forum| %>
           <tr>
-            <td class="bullet <%= "highlight" if cuser and !forum.read_by?(cuser) %>"></td>
+            <td class="bullet <%= "updated" if cuser and !forum.read_by?(cuser) %>"></td>
             <td class="forum">
               <h5><%= namelink(forum) %></h5>
               <%= forum.description %>

app/views/posts/_post.html.erb

@@ -26,7 +26,7 @@
     <div class="header">
       <div class="time">
         <span id="post_<%= post.id %>">
-          <%= longtime(post.created_at) %>
+          <%= longertime post.created_at %>
         </span>
       </div>
       <div class="posts">