From 5ed4dd18918ffd35553eb606792b5e8c0f8c3b11 Mon Sep 17 00:00:00 2001 From: Luke Barratt Date: Tue, 29 Apr 2014 21:02:20 +0100 Subject: [PATCH] Improve news page layout Fix forums unread icon Fix double linebreaks in BBcode Increase colour darkness --- app/assets/stylesheets/_variables.scss | 3 +- .../stylesheets/components/_breadcrumbs.scss | 1 + app/assets/stylesheets/components/_forms.scss | 2 +- .../stylesheets/components/_gather.scss | 5 ++- .../stylesheets/components/_tables.scss | 2 +- app/assets/stylesheets/mixins/_flashes.scss | 5 +-- app/assets/stylesheets/pages/_forums.scss | 2 +- app/assets/stylesheets/pages/_news.scss | 21 ++++++++++--- app/controllers/articles_controller.rb | 2 +- app/helpers/application_helper.rb | 13 ++++---- app/models/concerns/extra.rb | 2 +- app/views/articles/_preview.html.erb | 31 +++++++++++++++++++ app/views/articles/news_index.html.erb | 6 ++-- app/views/forums/index.html.erb | 2 +- app/views/posts/_post.html.erb | 2 +- 15 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 app/views/articles/_preview.html.erb diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index 4444bfa..6c114b9 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/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); diff --git a/app/assets/stylesheets/components/_breadcrumbs.scss b/app/assets/stylesheets/components/_breadcrumbs.scss index 707fc2c..eec0f71 100644 --- a/app/assets/stylesheets/components/_breadcrumbs.scss +++ b/app/assets/stylesheets/components/_breadcrumbs.scss @@ -8,6 +8,7 @@ a { display: inline-block; + font-size: $base-font-size + 2px; } .fa { diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss index 539ceed..d0baa6d 100644 --- a/app/assets/stylesheets/components/_forms.scss +++ b/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; diff --git a/app/assets/stylesheets/components/_gather.scss b/app/assets/stylesheets/components/_gather.scss index 9213863..df72bcb 100644 --- a/app/assets/stylesheets/components/_gather.scss +++ b/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; diff --git a/app/assets/stylesheets/components/_tables.scss b/app/assets/stylesheets/components/_tables.scss index 08a0063..35eef7c 100644 --- a/app/assets/stylesheets/components/_tables.scss +++ b/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 { diff --git a/app/assets/stylesheets/mixins/_flashes.scss b/app/assets/stylesheets/mixins/_flashes.scss index 25d7a06..3f09cc6 100644 --- a/app/assets/stylesheets/mixins/_flashes.scss +++ b/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; } diff --git a/app/assets/stylesheets/pages/_forums.scss b/app/assets/stylesheets/pages/_forums.scss index 79242e9..1e3066f 100644 --- a/app/assets/stylesheets/pages/_forums.scss +++ b/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'); } } diff --git a/app/assets/stylesheets/pages/_news.scss b/app/assets/stylesheets/pages/_news.scss index e216245..87ca4d7 100644 --- a/app/assets/stylesheets/pages/_news.scss +++ b/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; + } } } diff --git a/app/controllers/articles_controller.rb b/app/controllers/articles_controller.rb index a909aca..382f397 100644 --- a/app/controllers/articles_controller.rb +++ b/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 diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5bacc5c..cad3e43 100644 --- a/app/helpers/application_helper.rb +++ b/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 = "" - out << '' - out << time.strftime(format) - out << '' - - out.html_safe + content_tag(:span, style: 'font-style: italic') do + Time.use_zone(timezone_offset) { time.strftime(format) } + end end def cascade model, list diff --git a/app/models/concerns/extra.rb b/app/models/concerns/extra.rb index 08013ad..839303a 100644 --- a/app/models/concerns/extra.rb +++ b/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/, "
").html_safe + Sanitize.clean(text.to_s).bbcode_to_html.gsub(/\r/, "
").html_safe end def move_up(scope, column = "position") diff --git a/app/views/articles/_preview.html.erb b/app/views/articles/_preview.html.erb new file mode 100644 index 0000000..ce78da5 --- /dev/null +++ b/app/views/articles/_preview.html.erb @@ -0,0 +1,31 @@ +
+

<%= namelink article %>

+ +
+ <% 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 %> +
+ +
+ <%= namelink(article.user) %> on <%= longertime article.created_at %> +
+ +
+ <%= link_to article do %> + <%= icon 'comments' %> Comments (<%= article.comments.count %>) + <% end %> +
+
diff --git a/app/views/articles/news_index.html.erb b/app/views/articles/news_index.html.erb index fe0be88..4feec5c 100644 --- a/app/views/articles/news_index.html.erb +++ b/app/views/articles/news_index.html.erb @@ -1,11 +1,11 @@
- <% @news.each do |item| %> - <%= render partial: "article", locals: { article: item } %> + <% @news.each_with_index do |item, i| %> + <%= render partial: 'preview', locals: { article: item, expanded: (true if i == 0) } %> <% end %>
- <%= 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" %> diff --git a/app/views/forums/index.html.erb b/app/views/forums/index.html.erb index d7311cc..92b2edf 100644 --- a/app/views/forums/index.html.erb +++ b/app/views/forums/index.html.erb @@ -16,7 +16,7 @@ <% forums.each do |forum| %> - "> + ">
<%= namelink(forum) %>
<%= forum.description %> diff --git a/app/views/posts/_post.html.erb b/app/views/posts/_post.html.erb index 6e830fd..6c13ba4 100644 --- a/app/views/posts/_post.html.erb +++ b/app/views/posts/_post.html.erb @@ -26,7 +26,7 @@
- <%= longtime(post.created_at) %> + <%= longertime post.created_at %>