From 4cf1030c855842e7e085a4fa794d0179d18a1ec6 Mon Sep 17 00:00:00 2001
From: benmanley <info@benmanley.org>
Date: Mon, 14 Jul 2014 21:51:31 +0100
Subject: [PATCH] refactor(game-pane.styl): tweak layout and colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

– Improve positioning and size of chat-box buttons
– Replace some px values with ems
– Replace contributor colors with variables (set in global-colors.styl)
---
 public/css/game-pane.styl          | 64 ++++++++++++++++++++----------
 public/css/global-colors.styl      | 17 ++++++--
 views/options/social/chat-box.jade | 12 +++---
 3 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/public/css/game-pane.styl b/public/css/game-pane.styl
index e6a65c2ce9..ab4fc61c20 100644
--- a/public/css/game-pane.styl
+++ b/public/css/game-pane.styl
@@ -10,12 +10,29 @@
   position: relative
 
   textarea
-    margin-bottom: 5px
+    margin-bottom: 0.618em
+    line-height: 1.618em
+
+.chat-controls
+  > div
+    display: inline-block
+    vertical-align: middle
+    &:nth-of-type(1)
+      width: 40%
+    &:nth-of-type(2)
+      width: 60%
+
+.chat-buttons
+  @extend $hrpg-button
+  text-align: right;
+  input
+    margin-right: 0.618em
 
 .chat-message
   markdown, span.time
     padding: 0 3px
-
+    line-height: 1.618em
+    
   .chat-plus-one
     opacity: 0
     background-color: #eee
@@ -35,7 +52,7 @@
     position:relative
 
     &.highlight
-      background #EEE
+      background: #EEE
       
     label
         margin-right:5px
@@ -49,7 +66,7 @@
       visibility:hidden
       
     .scrollable-message
-      max-height:80px
+      max-height: 6.472em
       overflow-y:auto
 
       h1, h2, h3, h4, h5
@@ -74,7 +91,6 @@
     padding-left: 2px
     
   markdown
-  
     p:first-child
       display:inline
       
@@ -92,24 +108,32 @@
     display: none
     margin-top: 10px
 
-// Name tags
-.label-contributor-1, .label-contributor-2
-  background-color: #333;
-.label-contributor-3, .label-contributor-4
-  background-color: #077409
-  color: white
-.label-contributor-5, .label-contributor-6
-  background-color: #125BA2
-  color: white
+
+// Name tags – For color variables, see global-colors.styl
+
+hrpg-contributor-label-mixin($hrpg-contributor-color)
+  //@extend $hrpg-label
+  hrpg-label-color-mixin($hrpg-contributor-color)
+
+.label-contributor-1
+  hrpg-contributor-label-mixin($color-contributor-one)
+.label-contributor-2
+  hrpg-contributor-label-mixin($color-contributor-two)
+.label-contributor-3
+  hrpg-contributor-label-mixin($color-contributor-three)
+.label-contributor-4
+  hrpg-contributor-label-mixin($color-contributor-four)
+.label-contributor-5
+  hrpg-contributor-label-mixin($color-contributor-five)
+.label-contributor-6
+  hrpg-contributor-label-mixin($color-contributor-six)
 .label-contributor-7
-  background-color: #7313B4
-  color: white
+  hrpg-contributor-label-mixin($color-contributor-seven)
 .label-contributor-8
-  background-color: #ff8000
-  color: white
+  hrpg-contributor-label-mixin($color-contributor-staff)
 .label-npc
-  background-color: indianred
-  color: white
+  hrpg-contributor-label-mixin($color-contributor-npc)
+
 
 #market-tab
     position relative
diff --git a/public/css/global-colors.styl b/public/css/global-colors.styl
index 67e162c9d7..1f8b893efb 100644
--- a/public/css/global-colors.styl
+++ b/public/css/global-colors.styl
@@ -9,7 +9,7 @@ $best       =   rgb(201, 218, 248)
 $completed  =   rgb(217, 217, 217)
 //Label colors
 $color-purple = #b881b9
-// avatar background colors
+// Avatar background colors
 $color-herobox = desaturate(lighten($better, 16%),32%)
 // Header status bar
 $color-hp = $worse
@@ -19,10 +19,21 @@ $color-mp = $best
 $color-toolbar = lighten($color-herobox, 70%)
 $color-options-menu = lighten($color-herobox, 85%)
 $color-options-submenu = lighten($color-herobox, 75%)
-// button color variables
+// Button colors
 $color-button-style-one = $best
 // Task background
 $color-tasks = lighten($color-herobox, 65%)
 // Task filter colors
 $color-filter-tag = lighten($good,90%)
-$color-filter-tag-challenge = lighten($color-purple,90%)    
\ No newline at end of file
+$color-filter-tag-challenge = lighten($color-purple,90%)
+// Contributor colors
+$color-contributor-one = #333
+$color-contributor-two = #333
+$color-contributor-three = #077409 
+$color-contributor-four = #077409
+$color-contributor-five = #125BA2
+$color-contributor-six =  #125BA2
+$color-contributor-seven = #7313B4
+$color-contributor-mod = #ff8000
+$color-contributor-staff = #ff8000
+$color-contributor-npc = indianred
\ No newline at end of file
diff --git a/views/options/social/chat-box.jade b/views/options/social/chat-box.jade
index d3d88eb7a2..50bcae08a3 100644
--- a/views/options/social/chat-box.jade
+++ b/views/options/social/chat-box.jade
@@ -5,10 +5,10 @@ form.chat-form(ng-submit='postChat(group,message.content)')
       ul.list-at-user
         li(ng-repeat='user in response | filter:query.text | limitTo: 5', ng-click='autoComplete(user)')
           span.username.label.label-default(ng-class=':: userLevelStyle(user)') {{::user.user}}
-  .row
-    .col-md-9
+  .chat-controls
+    .chat-formatting
       include ../../shared/formatting-help
-    .col-md-3
-      input.btn.btn-default.chat-btn(type='submit', value=env.t('sendChat'), ng-class='{disabled: _sending == true}')
-      button.btn.btn-default(type="button", ng-click='sync(group)', tooltip=env.t('toolTipMsg'))
-        span.glyphicon.glyphicon-refresh.pull-right
\ No newline at end of file
+    .chat-buttons
+      input(type='submit', value=env.t('sendChat'), ng-class='{disabled: _sending == true}')
+      button(type="button", ng-click='sync(group)', tooltip=env.t('toolTipMsg'))
+        span.glyphicon.glyphicon-refresh
\ No newline at end of file