From bef2b7d887863e10a948a6d0dc74a352952b2ca7 Mon Sep 17 00:00:00 2001 From: Luke Barratt Date: Fri, 2 May 2014 17:43:23 +0100 Subject: [PATCH] Improved forums layout Made profile avatar proportional Added header to sidebar widgets Added bbcode colour support --- .../stylesheets/components/_breadcrumbs.scss | 2 +- .../stylesheets/components/_tables.scss | 4 +- app/assets/stylesheets/layout/_body.scss | 6 + app/assets/stylesheets/layout/_header.scss | 20 +-- .../stylesheets/layout/_navigation.scss | 40 +++--- app/assets/stylesheets/layout/_sidebar.scss | 18 ++- app/assets/stylesheets/mixins/_flashes.scss | 4 +- app/assets/stylesheets/pages/_forums.scss | 123 +++++++++++++++--- app/assets/stylesheets/pages/_news.scss | 2 +- app/controllers/forums_controller.rb | 1 + app/views/articles/_preview.html.erb | 2 +- app/views/forums/index.html.erb | 25 ++-- app/views/forums/show.html.erb | 19 ++- app/views/layouts/forums.html.erb | 4 +- app/views/posts/_post.html.erb | 12 +- app/views/topics/show.html.erb | 2 + app/views/widgets/_logged.html.erb | 8 +- config/initializers/bbcoder.rb | 13 +- 18 files changed, 218 insertions(+), 87 deletions(-) diff --git a/app/assets/stylesheets/components/_breadcrumbs.scss b/app/assets/stylesheets/components/_breadcrumbs.scss index eec0f71..b2dd4ee 100644 --- a/app/assets/stylesheets/components/_breadcrumbs.scss +++ b/app/assets/stylesheets/components/_breadcrumbs.scss @@ -14,4 +14,4 @@ .fa { margin: 0 10px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/_tables.scss b/app/assets/stylesheets/components/_tables.scss index 4213b22..d7592ca 100644 --- a/app/assets/stylesheets/components/_tables.scss +++ b/app/assets/stylesheets/components/_tables.scss @@ -29,8 +29,8 @@ tr, td, th { Striped Tables */ - -table.striped > tbody { +table.striped > tbody, +table.striped > thead { > tr { td:first-child, th:first-child { diff --git a/app/assets/stylesheets/layout/_body.scss b/app/assets/stylesheets/layout/_body.scss index 7db6d4f..26c54f2 100644 --- a/app/assets/stylesheets/layout/_body.scss +++ b/app/assets/stylesheets/layout/_body.scss @@ -35,6 +35,12 @@ body#tinymce { padding: $container-padding; background: white; } + + &.no-body.full { + background: transparent; + box-shadow: none; + padding: $container-padding 0; + } } #forums { diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss index 6496c56..85ea4a6 100644 --- a/app/assets/stylesheets/layout/_header.scss +++ b/app/assets/stylesheets/layout/_header.scss @@ -92,8 +92,12 @@ header .banner { .profile { @include span-columns(5); vertical-align: middle; + position: relative; .avatar { + box-shadow: $content-shadow; + border-radius: $base-border-radius; + border: 2px solid $blue; text-align: center; vertical-align: middle; position: relative; @@ -101,16 +105,12 @@ header .banner { padding-bottom: 96%; float: left; height: 0; - - img { - background: transparentize($light-gray, 0.75); - width: 100%; - height: 100%; - position: absolute; - left: 0; - border-radius: 5px; - padding: 3px; - } + background-size: cover; + position: absolute; + background-position: center; + background-repeat: no-repeat; + height: 100%; + width: 100%; } .timezone { diff --git a/app/assets/stylesheets/layout/_navigation.scss b/app/assets/stylesheets/layout/_navigation.scss index f4057ad..5f4c33b 100644 --- a/app/assets/stylesheets/layout/_navigation.scss +++ b/app/assets/stylesheets/layout/_navigation.scss @@ -33,17 +33,16 @@ ul.navigation { .count { position: absolute; - top: $navigation-height/2 - ($navigation-height/2)/2; + top: 16px; right: 12px; - border-radius: $navigation-height/2; + border-radius: $base-border-radius; background-color: $light-blue; display: inline-block; color: white; - line-height: $navigation-height/2; - padding: 0 8px; + line-height: 18px; + padding: 0 4px; font-size: 12px; font-weight: bold; - height: $navigation-height/2; } a { @@ -71,7 +70,7 @@ ul.navigation { } &.gathers { - padding-right: 70px; + padding-right: 65px; } } @@ -94,26 +93,31 @@ ul.navigation { } &.dropdown { + position: relative; ul { - display: none; + position: absolute; + box-shadow: $content-shadow; + visibility: hidden; + pointer-events: none; + opacity: 0; z-index: 10; + top: $navigation-height; + left: 0; + min-width: 100%; + background-color: $navbar-primary; + list-style: none; + padding: 0; + margin: 0; } &:hover { - position: relative; ul { - box-shadow: $content-shadow; - display: block; - position: absolute; - top: $navigation-height; - left: 0; - min-width: 100%; - background-color: $navbar-primary; - list-style: none; - padding: 0; - margin: 0; + visibility: visible; + opacity: 1; + pointer-events: auto; + li { border-bottom: 1px solid $navbar-secondary; diff --git a/app/assets/stylesheets/layout/_sidebar.scss b/app/assets/stylesheets/layout/_sidebar.scss index 78e9438..0670996 100644 --- a/app/assets/stylesheets/layout/_sidebar.scss +++ b/app/assets/stylesheets/layout/_sidebar.scss @@ -9,7 +9,12 @@ background: white; h4 { + @include linear-gradient($blue, $dark-blue); + border-radius: $base-border-radius $base-border-radius 0 0; margin-bottom: 20px; + padding: 10px 20px; + margin: -20px -20px 20px -20px; + color: white; } .widget-content-wrapper { @@ -18,8 +23,8 @@ } .separator { - color: white; - background: $blue; + color: $dark-blue; + background: transparentize($light-blue, 0.75); padding: 0 20px; margin: 0 -20px; margin-bottom: 12px; @@ -27,7 +32,7 @@ line-height: 35px; a { - color: white; + color: $dark-blue; float: right; } } @@ -38,6 +43,10 @@ } .calendar { + h4 { + margin-bottom: 0; + } + max-height: 400px; overflow-x: hidden; overflow-y: scroll; @@ -56,6 +65,9 @@ .highlights, .posts { + h4 { + margin-bottom: 0; + } ol { margin-bottom: 20px; diff --git a/app/assets/stylesheets/mixins/_flashes.scss b/app/assets/stylesheets/mixins/_flashes.scss index 3f09cc6..820eb04 100644 --- a/app/assets/stylesheets/mixins/_flashes.scss +++ b/app/assets/stylesheets/mixins/_flashes.scss @@ -9,9 +9,11 @@ color: $text; padding: 7px 7px 7px 44px; position: relative; + border-radius: $base-border-radius; &:before { @include box-sizing(border-box); + border-radius: $base-border-radius 0 0 $base-border-radius; font-family: FontAwesome; font-style: normal; font-weight: normal; @@ -36,7 +38,7 @@ .highlight { font-size: 12px; line-height: 18px; - border-radius: 3px; + border-radius: $base-border-radius; background: $blue; color: white; display: inline-block; diff --git a/app/assets/stylesheets/pages/_forums.scss b/app/assets/stylesheets/pages/_forums.scss index f3195bf..bc392db 100644 --- a/app/assets/stylesheets/pages/_forums.scss +++ b/app/assets/stylesheets/pages/_forums.scss @@ -15,6 +15,10 @@ margin-right: 0; } } + + .pagination { + margin-bottom: 20px; + } } /* @@ -23,20 +27,50 @@ div#categories { + h3 { + margin: 0.75em 0; + + &:first-child { + margin-top: 0; + } + } + /* Tables */ table.category { table-layout: auto; - margin-bottom: 20px; + margin: 0; + background: white; + padding: 20px; + box-shadow: $light-shadow; + border-radius: $base-border-radius; + border: 0; + + thead th { + @include linear-gradient($blue, $dark-blue); + padding-top: 0.75em; + padding-bottom: 0.75em; + font-family: $montserrat; + font-size: 16px; + color: white; + + &:first-child { + border-radius: $base-border-radius 0 0 0; + } + + &:last-child { + border-radius: 0 $base-border-radius 0 0; + } + } } .bullet { width: 10%; background: { - image: url('layout/forum-category.png'); + image: image-url('layout/forum-category.png'); position: center center; repeat: no-repeat; } @@ -72,7 +106,33 @@ div#categories { #topics { table-layout: auto; - margin-bottom: 40px; + margin-bottom: 20px; + background: white; + padding: 20px; + box-shadow: $light-shadow; + border-radius: $base-border-radius; + border: 0; + + .unread { + color: $red; + } + + thead th { + @include linear-gradient($blue, $dark-blue); + padding-top: 0.75em; + padding-bottom: 0.75em; + font-family: $montserrat; + font-size: 16px; + color: white; + + &:first-child { + border-radius: $base-border-radius 0 0 0; + } + + &:last-child { + border-radius: 0 $base-border-radius 0 0; + } + } .topic { width: 55%; @@ -93,7 +153,11 @@ div#categories { } .statistics { + padding: 20px; + background: white; margin: 20px 0; + box-shadow: $light-shadow; + border-radius: $base-border-radius; h4 { margin-bottom: 1em; @@ -103,8 +167,30 @@ div#categories { #topic { position: relative; + h2 { + margin-bottom: 20px; + } + + .pagination { + margin-top: 0; + } + #reply { + @include span-columns(12); + padding: 20px; + margin-bottom: 20px; display: none; + background: white; + border-radius: $base-border-radius; + box-shadow: $light-shadow; + + form { + margin-bottom: 0; + + .controls { + margin-bottom: 0; + } + } } } @@ -114,19 +200,14 @@ div#categories { #posts { @include span-columns(12); - margin-top: 20px; .post { @include span-columns(12); - padding: 20px; margin-bottom: 20px; - background: transparentize($light-gray, 0.75); - border-radius: 5px; - box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); - - &:last-child { - margin-bottom: 40px; - } + border-radius: $base-border-radius; + background: white; + padding: 20px; + box-shadow: $light-shadow; .avatar { @include span-columns(3); @@ -181,16 +262,29 @@ div#categories { } } - .actions { + .base { @include span-columns(12); + padding-top: 20px; + border-top: 1px solid $light-gray; .user { @include span-columns(3); } - .reply { + .signature { @include span-columns(9); @include omega; + position: relative; + + .controls { + position: absolute; + top: 0; + right: 0; + + a:last-child { + margin-right: 0; + } + } } } } @@ -200,7 +294,6 @@ div#categories { Forms */ - #forums .add-acl { h4 { diff --git a/app/assets/stylesheets/pages/_news.scss b/app/assets/stylesheets/pages/_news.scss index 70d5430..6a25f3d 100644 --- a/app/assets/stylesheets/pages/_news.scss +++ b/app/assets/stylesheets/pages/_news.scss @@ -57,7 +57,7 @@ div.article { margin-bottom: 10px; } - h1 { + h2 { margin: 0 0 .5em 0; } } diff --git a/app/controllers/forums_controller.rb b/app/controllers/forums_controller.rb index 09faf4f..1b3ba0c 100644 --- a/app/controllers/forums_controller.rb +++ b/app/controllers/forums_controller.rb @@ -1,5 +1,6 @@ class ForumsController < ApplicationController before_filter :get_forum, only: [:show, :edit, :update, :up, :down, :destroy] + layout 'forums' def index @categories = Category.domain(Category::DOMAIN_FORUMS).ordered diff --git a/app/views/articles/_preview.html.erb b/app/views/articles/_preview.html.erb index f19b6f7..5d1b24a 100644 --- a/app/views/articles/_preview.html.erb +++ b/app/views/articles/_preview.html.erb @@ -1,5 +1,5 @@
-

<%= namelink article %>

+

<%= namelink article %>

<%= preview_text(article, full) %> diff --git a/app/views/forums/index.html.erb b/app/views/forums/index.html.erb index 92b2edf..20c62f7 100644 --- a/app/views/forums/index.html.erb +++ b/app/views/forums/index.html.erb @@ -1,3 +1,5 @@ +<%= provide :content_class, 'no-body' %> +
<% @categories.each do |cat| %> <% forums = cuser ? cat.forums.available_to(cuser, Forumer::ACCESS_READ).ordered : cat.forums.public.ordered %> @@ -6,17 +8,20 @@

<%=h cat.name %>

- - - - - - - - + + + + + + + + + + + <% forums.each do |forum| %> - +
ForumsTopicsPostsLast Post
ForumsTopicsPostsLast Post
">
<%= namelink(forum) %>
<%= forum.description %> @@ -61,6 +66,6 @@ <% if Forum.new.can_create? cuser %>

- <%= link_to 'New forum', new_forum_path, class: "button" %> + <%= link_to 'New Forum', new_forum_path, class: 'button' %>

<% end %> diff --git a/app/views/forums/show.html.erb b/app/views/forums/show.html.erb index a4700d1..7c40ef6 100644 --- a/app/views/forums/show.html.erb +++ b/app/views/forums/show.html.erb @@ -1,3 +1,5 @@ +<%= provide :content_class, 'no-body' %> +
<%= link_to "Forums", action: "index" %> <%= icon 'chevron-right' %> <%= namelink @forum %>
@@ -11,13 +13,16 @@ <%= will_paginate @topics %> - - - - - - - + + + + + + + + + + <% @topics.each do |topic| %>
TopicAuthorRepliesViewsLast Post
TopicAuthorRepliesViewsLast Post
diff --git a/app/views/layouts/forums.html.erb b/app/views/layouts/forums.html.erb index 6f4cbdc..7c58a9a 100644 --- a/app/views/layouts/forums.html.erb +++ b/app/views/layouts/forums.html.erb @@ -15,9 +15,9 @@ <%= render partial: "header" %> <%= render partial: "navigation" %>
-
+
+ <%= render partial: "messages" %>
- <%= render partial: "messages" %> <%= yield %>
<%= render partial: "gather" %> diff --git a/app/views/posts/_post.html.erb b/app/views/posts/_post.html.erb index 6c13ba4..c4806ef 100644 --- a/app/views/posts/_post.html.erb +++ b/app/views/posts/_post.html.erb @@ -37,19 +37,17 @@
<%= post.text_parsed.html_safe %>
- -
- <%= post.user.profile.signature_parsed.html_safe if post.user.profile.signature_parsed %> -
-
+
<%= link_to "Send PM", { controller: "messages", action: "new", id: "User", id2: post.user }, class: 'button tiny' %>
-
-
+
+ <%= post.user.profile.signature_parsed.html_safe if post.user.profile.signature_parsed %> + +
<% if post.topic.posts.build.can_create? cuser %> <%= link_to_function 'Quote Reply', "QuoteText(#{post.id}); $('#reply').fadeIn('slow')", class: 'button tiny' %> <% end %> diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb index 270ceee..458a9aa 100644 --- a/app/views/topics/show.html.erb +++ b/app/views/topics/show.html.erb @@ -1,3 +1,5 @@ +<%= provide :content_class, 'no-body' %> +
<%= render partial: 'breadcrumbs', locals: { topic: @topic } %> diff --git a/app/views/widgets/_logged.html.erb b/app/views/widgets/_logged.html.erb index 63a7e7a..fb163cf 100644 --- a/app/views/widgets/_logged.html.erb +++ b/app/views/widgets/_logged.html.erb @@ -27,8 +27,8 @@ <% end %>
  • - <%= form_tag(controller: "users", action: "logout") do %> - <%= link_to "#", id: "logout" do %> + <%= form_tag(controller: 'users', action: 'logout') do %> + <%= link_to '#', id: 'logout' do %> Logout <%= icon 'key' %> <% end %> <% end %> @@ -37,8 +37,6 @@
    • -
    - <%= image_tag cuser.profile.avatar.url %> -
    +
    diff --git a/config/initializers/bbcoder.rb b/config/initializers/bbcoder.rb index fd20388..ac96b3c 100644 --- a/config/initializers/bbcoder.rb +++ b/config/initializers/bbcoder.rb @@ -1,17 +1,18 @@ BBCoder.configure do - tag :b, :as => :strong + tag :i, as: :em + tag :b, as: :strong - tag :sub, :singular => true do + tag :sub, singular: true do %(#{singular? ? meta : content}) end - tag :sup, :singular => true do + tag :sup, singular: true do %(#{singular? ? meta : content}) end tag :ul tag :ol - tag :li, :parents => [:ol, :ul] + tag :li, parents: [:ol, :ul] tag :size do %(#{content}) @@ -24,4 +25,8 @@ BBCoder.configure do %(#{content}) end end + + tag :color do + %(#{content}) + end end