From 3e757e2d768abaef9053ee5a1d255bfb7a1cac0b Mon Sep 17 00:00:00 2001
From: Luke Barratt <luke@barratt.me>
Date: Wed, 30 Apr 2014 00:34:48 +0100
Subject: [PATCH] New header layout Improves spacing Improves button layout on
 forums

---
 .../stylesheets/components/_comments.scss     |  4 +-
 .../stylesheets/components/_gather.scss       | 14 ----
 app/assets/stylesheets/layout/_body.scss      | 11 ++-
 app/assets/stylesheets/layout/_header.scss    | 45 ++++++-----
 .../stylesheets/layout/_navigation.scss       | 23 +++---
 app/assets/stylesheets/layout/_sidebar.scss   |  3 +-
 app/assets/stylesheets/mixins/_buttons.scss   |  1 -
 app/assets/stylesheets/pages/_forums.scss     | 21 ++---
 app/assets/stylesheets/pages/_matches.scss    |  6 +-
 app/assets/stylesheets/pages/_news.scss       |  6 +-
 app/views/forums/show.html.erb                |  4 +-
 app/views/javascripts/_mce_full.html.erb      | 17 ++--
 app/views/polls/edit.html.erb                 |  4 +-
 app/views/posts/edit.html.erb                 |  4 +-
 app/views/topics/show.html.erb                |  2 +-
 app/views/widgets/_logged.html.erb            | 77 ++++++++++---------
 16 files changed, 122 insertions(+), 120 deletions(-)

diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss
index c86e596..796ab21 100644
--- a/app/assets/stylesheets/components/_comments.scss
+++ b/app/assets/stylesheets/components/_comments.scss
@@ -16,7 +16,7 @@
 
 .comment {
   $comment-gutter: 1.4em;
-  $comment-image-padding: .7em;
+  $comment-image-padding: 3px;
   $comment-image-width: 4em;
   $comment-color: $base-font-color;
   $comment-background: $light-gray;
@@ -27,7 +27,7 @@
   width: 100%;
   margin-bottom: $base-line-height;
   padding-bottom: 1em;
-  border-bottom: 1px solid transparentize($comment-color, .9);
+  border-bottom: 1px solid $light-gray;
 
   .comment-image,
   .comment-content {
diff --git a/app/assets/stylesheets/components/_gather.scss b/app/assets/stylesheets/components/_gather.scss
index df72bcb..384ef43 100644
--- a/app/assets/stylesheets/components/_gather.scss
+++ b/app/assets/stylesheets/components/_gather.scss
@@ -173,20 +173,6 @@
   }
 }
 
-/*
-  Gather Status
-*/
-
-#gather-status {
-  @include span-columns(12);
-  @include flash;
-
-  padding: 14px;
-  text-align: center;
-  margin-left: - 20px;
-  width: $max-width + $container-padding*2;
-}
-
 /*
   Gather Archive
 */
diff --git a/app/assets/stylesheets/layout/_body.scss b/app/assets/stylesheets/layout/_body.scss
index 6439197..6e5ddfb 100644
--- a/app/assets/stylesheets/layout/_body.scss
+++ b/app/assets/stylesheets/layout/_body.scss
@@ -2,7 +2,7 @@
   Main Containers
 */
 
-$container-padding: 20px;
+$container-padding: 1.5em;
 
 html,
 body {
@@ -10,11 +10,15 @@ body {
   padding: 0;
   width: 100%;
   min-height: 100%;
-  background-color: $light-gray;
+}
+
+body#tinymce {
+  padding: 10px;
 }
 
 #container {
   min-height: 100%;
