mirror of
https://github.com/ENSL/ensl.org.git
synced 2024-12-26 04:21:36 +00:00
Improved forums layout
Made profile avatar proportional Added header to sidebar widgets Added bbcode colour support
This commit is contained in:
Luke Barratt
parent
09026a2e4b
commit
bef2b7d887
18 changed files with 218 additions and 87 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,12 @@ body#tinymce {
|
|||
padding: $container-padding;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.no-body.full {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: $container-padding 0;
|
||||
}
|
||||
}
|
||||
|
||||
#forums {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ div.article {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
h2 {
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="article preview">
|
||||
<h1><%= namelink article %></h1>
|
||||
<h2><%= namelink article %></h2>
|
||||
|
||||
<div class="content">
|
||||
<%= preview_text(article, full) %>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<%= provide :content_class, 'no-body' %>
|
||||
|
||||
<div id="categories">
|
||||
<% @categories.each do |cat| %>
|
||||
<% forums = cuser ? cat.forums.available_to(cuser, Forumer::ACCESS_READ).ordered : cat.forums.public.ordered %>
|
||||
|
|
@ -6,17 +8,20 @@
|
|||
<h3><%=h cat.name %></h3>
|
||||
<div class="category">
|
||||
<table class="category striped">
|
||||
<tr>
|
||||
<th colspan="2" class="forums">Forums</th>
|
||||
<th class="actions"></th>
|
||||
<th class="topics">Topics</th>
|
||||
<th class="posts">Posts</th>
|
||||
<th class="last">Last Post</th>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="forums">Forums</th>
|
||||
<th class="actions"></th>
|
||||
<th class="topics">Topics</th>
|
||||
<th class="posts">Posts</th>
|
||||
<th class="last">Last Post</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<% forums.each do |forum| %>
|
||||
<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">
|
||||
<h5><%= namelink(forum) %></h5>
|
||||
<%= forum.description %>
|
||||
|
|
@ -61,6 +66,6 @@
|
|||
|
||||
<% if Forum.new.can_create? cuser %>
|
||||
<p>
|
||||
<%= link_to 'New forum', new_forum_path, class: "button" %>
|
||||
<%= link_to 'New Forum', new_forum_path, class: 'button' %>
|
||||
</p>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<%= provide :content_class, 'no-body' %>
|
||||
|
||||
<div class="breadcrumbs">
|
||||
<%= link_to "Forums", action: "index" %> <%= icon 'chevron-right' %> <%= namelink @forum %>
|
||||
</div>
|
||||
|
|
@ -11,13 +13,16 @@
|
|||
<%= will_paginate @topics %>
|
||||
|
||||
<table id="topics" class="striped">
|
||||
<tr>
|
||||
<th class="topic">Topic</th>
|
||||
<th class="author">Author</th>
|
||||
<th class="replies">Replies</th>
|
||||
<th class="views">Views</th>
|
||||
<th class="last">Last Post</th>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="topic">Topic</th>
|
||||
<th class="author">Author</th>
|
||||
<th class="replies">Replies</th>
|
||||
<th class="views">Views</th>
|
||||
<th class="last">Last Post</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<% @topics.each do |topic| %>
|
||||
<tr>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
<%= render partial: "header" %>
|
||||
<%= render partial: "navigation" %>
|
||||
<div class="wrapper">
|
||||
<div id="content" class="full">
|
||||
<div id="content" class="full <%= yield :content_class %>">
|
||||
<%= render partial: "messages" %>
|
||||
<div id="forums">
|
||||
<%= render partial: "messages" %>
|
||||
<%= yield %>
|
||||
</div>
|
||||
<%= render partial: "gather" %>
|
||||
|
|
|
|||
|
|
@ -37,19 +37,17 @@
|
|||
<div class="text">
|
||||
<%= post.text_parsed.html_safe %>
|
||||
</div>
|
||||
|
||||
<div class="signature">
|
||||
<%= post.user.profile.signature_parsed.html_safe if post.user.profile.signature_parsed %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div class="base">
|
||||
<div class="user">
|
||||
<%= link_to "Send PM", { controller: "messages", action: "new", id: "User", id2: post.user }, class: 'button tiny' %>
|
||||
</div>
|
||||
|
||||
<div class="reply">
|
||||
<div class="right">
|
||||
<div class="signature">
|
||||
<%= post.user.profile.signature_parsed.html_safe if post.user.profile.signature_parsed %>
|
||||
|
||||
<div class="controls">
|
||||
<% if post.topic.posts.build.can_create? cuser %>
|
||||
<%= link_to_function 'Quote Reply', "QuoteText(#{post.id}); $('#reply').fadeIn('slow')", class: 'button tiny' %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<%= provide :content_class, 'no-body' %>
|
||||
|
||||
<div id="topic">
|
||||
<%= render partial: 'breadcrumbs', locals: { topic: @topic } %>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
<% end %>
|
||||
</li>
|
||||
<li>
|
||||
<%= 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 @@
|
|||
</div>
|
||||
|
||||
<div class="profile">
|
||||
<div class="avatar">
|
||||
<%= image_tag cuser.profile.avatar.url %>
|
||||
</div>
|
||||
<div class="avatar" style="background-image: url('<%= cuser.profile.avatar.url %>')"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
%(<sub>#{singular? ? meta : content}</sub>)
|
||||
end
|
||||
|
||||
tag :sup, :singular => true do
|
||||
tag :sup, singular: true do
|
||||
%(<sup>#{singular? ? meta : content}</sup>)
|
||||
end
|
||||
|
||||
tag :ul
|
||||
tag :ol
|
||||
tag :li, :parents => [:ol, :ul]
|
||||
tag :li, parents: [:ol, :ul]
|
||||
|
||||
tag :size do
|
||||
%(<span style="font-size: #{meta}px;">#{content}</span>)
|
||||
|
|
@ -24,4 +25,8 @@ BBCoder.configure do
|
|||
%(<a href="#{meta}">#{content}</a>)
|
||||
end
|
||||
end
|
||||
|
||||
tag :color do
|
||||
%(<span style="color: #{meta};">#{content}</span>)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Reference in a new issue