Improves gathers and article pages/forms styling

This commit is contained in:
Luke Barratt 2014-04-26 02:24:47 +01:00
parent 38c22734d5
commit 59bb60da9f
9 changed files with 211 additions and 144 deletions

View file

@ -102,27 +102,40 @@
#gather-area { #gather-area {
@include span-columns(12); @include span-columns(12);
margin-top: em(20);
$column-border-width: em(15);
$column-border-radius: em(5);
.gather-columns {
@include span-columns(12);
@include row(table);
margin-bottom: em(20);
margin-left: - $column-border-width;
width: $max-width - ($column-border-width*2);
}
.data { .data {
@include span-columns(4); @include span-columns(4);
@include pad;
border-radius: $column-border-width + $column-border-radius;
overflow-y: scroll; overflow-y: scroll;
padding-bottom: em(20); padding-bottom: em(20);
background: $light-gray;
padding: em(20);
border: $column-border-width solid white;
h4 { h4 {
padding-bottom: em(20); padding-bottom: em(20);
text-align: center;
} }
&:nth-child(3) { &:nth-child(3) {
@include reset-display;
@include omega; @include omega;
} }
ul { ul {
margin-bottom: em(10); margin-bottom: em(10);
li {
margin-bottom: em(5);
}
} }
} }
@ -142,6 +155,8 @@
#gather-stats { #gather-stats {
@include span-columns(12); @include span-columns(12);
display: block;
clear: both;
padding: em(20) 0; padding: em(20) 0;
margin: em(20) 0; margin: em(20) 0;
border-top: em(2) solid $light-gray; border-top: em(2) solid $light-gray;
@ -154,6 +169,10 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
p {
@include clearfix;
}
} }
/* /*

View file

@ -100,3 +100,40 @@ form.article {
} }
} }
} }
/*
Articles Page
*/
#articles {
@include span-columns(12);
h3 {
@include span-columns(12);
margin-top: 1em;
}
.article-list {
@include span-columns(12);
margin-bottom: em(10);
.new {
@extend .highlight;
margin-right: em(10);
}
.title {
@include span-columns(6);
}
.meta {
@include span-columns(6);
@include omega;
text-align: right;
}
}
.button.new {
margin-top: em(20);
}
}

View file

@ -1,26 +1,34 @@
<div id="articles">
<h1>Articles</h1> <h1>Articles</h1>
<% @categories.each do |category| %> <% @categories.each do |category| %>
<h3> <h3 class="title"><%= category.name %></h3>
<%= category.name %>
</h3>
<div class="category">
<% category.articles.nodrafts.ordered.each do |article| %> <% category.articles.nodrafts.ordered.each do |article| %>
<div class="indented"> <div class="article-list">
<div class="left"> <div class="title">
<% if cuser and !article.read_by? cuser %> <% if cuser and !article.read_by? cuser %>
<span class="red bold">NEW</span> <span class="new">NEW</span>
<% end %> <% end %>
<%= namelink article %> <%= namelink article %>
</div> </div>
<div class="right"> <div class="meta">
(<%= namelink article.user %> on <%= longdate article.created_at %>) <span class="author">
<%= namelink article.user %>
</span>
<span class="date">
on <%= longdate article.created_at %>
</span>
</div> </div>
<br class="clear" />
</div> </div>
<% end %> <% end %>
</div>
<% end %> <% end %>
<% if Article.new.can_create? cuser %> <% if Article.new.can_create? cuser %>
<%= link_to 'New Article', new_article_path, class: 'button' %> <%= link_to 'New Article', new_article_path, class: 'button new' %>
<% end %> <% end %>
</div>

View file

@ -1,3 +1,4 @@
<div class="gather-columns">
<div class="data players"> <div class="data players">
<%= render partial: "gatherers/list", locals: { team: nil } %> <%= render partial: "gatherers/list", locals: { team: nil } %>
</div> </div>
@ -9,6 +10,7 @@
<div class="data players"> <div class="data players">
<%= render partial: "gatherers/list", locals: { team: 2 } %> <%= render partial: "gatherers/list", locals: { team: 2 } %>
</div> </div>
</div>
<%= render partial: "status" %> <%= render partial: "status" %>

View file

@ -1,3 +1,4 @@
<div class="gather-columns">
<div class="data players"> <div class="data players">
<h4>Signed Up</h4> <h4>Signed Up</h4>
@ -18,4 +19,7 @@
</div> </div>
<%= render partial: 'votes' %> <%= render partial: 'votes' %>
</div>
<%= render partial: 'status' %> <%= render partial: 'status' %>

View file

