Improved form element styling

Improved article and comment styling

app/assets/stylesheets/_variables.scss

@@ -46,8 +46,11 @@ $green: #1f7f5c;
 $blue: #5a9aa8;
 $purple: #6a5a8c;
 $gold: #FFD700;
+
 $dark-gray: #232323;
 $medium-gray: #2e2e2e;
+
+$light-blue: #F3F3FB;
 $light-gray: #DDD;
 $light-red: #e56c69;
 $light-yellow: #FFF6BF;
@@ -89,11 +92,12 @@ $input-primary: white;
 $input-secondary: #5a9aa8;
 $input-text: #232323;
 $input-border-width: em(3);
+$input-border-colour: darken($light-blue, 10);
 $input-padding: em(11);
 
 $input-dark-background-colour: $dark-gray;
-$input-dark-border-colour: $medium-gray;
-$input-dark-border-width: em(1);
+$input-dark-border-colour: $light-gray;
+$input-dark-border-width: em(2);
 $input-dark-border-hover-colour: $blue;
 $input-dark-border-focus-colour: $green;
 

app/assets/stylesheets/components/_comments.scss

@@ -9,8 +9,9 @@
     @include span-columns(12);
     margin-bottom: em(20);
 
-    h3 {
+    h5 {
       margin-top: 0;
+      margin-bottom: 1em;
     }
 
     .fields {

app/assets/stylesheets/components/_forms.scss

@@ -34,25 +34,28 @@ form {
       font-size: em(16);
       padding: $input-padding;
       height: em(40);
-      border: none;
+      border: $input-border-colour solid $input-border-width;
 
       &:hover {
         border: $input-border-width solid lighten($input-secondary, 20%);
-        padding: $input-padding ($input-padding - $input-border-width);
       }
 
       &:focus {
         border: $input-border-width solid $input-secondary;
-        padding: $input-padding ($input-padding - $input-border-width);
         color: $input-secondary;
         outline: none;
         background: transparent;
       }
     }
+
+    textarea {
+      height: auto;
+      width: 100%;
+    }
   }
 
   .controls {
-    margin-bottom: 20px;
+    margin-bottom: em(20);
 
     button,
     input {
@@ -72,12 +75,10 @@ form.dark {
 
       &:hover {
         border: $input-dark-border-width solid $input-dark-border-hover-colour;
-        padding: $input-padding ($input-padding - $input-dark-border-width);
       }
 
       &:focus {
         border: $input-dark-border-width solid $input-dark-border-focus-colour;
-        padding: $input-padding ($input-padding - $input-dark-border-width);
       }
 
       &:-webkit-autofill {

app/assets/stylesheets/layout/_body.scss

@@ -1,8 +1,8 @@
 body {
   margin: 0;
   padding: 0;
-  background: #046;
-  @include background-image(linear-gradient(#046, $medium-gray));
+  background: lighten($blue, 10);
+  @include background-image(linear-gradient(lighten($blue, 10), $medium-gray));
 }
 
 %container-padded {
@@ -20,7 +20,7 @@ body {
 #content,
 #forums {
   @include span-columns(12);
-  background: #F3F3FB;
+  background: $light-blue;
   padding-top: em(20);
 }
 
@@ -38,3 +38,8 @@ img.flag {
   vertical-align: - em(6);
   margin-right: em(10);
 }
+
+.actions-bottom {
+  @include span-columns(12);
+  margin-top: em(20);
+}

app/assets/stylesheets/pages/_news.scss

@@ -9,7 +9,7 @@ div.article {
 
   .content {
     @include span-columns(12);
-    margin-bottom: em(20);
+    margin-bottom: em(40);
   }
 
   .author {
@@ -29,3 +29,25 @@ div.article {
     }    
   }
 }
+
+div.article-links {
+  @include span-columns(12);
+
+  .previous {
+    @include span-columns(6);
+
+    .fa {
+      padding-right: em(10);
+    }
+  }
+
+  .next {
+    @include span-columns(6);
+    @include omega;
+    text-align: right;
+
+    .fa {
+      padding-left: em(10);
+    }
+  }
+}

app/views/application/_header.html.erb

@@ -12,14 +12,9 @@
                 <% end %>
               </li>
             <% end %>
-            <li>
-              <%= link_to("/gathers/latest/ns1") do %>
-                NS1 Gather (<%= Gather.player_count_for_game('NS1') %>)
-              <% end %>
-            </li>
             <li>
               <%= link_to("/gathers/latest/ns2") do %>
-                NS2 Gather (<%= Gather.player_count_for_game('NS2') %>)
+                NS2 Gather (<%= Gather.player_count_for_game('NS2') %>/<%= Gather::FULL %>)
               <% end %>
             </li>
           </ul>

app/views/articles/_top.html.erb

@@ -1,13 +1,18 @@
-<div class="articleLinks">
+<div class="article-links">
   <% if article.previous_article %>
-    <div class="left">
-      <%= link_to "<< #{article.previous_article}", article.previous_article %>
+    <div class="previous">
+      <%= link_to article.previous_article do %>
+        <%= icon 'arrow-left' %>
+        <%= article.previous_article %>
+      <% end %>
     </div>
   <% end %>
-
   <% if article.next_article %>
-    <div class="right">
-      <%= link_to "#{article.next_article} >>", article.next_article %>
+    <div class="next">
+      <%= link_to article.next_article do %>
+        <%= article.next_article %>
+        <%= icon 'arrow-right' %>
+      <% end %>
     </div>
   <% end %>
 </div>

app/views/articles/news_index.html.erb

@@ -4,8 +4,10 @@
   <% end %>
 </div>
 
+<div class="actions-bottom">
   <%= link_to t('news.archive'), '/news/archive', class: "button" %>
 
   <% if cuser and cuser.admin? %>
     <%= link_to t('helpers.submit.post.new'), new_article_path, class: "button" %>
   <% end %>  
+</div>

app/views/comments/_new.html.erb

@@ -1,5 +1,5 @@
 <div class="comment-form">
-  <h3>New comment</h3>
+  <h5>New comment</h5>
 
   <% if cuser %>
     <%= form_for(@comment, remote: true) do |f| %>

app/views/comments/create.js.erb

@@ -1,2 +1,2 @@
-$("div.commentNew").hide();
-$("div.comments").append("<%= escape_javascript(render("comment", :comment => @comment)) %>");
+$(".comment-form").hide();
+$("#comments").append("<%= escape_javascript(render("comment", comment: @comment)) %>");

app/views/widgets/_calendar.html.erb

@@ -7,8 +7,8 @@
         <div class="separator"><%= day_events.first.start.strftime("%A, %e %B") %></div>
           <% day_events.each do |event| %>
             <div class="entry">
-              <p><%= event.formatted_summary %></p>
-              <p><%= event.start.strftime("%H:%M %Z") %></p>
+              <p class="summary"><%= event.formatted_summary %></p>
+              <p class="time"><%= event.start.strftime("%H:%M %Z") %></p>
             </div>
           <% end %>
       <% end %>

app/views/widgets/_login.html.erb

@@ -1,7 +1,7 @@
 <%= form_tag({ controller: "users", action: "login" }, { class: "dark" }) do %>
   <div class="fields">
-    <%= text_field "login", "username" %>
-    <%= password_field "login", "password" %>
+    <%= text_field "login", "username", placeholder: "Username" %>
+    <%= password_field "login", "password", placeholder: "Password" %>
   </div>
   <div class="controls">  
     <%= submit_tag t('helpers.submit.user.login') %>