ensl/ensl.org
0
0
Fork 0
mirror of https://github.com/ENSL/ensl.org.git synced 2024-12-25 20:11:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improved forums layout

Browse source 
Made profile avatar proportional
Added header to sidebar widgets
Added bbcode colour support
This commit is contained in:
Luke Barratt 2014-05-02 17:43:23 +01:00
parent 470372db21
commit b883b3de6c
18 changed files with 218 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/components/_breadcrumbs.scss
View file

@ -14,4 +14,4 @@
.fa { .fa {
margin: 0 10px; margin: 0 10px;
} }
} }

4
app/assets/stylesheets/components/_tables.scss
View file

@ -29,8 +29,8 @@ tr, td, th {
Striped Tables Striped Tables
*/ */
table.striped > tbody,
table.striped > tbody { table.striped > thead {
> tr { > tr {
td:first-child, td:first-child,
th:first-child { th:first-child {

6
app/assets/stylesheets/layout/_body.scss
View file

@ -35,6 +35,12 @@ body#tinymce {
padding: $container-padding; padding: $container-padding;
background: white; background: white;
} }
&.no-body.full {
background: transparent;
box-shadow: none;
padding: $container-padding 0;
}
} }
#forums { #forums {

20
app/assets/stylesheets/layout/_header.scss
View file

@ -92,8 +92,12 @@ header .banner {
.profile { .profile {
@include span-columns(5); @include span-columns(5);
vertical-align: middle; vertical-align: middle;
position: relative;
.avatar { .avatar {
box-shadow: $content-shadow;
border-radius: $base-border-radius;
border: 2px solid $blue;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
@ -101,16 +105,12 @@ header .banner {
padding-bottom: 96%; padding-bottom: 96%;
float: left; float: left;
height: 0; height: 0;
background-size: cover;
img { position: absolute;
background: transparentize($light-gray, 0.75); background-position: center;
width: 100%; background-repeat: no-repeat;
height: 100%; height: 100%;
position: absolute; width: 100%;
left: 0;
border-radius: 5px;
padding: 3px;
}
} }
.timezone { .timezone {

40
app/assets/stylesheets/layout/_navigation.scss
View file

@ -33,17 +33,16 @@ ul.navigation {
.count { .count {
position: absolute; position: absolute;
top: $navigation-height/2 - ($navigation-height/2)/2; top: 16px;
right: 12px; right: 12px;
border-radius: $navigation-height/2; border-radius: $base-border-radius;
background-color: $light-blue; background-color: $light-blue;
display: inline-block; display: inline-block;
color: white; color: white;
line-height: $navigation-height/2; line-height: 18px;
padding: 0 8px; padding: 0 4px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
height: $navigation-height/2;
} }
a { a {
@ -71,7 +70,7 @@ ul.navigation {
} }
&.gathers { &.gathers {
padding-right: 70px; padding-right: 65px;
} }
} }
@ -94,26 +93,31 @@ ul.navigation {
} }
&.dropdown { &.dropdown {
position: relative;
ul { ul {
display: none; position: absolute;
box-shadow: $content-shadow;
visibility: hidden;
pointer-events: none;
opacity: 0;
z-index: 10; z-index: 10;
top: $navigation-height;
left: 0;
min-width: 100%;
background-color: $navbar-primary;
list-style: none;
padding: 0;
margin: 0;
} }
&:hover { &:hover {
position: relative;
ul { ul {
box-shadow: $content-shadow; visibility: visible;
display: block; opacity: 1;
position: absolute; pointer-events: auto;
top: $navigation-height;
left: 0;
min-width: 100%;
background-color: $navbar-primary;
list-style: none;
padding: 0;
margin: 0;
li { li {
border-bottom: 1px solid $navbar-secondary; border-bottom: 1px solid $navbar-secondary;

18
app/assets/stylesheets/layout/_sidebar.scss
View file

@ -9,7 +9,12 @@
background: white; background: white;
h4 { h4 {
@include linear-gradient($blue, $dark-blue);
border-radius: $base-border-radius $base-border-radius 0 0;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px 20px;
margin: -20px -20px 20px -20px;
color: white;
} }
.widget-content-wrapper { .widget-content-wrapper {
@ -18,8 +23,8 @@
} }
.separator { .separator {
color: white; color: $dark-blue;
background: $blue; background: transparentize($light-blue, 0.75);
padding: 0 20px; padding: 0 20px;
margin: 0 -20px; margin: 0 -20px;
margin-bottom: 12px; margin-bottom: 12px;
@ -27,7 +32,7 @@
line-height: 35px; line-height: 35px;
a { a {
color: white; color: $dark-blue;
float: right; float: right;
} }
} }
@ -38,6 +43,10 @@
} }
.calendar { .calendar {
h4 {
margin-bottom: 0;
}
max-height: 400px; max-height: 400px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@ -56,6 +65,9 @@
.highlights, .highlights,
.posts { .posts {
h4 {
margin-bottom: 0;
}
ol { ol {
margin-bottom: 20px; margin-bottom: 20px;

4
app/assets/stylesheets/mixins/_flashes.scss
View file

@ -9,9 +9,11 @@
color: $text; color: $text;
padding: 7px 7px 7px 44px; padding: 7px 7px 7px 44px;
position: relative; position: relative;
border-radius: $base-border-radius;
&:before { &:before {
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: $base-border-radius 0 0 $base-border-radius;
font-family: FontAwesome; font-family: FontAwesome;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -36,7 +38,7 @@
.highlight { .highlight {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
border-radius: 3px; border-radius: $base-border-radius;
background: $blue; background: $blue;
color: white; color: white;
display: inline-block; display: inline-block;

123
app/assets/stylesheets/pages/_forums.scss
View file

@ -15,6 +15,10 @@
margin-right: 0; margin-right: 0;
} }
} }
.pagination {
margin-bottom: 20px;
}
} }
/* /*
@ -23,20 +27,50 @@
div#categories { div#categories {
h3 {
margin: 0.75em 0;
&:first-child {
margin-top: 0;
}
}
/* /*
Tables Tables
*/ */
table.category { table.category {
table-layout: auto; 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 { .bullet {
width: 10%; width: 10%;
background: { background: {
image: url('layout/forum-category.png'); image: image-url('layout/forum-category.png');
position: center center; position: center center;
repeat: no-repeat; repeat: no-repeat;
} }
@ -72,7 +106,33 @@ div#categories {
#topics { #topics {
table-layout: auto; 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 { .topic {
width: 55%; width: 55%;
@ -93,7 +153,11 @@ div#categories {
} }
.statistics { .statistics {
padding: 20px;
background: white;
margin: 20px 0; margin: 20px 0;
box-shadow: $light-shadow;
border-radius: $base-border-radius;
h4 { h4 {
margin-bottom: 1em; margin-bottom: 1em;
@ -103,8 +167,30 @@ div#categories {
#topic { #topic {
position: relative; position: relative;
h2 {
margin-bottom: 20px;
}
.pagination {
margin-top: 0;
}
#reply { #reply {
@include span-columns(12);
padding: 20px;
margin-bottom: 20px;
display: none; 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 { #posts {
@include span-columns(12); @include span-columns(12);
margin-top: 20px;
.post { .post {
@include span-columns(12); @include span-columns(12);
padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
background: transparentize($light-gray, 0.75); border-radius: $base-border-radius;
border-radius: 5px; background: white;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); padding: 20px;
box-shadow: $light-shadow;
&:last-child {
margin-bottom: 40px;
}
.avatar { .avatar {
@include span-columns(3); @include span-columns(3);
@ -181,16 +262,29 @@ div#categories {
} }
} }
.actions { .base {
@include span-columns(12); @include span-columns(12);
padding-top: 20px;
border-top: 1px solid $light-gray;
.user { .user {
@include span-columns(3); @include span-columns(3);
} }
.reply { .signature {
@include span-columns(9); @include span-columns(9);
@include omega; @include omega;
position: relative;
.controls {
position: absolute;
top: 0;
right: 0;
a:last-child {
margin-right: 0;
}
}
} }
} }
} }
@ -200,7 +294,6 @@ div#categories {
Forms Forms
*/ */
#forums .add-acl { #forums .add-acl {
h4 { h4 {

2
app/assets/stylesheets/pages/_news.scss
View file

@ -57,7 +57,7 @@ div.article {
margin-bottom: 10px; margin-bottom: 10px;
} }
h1 { h2 {
margin: 0 0 .5em 0; margin: 0 0 .5em 0;
} }
} }

1
app/controllers/forums_controller.rb
View file

@ -1,5 +1,6 @@
class ForumsController < ApplicationController class ForumsController < ApplicationController
before_filter :get_forum, only: [:show, :edit, :update, :up, :down, :destroy] before_filter :get_forum, only: [:show, :edit, :update, :up, :down, :destroy]
layout 'forums'
def index def index
@categories = Category.domain(Category::DOMAIN_FORUMS).ordered @categories = Category.domain(Category::DOMAIN_FORUMS).ordered

2
app/views/articles/_preview.html.erb
View file

@ -1,5 +1,5 @@
<div class="article preview"> <div class="article preview">
<h1><%= namelink article %></h1> <h2><%= namelink article %></h2>
<div class="content"> <div class="content">
<%= preview_text(article, full) %> <%= preview_text(article, full) %>

25
app/views/forums/index.html.erb
View file

@ -1,3 +1,5 @@
<%= provide :content_class, 'no-body' %>
<div id="categories"> <div id="categories">
<% @categories.each do |cat| %> <% @categories.each do |cat| %>
<% forums = cuser ? cat.forums.available_to(cuser, Forumer::ACCESS_READ).ordered : cat.forums.public.ordered %> <% forums = cuser ? cat.forums.available_to(cuser, Forumer::ACCESS_READ).ordered : cat.forums.public.ordered %>
@ -6,17 +8,20 @@
<h3><%=h cat.name %></h3> <h3><%=h cat.name %></h3>
<div class="category"> <div class="category">
<table class="category striped"> <table class="category striped">
<tr> <thead>
<th colspan="2" class="forums">Forums</th> <tr>
<th class="actions"></th> <th></th>
<th class="topics">Topics</th> <th class="forums">Forums</th>
<th class="posts">Posts</th> <th class="actions"></th>
<th class="last">Last Post</th> <th class="topics">Topics</th>
</tr> <th class="posts">Posts</th>
<th class="last">Last Post</th>
</tr>
</thead>
<% forums.each do |forum| %> <% forums.each do |forum| %>
<tr> <tr>
<td class="bullet <%= "updated" if cuser and !forum.read_by?(cuser) %>"></td> <td class="bullet <%= 'updated' if cuser and !forum.read_by?(cuser) %>"></td>
<td class="forum"> <td class="forum">
<h5><%= namelink(forum) %></h5> <h5><%= namelink(forum) %></h5>
<%= forum.description %> <%= forum.description %>
@ -61,6 +66,6 @@
<% if Forum.new.can_create? cuser %> <% if Forum.new.can_create? cuser %>
<p> <p>
<%= link_to 'New forum', new_forum_path, class: "button" %> <%= link_to 'New Forum', new_forum_path, class: 'button' %>
</p> </p>
<% end %> <% end %>

19
app/views/forums/show.html.erb
View file

@ -1,3 +1,5 @@
<%= provide :content_class, 'no-body' %>
<div class="breadcrumbs"> <div class="breadcrumbs">
<%= link_to "Forums", action: "index" %> <%= icon 'chevron-right' %> <%= namelink @forum %> <%= link_to "Forums", action: "index" %> <%= icon 'chevron-right' %> <%= namelink @forum %>
</div> </div>
@ -11,13 +13,16 @@
<%= will_paginate @topics %> <%= will_paginate @topics %>
<table id="topics" class="striped"> <table id="topics" class="striped">
<tr> <thead>
<th class="topic">Topic</th> <tr>
<th class="author">Author</th> <th class="topic">Topic</th>
<th class="replies">Replies</th> <th class="author">Author</th>
<th class="views">Views</th> <th class="replies">Replies</th>
<th class="last">Last Post</th> <th class="views">Views</th>
</tr> <th class="last">Last Post</th>
</tr>
</thead>
<% @topics.each do |topic| %> <% @topics.each do |topic| %>
<tr> <tr>
<td> <td>

4
app/views/layouts/forums.html.erb
View file

@ -15,9 +15,9 @@
<%= render partial: "header" %> <%= render partial: "header" %>
<%= render partial: "navigation" %> <%= render partial: "navigation" %>
<div class="wrapper"> <div class="wrapper">
<div id="content" class="full"> <div id="content" class="full <%= yield :content_class %>">
<%= render partial: "messages" %>
<div id="forums"> <div id="forums">
<%= render partial: "messages" %>
<%= yield %> <%= yield %>
</div> </div>
<%= render partial: "gather" %> <%= render partial: "gather" %>

12
app/views/posts/_post.html.erb
View file

@ -37,19 +37,17 @@
<div class="text"> <div class="text">
<%= post.text_parsed.html_safe %> <%= post.text_parsed.html_safe %>
</div> </div>
<div class="signature">
<%= post.user.profile.signature_parsed.html_safe if post.user.profile.signature_parsed %>
</div>
</div> </div>
<div class="actions"> <div class="base">
<div class="user"> <div class="user">
<%= link_to "Send PM", { controller: "messages", action: "new", id: "User", id2: post.user }, class: 'button tiny' %> <%= link_to "Send PM", { controller: "messages", action: "new", id: "User", id2: post.user }, class: 'button tiny' %>
</div> </div>
<div class="reply"> <div class="signature">
<div class="right"> <%= post.user.profile.signature_parsed.html_safe if post.user.profile.signature_parsed %>
<div class="controls">
<% if post.topic.posts.build.can_create? cuser %> <% if post.topic.posts.build.can_create? cuser %>
<%= link_to_function 'Quote Reply', "QuoteText(#{post.id}); $('#reply').fadeIn('slow')", class: 'button tiny' %> <%= link_to_function 'Quote Reply', "QuoteText(#{post.id}); $('#reply').fadeIn('slow')", class: 'button tiny' %>
<% end %> <% end %>

2
app/views/topics/show.html.erb
View file

@ -1,3 +1,5 @@
<%= provide :content_class, 'no-body' %>
<div id="topic"> <div id="topic">
<%= render partial: 'breadcrumbs', locals: { topic: @topic } %> <%= render partial: 'breadcrumbs', locals: { topic: @topic } %>

8
app/views/widgets/_logged.html.erb
View file

@ -27,8 +27,8 @@
<% end %> <% end %>
</li> </li>
<li> <li>
<%= form_tag(controller: "users", action: "logout") do %> <%= form_tag(controller: 'users', action: 'logout') do %>
<%= link_to "#", id: "logout" do %> <%= link_to '#', id: 'logout' do %>
Logout <%= icon 'key' %> Logout <%= icon 'key' %>
<% end %> <% end %>
<% end %> <% end %>
@ -37,8 +37,6 @@
</div> </div>
<div class="profile"> <div class="profile">
<div class="avatar"> <div class="avatar" style="background-image: url('<%= cuser.profile.avatar.url %>')"></div>
<%= image_tag cuser.profile.avatar.url %>
</div>
</div> </div>
</div> </div>

13
config/initializers/bbcoder.rb
View file

@ -1,17 +1,18 @@
BBCoder.configure do 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
%(<sub>#{singular? ? meta : content}</sub>) %(<sub>#{singular? ? meta : content}</sub>)
end end
tag :sup, :singular => true do tag :sup, singular: true do
%(<sup>#{singular? ? meta : content}</sup>) %(<sup>#{singular? ? meta : content}</sup>)
end end
tag :ul tag :ul
tag :ol tag :ol
tag :li, :parents => [:ol, :ul] tag :li, parents: [:ol, :ul]
tag :size do tag :size do
%(<span style="font-size: #{meta}px;">#{content}</span>) %(<span style="font-size: #{meta}px;">#{content}</span>)
@ -24,4 +25,8 @@ BBCoder.configure do
%(<a href="#{meta}">#{content}</a>) %(<a href="#{meta}">#{content}</a>)
end end
end end
tag :color do
%(<span style="color: #{meta};">#{content}</span>)
end
end end