From 369d3eac57cf78a5c075958de368717ea747a218 Mon Sep 17 00:00:00 2001 From: Luke Barratt Date: Sat, 26 Apr 2014 02:24:47 +0100 Subject: [PATCH] Improves gathers and article pages/forms styling --- .../stylesheets/components/_gather.scss | 29 ++++- app/assets/stylesheets/pages/_news.scss | 37 ++++++ app/views/articles/index.html.erb | 50 ++++---- app/views/gathers/_picking.html.erb | 18 +-- app/views/gathers/_running.html.erb | 34 +++--- app/views/gathers/_status.html.erb | 26 ++-- app/views/gathers/_voting.html.erb | 49 ++++---- app/views/gathers/edit.html.erb | 111 ++++++++---------- config/locales/en.yml | 1 + 9 files changed, 211 insertions(+), 144 deletions(-) diff --git a/app/assets/stylesheets/components/_gather.scss b/app/assets/stylesheets/components/_gather.scss index 1422a42..ddc58ff 100644 --- a/app/assets/stylesheets/components/_gather.scss +++ b/app/assets/stylesheets/components/_gather.scss @@ -102,27 +102,40 @@ #gather-area { @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 { @include span-columns(4); + @include pad; + border-radius: $column-border-width + $column-border-radius; overflow-y: scroll; padding-bottom: em(20); + background: $light-gray; + padding: em(20); + border: $column-border-width solid white; h4 { padding-bottom: em(20); + text-align: center; } &:nth-child(3) { + @include reset-display; @include omega; } ul { margin-bottom: em(10); - - li { - margin-bottom: em(5); - } } } @@ -142,6 +155,8 @@ #gather-stats { @include span-columns(12); + display: block; + clear: both; padding: em(20) 0; margin: em(20) 0; border-top: em(2) solid $light-gray; @@ -154,6 +169,10 @@ margin: 0; position: absolute; } + + p { + @include clearfix; + } } /* diff --git a/app/assets/stylesheets/pages/_news.scss b/app/assets/stylesheets/pages/_news.scss index 6d227d4..33d2547 100644 --- a/app/assets/stylesheets/pages/_news.scss +++ b/app/assets/stylesheets/pages/_news.scss @@ -99,4 +99,41 @@ form.article { margin-bottom: em(20); } } +} + +/* + 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); + } } \ No newline at end of file diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb index 56ad572..b2c2ae7 100644 --- a/app/views/articles/index.html.erb +++ b/app/views/articles/index.html.erb @@ -1,26 +1,34 @@ -

Articles

+
+

Articles

-<% @categories.each do |category| %> -

- <%= category.name %> -

+ <% @categories.each do |category| %> +

<%= category.name %>

- <% category.articles.nodrafts.ordered.each do |article| %> -
-
- <% if cuser and !article.read_by? cuser %> - NEW - <% end %> - <%= namelink article %> -
-
- (<%= namelink article.user %> on <%= longdate article.created_at %>) -
-
+
+ <% category.articles.nodrafts.ordered.each do |article| %> +
+
+ <% if cuser and !article.read_by? cuser %> + NEW + <% end %> + + <%= namelink article %> +
+
+ + <%= namelink article.user %> + + + on <%= longdate article.created_at %> + +
+
+ <% end %>
<% end %> -<% end %> -<% if Article.new.can_create? cuser %> - <%= link_to 'New Article', new_article_path, class: 'button' %> -<% end %> + <% if Article.new.can_create? cuser %> + <%= link_to 'New Article', new_article_path, class: 'button new' %> + <% end %> +
+ \ No newline at end of file diff --git a/app/views/gathers/_picking.html.erb b/app/views/gathers/_picking.html.erb index 071a812..f93ec9f 100644 --- a/app/views/gathers/_picking.html.erb +++ b/app/views/gathers/_picking.html.erb @@ -1,13 +1,15 @@ -
- <%= render partial: "gatherers/list", locals: { team: nil } %> -
+
+
+ <%= render partial: "gatherers/list", locals: { team: nil } %> +
-
- <%= render partial: "gatherers/list", locals: { team: 1 } %> -
+
+ <%= render partial: "gatherers/list", locals: { team: 1 } %> +
-
- <%= render partial: "gatherers/list", locals: { team: 2 } %> +
+ <%= render partial: "gatherers/list", locals: { team: 2 } %> +
<%= render partial: "status" %> diff --git a/app/views/gathers/_running.html.erb b/app/views/gathers/_running.html.erb index bd998d8..d1b1307 100644 --- a/app/views/gathers/_running.html.erb +++ b/app/views/gathers/_running.html.erb @@ -1,21 +1,25 @@ -
-

