mirror of
https://github.com/ENSL/ensl.org.git
synced 2024-12-26 20:41:01 +00:00
Cleans up articles, comments and widget styling
This commit is contained in:
Luke Barratt
parent
5487854a6c
commit
29f4ec7246
16 changed files with 225 additions and 124 deletions
|
|
@ -40,4 +40,5 @@
|
||||||
Pages
|
Pages
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import "pages/news";
|
||||||
@import "pages/contests";
|
@import "pages/contests";
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,24 @@
|
||||||
|
#comments {
|
||||||
|
@include span-columns(12);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-form {
|
||||||
|
@include span-columns(12);
|
||||||
|
margin-bottom: em(20);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fields {
|
||||||
|
margin-bottom: em(20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
$comment-gutter: 1.4em;
|
$comment-gutter: 1.4em;
|
||||||
$comment-image-padding: .7em;
|
$comment-image-padding: .7em;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@ form {
|
||||||
|
|
||||||
> .field_with_errors {
|
> .field_with_errors {
|
||||||
|
|
||||||
input {
|
input,
|
||||||
|
textarea {
|
||||||
border: $input-border-width solid $flash-error;
|
border: $input-border-width solid $flash-error;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -26,7 +27,8 @@ form {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input,
|
||||||
|
textarea {
|
||||||
background-color: $input-primary;
|
background-color: $input-primary;
|
||||||
color: $input-text;
|
color: $input-text;
|
||||||
font-size: em(16);
|
font-size: em(16);
|
||||||
|
|
@ -36,10 +38,12 @@ form {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: $input-border-width solid lighten($input-secondary, 20%);
|
border: $input-border-width solid lighten($input-secondary, 20%);
|
||||||
|
padding: $input-padding ($input-padding - $input-border-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: $input-border-width solid $input-secondary;
|
border: $input-border-width solid $input-secondary;
|
||||||
|
padding: $input-padding ($input-padding - $input-border-width);
|
||||||
color: $input-secondary;
|
color: $input-secondary;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
@ -68,10 +72,12 @@ form.dark {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: $input-dark-border-width solid $input-dark-border-hover-colour;
|
border: $input-dark-border-width solid $input-dark-border-hover-colour;
|
||||||
|
padding: $input-padding ($input-padding - $input-dark-border-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: $input-dark-border-width solid $input-dark-border-focus-colour;
|
border: $input-dark-border-width solid $input-dark-border-focus-colour;
|
||||||
|
padding: $input-padding ($input-padding - $input-dark-border-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:-webkit-autofill {
|
&:-webkit-autofill {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
#sidebar {
|
#sidebar {
|
||||||
|
|
||||||
.widget {
|
.widget {
|
||||||
|
@include span-columns(12);
|
||||||
margin-bottom: em(20);
|
margin-bottom: em(20);
|
||||||
padding: em(20);
|
padding: em(20);
|
||||||
background: $light-gray;
|
background: $light-gray;
|
||||||
|
|
@ -10,13 +11,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.widget-content-wrapper {
|
.widget-content-wrapper {
|
||||||
|
@include span-columns(12);
|
||||||
font-size: em(14);
|
font-size: em(14);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.calendar {
|
|
||||||
max-height: 500px;
|
|
||||||
overflow-x: scroll;
|
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -26,4 +23,53 @@
|
||||||
margin-bottom: em(12);
|
margin-bottom: em(12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
max-height: 500px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shoutbox {
|
||||||
|
.transcript {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
@include span-columns(12);
|
||||||
|
margin-bottom: em(10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlights,
|
||||||
|
.posts {
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin-bottom: em(20);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll {
|
||||||
|
.question {
|
||||||
|
@include span-columns(12);
|
||||||
|
margin-bottom: em(20);
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
display: block;
|
||||||
|
background: $green;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
31
app/assets/stylesheets/pages/_news.scss
Normal file
31
app/assets/stylesheets/pages/_news.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
div.article {
|
||||||
|
@include span-columns(12);
|
||||||
|
border-bottom: 1px solid rgba(35, 35, 35, 0.1);
|
||||||
|
padding-bottom: em(20);
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
@include span-columns(12);
|
||||||
|
margin-bottom: em(20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
@include span-columns(6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
@include span-columns(6);
|
||||||
|
@include omega;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="article wide">
|
<div class="article">
|
||||||
<h1><%= namelink article %></h1>
|
<h1><%= namelink article %></h1>
|
||||||
|
|
||||||
<div class="clear content">
|
<div class="content">
|
||||||
<% if article.text_coding == Article::CODING_HTML %>
|
<% if article.text_coding == Article::CODING_HTML %>
|
||||||
<%= article.text.html_safe %>
|
<%= article.text.html_safe %>
|
||||||
<% else %>
|
<% else %>
|
||||||
|
|
@ -9,9 +9,9 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h4 class="author">
|
<div class="author">
|
||||||
<%= namelink article.user %> on <%= longtime article.created_at %>
|
<%= flag(article.user.country) %> <%= namelink(article.user) %> on <%= longtime article.created_at %>
|
||||||
</h4>
|
</div>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<% if article.can_update? cuser %>
|
<% if article.can_update? cuser %>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<div class="comments">
|
<div id="comments">
|
||||||
<h3>Comments</h3>
|
<h3>Comments</h3>
|
||||||
<%= render partial: "comments/comment", collection: @comments %>
|
<%= render partial: "comments/comment", collection: @comments %>
|
||||||
|
<%= render partial: "comments/new" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%= render partial: "comments/new" %>
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
<div class="commentNew center centered">
|
<div class="comment-form">
|
||||||
<h3>
|
<h3>New comment</h3>
|
||||||
New comment
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<% if cuser %>
|
<% if cuser %>
|
||||||
<%= form_for(@comment, :remote => true) do |f| %>
|
<%= form_for(@comment, remote: true) do |f| %>
|
||||||
<ul>
|
<ul>
|
||||||
<% @comment.errors.full_messages.each do |msg| %>
|
<% @comment.errors.full_messages.each do |msg| %>
|
||||||
<li><%= msg %></li>
|
<li><%= msg %></li>
|
||||||
|
|
@ -12,12 +10,12 @@
|
||||||
</ul>
|
</ul>
|
||||||
<%= f.hidden_field :commentable_id %>
|
<%= f.hidden_field :commentable_id %>
|
||||||
<%= f.hidden_field :commentable_type %>
|
<%= f.hidden_field :commentable_type %>
|
||||||
<p>
|
<div class="fields">
|
||||||
<%= f.text_area :text, :rows => 5, :cols => 40, :id => "textArea" %>
|
<%= f.text_area :text, rows: 5, cols: 40, id: "textArea" %>
|
||||||
</p>
|
</div>
|
||||||
<p>
|
<div class="controls">
|
||||||
<%= f.submit 'Post Comment' %>
|
<%= f.submit 'Post Comment' %>
|
||||||
</p>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% else %>
|
<% else %>
|
||||||
Please log in or <%= link_to "register", new_user_path %> to post comments.
|
Please log in or <%= link_to "register", new_user_path %> to post comments.
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,21 @@
|
||||||
<h5><%= @poll.question %></h5>
|
<div class="widget-content-wrapper">
|
||||||
|
<div class="question">
|
||||||
|
<h5><%= @poll.question %></h5>
|
||||||
|
|
||||||
<div>
|
<% @poll.options.all.each do |opt| %>
|
||||||
<% @poll.options.all.each do |opt| %>
|
<p class="option">
|
||||||
<p>
|
<% if cuser and !@poll.voted?(cuser) %>
|
||||||
<% if cuser and !@poll.voted?(cuser) %>
|
<%= link_to (h opt), controller: "votes", action: "create", vote: { votable_id: opt.id, votable_type: "Option" } %>
|
||||||
<%= link_to (h opt), :controller => "votes", :action => "create", :vote => {:votable_id => opt.id, :votable_type => "Option"} %>
|
<% else %>
|
||||||
<% else %>
|
<%= opt.option %> <br />
|
||||||
<%= opt.option %> <br />
|
<% end %>
|
||||||
<% end %>
|
<% if opt.votes > 0 %>
|
||||||
<% if opt.votes > 0 %>
|
<%= content_tag :div, "", { class: "bar", style: "width: #{opt.votes*100/@poll.votes}%;" } %>
|
||||||
<%= image_tag "/images/icons/poll.png", :class => "bar", :height => 6, :width => opt.votes*100/@poll.votes %>
|
<% end %>
|
||||||
<% end %>
|
<span><%= opt.votes %></span>
|
||||||
<span><%= opt.votes %></span>
|
</p>
|
||||||
</p>
|
<% end %>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p><%= link_to "Archive..", polls_path %></p>
|
<%= link_to "Archive", polls_path, class: "button" %>
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,17 @@
|
||||||
You have been muted.
|
You have been muted.
|
||||||
<% else %>
|
<% else %>
|
||||||
<% scroll = shoutmsg.domain == "shoutbox" ? "" : "$('#{shoutmsg.domain}').scrollTop = $('#{shoutmsg.domain}').scrollHeight;" %>
|
<% scroll = shoutmsg.domain == "shoutbox" ? "" : "$('#{shoutmsg.domain}').scrollTop = $('#{shoutmsg.domain}').scrollHeight;" %>
|
||||||
<%= form_for(shoutmsg, :remote => true, :html => {:id => "new_#{shoutmsg.domain}"}) do |f| %>
|
<%= form_for(shoutmsg, remote: true, html: { id: "new_#{shoutmsg.domain}" }) do |f| %>
|
||||||
<% if shoutmsg.shoutable %>
|
<% if shoutmsg.shoutable %>
|
||||||
<%= f.hidden_field :shoutable_type %>
|
<%= f.hidden_field :shoutable_type %>
|
||||||
<%= f.hidden_field :shoutable_id %>
|
<%= f.hidden_field :shoutable_id %>
|
||||||
<% end %>
|
<% end %>
|
||||||
<p>
|
<div class="fields">
|
||||||
<%= f.text_field :text, size: 12, id: "#{shoutmsg.domain}_text", class: "shout_input" %>
|
<%= f.text_field :text, size: 12, id: "#{shoutmsg.domain}_text", class: "shout_input" %>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
<%= submit_tag "Shout!" %>
|
<%= submit_tag "Shout!" %>
|
||||||
</p>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,56 @@
|
||||||
<div class="widget highlights">
|
<div class="widget highlights">
|
||||||
<h4><%= t('widget.highlights') %></h4>
|
<h4><%= t('widget.highlights') %></h4>
|
||||||
<div class="body">
|
|
||||||
<div class="content">
|
|
||||||
<% if cuser and cuser.active_contests.count != 0 then %>
|
|
||||||
<h3>
|
|
||||||
Your contests
|
|
||||||
<%= link_to "(More)", :controller => :matches, :matchesTab => "YourTab" %>
|
|
||||||
</h3>
|
|
||||||
<ol>
|
|
||||||
<% cuser.active_contests.each do |contest| %>
|
|
||||||
<li>
|
|
||||||
<%= namelink contest %>
|
|
||||||
<br />
|
|
||||||
</li>
|
|
||||||
<% end %>
|
|
||||||
</ol>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<% if Match.recent.count != 0 then %>
|
<div class="widget-content-wrapper">
|
||||||
<h5>
|
<% if cuser and cuser.active_contests.count != 0 then %>
|
||||||
Latest Matches
|
<div class="separator">
|
||||||
<%= link_to "(More)", :controller => :matches, :matchesTab => "RecentTab" %>
|
Your contests
|
||||||
</h5>
|
<%= link_to "(More)", controller: :matches, matchesTab: "YourTab" %>
|
||||||
<ol>
|
</div>
|
||||||
<% Match.realfinished.reverse_order.recent.chrono.each do |match| %>
|
<ol>
|
||||||
<li>
|
<% cuser.active_contests.each do |contest| %>
|
||||||
<%= link_to match, :class => "bold #{match.score_color}" do %>
|
<li>
|
||||||
<%= h match.score1 %> - <%= h match.score2 %>
|
<%= namelink contest %>
|
||||||
<%= link_to match.contester1.team.tag, :controller => :contesters, :action => :show, :id => match.contester1 %> <%= if match.score1 > match.score2 then ">>" elsif match.score2 > match.score1 then "<<" else "==" end %> <%= link_to match.contester2.team.tag, :controller => :contesters, :action => :show, :id => match.contester2 %>
|
<br />
|
||||||
(<%= link_to match.contest.short_name, :controller => :contests, :action => :show, :id => match.contest.id %>)
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
<br />
|
</ol>
|
||||||
</li>
|
<% end %>
|
||||||
<% end %>
|
|
||||||
</ol>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<% if Match.future5.count != 0 then %>
|
<% if Match.recent.count != 0 then %>
|
||||||
<h5>
|
<div class="separator">
|
||||||
Upcoming matches
|
Latest Matches
|
||||||
<%= link_to "(More)", :controller => :matches, :matchesTab => "UpcomingTab" %>
|
<%= link_to "(More)", controller: :matches, matchesTab: "RecentTab" %>
|
||||||
</h5>
|
</div>
|
||||||
<ol>
|
<ol>
|
||||||
<% Match.future5.chrono.each do |match| %>
|
<% Match.realfinished.reverse_order.recent.chrono.each do |match| %>
|
||||||
<li>
|
<li>
|
||||||
<%= namelink match, 50 %> (<%= link_to match.contest.short_name, :controller => :contests, :action => :show, :id => match.contest.id %>)<br />
|
<%= link_to match, :class => "bold #{match.score_color}" do %>
|
||||||
<%= shorttime match.match_time %> (<%= match.predictions.count %> preds : <%= match.preds(1) %>% - <%= match.preds(2) %>%)
|
<%= h match.score1 %> - <%= h match.score2 %>
|
||||||
</li>
|
<%= link_to match.contester1.team.tag, controller: :contesters, action: :show, id: match.contester1 %> <%= if match.score1 > match.score2 then ">>" elsif match.score2 > match.score1 then "<<" else "==" end %> <%= link_to match.contester2.team.tag, controller: :contesters, action: :show, id: match.contester2 %>
|
||||||
<% end %>
|
(<%= link_to match.contest.short_name, :controller => :contests, :action => :show, :id => match.contest.id %>)
|
||||||
</ol>
|
<% end %>
|
||||||
<% end %>
|
<br />
|
||||||
</div>
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ol>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<% if Match.future5.count != 0 then %>
|
||||||
|
<div class="separator">
|
||||||
|
Upcoming matches
|
||||||
|
<%= link_to "(More)", controller: :matches, matchesTab: "UpcomingTab" %>
|
||||||
|
</div>
|
||||||
|
<ol>
|
||||||
|
<% Match.future5.chrono.each do |match| %>
|
||||||
|
<li>
|
||||||
|
<%= namelink match, 50 %><br>
|
||||||
|
[<%= link_to match.contest.short_name, controller: :contests, action: :show, id: match.contest.id %>]
|
||||||
|
<%= shorttime match.match_time %><br>
|
||||||
|
<em><%= match.predictions.count %> preds : <%= match.preds(1) %>% - <%= match.preds(2) %>%</em>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ol>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
<% if @current_action == "news_index" %>
|
<% if @current_action == "news_index" %>
|
||||||
<div class="widget poll">
|
<div class="widget poll">
|
||||||
<h4><%= t('widget.poll') %></h4>
|
<h4><%= t('widget.poll') %></h4>
|
||||||
<div class="body">
|
|
||||||
<div class="content">
|
<% @poll = Poll.first(order: "created_at DESC") %>
|
||||||
<% @poll = Poll.first(order: "created_at DESC") %>
|
<%= render(partial: "polls/show") if @poll %>
|
||||||
<%= render(partial: "polls/show") if @poll %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
<div class="widget posts">
|
<div class="widget posts">
|
||||||
<h4><%= t('widget.posts') %></h4>
|
<h4><%= t('widget.posts') %></h4>
|
||||||
<div class="body">
|
|
||||||
<div class="content">
|
|
||||||
<h5>Latest forum posts</h3>
|
|
||||||
<ol>
|
|
||||||
<% Topic.basic.recent.latest_page(1).each do |topic| %>
|
|
||||||
<li>
|
|
||||||
<%= link_to shorten(topic, 35), lastpost(topic) %>
|
|
||||||
</li>
|
|
||||||
<% end %>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h5>Latest comments</h5>
|
<div class="widget-content-wrapper">
|
||||||
<ol>
|
<div class="separator">Latest forum posts</div>
|
||||||
<% Comment.recent.filtered.each do |comment| %>
|
<ol>
|
||||||
<li>
|
<% Topic.basic.recent.latest_page(1).each do |topic| %>
|
||||||
<%= namelink comment.commentable, 15 %>
|
<li>
|
||||||
by <%= namelink comment.user, 15 %>
|
<%= link_to shorten(topic, 28), lastpost(topic) %>
|
||||||
</li>
|
</li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
|
||||||
|
<div class="separator">Latest comments</div>
|
||||||
|
<ol>
|
||||||
|
<% Comment.recent.filtered.each do |comment| %>
|
||||||
|
<li>
|
||||||
|
<%= namelink comment.commentable, 15 %>
|
||||||
|
by <%= namelink comment.user, 10 %>
|
||||||
|
</li>
|
||||||
|
<% end %>
|
||||||
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -6,8 +6,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<%= render :partial => "shoutmsgs/new", :locals => { :shoutmsg => Shoutmsg.new } %>
|
<%= render :partial => "shoutmsgs/new", :locals => { :shoutmsg => Shoutmsg.new } %>
|
||||||
<p>
|
<%= link_to "Shoutbox Recent History", :controller => :shoutmsgs, :action => "index" %><br/>
|
||||||
<%= link_to "Shoutbox Recent History", :controller => :shoutmsgs, :action => "index" %><br/>
|
<%= link_to "Shoutbox Rules", article_path(Article::SB_RULES) %>
|
||||||
<%= link_to "Shoutbox Rules", article_path(Article::SB_RULES) %>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Loading…
Reference in a new issue