Removed fixed topbar

Improved layout
Improved form styling
Fixes issues with firefox
Added menu icons

app/assets/javascripts/local.js

@@ -151,9 +151,13 @@ $(function() {
     }, 2000);
   });
 
+  $user_tabs = $("#user-profile .tabs");
+
   // User page
-  $("#user-profile li a").click(function(){
+  $("#user-profile li a").click(function() {
-    $("#user-data").fadeOut("fast");
+    $user_tabs.find("li").removeClass("activeli");
+    $(this).parent().addClass("activeli");
+
     $.ajax({
       type: "GET",
       url: window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + ".js?page=" + $(this).attr('id'),

app/assets/stylesheets/_variables.scss

@@ -40,24 +40,24 @@ $header-font-family: $montserrat;
 
 $base-font-size: 1em;
 $base-line-height: $base-font-size * 1.5;
-$base-border-radius: em(3);
+$base-border-radius: em(5);
 
 /*
   Colours
 */
 
 $red: #de8650;
-$green: #68cc90;
+$green: darken(#68cc90, 10);
-$blue: #0A8FC8;
+$blue: darken(#0A8FC8, 10);
-$purple: #6a5a8c;
 $gold: #FFD700;
 
-$dark-blue: #0072A6;
+$dark-blue: darken(#0072A6, 10);
+$deep-blue: darken(#12526E, 10);
 $dark-gray: #21262A;
 
 $medium-gray: #2F383D;
 
-$light-blue: #2FB0E7;
+$light-blue: darken(#2FB0E7, 10);
 $light-gray: #ECF1F5;
 $light-red: #e56c69;
 $light-yellow: #FFF6BF;
@@ -102,6 +102,7 @@ $input-text: #232323;
 $input-border-width: em(2);
 $input-border-colour: darken($light-gray, 10%);
 $input-padding: em(11);
+$input-border-radius: $base-border-radius;
 
 $input-dark-background-colour: $medium-gray;
 $input-dark-border-colour: $light-gray;

app/assets/stylesheets/application.css.scss

@@ -19,6 +19,7 @@
   Layout
 */
 
+@import "layout/hacks";
 @import "layout/body";
 @import "layout/typography";
 @import "layout/header";

app/assets/stylesheets/components/_comments.scss

@@ -29,7 +29,7 @@
   $comment-detail-color: transparentize($comment-color, .5);
   $comment-image-vert-alignment: top;
 
-  display: table;
+  position: relative;
   width: 100%;
   margin-bottom: $base-line-height;
   padding-bottom: 1em;
@@ -90,11 +90,12 @@
       font-style: italic;
       font-size: .9em;
       color: $comment-detail-color;
+      margin-top: em(10);
     }
 
     .controls {
       position: absolute;
-      top: 0;
+      top: - em(5);
       right: 0;
     }
   }

app/assets/stylesheets/components/_forms.scss

@@ -41,6 +41,7 @@ form {
     .select-wrapper {
       $select-padding: em(7);
 
+      border-radius: $input-border-radius;
       background-color: $input-primary;
       border: $input-border-colour solid $input-border-width;
       position: relative;
@@ -92,7 +93,7 @@ form {
         border: $input-border-width solid lighten($input-secondary, 20%);
 
         &:after {
-          border-left: $input-border-width solid $input-secondary;
+          border-left: $input-border-width solid lighten($input-secondary, 20%);
           color: $base-font-color;
         }
       }
@@ -107,10 +108,11 @@ form {
     input[type=password],
     input[type=email],
     textarea {
+      border-radius: $input-border-radius;
       background-color: $input-primary;
       color: $input-text;
       font-size: $input-font-size;
-      padding: $input-padding;
+      padding: 0 $input-padding;
       height: em(40);
       border: $input-border-colour solid $input-border-width;
 
@@ -122,10 +124,24 @@ form {
         border: $input-border-width solid $input-secondary;
         outline: none;
       }
+
+      &[disabled] {
+
+        &:hover {
+          border-color: $input-border-colour;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    textarea {
+      padding: $input-padding;
+      font-family: $open-sans;
     }
 
     input[type=checkbox] {
       @include appearance(none);
+      border-radius: $input-border-radius;
       width: em(40);
       height: em(40);
       font-size: $input-font-size;
@@ -174,7 +190,9 @@ form {
 
     button,
     input[type=submit] {
-      @include button($button-secondary);
+      @include button($button-primary);
+      border-radius: $input-border-radius;
+      border: $input-border-width solid $button-primary;
       margin-bottom: 0;
       outline: none;
     }
@@ -258,6 +276,23 @@ form.square {
         width: 100%;
       }
     }
+
+
+    &.wide {
+
+      > .field_with_errors {
+        width: 100%;
+      }
+
+      label {
+        width: 100%;
+      }
+
+      textarea,
+      .mceLayout {
+        width: 100%;
+      }
+    }
   }
 
   .controls {

app/assets/stylesheets/components/_shoutbox.scss

@@ -8,7 +8,7 @@
   .timestamp {
     font-size: em(14);
     border-radius: em(3);
-    background: $light-blue;
+    background: $blue;
     color: white;
     display: inline-block;
     font-style: italic;

app/assets/stylesheets/components/_tables.scss

@@ -1,3 +1,7 @@
+/*
+  Generic Tables
+*/
+
 table {
   border-collapse: collapse;
   margin: ($base-line-height / 2) 0;
@@ -20,3 +24,17 @@ td {
 tr, td, th {
   vertical-align: middle;
 }
+
+table.striped > tbody {
+  > tr > td:first-child {
+    padding-left: ($base-line-height / 2);
+  }
+
+  > tr > td:last-child {
+    padding-right: ($base-line-height / 2);
+  }
+
+  > tr:nth-child(2n) td {
+    background-color: transparentize($light-blue, 0.9);
+  }
+} 

app/assets/stylesheets/components/_tabs.scss

@@ -19,7 +19,7 @@
     li {
       float: left;
       display: block;
-      background-color: $light-blue;
+      background-color: $blue;
 
       a {
         border: $tabs-border-width solid $tabs-border-colour;
@@ -28,6 +28,10 @@
         float: left;
         display: block;
         color: white;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
 
       &:last-child a {
@@ -36,7 +40,7 @@
 
       &.activeli {
         z-index: 100;
-        background-color: $blue;
+        background-color: $light-blue;
 
         a {
           padding-bottom: $tabs-padding-vertical + $tabs-border-width;

app/assets/stylesheets/layout/_body.scss

@@ -2,7 +2,7 @@
   Main Containers
 */
 
-$container-padding: em(20);
+$container-padding: em(30);
 
 html,
 body {
@@ -79,4 +79,25 @@ h1, h2, h3, h4, h5, h6 {
       z-index: 1;
     }
   }
-}
+}
+
+/*
+  Text
+*/
+
+#main {
+  ul.disc,
+  ol {
+    list-style-type: disc;
+    margin: em(20) 0;
+
+    li {
+      margin-left: em(40);
+      display: list-item;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+}

app/assets/stylesheets/layout/_hacks.scss

@@ -0,0 +1,9 @@
+/*
+  Firefox select hacks
+*/
+
+select {
+  -moz-appearance: none;
+  text-indent: 0.01px;
+  text-overflow: '';
+}

app/assets/stylesheets/layout/_header.scss

@@ -1,116 +1,9 @@
-nav.top {
+/*
-  $navigation-background: $medium-gray;
+  Banner
-  $navigation-color: transparentize(white, 0.3);
+*/
-  $navigation-color-hover: white;
-  $navigation-height: em(40);
-
-  background-color: $navigation-background;
-  border-bottom: 1px solid $medium-gray;
-  font-family: $montserrat;
-  height: $navigation-height;
-  width: 100%;
-  z-index: 999;
-
-  .menu-wrapper {
-    @include outer-container;
-    position: relative;
-    z-index: 9999;
-  }
-
-  .navigation-menu-button {
-    color: $navigation-color;
-    cursor: pointer;
-    display: block;
-    float: right;
-    font-family: $montserrat;
-    font-weight: 700;
-    line-height: $navigation-height;
-    margin: 0;
-    padding-right: 1em;
-    text-transform: uppercase;
-
-    @include media ($large-screen) {
-      display: none;
-    }
-
-    &:hover {
-      color: $navigation-color-hover;
-    }
-  }
-
-  .nav {
-    @include media ($large-screen) {
-      float: left;
-    }
-  }
-
-  #navigation-menu {
-    @include span-columns(12);
-
-    .gathers {
-      @include span-columns(6);
-    }
-
-    .pages {
-      @include span-columns(6);
-      @include omega;
-
-      text-align: right;
-
-      li:last-child {
-        padding-right: 0;
-      }
-    }
-  }
-
-  #navigation-menu ul {
-    -webkit-transform-style: preserve-3d; // stop webkit flicker
-    display: none;
-    margin: 0 auto;
-    overflow: hidden;
-    padding: 0;
-    width: 100%;
-    z-index: 9999;
-
-    @include media ($large-screen) {
-      display: block;
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  ul li {
-    background: $navigation-background;
-    display: block;
-    line-height: $navigation-height;
-    overflow: hidden;
-    padding-right: .8em;
-    text-align: right;
-    width: 100%;
-    z-index: 9999;
-
-    @include media ($large-screen) {
-      background: transparent;
-      display: inline;
-      line-height: $navigation-height;
-      padding-right: 2em;
-      text-decoration: none;
-      width: auto;
-    }
-
-    a {
-      font-weight: 400;
-      color: $navigation-color;
-
-      &:hover {
-        color: $navigation-color-hover;
-      }
-    }
-  }
-}
 
 header .banner {  
-  @include linear-gradient($dark-blue, #12526E);
+  @include linear-gradient($dark-blue, $deep-blue);
   height: em(295);
 
   #logo {
@@ -143,6 +36,14 @@ header .banner {
       display: inline;
     }
 
+    &.admin {
+      margin-top: em(10);
+
+      .profile {
+        padding-top: em(20);
+      }
+    }
+
     .fields { 
       @include span-columns(12);
 
@@ -192,17 +93,24 @@ header .banner {
     }
 
     .profile {
+      vertical-align: middle;
 
       .avatar {
         @include span-columns(12);
+        height: em(135);
         background: transparentize($light-gray, 0.5);
-        margin: 0 em(20) em(20) 0;
+        margin: 0 em(20) 0 0;
         text-align: center;
         border-radius: 75px;
+        vertical-align: middle;
 
         img {
           padding: em(10);
           float: left;
+          max-width: em(135);
+          width: 100%;
+          height: auto;
+          border-radius: 75px;
         }
       }
 

app/assets/stylesheets/layout/_navigation.scss

@@ -6,7 +6,6 @@
   @include span-columns(12);
   font-family: $montserrat;
   height: em(60);
-  max-height: em(60);
   margin-top: - em(60);
   
   nav {
@@ -22,12 +21,27 @@ ul.navigation {
   float: left;
   width: 100%;
   background: transparent;
+  overflow: hidden;
+  max-width: $max-width;
+  max-height: em(60);
 
   > li {
     float: left;
-    width: $max-width/7;
+    width: ($max-width - em(1))/7;
     border-right: em(1) solid transparent;
 
+    .count {
+      float: right;
+      font-size: em(14);
+      border-radius: em(25);
+      background-color: $light-blue;
+      display: inline-block;
+      color: white;
+      line-height: em(14);
+      padding: em(5) em(8);
+      margin-top: - em(2);
+    }
+
     > a {
       width: 100%;
       color: white;
@@ -35,11 +49,16 @@ ul.navigation {
       line-height: em(16);
       padding: em(22);
       float: left;
+      position: relative;
       background-color: $navbar-primary;
 
       &:hover,
       &.active {
         background-color: $navbar-secondary;
+
+        .count {
+          background-color: lighten($light-blue, 20);
+        }
       }
     }
 
@@ -49,15 +68,16 @@ ul.navigation {
 
     &.icon {
 
-      > a {
+      i {
+        color: lighten($light-blue, 30);
+        max-height: 60px;
+        position: absolute;
+        top: 0;
+        right: 0;
         font-size: em(24);
-        line-height: em(24);
+        line-height: 1em;
-        padding: em(18);
+        padding: em(12);
-
+        padding-right: em(14);
-        i {
-          width: em(24);
-          height: em(24);
-        }
       }
     }
 
@@ -72,6 +92,7 @@ ul.navigation {
         position: relative;
 
         ul {
+          box-shadow: $content-shadow;
           display: block;
           position: absolute;
           top: em(60);
@@ -110,4 +131,4 @@ ul.navigation {
       }
     }
   }
-}
+}

app/assets/stylesheets/layout/_sidebar.scss

@@ -3,7 +3,7 @@
   .widget {
     @include span-columns(12);
     box-shadow: $content-shadow;
-    margin-bottom: em(20);
+    margin-bottom: em(30);
     padding: em(20);
     background: white;
 
@@ -18,10 +18,19 @@
 
     .separator {
       color: white;
-      background: $light-blue;
+      background: $blue;
       padding: em(12) em(24);
       margin: 0 -20px;
       margin-bottom: em(12);
+
+      a {
+        color: white;
+        float: right;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 

app/assets/stylesheets/mixins/_buttons.scss

@@ -3,17 +3,24 @@
 */
 
 @mixin button($background: $button-primary, $text: $button-text) {
+  @include linear-gradient($blue, $dark-blue);
+  border-radius: $base-border-radius;
   font-family: $montserrat;
   font-size: em(16);
   background-color: $background;
   color: $text;
   height: em(40);
-  padding: em(9) em(18);
+  padding: 0 em(18);
+  line-height: em(40);
   float: left;
   margin: 0 em(20) em(20) 0;
   border: 0;
   text-transform: uppercase;
   cursor: pointer;
+
+  &:hover {
+    color: lighten($light-blue, 30);
+  }
 }
 
 button,
@@ -21,14 +28,12 @@ a.button {
   @include button;
 
   &.tiny {
-    background-color: $green;
+    @include linear-gradient($light-blue, $blue);
+    background-color: transparent;
     border-radius: em(14);
+    line-height: em(25);
     height: em(25);
-    padding: em(1) em(12);
+    padding: 0 em(12);
     margin: 0 em(10) 0 0;
-
-    &:hover {
-      color: $light-gray;
-    }
   }
 }

app/assets/stylesheets/pages/_contests.scss

@@ -39,6 +39,14 @@ table.contest {
     &:nth-child(4) {
       text-align: left;
     }
+
+    &.actions {
+      text-align: right;
+
+      i {
+        padding-left: em(5);
+      }
+    }
   }
 
   thead {

app/assets/stylesheets/pages/_forums.scss

@@ -141,7 +141,6 @@ div#categories {
     .content {
       @include span-columns(9);
       @include omega;
-      background: image-url('images/layout/forum-bg-pattern.png') top left;
 
       .text,
       .signature {

app/assets/stylesheets/pages/_news.scss

@@ -1,3 +1,7 @@
+/*
+  Articles
+*/
+
 div.article {
   @include span-columns(12);
   border-bottom: 1px solid rgba(35, 35, 35, 0.1);
@@ -73,3 +77,14 @@ div.article-links {
     }
   }
 }
+
+/*
+  Article Form
+*/
+
+form.article {
+
+  h4 {
+    margin-bottom: em(20);
+  }
+}

app/assets/stylesheets/pages/_teams.scss

@@ -16,7 +16,7 @@
   }
 
   .irc {
-    width: 20%;
+    width: 25%;
   }
 
   .members {
@@ -24,7 +24,7 @@
   }
 
   .actions {
-    width: 20%;
+    width: 15%;
     text-align: right;
   }
 

app/assets/stylesheets/pages/_users.scss

@@ -12,7 +12,7 @@
 
   .username,
   .name {
-    width: 25%;
+    width: 30%;
   }
 
   .steamid {

app/views/about/adminpanel.html.erb

@@ -2,7 +2,7 @@
   <h1>
     Admin Menu
   </h1>
-  <ul>
+  <ul class="disc">
     <li><%= link_to 'New Article', new_article_path %></li>
     <li><%= link_to "Article Admin", controller: "articles", action: "admin" %></li>
     <li><%= link_to "Files Admin", controller: "directories", action: "show", id: Directory.first %></li>

app/views/about/staff.html.erb

@@ -1,35 +1,32 @@
-<div class="wide box">
+<h1>General Information</h1>
-  <h2 class="center">
+<p>
-    General Information
+  We are a free-working organization founded in 2005 which has organized various competitions for the Half-Life mod Natural Selection.
-  </h2>
+  We now primarily focus on its successor, Natural Selection 2.
+</p>
+<p>To contact us:</p>
+<p>
+  <ol>
+    <li>Use the <%= link_to "contact", new_issue_path() %> form (you must be logged in)</li>
+    <li>Visit our <%= link_to "IRC", article_path(408) %> channel <%= link_to "#ENSL", "irc://irc.quakenet.org/ensl" %> on Quakenet.</li>
+    <li>Send email to the head admin as per the list below</li>
+    <li>Contact other staff members directly, check below and click profile for contact details</li>
+  </ol>
+</p>
+<p>
+  You can check some statistics about the ENSL here: <%= link_to "ENSL Statistics", controller: "about", action: "statistics" %> 
+</p>
 
-  <p>
+<div id="staff" class="tabbed">
-
+  <ul id="staff-nav" class="tabs">
-    We are a free-working organization founded in 2005 which has organized various competitions for the Half-Life mod Natural Selection.
+    <li><a href="#admins">Admins</a></li>
-    We now primarily focus on its successor, Natural Selection 2.
+    <li><a href="#referees">Referees</a></li>
-    To contact us:
+    <li><a href="#casters">Casters</a></li>
-    <ol>
+    <li><a href="#extras">Extras</a></li>
-      <li>Use the <%= link_to "contact", new_issue_path() %> form (you must be logged in)</li>
+    <li><a href="#support">Support</a></li>
-      <li>Visit our <%= link_to "IRC", article_path(408) %> channel <%= link_to "#ENSL", "irc://irc.quakenet.org/ensl" %> on Quakenet.</li>
-      <li>Send email to the head admin as per the list below</li>
-      <li>Contact other staff members directly, check below and click profile for contact details</li>
-    </ol>
-  </p>
-  <p>
-    You can check some statistics about ENSL here : <%= link_to "ENSL Statistics", :controller => "about", :action => "statistics" %> 
-</p><br/>
-
-<div id="staffTab">
-  <ul id="staffTab-nav" class="tabs">
-    <li><a href="#AdminsTab">Admins</a></li>
-    <li><a href="#RefereesTab">Referees</a></li>
-    <li><a href="#ShoutcastersTab">Shoutcasters</a></li>
-    <li><a href="#ExtrasTab">Extras</a></li>
-    <li><a href="#SupportTab">Support</a></li>
   </ul>
-  <div class="box wide tabs">
+  <div class="tabbed-contents">
-    <div class="tab" id="AdminsTab">
+    <div class="tab" id="admins">
-      <h3 class="center">Admins</h3>
+      <h3>Admins</h3>
       <table class="data">
         <tr>
           <th></th>
@@ -55,8 +52,8 @@
         <% end %>
       </table>
     </div>
-    <div class="tab" id="RefereesTab">
+    <div class="tab" id="referees">
-      <h3 class="center">Referees</h3>
+      <h3>Referees</h3>
       <table class="data">
         <tr>
           <th></th>
@@ -82,8 +79,8 @@
         <% end %>
       </table>
     </div>
-    <div class="tab" id="ShoutcastersTab">
+    <div class="tab" id="casters">
-      <h3 class="center">Shoutcasters</h3>
+      <h3>Shoutcasters</h3>
       <table class="data">
         <tr>
           <th></th>
@@ -109,8 +106,8 @@
         <% end %>
       </table>
     </div>
-    <div class="tab" id="ExtrasTab">
+    <div class="tab" id="extras">
-      <h3 class="center">Extras</h3>
+      <h3>Extras</h3>
       <table class="data">
         <tr>
           <th></th>
@@ -120,7 +117,7 @@
           <th>Age</th>
         </tr>
         <% Group.extras.each do |grouper| %>
-          <tr class="<%= cycle('even', 'odd') %>">
+          <tr>
             <td><%= flag grouper.user.country %></td>
             <td><%= namelink grouper.user %></td>
             <td><%= h grouper.user.email_s %></td>
@@ -136,16 +133,15 @@
         <% end %>
       </table>
     </div>
-    <div class="tab" id="SupportTab">
+    <div class="tab" id="support">
-      <h3 class="center">Support<h3>
+      <h3>Support</h3>
-          <ul>
+      <ul>
-            <li><b><a href="http://unknownworlds.com/">Unknown Worlds Entertainment</a></b></li>
+        <li><b><a href="http://unknownworlds.com/">Unknown Worlds Entertainment</a></b></li>
-            <ul>
+      <ul>
-            </div>
+    </div>
-          </div>
+  </div>
-        </div>
+</div>
-        <script type="text/javascript">
+  <script type="text/javascript">
-          var tabber1 = new Yetii({id: 'staffTab'});
+    new Yetii({id: 'staff'});
-          </script>
+  </script>
 
-        </div>

app/views/about/statistics.html.erb

@@ -1,35 +1,33 @@
-<h2 class="center">
+<h2>Statistics</h2>
-  Statistics
-</h2>
 
-<div class="wide box">
+<div id="stats" class="tabbed">
-  <div id="statsTab">
+  <ul id="stats-nav" class="tabs">
-    <ul id="statsTab-nav" class="tabs">
+    <li><a href="#general">General</a></li>
-      <li><a href="#GeneralTab">General</a></li>
+    <li><a href="#ns1seasons">NS1 Seasons</a></li>
-      <li><a href="#NS1Seasons">NS1 Seasons</a></li>
+    <li><a href="#nsls1">NSL S1</a></li>
-      <li><a href="#NSLS1Tab">NSL S1</a></li>
+    <li><a href="#nsls2">NSL S2</a></li>
-      <li><a href="#NSLS2Tab">NSL S2</a></li>
+  </ul>
-    </ul>
+  <div class="tabbed-contents">
-    <div class="box wide tabs">
+    <div class="tab" id="general">
-      <div class="tab" id="GeneralTab">
+      <h3>General Statistics</h3>
-        <h3 class="center">General Statistics</h3>
+      <%= render partial: "about/general", locals: {} %>
-        <%= render :partial => "about/general", :locals => {} %>
+    </div>
-      </div>
+    <div class="tab" id="ns1seasons">
-      <div class="tab" id="NS1Seasons">
+      <h3>NS1 Seasons statistics</h3>
-        <h3 class="center">NS1 Seasons statistics</h3>
+      <%= render partial: "about/contests", locals: { contests: Contest.ns1seasons } %>
-        <%= render :partial => "about/contests", :locals => {:contests => Contest.ns1seasons} %>
+    </div>
-      </div>
+    <div class="tab" id="nsls1">
-      <div class="tab" id="NSLS1Tab">
+      <h3>NSL Season 1 Statistics</h3>
-        <h3 class="center">NSL Season 1 Statistics</h3>
+      <%= render partial: "about/contests", locals: { contests: Contest.nsls1 } %>
-        <%= render :partial => "about/contests", :locals => {:contests => Contest.nsls1} %>
+    </div>
-      </div>
+    <div class="tab" id="nsls2">
-      <div class="tab" id="NSLS2Tab">
+      <h3>NSL Season 2 Statistics</h3>
-        <h3 class="center">NSL Season 2 Statistics</h3>
+      <%= render partial: "about/contests", locals: { contests: Contest.nsls2 } %>
-        <%= render :partial => "about/contests", :locals => {:contests => Contest.nsls2} %>
-      </div>
     </div>
   </div>
-  <script type="text/javascript">
+</div>
-    var tabber1 = new Yetii({id: 'statsTab'});
+<script type="text/javascript">
-    </script>
+  new Yetii({
-  </div>
+    id: 'stats'
+  });
+</script>

app/views/application/_header.html.erb

@@ -1,43 +1,10 @@
 <header>
-  <nav class="top">
-    <div class="menu-wrapper">
-      <p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
-      <div id="navigation-menu" class="nav">
-        <div class="gathers">
-          <ul>
-            <% if cuser and cuser.admin? %>
-              <li>
-                <%= link_to("/about/adminpanel", class: "admin") do %>
-                  Admin (<%= Issue.with_status(0).count  %>) 
-                <% end %>
-              </li>
-            <% end %>
-            <li>
-              <%= link_to("/gathers/latest/ns2") do %>
-                NS2 Gather (<%= Gather.player_count_for_game('NS2') %>/<%= Gather::FULL %>)
-              <% end %>
-            </li>
-          </ul>
-        </div>
-        <div class="pages">
-          <ul>
-            <li><%= link_to "Staff", controller: "about", action: "staff" %></li>
-            <li><%= link_to "History", article_url(Article::HISTORY) %></li>
-            <li><%= link_to "Rules", latest_rules %></li>
-            <li><%= link_to "Hall of Fame", article_url(Article::HOF) %></li>
-            <li><%= link_to "Bans", bans_url %></li>
-            <li><%= link_to "Contact", new_issue_path %></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </nav>
   <div class="banner">
     <div class="wrapper">
       <div id="logo">
         <%= link_to image_tag("logo.png"), root_path %>
       </div>
-      <div id="authentication">
+      <div id="authentication" class="<%= 'admin' if cuser && cuser.admin? %>">
         <% if cuser %>
           <%= render partial: "widgets/logged" %>
         <% else %>

app/views/application/_navigation.html.erb

@@ -1,38 +1,68 @@
 <nav id="menu">
   <div class="wrapper">
     <ul class="navigation">
-      <li><%= active_link_to "News", root_path, active: ["articles", "news_index"] %></li>
+      <li class="icon">
-      <li class="dropdown">
+        <%= active_link_to root_path, active: ["articles", "news_index"], class: 'news' do %>
-        <%= active_link_to "Contests", controller: "contests", action: "current" %>
+          News <%= icon 'list-alt' %>
+        <% end %>
+      </li>
+      <li class="dropdown icon">
+        <%= active_link_to controller: "contests", action: "current", class: 'contests' do %>
+          Contests <%= icon 'trophy' %>
+        <% end %>
         <ul>
+          <li><%= link_to "Rules", latest_rules %></li>
           <li><%= link_to "Historical", "/contests" %></li>
           <li><%= link_to "NS1 History", "/contests/historical/NS1" %></li>
           <li><%= link_to "NS2 History", "/contests/historical/NS2" %></li>
         </ul>
       </li>
       <li class="dropdown">
-        <%= active_link_to "Gathers", Gather.last %>
+        <%= active_link_to Gather.last, class: 'gathers' do %>
+          Gathers 
+          <span class="count"><%= Gather.player_count_for_game('NS2') %>/<%= Gather::FULL %></span>
+        <% end %>
+        
         <ul>
           <li><%= link_to "Introduction", article_url(464) %></li>
           <li><%= link_to "Archives", "/gathers/" %></li>
         </ul>
       </li>
-      <li class="dropdown">
+      <li class="dropdown icon">
-        <%= active_link_to "Articles", articles_path %>
+        <%= active_link_to articles_path, class: 'articles' do %>
+          Articles <%= icon 'file-text' %>
+        <% end %>
         <ul>
-          <li><%= link_to "NS Movies", movies_url %></li>
+          <li><%= link_to "Hall of Fame", article_url(Article::HOF) %></li>
+          <li><%= link_to "History", article_url(Article::HISTORY) %></li>
+          <li><%= link_to "Movies", movies_url %></li>
           <li><%= link_to "Files", directory_url(Directory::ROOT) %></li>
         </ul>
       </li>
-      <li class="dropdown">
+      <li class="dropdown icon">
-        <%= active_link_to "Forums", forums_path, active: [["forums", "topics"]] %>
+        <%= active_link_to forums_path, active: [["forums", "topics"]], class: 'forums' do %>
+          Forums <%= icon 'comments' %>
+        <% end %>
         <ul>
           <li><%= link_to "Index", forums_path %></li>
           <li><%= link_to "Rules", "/topics/12" %></li>
         </ul>
       </li>
-      <li><%= active_link_to "Teams", controller: "teams", action: :index %></li>
+      <li class="icon">
-      <li><%= active_link_to "Users", controller: "users", action: :index %></li>
+        <%= active_link_to controller: "teams", action: :index, class: 'teams' do %>
+          Teams <%= icon 'users' %>
+        <% end %>
+      </li>
+      <li class="dropdown icon">
+        <%= active_link_to controller: "users", action: :index, class: 'users' do %>
+          Users <%= icon 'user' %>
+        <% end %>
+        <ul>
+          <li><%= link_to "Staff", controller: "about", action: "staff" %></li>
+          <li><%= link_to "Bans", bans_url %></li>
+          <li><%= link_to "Contact", new_issue_path %></li>
+        </ul>
+      </li>
     </ul>
   </div>
 </nav>

app/views/articles/_form.html.erb

@@ -1,77 +1,57 @@
 <% if @article.text_coding == Article::CODING_HTML %>
-  <%= render :partial => "javascripts/mce_full" %>
+  <%= render partial: "javascripts/mce_full" %>
 <% end %>
 
-<div class="box wide">
+<h1>Editing Article</h1>
-  <h1>Editing article</h1>
 
-  <%= form_for(@article) do |f| %>
+<%= form_for(@article, html: { class: 'article square' }) do |f| %>
-    <% if @article.errors.any? %>
+  <%= render 'shared/errors', messages: @article.errors.full_messages %>
-      <div id="error_explanation">
-        <h2><%= pluralize(@article.errors.count, t(:error)) %> <%= t(:prohibited) %></h2>
 
-        <ul>
+  <div class="fields horizontal">
-          <% @article.errors.full_messages.each do |msg| %>
+    <%= f.label :title %>
-            <li><%= msg %></li>
+    <%= f.text_field :title %>
-          <% end %>
+  </div>
-        </ul>
+  <% if cuser.admin? %>
-      </div>
+    <div class="fields horizontal">
-    <% end %>
+      <%= f.label :status %>
-
+      <%= f.select :status, @article.statuses.invert %>
-    <p>
+    </div>
-      <%= f.label :title %><br />
-      <%= f.text_field :title %>
-    </p>
-    <% if cuser.admin? %>
-      <p>
-        <%= f.label :status %><br />
-        <%= f.select :status, @article.statuses.invert %>
-      </p>
-    <% end %>
-    <p>
-      <%= f.label :text_coding %><br />
-      <%= f.select :text_coding, @article.codings.invert %>
-    </p>
-    <p>
-      <%= f.label :category_id %><br />
-      <%= f.select :category_id, Category.ordered.collect{|c| ["#{c.domains[c.domain]} - #{c}", c.id]} %>
-    </p>
-    <p>
-      <%= f.label :text %><br />
-      <%= f.text_area :text, :rows => 30, :cols => 80 %>
-    </p>
-    <p>
-      <%= f.submit %>
-    </p>
   <% end %>
-</div>
+  <div class="fields horizontal">
-
+    <%= f.label :text_coding %>
-<% unless @article.new_record? %>
+    <%= f.select :text_coding, @article.codings.invert %>
-  <div class="box wide">
+  </div>
-    <h3>Files</h3>
+  <div class="fields horizontal">
-
+    <%= f.label :category_id %>
-    <%= render :partial => "data_files/list", :locals => {:files => @article.files} %>
+    <%= f.select :category_id, Category.ordered.collect{|c| ["#{c.domains[c.domain]} - #{c}", c.id]} %>
-
+  </div>
-    <% if @file && @file.can_create?(cuser) %>
+  <div class="fields horizontal wide">
-      <h3>New file</h3>
+    <h4>Content</h4>
-
+    <%= f.text_area :text, :rows => 30, :cols => 80 %>
-      <div class="wide box">
+  </div>
-        <%= form_for @file, :html => { :multipart => true } do |f| %>
+  <div class="controls inline">
-          <div id="error_explanation">
+    <%= f.submit %>
-            <ul>
-              <% @file.errors.full_messages.each do |msg| %>
-                <li><%= msg %></li>
-              <% end %>
-            </ul>
-          </div>
-          <%= f.hidden_field :directory_id %>
-          <%= f.hidden_field :article_id %>
-
-          <p>
-            <%= f.file_field :name %> <%= f.submit 'Create' %>
-          </p>
-        <% end %>
-      </div>
-    <% end %>
   </div>
 <% end %>
+
+<% unless @article.new_record? %>
+  <h2>Files</h2>
+
+  <%= render partial: "data_files/list", locals: { files: @article.files } %>
+
+  <% if @file && @file.can_create?(cuser) %>
+    <h4>New file</h4>
+
+    <%= form_for @file, html: { multipart: true } do |f| %>
+      <%= render 'shared/errors', messages: @file.errors.full_messages %>
+
+      <%= f.hidden_field :directory_id %>
+      <%= f.hidden_field :article_id %>
+
+      <p>
+        <%= f.file_field :name %>
+        <%= f.submit 'Create' %>
+      </p>
+    <% end %>
+  <% end %>
+<% end %>

app/views/articles/edit.html.erb

@@ -1,4 +1,3 @@
-<%= render :partial => "form" %>
+<%= render partial: "form" %>
 
-<%= link_to 'Show', @article %> |
+<%= link_to 'Show', @article, class: 'button' %>
-<%= link_to 'Back', articles_path %>

app/views/comments/_comment.html.erb

@@ -10,15 +10,13 @@
     </h1>
     <div class="controls">
       <% if cuser %>
-        [
+        <%= link_to_function icon('comment'), "QuoteText(#{comment.id}, 'comments')" %>
-        <%= link_to_function 'Q', "QuoteText(#{comment.id}, 'comments')" %>
         <% if comment.can_update? cuser %>
-          <%= link_to 'E', edit_comment_path(comment) %>
+          <%= link_to icon('pencil'), edit_comment_path(comment) %>
         <% end %>
         <% if comment.can_destroy? cuser %>
-          <%= link_to 'D', comment, :confirm => 'Are you sure?', :method => :delete %>
+          <%= link_to icon('times'), comment, :confirm => 'Are you sure?', :method => :delete %>
         <% end %>
-        ]
       <% end %>
     </div>
     <%= comment.text_parsed.html_safe %>

app/views/contesters/_list.html.erb

@@ -1,4 +1,4 @@
-<table class="contest">
+<table class="contest striped">
   <thead>
     <tr>
       <th class="movement"></th>
@@ -10,7 +10,7 @@
       <th class="loss">Loss</th>
       <th class="draw">Draw</th>
       <% if actions %>
-        <th class="actions">Actions</th>
+        <th class="actions"></th>
       <% end %>
     </tr>
   </thead>
@@ -35,7 +35,7 @@
       <td><%= h contester.loss %></td>
       <td><%= h contester.draw %></td>
       <% if actions %>
-        <td>
+        <td class="actions">
           <% if @friendly %>
             <% challenge = Challenge.new
             challenge.contester1 = @friendly
@@ -45,9 +45,9 @@
             <% end %>
           <% end %>
           <% if cuser and cuser.admin? %>
-            <%= link_to 'E', edit_contester_path(contester) %>
+            <%= link_to icon('pencil'), edit_contester_path(contester) %>
-            <%= link_to 'D', contester, confirm: 'Are you sure?', method: :delete %>
+            <%= link_to icon('times'), contester, confirm: 'Are you sure?', method: :delete %>
-            <%= link_to 'R', controller: "contesters", action: "recalc", id: contester %>
+            <%= link_to icon('refresh'), controller: "contesters", action: "recalc", id: contester %>
           <% end %>
         </td>
       <% end %>

app/views/data_files/_list.html.erb

@@ -13,9 +13,9 @@
       <td><%= file.size_s %></td>
       <td>
         <% if file.can_update? cuser %>
-          <%= link_to 'Edit', edit_data_file_path(file) %>
+          <%= link_to icon('pencil'), edit_data_file_path(file) %>
           <% end; if file.can_destroy? cuser %>
-          <%= link_to 'Destroy', file, :confirm => 'Are you sure?', :method => :delete %>
+          <%= link_to icon('times'), file, :confirm => 'Are you sure?', :method => :delete %>
         <% end %>
       </td>
     </tr>

app/views/gathers/_status.html.erb

@@ -27,7 +27,7 @@
       <% end %>
 
     <% else %>
-      <p>Log in to join the gather.p</p>
+      <p>Log in to join the gather.</p>
 
     <% end %>
 

app/views/issues/_form.html.erb

@@ -1,36 +1,34 @@
-<div class="wide box">
+<%= form_for(@issue, html: { class: 'square' }) do |f| %>
-  <%= form_for(@issue) do |f| %>
+  <%= f.error_messages %>
-    <%= f.error_messages %>
+  <div class="fields horizontal">
-    <p>
+    <%= f.label :title %>
-      <%= f.label :title %><br />
+    <%= f.text_field :title %>
-      <%= f.text_field :title %>
+  </div>
-    </p>
+  <% if cuser and cuser.admin? %>
-    <% if cuser and cuser.admin? %>
+    <div class="fields horizontal">
-      <p>
+      <%= f.label :status %>
-        <%= f.label :status %><br />
+      <%= f.select :status, @issue.statuses.invert %>
-        <%= f.select :status, @issue.statuses.invert %>
+    </div>
-      </p>
+    <div class="fields horizontal">
-      <p>
+      <%= f.label :assigned %>
-        <%= link_to_function 'Assigned', "findUser('assigned')" %><br />
+      <%= f.text_field :assigned_name, {:value => User.first(:conditions => {:id => @issue.assigned})} %>
-        <%= f.text_field :assigned_name, {:value => User.first(:conditions => {:id => @issue.assigned})} %>
+    </div>
-      </p>
-    <% end %>
-    <p>
-      <%= f.label :category_id %><br />
-      <%= f.select :category_id, Category.domain(Category::DOMAIN_ISSUES).ordered.collect{|c| [c, c.id]} %>
-    </p>
-    <p>
-      <%= f.label :text %><br />
-      <%= f.text_area :text %>
-    </p>
-    <% if cuser and cuser.admin? %>
-      <p>
-        <%= f.label :solution %><br />
-        <%= f.text_area :solution %>
-      </p>
-    <% end %>
-    <p>
-      <%= f.submit 'Save' %>
-    </p>
   <% end %>
-</div>
+  <div class="fields horizontal">
+    <%= f.label :category_id %>
+    <%= f.select :category_id, Category.domain(Category::DOMAIN_ISSUES).ordered.collect{|c| [c, c.id]} %>
+  </div>
+  <div class="fields horizontal">
+    <%= f.label :text %>
+    <%= f.text_area :text, rows: 7 %>
+  </div>
+  <% if cuser and cuser.admin? %>
+    <div class="fields horizontal">
+      <%= f.label :solution %>
+      <%= f.text_area :solution, rows: 7 %>
+    </div>
+  <% end %>
+  <div class="controls">
+    <%= f.submit 'Submit' %>
+  </div>
+<% end %>

app/views/issues/new.html.erb

@@ -1,9 +1,5 @@
-<h1>
+<h1><%= cuser ? "New Issue" : "Contact" %></h1>
-  <%= cuser and cuser.admin? ? "New Issue" : "Contact Form" %>
-</h1>
 
-<p>Do not forget to include contact details like a mail address or a steam account in case you do not own an ensl account.</p>
+<p>Please do not forget to include contact details, such as an email address or a Steam account in the case that you do not have an ENSL account.</p>
 
-<%= render :partial => "form" %>
+<%= render partial: "form" %>
-
-<%= link_to 'Back', issues_path %>

app/views/javascripts/_mce_full.html.erb

@@ -1,14 +1,14 @@
 <script type="text/javascript">
   $(function() {
-      $('textarea').tinymce({
+    $('textarea').tinymce({
-mode : "textareas",
+      mode : "textareas",
-theme : "advanced",
+      theme : "advanced",
-plugins : "inlinepopups,contextmenu,nonbreaking,template",
+      plugins : "inlinepopups,contextmenu,nonbreaking,template",
-theme_advanced_buttons1 : "bold,italic,blockquote,|,bullist,numlist,|,formatselect,|,link,unlink,image,|,cleanup,code",
+      theme_advanced_buttons1 : "bold,italic,blockquote,|,bullist,numlist,|,formatselect,|,link,unlink,image,|,cleanup,code",
-theme_advanced_buttons2 : "",
+      theme_advanced_buttons2 : "",
-theme_advanced_buttons3 : "",
+      theme_advanced_buttons3 : "",
-theme_advanced_buttons4 : "",
+      theme_advanced_buttons4 : "",
-convert_urls : false
+      convert_urls : false
-});
+    });
-      });
+  });
-    </script>
+</script>

app/views/javascripts/_mce_lite.html.erb

@@ -1,13 +1,13 @@
 <script type="text/javascript">
   tinyMCE.init({
-mode : "textareas",
+    mode : "textareas",
-theme : "advanced",
+    theme : "advanced",
-plugins : "noneditable",
+    plugins : "noneditable",
-theme_advanced_buttons1 : "bold,italic,|,bullist,numlist,|,link,unlink,|,outdent,indent,cleanup,code",
+    theme_advanced_buttons1 : "bold,italic,|,bullist,numlist,|,link,unlink,|,outdent,indent,cleanup,code",
-theme_advanced_buttons2 : "",
+    theme_advanced_buttons2 : "",
-theme_advanced_buttons3 : "",
+    theme_advanced_buttons3 : "",
-theme_advanced_buttons4 : "",
+    theme_advanced_buttons4 : "",
-forced_root_block : '',
+    forced_root_block : '',
-convert_urls : false
+    convert_urls : false
-});
+  });
 </script>

app/views/teamers/_list.html.erb

@@ -1,4 +1,4 @@
-<table id="members" class="<%= 'short' if !comment %>">
+<table id="members" class="<%= 'short' if !comment %> striped">
   <tr>
     <th class="country"></th>
     <th class="member">Member</th>

app/views/teams/_list.html.erb

@@ -1,4 +1,4 @@
-<table>
+<table class="striped">
   <tr>
     <th class="country"></th>
     <th class="name">Name</th>
@@ -19,11 +19,11 @@
         <% if cuser and cuser.admin? %>
           <td class="actions">
             <%= link_to edit_team_path(team) do %>
-              <%= icon 'pencil' %> Edit
+              <%= icon 'pencil' %>
             <% end %>
             <% if team.active %>
               <%= link_to team, confirm: 'Are you sure?', method: :delete do %>
-                <%= icon 'times' %> Delete
+                <%= icon 'times' %>
               <% end %>
             <% else %>
               <%= link_to action: "recover", id: team do %>

app/views/teams/edit.html.erb

@@ -39,7 +39,7 @@
           <%= f.label :recruiting %>
           <div class="inputs">
             <%= f.text_field :recruiting %>
-            <p>Leave empty if you are not recruiting, otherwise write the recruiting criteria above.</p>  
+            <p>Leave empty if you are not recruiting, or enter your recruiting criteria above.</p>  
           </div>
         </div>
         <div class="fields horizontal">

app/views/users/edit.html.erb

@@ -106,7 +106,7 @@
           <div class="fields horizontal">
             <%= f.label :time_zone %>
             <div class="inputs">
-              <%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.all %>
+              <%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.all %><br><br>
               <p>Daylight savings will be observed automatically.</p>
             </div>
           </div>

app/views/users/forgot.html.erb

@@ -1,32 +1,25 @@
 <h1>Password Recovery</h1>
 
-<div class="wide box">
+<p>If you do not receive your new password by email, please see the guide <a href="http://www.ensl.org/articles/713">here</a>.</p>
-  <p>
-    <h3>
-      If you do not receive your new password by email, please see the guide <a href="http://www.ensl.org/articles/713">here</a>.
-    </h3>
-  </p>
-</div>
 
-<div class="wide box">
-  <%= form_tag do %>
-    <p>
-      <%= label_tag :username %><br />
-      <%= text_field_tag :username %>
-    </p>
-    <p>
-      <%= label_tag :email %><br />
-      <%= text_field_tag :email %>
-    </p>
 
-    <%= submit_tag "Recover password" %>
+<%= form_tag({ controller: 'users', action: 'forgot' }, { class: 'square' }) do %>
+  <div class="fields horizontal">
+    <%= label_tag :username %>
+    <%= text_field_tag :username %>
+  </div>
 
-  <% end %>
+  <div class="fields horizontal">
-</div>
+    <%= label_tag :email %>
+    <%= text_field_tag :email %>
+  </div>
 
-<div class="wide box">
+  <div class="controls">
-  <p>
+    <%= submit_tag "Recover password" %>  
-    Special characters have been removed from nicks. You might need to
+  </div>
-    <%= link_to "search", users_url %> for your nick in the database.
+<% end %>
-  </p>
+
-</div>
+<p>
+  Special characters have been removed from nicks. <br> You may need to
+  <%= link_to "search", users_url %> for your nickname in the database.
+</p>

app/views/users/index.html.erb

@@ -11,7 +11,7 @@
   </div>
 <% end %>
 
-<table id="users">
+<table id="users" class="striped">
   <tr>
     <th class="country"></th>
     <th class="username">Username</th>
@@ -33,10 +33,10 @@
       <% if cuser and cuser.admin? %>
         <td class="actions">
           <%= link_to edit_user_path(user) do %>
-            <%= icon 'pencil' %> Edit
+            <%= icon 'pencil' %>
           <% end %>
           <%= link_to user, confirm: "Proceed to delete?", method: :delete do %>
-            <%= icon 'times' %> Delete
+            <%= icon 'times' %>
           <% end %>
         </td>
       <% end %>

app/views/users/show.html.erb

@@ -9,7 +9,7 @@
 
   <div class="tabs tabbed">
     <ul id="user-nav" class="tabs">
-      <li><a id="general">General</a></li>
+      <li class="activeli"><a id="general">General</a></li>
 
       <% if @user.teamers.past.count > 0 %>
         <li><a id="teams">Teams</a></li>

app/views/widgets/_highlights.html.erb

@@ -20,7 +20,7 @@
     <% if Match.recent.count != 0 then %>
       <div class="separator">
         Latest Matches
-        <%= link_to "(More)", controller: :matches, matchesTab: "RecentTab" %>
+        <%= link_to "More", controller: :matches, matchesTab: "RecentTab" %>
       </div>
       <ol>
         <% Match.realfinished.reverse_order.recent.chrono.each do |match| %>
@@ -39,7 +39,7 @@
     <% if Match.future5.count != 0 then %>
       <div class="separator">
         Upcoming matches
-        <%= link_to "(More)", controller: :matches, matchesTab: "UpcomingTab" %>
+        <%= link_to "More", controller: :matches, matchesTab: "UpcomingTab" %>
       </div>
       <ol>
         <% Match.future5.chrono.each do |match| %>

app/views/widgets/_logged.html.erb

@@ -1,6 +1,13 @@
 <div class="links">
   <h5><%= namelink(cuser) %></h5>
   <ul>
+    <% if cuser.admin? %>
+      <li>
+        <%= link_to '/about/adminpanel', class: 'admin' do %>
+          <%= icon 'wrench' %> Admin (<%= Issue.with_status(0).count  %>)
+        <% end %>
+      </li>
+    <% end %>
     <li>
       <%= link_to edit_user_path(cuser) do %>
         <%= icon 'user' %> Account