Signed Up

+
+
+

Signed Up

-
    - <% @gather.gatherers.each do |gatherer| %> -
  • - <%= flag gatherer.user.country %> - <%= namelink gatherer.user %> - <% if cuser and cuser.admin? %> - <%= link_to gatherer, method: :delete, class: 'delete' do %> - <%= icon 'times' %> +
      + <% @gather.gatherers.each do |gatherer| %> +
    • + <%= flag gatherer.user.country %> + <%= namelink gatherer.user %> + <% if cuser and cuser.admin? %> + <%= link_to gatherer, method: :delete, class: 'delete' do %> + <%= icon 'times' %> + <% end %> <% end %> - <% end %> -
      • - <% end %> -
    +
    • + <% end %> +
+
+ + <%= render partial: 'votes' %>
-<%= render partial: 'votes' %> <%= render partial: 'status' %> + \ No newline at end of file diff --git a/app/views/gathers/_status.html.erb b/app/views/gathers/_status.html.erb index 8288313..50a508d 100644 --- a/app/views/gathers/_status.html.erb +++ b/app/views/gathers/_status.html.erb @@ -48,18 +48,22 @@

<% elsif @gather.status == Gather::STATE_FINISHED and @gather.server %> - Gather finished, join the - <% 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.
+

Gather finished, join the Server and TeamSpeak 3.

- Maps: <%= namelink @gather.map1.map if @gather.map1 %>, <%= (namelink @gather.map2.map) if @gather.map2 %>
- Server: <% if @gather.server %> - <%= @gather.server %> - (<%= @gather.server.ip %>:<%= @gather.server.port %> ; password = <%= if @gather.server.password then @gather.server.password else "" end %>) +

+ Maps: <%= namelink @gather.map1.map if @gather.map1 %>, <%= (namelink @gather.map2.map) if @gather.map2 %>
+ Server: + <% if @gather.server %> + <%= @gather.server %> + (<%= @gather.server.ip %>:<%= @gather.server.port %> ; + password = <%= if @gather.server.password then @gather.server.password else "" end %>) + <% end %> +

+ + <% if @gather.server and @gather.server.ip and @gather.server.password %> +

+ <%= link_to "Click to join Server", "steam://run/4920//connect #{@gather.server.ip} #{@gather.server.password}", class: 'join button tiny' %> +

<% end %> <% end %> diff --git a/app/views/gathers/_voting.html.erb b/app/views/gathers/_voting.html.erb index 8071d23..2226ecf 100644 --- a/app/views/gathers/_voting.html.erb +++ b/app/views/gathers/_voting.html.erb @@ -1,29 +1,32 @@ -
-

Vote Captains

+
+
+

Vote Captains

- - <% @gather.gatherers.most_voted.each do |gatherer| %> - - - - +
<%= flag gatherer.user.country %> - (<%= gatherer.votes %>) - <% if @gatherer and gatherer.real_votes.build(user: cuser).can_create? cuser %> - <%= link_to (h gatherer.user), - controller: "votes", action: "create", - vote: { votable_id: gatherer.id, votable_type: "Gatherer"}, - method: "post" %> - <% else %> - <%= namelink gatherer.user %> - <% end %> -
+ <% @gather.gatherers.most_voted.each do |gatherer| %> + + + + + <% end %> +
<%= flag gatherer.user.country %> + (<%= gatherer.votes %>) + <% if @gatherer and gatherer.real_votes.build(user: cuser).can_create? cuser %> + <%= link_to (h gatherer.user), + controller: "votes", action: "create", + vote: { votable_id: gatherer.id, votable_type: "Gatherer"}, + method: "post" %> + <% else %> + <%= namelink gatherer.user %> + <% end %> +
+ + <% if @gatherer %> +