+  background-color: $light-gray;
 }
 
 .wrapper {
@@ -39,6 +43,7 @@ body {
 
 #main {
   @include span-columns(9 of 12);
+  border-radius: $base-border-radius;
   box-shadow: $content-shadow;
   background: white;
   padding: 20px;
@@ -68,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
     &:before {
       content: "";
       display: block;
-      border-top: 2px solid $medium-gray;
+      border-top: 2px solid $light-gray;
       width: 100%;
       height: 2px;
       position: absolute;
diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss
index d91b1f2..6496c56 100644
--- a/app/assets/stylesheets/layout/_header.scss
+++ b/app/assets/stylesheets/layout/_header.scss
@@ -4,36 +4,47 @@
 
 header .banner {  
   @include linear-gradient($dark-blue, $deep-blue);
-  height: 250px;
+  height: 170px;
 
   #logo {
     @include span-columns(9 of 12);
-    min-height: 200px;
+    min-height: 220px;
     position: relative;
 
     img {
-      height: 180px;
+      height: 200px;
       position: absolute;
       top: 15px;
-      left: 0;
+      left: -40px;
       z-index: 1;
     }
   }
 
   #authentication {
     @include span-columns(3 of 12);
-    margin-top: 10px;
-    padding: 10px 0;
+    padding: 20px 0;
     color: white;
 
+    .logged {
+      padding-top: 10px;
+    }
+
     a {
       color: white;
+
+      &:hover {
+        color: $light-blue;
+      }
     }
 
     form {
       display: inline;
     }
 
+    &.admin {
+      
+    }
+
     .fields { 
       @include span-columns(12);
 
@@ -62,38 +73,32 @@ header .banner {
       float: right;
     }
 
-    .links,
-    .profile {
-      @include span-columns(6);
-    }
-
     .links {
+      @include span-columns(7);
       position: relative;
 
-      h5 {
-        margin-bottom: 1em;
+      li {
+        text-align: right;
       }
 
       li i {
         display: inline-block;
         width: 1em;
         text-align: center;
-        margin-right: 10px;
+        margin: 0 10px;
       }
     }
 
     .profile {
+      @include span-columns(5);
       vertical-align: middle;
 
       .avatar {
-        margin: 0 10px 0 0;
         text-align: center;
-        border-radius: 100px;
-        padding: 5px;
         vertical-align: middle;
         position: relative;
         width: 100%;
-        padding-bottom: 100%;
+        padding-bottom: 96%;
         float: left;
         height: 0;
 
@@ -103,8 +108,8 @@ header .banner {
           height: 100%;
           position: absolute;
           left: 0;
-          border-radius: 100px;
-          padding: 5px;
+          border-radius: 5px;
+          padding: 3px;
         }
       }
 
diff --git a/app/assets/stylesheets/layout/_navigation.scss b/app/assets/stylesheets/layout/_navigation.scss
index 7f9c2e4..f4057ad 100644
--- a/app/assets/stylesheets/layout/_navigation.scss
+++ b/app/assets/stylesheets/layout/_navigation.scss
@@ -9,6 +9,7 @@ $navigation-height: 50px;
   font-family: $montserrat;
   height: $navigation-height;
   margin-top: - $navigation-height;
+  background: $blue;
   
   nav {
     @include outer-container;
@@ -16,20 +17,19 @@ $navigation-height: 50px;
 }
 
 ul.navigation {
+  z-index: 100;
   position: relative;
   margin: 0;
   padding: 0;
   list-style: none;
-  float: left;
-  width: 100%;
+  float: right;
   background: transparent;
   max-width: $max-width;
   max-height: $navigation-height;
 
   > li {
     float: left;
-    width: (100%/7);
-    border-right: 1px solid transparent;
+    border-left: 1px solid $dark-blue;
 
     .count {
       position: absolute;
@@ -51,7 +51,7 @@ ul.navigation {
       font-size: 15px;
       height: $navigation-height;
       line-height: $navigation-height;
-      padding: 0 20px;
+      padding: 0 50px 0 20px;
     }
 
     > a {
@@ -69,23 +69,27 @@ ul.navigation {
           background-color: lighten($light-blue, 20);
         }
       }
+
+      &.gathers {
+        padding-right: 70px;
+      }
     }
 
     &:last-child {
-      border-right: 0;
+      border-right: 1px solid $dark-blue;
     }
 
     &.icon {
 
       i {
-        color: lighten($light-blue, 30);
+        color: white;
         max-height: $navigation-height;
         position: absolute;
         top: 0;
         right: 0;
-        font-size: 24px;
+        font-size: 18px;
         line-height: 1em;
-        padding: $navigation-height/4;
+        padding: $navigation-height/3;
       }
     }
 
@@ -126,6 +130,7 @@ ul.navigation {
               white-space: nowrap;
               display: block;
               color: $navbar-text;
+              padding: 0 20px;
             }
 
             &:hover a {
diff --git a/app/assets/stylesheets/layout/_sidebar.scss b/app/assets/stylesheets/layout/_sidebar.scss
index 949450a..78e9438 100644
--- a/app/assets/stylesheets/layout/_sidebar.scss
+++ b/app/assets/stylesheets/layout/_sidebar.scss
@@ -4,6 +4,7 @@
     @include span-columns(12);
     box-shadow: $content-shadow;
     margin-bottom: $container-padding;
+    border-radius: $base-border-radius;
     padding: 20px;
     background: white;
 
@@ -13,7 +14,7 @@
 
     .widget-content-wrapper {
       @include span-columns(12);
-      font-size: 14px;
+      font-size: 12px;
     }
 
     .separator {
diff --git a/app/assets/stylesheets/mixins/_buttons.scss b/app/assets/stylesheets/mixins/_buttons.scss
index b86b9a4..9436b1f 100644
--- a/app/assets/stylesheets/mixins/_buttons.scss
+++ b/app/assets/stylesheets/mixins/_buttons.scss
@@ -17,7 +17,6 @@
   float: left;
   margin: 0 $button-height/2 $button-height/2 0;
   border: 0;
-  text-transform: uppercase;
   cursor: pointer;
   font-weight: 400;
 
diff --git a/app/assets/stylesheets/pages/_forums.scss b/app/assets/stylesheets/pages/_forums.scss
index 494a10f..bf59dfd 100644
--- a/app/assets/stylesheets/pages/_forums.scss
+++ b/app/assets/stylesheets/pages/_forums.scss
@@ -3,12 +3,17 @@
 */
 
 #forums {
-  /*
-    Buttons
-  */
+  position: relative;
 
-  .controls {
-    @include span-columns(12);
+  .topic-controls {
+    position: absolute;
+    top: 40px;
+    right: 0;
+    width: auto;
+
+    a:last-child {
+      margin-right: 0;
+    }
   }
 }
 
@@ -29,6 +34,7 @@ div#categories {
 
   .bullet {
     width: 10%;
+
     background: {
       image: url('layout/forum-category.png');  
       position: center center;
@@ -95,10 +101,7 @@ div#categories {
 }
 
 #topic {
-
-  .controls {
-    margin-top: 20px;
-  }
+  position: relative;
 
   #reply {
     display: none;
diff --git a/app/assets/stylesheets/pages/_matches.scss b/app/assets/stylesheets/pages/_matches.scss
index ca16824..e2ee9d2 100644
--- a/app/assets/stylesheets/pages/_matches.scss
+++ b/app/assets/stylesheets/pages/_matches.scss
@@ -28,7 +28,7 @@ table#matches {
 */
 
 div#match {
-  $title-height: 75px;
+  $title-height: 100px;
 
   @include span-columns(12);
   border-bottom: 3px solid $light-gray;
@@ -109,12 +109,12 @@ div#match {
       }
 
       .score-1 {
-        padding-left: $title-height/3;
+        padding-left: $title-height/5;
         left: 0;
       }
       
       .score-2 {
-        padding-right: $title-height/3;
+        padding-right: $title-height/5;
         right: 0;
       }
     }
diff --git a/app/assets/stylesheets/pages/_news.scss b/app/assets/stylesheets/pages/_news.scss
index 87ca4d7..0878773 100644
--- a/app/assets/stylesheets/pages/_news.scss
+++ b/app/assets/stylesheets/pages/_news.scss
@@ -4,7 +4,7 @@
 
 div.article {
   @include span-columns(12);
-  border-bottom: 1px solid rgba(35, 35, 35, 0.1);
+  border-bottom: 3px solid $light-gray;
   padding-bottom: 20px;
 
   h1 {
@@ -15,10 +15,6 @@ div.article {
     @include span-columns(12);
     margin-bottom: 40px;
 
-    * {
-      font-family: $open-sans !important;
-    }
-
     ul {
       @extend ul.disc;
     }
diff --git a/app/views/forums/show.html.erb b/app/views/forums/show.html.erb
index 6723be8..a4700d1 100644
--- a/app/views/forums/show.html.erb
+++ b/app/views/forums/show.html.erb
@@ -2,7 +2,9 @@
   <%= link_to "Forums", action: "index" %> <%= icon 'chevron-right' %> <%= namelink @forum %>
 </div>
 
-<%= render partial: 'controls', locals: { forum: @forum } %>
+<div class="topic-controls">
+  <%= render partial: 'controls', locals: { forum: @forum } %>  
+</div>
 
 <h2><%=h @forum.title %></h2>
 
diff --git a/app/views/javascripts/_mce_full.html.erb b/app/views/javascripts/_mce_full.html.erb
index 149ae0c..7b80d58 100644
--- a/app/views/javascripts/_mce_full.html.erb
+++ b/app/views/javascripts/_mce_full.html.erb
@@ -1,14 +1,15 @@
 <script type="text/javascript">
   $(function() {
     $('textarea').tinymce({
-      mode : "textareas",
-      theme : "advanced",
-      plugins : "inlinepopups,contextmenu,nonbreaking,template",
-      theme_advanced_buttons1 : "bold,italic,blockquote,|,bullist,numlist,|,formatselect,|,link,unlink,image,|,cleanup,code",
-      theme_advanced_buttons2 : "",
-      theme_advanced_buttons3 : "",
-      theme_advanced_buttons4 : "",
-      convert_urls : false
+      mode: "textareas",
+      theme: "advanced",
+      plugins: "inlinepopups,contextmenu,nonbreaking,template",
+      theme_advanced_buttons1: "bold,italic,blockquote,|,bullist,numlist,|,formatselect,|,link,unlink,image,|,cleanup,code",
+      theme_advanced_buttons2: "",
+      theme_advanced_buttons3: "",
+      theme_advanced_buttons4: "",
+      convert_urls: false,
+      content_css: '<%= asset_path "application.css" %>'
     });
   });
 </script>
diff --git a/app/views/polls/edit.html.erb b/app/views/polls/edit.html.erb
index 8d688e6..0c40376 100644
--- a/app/views/polls/edit.html.erb
+++ b/app/views/polls/edit.html.erb
@@ -1,3 +1,3 @@
-<h1>Edit poll</h1>
+<h1>Edit Poll</h1>
 
-<%= render :partial => "form" %>
\ No newline at end of file
+<%= render partial: 'form' %>
diff --git a/app/views/posts/edit.html.erb b/app/views/posts/edit.html.erb
index 46703c1..a5801f0 100644
--- a/app/views/posts/edit.html.erb
+++ b/app/views/posts/edit.html.erb
@@ -1,5 +1,3 @@
 <h1>Editing post</h1>
 
-<%= render :partial => "form" %>
-
-<%= link_to 'Back to topic', @post.topic, class: 'button tiny' %>
\ No newline at end of file
+<%= render partial: 'form' %>
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index 77a7a7a..270ceee 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -7,7 +7,7 @@
     <%= will_paginate @posts %>
   <% end %>
 
-  <div class="controls">
+  <div class="topic-controls">
     <% if @newpost.can_create? cuser %>
       <%= link_to 'Reply', new_post_path(@newpost, id: @topic), class: 'button' %>
     <% end %>
diff --git a/app/views/widgets/_logged.html.erb b/app/views/widgets/_logged.html.erb
index 45b59f0..63a7e7a 100644
--- a/app/views/widgets/_logged.html.erb
+++ b/app/views/widgets/_logged.html.erb
@@ -1,43 +1,44 @@
-<div class="links">
-  <h5><%= namelink(cuser) %></h5>
-  <ul>
-    <% if cuser.admin? %>
+<div class="logged">
+  <div class="links">
+    <ul>
+      <% if cuser.admin? %>
+        <li>
+          <%= link_to '/about/adminpanel', class: 'admin' do %>
+            Admin (<%= Issue.with_status(0).count  %>) <%= icon 'wrench' %>
+          <% end %>
+        </li>
+      <% end %>
       <li>
-        <%= link_to '/about/adminpanel', class: 'admin' do %>
-          <%= icon 'wrench' %> Admin (<%= Issue.with_status(0).count  %>)
+        <%= link_to edit_user_path(cuser) do %>
+          Account <%= icon 'user' %>
         <% end %>
       </li>
-    <% end %>
-    <li>
-      <%= link_to edit_user_path(cuser) do %>
-        <%= icon 'user' %> Account
-      <% end %>
-    </li>
-    <li>
-      <%= link_to "/users/agenda/#{cuser.id}" do %>
-        <%= icon 'calendar' %> Agenda
-      <% end %>
-    </li>
-    <li>
-      <%= link_to messages_path do %>
-        <%= icon 'envelope' %> Messages
-      <% end %>
-      <% if c = cuser.new_messages.count > 0 %>
-        (<%= cuser.new_messages.count %>)
-      <% end %>
-    </li>
-    <li>
-      <%= form_tag(controller: "users", action: "logout") do %>
-        <%= link_to "#", id: "logout" do %>
-          <%= icon 'key' %> Logout
+      <li>
+        <%= link_to "/users/agenda/#{cuser.id}" do %>
+          Agenda <%= icon 'calendar' %>
         <% end %>
-      <% end %>
-    </li>
-  </ul>
-</div>
-
-<div class="profile">
-  <div class="avatar">
-    <%= image_tag cuser.profile.avatar.url %>
+      </li>
+      <li>
+        <%= link_to messages_path do %>
+          Messages <%= icon 'envelope' %>
+        <% end %>
+        <% if c = cuser.new_messages.count > 0 %>
+          (<%= cuser.new_messages.count %>)
+        <% end %>
+      </li>
+      <li>
+        <%= form_tag(controller: "users", action: "logout") do %>
+          <%= link_to "#", id: "logout" do %>
+            Logout <%= icon 'key' %>
+          <% end %>
+        <% end %>
+      </li>
+    </ul>
   </div>
-</div>
\ No newline at end of file
+
+  <div class="profile">
+    <div class="avatar">
+      <%= image_tag cuser.profile.avatar.url %>
+    </div>
+  </div>
+</div>