@ -48,18 +48,22 @@
</p> </p>
<% elsif @gather.status == Gather::STATE_FINISHED and @gather.server %> <% elsif @gather.status == Gather::STATE_FINISHED and @gather.server %>
Gather finished, join the <p>Gather finished, join the Server and TeamSpeak 3.</p>
<% if @gather.server and @gather.server.ip and @gather.server.password %>
<%= link_to "Server", "steam://run/4920//connect #{@gather.server.ip} #{@gather.server.password}" %>
<% else %>
Server
<% end %>
and TS3. <br>
Maps: <%= namelink @gather.map1.map if @gather.map1 %>, <%= (namelink @gather.map2.map) if @gather.map2 %> <br> <p>
Server: <% if @gather.server %> <strong>Maps</strong>: <%= namelink @gather.map1.map if @gather.map1 %>, <%= (namelink @gather.map2.map) if @gather.map2 %> <br>
<strong>Server</strong>:
<% if @gather.server %>
<%= @gather.server %> <%= @gather.server %>
(<%= @gather.server.ip %>:<%= @gather.server.port %> ; password = <%= if @gather.server.password then @gather.server.password else "<Password not specified>" end %>) (<%= @gather.server.ip %>:<%= @gather.server.port %> ;
password = <%= if @gather.server.password then @gather.server.password else "<Password not specified>" end %>)
<% end %>
</p>
<% if @gather.server and @gather.server.ip and @gather.server.password %>
<p>
<%= link_to "Click to join Server", "steam://run/4920//connect #{@gather.server.ip} #{@gather.server.password}", class: 'join button tiny' %>
</p>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -1,3 +1,4 @@
<div class="gather-columns">
<div class="data"> <div class="data">
<h4>Vote Captains</h4> <h4>Vote Captains</h4>
@ -26,4 +27,6 @@
</div> </div>
<%= render partial: 'votes' %> <%= render partial: 'votes' %>
</div>
<%= render partial: 'status' %> <%= render partial: 'status' %>

View file

@ -1,84 +1,73 @@
<h1> <h1>Gather Admin: #<%= @gather.id %></h1>
Gather admin page for gather #<%= @gather.id %>
</h1> <div class="restart">
<h3>Restart Gather</h3>
<%= form_for(@gather, html: { class: 'square' }) do |f| %>
<%= render 'shared/errors', messages: @gather.errors.full_messages %>
<div class="wide box">
<h3>
Gather Restart
</h3>
<%= form_for(@gather) do |f| %>
<ul>
<% @gather.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
<%= f.hidden_field :admin %> <%= f.hidden_field :admin %>
<p>
<%= f.label :captain1 %><br /> <div class="fields horizontal">
<%= f.label :captain1 %>
<%= f.select :captain1_id, @gather.gatherers.collect{|c| [c, c.id]} %> <%= f.select :captain1_id, @gather.gatherers.collect{|c| [c, c.id]} %>
</p> </div>
<p> <div class="fields horizontal">
<%= f.label :captain2 %><br /> <%= f.label :captain2 %>
<%= f.select :captain2_id, @gather.gatherers.collect{|c| [c, c.id]} %> <%= f.select :captain2_id, @gather.gatherers.collect{|c| [c, c.id]} %>
</p> </div>
<p>
<%= f.submit 'Restart gather' %> <div class="controls">
</p> <%= f.submit 'Restart Gather' %>
</div>
<% end %> <% end %>
</div> </div>
<div class="wide box"> <div class="turns">
<h3> <h3>Change Turns</h3>
Turn change
</h3> <%= form_for(@gather, html: { class: 'square' }) do |f| %>
<%= form_for(@gather) do |f| %> <%= render 'shared/errors', messages: @gather.errors.full_messages %>
<ul>
<% @gather.errors.full_messages.each do |msg| %> <div class="fields horizontal">
<li><%= msg %></li> <%= f.label :turn %>
<% end %> <%= f.select :turn, ['Team 1', 'Team 2'] %>
</ul> </div>
<p> <div class="controls">
<%= f.label :turn %><br /> <%= f.submit 'Change Turn' %>
<%= f.select :turn, ['1', '2'] %> </div>
</p>
<p>
<%= f.submit 'Change turn' %>
</p>
<% end %> <% end %>
</div> </div>
<div class="wide box"> <div class="replace">
<h3> <h3>Replace Players</h3>
Replace players
</h3>
<% if @gather.gatherers.first %> <% if @gather.gatherers.first %>
<%= form_for(@gather.gatherers.first) do |f| %> <%= form_for(@gather.gatherers.first, html: { class: 'square' }) do |f| %>
<p> <div class="fields horizontal">
Select player: <br /> <%= f.label :id, "Select Player" %>
<%= f.select :id, @gather.gatherers.collect{|g| [g.user, g.id]} %> <%= f.select :id, @gather.gatherers.collect{|g| [g.user, g.id]} %>
</p> </div>
<p> <div class="fields horizontal">
Replace with <%= link_to_function 'user', "findUser('username')" %>: <%= f.label :username, "Replace with:" %>
<%= f.text_field :username %> <%= f.text_field :username %>
</p> </div>
<p> <div class="controls">
<%= f.submit 'Replace player' %> <%= f.submit 'Replace Player' %>
</p> </div>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>
<div class="wide box"> <div class="restart">
<h3> <h3>Start New</h3>
Start new <%= form_for Gather.new do |f| %>
</h3>
<%= form_for(Gather.new) do |f| %>
<% f.object.category = @gather.category %> <% f.object.category = @gather.category %>
<%= f.hidden_field :category_id %> <%= f.hidden_field :category_id %>
<p>
<%= f.submit "Start next (#{f.object.category})" %> <div class="controls">
</p> <%= f.submit "Start New Gather (#{f.object.category})" %>
</div>
<% end %> <% end %>
</div> </div>

View file

@ -20,6 +20,7 @@ en:
contests_contester_update: "Contester was successfully updated." contests_contester_update: "Contester was successfully updated."
gather_create: "New Gather was started successfully." gather_create: "New Gather was started successfully."
gathers_join: "You have joined the Gather." gathers_join: "You have joined the Gather."
gatherers_update: "Gather player successfully updated."
files_create: "File was successfully created." files_create: "File was successfully created."
files_update: "File was successfully updated." files_update: "File was successfully updated."
directories_create: "Directory was successfully created." directories_create: "Directory was successfully created."