Click to vote for captain.

<% end %> - +
- <% if @gatherer %> -

Click to vote for captain.

- <% end %> + <%= render partial: 'votes' %>
-<%= render partial: 'votes' %> <%= render partial: 'status' %> diff --git a/app/views/gathers/edit.html.erb b/app/views/gathers/edit.html.erb index 499bd11..b396d7f 100644 --- a/app/views/gathers/edit.html.erb +++ b/app/views/gathers/edit.html.erb @@ -1,84 +1,73 @@ -

- Gather admin page for gather #<%= @gather.id %> -

+

Gather Admin: #<%= @gather.id %>

-
-

- Gather Restart -

- <%= form_for(@gather) do |f| %> -
    - <% @gather.errors.full_messages.each do |msg| %> -
  • <%= msg %>
    • - <% end %> -
+
+

Restart Gather

+ + <%= form_for(@gather, html: { class: 'square' }) do |f| %> + <%= render 'shared/errors', messages: @gather.errors.full_messages %> + <%= f.hidden_field :admin %> -

- <%= f.label :captain1 %>
+ +

+ <%= f.label :captain1 %> <%= f.select :captain1_id, @gather.gatherers.collect{|c| [c, c.id]} %> -

-

- <%= f.label :captain2 %>
+

+
+ <%= f.label :captain2 %> <%= f.select :captain2_id, @gather.gatherers.collect{|c| [c, c.id]} %> -

-

- <%= f.submit 'Restart gather' %> -

+
+ +
+ <%= f.submit 'Restart Gather' %> +
<% end %>
-
-

- Turn change -

- <%= form_for(@gather) do |f| %> -
    - <% @gather.errors.full_messages.each do |msg| %> -
  • <%= msg %>
    • - <% end %> -
-

- <%= f.label :turn %>
- <%= f.select :turn, ['1', '2'] %> -

-

- <%= f.submit 'Change turn' %> -

+
+

Change Turns

+ + <%= form_for(@gather, html: { class: 'square' }) do |f| %> + <%= render 'shared/errors', messages: @gather.errors.full_messages %> + +
+ <%= f.label :turn %> + <%= f.select :turn, ['Team 1', 'Team 2'] %> +
+
+ <%= f.submit 'Change Turn' %> +
<% end %>
-
-

- Replace players -

+
+

Replace Players

<% if @gather.gatherers.first %> - <%= form_for(@gather.gatherers.first) do |f| %> -

- Select player:
+ <%= form_for(@gather.gatherers.first, html: { class: 'square' }) do |f| %> +

+ <%= f.label :id, "Select Player" %> <%= f.select :id, @gather.gatherers.collect{|g| [g.user, g.id]} %> -

-

- Replace with <%= link_to_function 'user', "findUser('username')" %>: +

+
+ <%= f.label :username, "Replace with:" %> <%= f.text_field :username %> -

-

- <%= f.submit 'Replace player' %> -

+
+
+ <%= f.submit 'Replace Player' %> +
<% end %> <% end %>
-
-

- Start new -

- <%= form_for(Gather.new) do |f| %> +
+

Start New

+ <%= form_for Gather.new do |f| %> <% f.object.category = @gather.category %> <%= f.hidden_field :category_id %> -

- <%= f.submit "Start next (#{f.object.category})" %> -

+ +
+ <%= f.submit "Start New Gather (#{f.object.category})" %> +
<% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index bf0bb69..a2f52c5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -20,6 +20,7 @@ en: contests_contester_update: "Contester was successfully updated." gather_create: "New Gather was started successfully." gathers_join: "You have joined the Gather." + gatherers_update: "Gather player successfully updated." files_create: "File was successfully created." files_update: "File was successfully updated." directories_create: "Directory was successfully created."