Layout WIP.

dkln · Jun 21, 2012 · 865a84c · 865a84c
1 parent 5ae09bc
commit 865a84c
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 122 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,4 +1,5 @@
 source 'http://rubygems.org'
 
 gem 'middleman'
+gem 'middleman-i18n'
 gem 'rb-fsevent'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -56,6 +56,8 @@ GEM
       thor (~> 0.14.0)
       tilt (~> 1.3.1)
       uglifier (~> 1.2)
+    middleman-i18n (0.1.1)
+      middleman (~> 2.0.14)
     middleman-livereload (0.2.1)
       guard-livereload (~> 0.3.1)
     multi_json (1.0.4)
@@ -105,4 +107,5 @@ PLATFORMS
 
 DEPENDENCIES
   middleman
+  middleman-i18n
   rb-fsevent
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<html><head><link href="/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/modernpics.css" media="screen" rel="stylesheet" type="text/css" /><script src="/javascripts/jquery-1.7.2.min.js" type="text/javascript"></script><script src="/javascripts/time_board.js" type="text/javascript"></script><script src="/javascripts/date_board.js" type="text/javascript"></script><script src="/javascripts/project_board.js" type="text/javascript"></script><script src="/javascripts/notification_board.js" type="text/javascript"></script><title>BlueBoard</title></head><body><div class="canvas"><div class="block"><div class="projects"></div></div><div class="block sidebar"><div class="message"><div class="time" data-time="00:00"><span>0</span><span>0</span><span>:</span><span>0</span><span>0</span></div><div class="date" data-date=""><span></span></div></div><div class="notification"><div class="message"></div></div></div></div></body></html>
+<html><head><link href="/stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/modernpics.css" media="screen" rel="stylesheet" type="text/css" /><script src="/javascripts/jquery-1.7.2.min.js" type="text/javascript"></script><script src="/javascripts/time_board.js" type="text/javascript"></script><script src="/javascripts/date_board.js" type="text/javascript"></script><script src="/javascripts/project_board.js" type="text/javascript"></script><script src="/javascripts/notification_board.js" type="text/javascript"></script><title>BlueBoard</title></head><body><div class="canvas"><div class="block"><div class="project"><div class="column icon"></div><div class="column name">project</div><div class="column progress">delivered</div><div class="column errors"></div><div class="column rejected_stories"></div><div class="column users">project members</div></div><div class="projects"></div></div><div class="block sidebar"><div class="message"><div class="time" data-time="00:00"><span>0</span><span>0</span><span>:</span><span>0</span><span>0</span></div><div class="date" data-date=""><span></span></div></div><div class="notification"><div class="message"></div></div></div></div></body></html>
diff --git a/config.rb b/config.rb
@@ -1,53 +1,3 @@
-###
-# Compass
-###
-
-# Susy grids in Compass
-# First: gem install compass-susy-plugin
-# require 'susy'
-
-# Change Compass configuration
-# compass_config do |config|
-#   config.output_style = :compact
-# end
-
-###
-# Haml
-###
-
-# CodeRay syntax highlighting in Haml
-# First: gem install haml-coderay
-# require 'haml-coderay'
-
-# CoffeeScript filters in Haml
-# First: gem install coffee-filter
-# require 'coffee-filter'
-
-# Automatic image dimensions on image_tag helper
-# activate :automatic_image_sizes
-
-###
-# Page command
-###
-
-# Per-page layout changes:
-#
-# With no layout
-# page "/path/to/file.html", :layout => false
-#
-# With alternative layout
-# page "/path/to/file.html", :layout => :otherlayout
-#
-# A path which all have the same layout
-# with_layout :admin do
-#   page "/admin/*"
-# end
-
-# Proxy (fake) files
-# page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
-#   @which_fake_page = "Rendering a fake page with a variable"
-# end
-
 ###
 # Helpers
 ###
@@ -59,34 +9,7 @@
 #   end
 # end
 
-# Change the CSS directory
-# set :css_dir, "alternative_css_directory"
-
-# Change the JS directory
-# set :js_dir, "alternative_js_directory"
-
-# Change the images directory
-# set :images_dir, "alternative_image_directory"
-
-# Build-specific configuration
 configure :build do
-  # For example, change the Compass output style for deployment
-  # activate :minify_css
-
-  # Minify Javascript on build
-  # activate :minify_javascript
-
-  # Enable cache buster
-  # activate :cache_buster
-
-  # Use relative URLs
-  # activate :relative_assets
-
-  # Compress PNGs after build
-  # First: gem install middleman-smusher
-  # require "middleman-smusher"
-  # activate :smusher
-
-  # Or use a different image path
-  # set :http_path, "/Content/images/"
+  activate :i18n
+  localize
 end
diff --git a/source/javascripts/project_board.js.coffee b/source/javascripts/project_board.js.coffee
@@ -28,17 +28,26 @@ ProjectBoard =
           <div class='icon column'>
             <i class='icon-attention'></i>
             <i class='icon-clock-alt'></i>
+            <div class='separator'></div>
           </div>
           <div class='name column'>
             <h2></h2>
+            <div class='separator'></div>
           </div>
           <div class='progress column'>
             <span class='bar'></span>
             <span class='count'></span>
+            <div class='separator'></div>
+          </div>
+          <div class='errors column'>
+            <div class='separator'></div>
+          </div>
+          <div class='rejected_stories column'>
+            <div class='separator'></div>
+          </div>
+          <div class='users column'>
+            <div class='separator'></div>
           </div>
-          <div class='errors column'></div>
-          <div class='rejected_stories column'></div>
-          <div class='users column'></div>
         </div>
       ")
 

diff --git a/source/layout.slim b/source/layout.slim
@@ -13,17 +13,26 @@ html
   body
     .canvas
       .block
+        .header
+          .project
+            .column.icon
+            .column.name project
+            .column.progress delivered
+            .column.errors
+            .column.rejected_stories
+            .column.users project members
         .projects
 
       .block.sidebar
         .message
           .time(data-time='00:00')
             span 0
             span 0
-            span
-              | :
+            span.hour-separator
             span 0
             span 0
+          .separator1
+          .separator2
           .date(data-date='')
             span
 

diff --git a/source/stylesheets/_basic.sass b/source/stylesheets/_basic.sass
@@ -7,4 +7,4 @@ body
   padding: 40px
   font-size: 25px
   font-weight: normal
-  +background(linear-gradient(top, #000, #333))
+  // +background(linear-gradient(top, #000, #333))
diff --git a/source/stylesheets/_block.sass b/source/stylesheets/_block.sass
@@ -1,8 +1,4 @@
 .block
-  +background(linear-gradient(#222, #333))
-  +single-box-shadow(#111, 1px, 1px, 10px, 5px, inset)
-  +border-radius(8px)
-  border: 2px solid #111
   padding: 10px
   display: table-cell
 

diff --git a/source/stylesheets/_canvas.sass b/source/stylesheets/_canvas.sass
@@ -1,8 +1,5 @@
 .canvas
-  +border-radius(8px)
-  +single-box-shadow
   background-color: #282828
-  border: 4px solid #555
   border-collapse: separate
   border-spacing: 10px
   width: 100%

diff --git a/source/stylesheets/_header.sass b/source/stylesheets/_header.sass
@@ -0,0 +1,3 @@
+.header
+  .column
+    text-align: center
diff --git a/source/stylesheets/_message.sass b/source/stylesheets/_message.sass
@@ -15,31 +15,45 @@
       +inline-block
       +rotateX(0deg)
       +transition(.5s)
-      background-color: #fff
-      color: #000
+      background-color: #000
+      color: #fff
       font-size: 70px
       font-weight: bold
-      +single-box-shadow(rgba(0, 0, 0, 1))
-      +background(linear-gradient(top, #eee 0%, #ccc 48%, #bbb 50%, #ccc 52%, #eee 100%))
-      border: 1px solid #fff
+      +background(linear-gradient(top, #000 0%, #333 48%, #333 50%, #333 52%, #000 100%))
+      border: 1px solid #000
       margin-top: -25px
       margin-right: 2px
-      text-shadow: 0px 2px 0px #fff
-      width: 67px
+      text-shadow: 0px 2px 0px #000
+      width: 77px
       height: 115px
       line-height: 115px
 
       &:first-child
-        +border-left-radius(3px)
 
       &:last-child
-        +border-right-radius(3px)
         margin-right: 0
 
       &.animate-hide
         +rotateX(90deg)
         +transition(.5s)
 
+      &.hour-separator
+        background: transparent
+        border: none
+        width: 30px
+
+  .separator1, .separator2
+    position: absolute
+    top: 37px
+    border: 2px solid rgba(0, 0, 0, 0.5)
+    width: 78px * 2
+
+  .separator1
+    left: 5px
+
+  .separator2
+    right: 3px
+
   .date
     position: absolute
     top: 105px
@@ -48,4 +62,3 @@
     padding: 10px
 
   h1
-    +single-text-shadow(rgba(0, 0, 0, 1))
diff --git a/source/stylesheets/_projects.sass b/source/stylesheets/_projects.sass
@@ -9,20 +9,25 @@
   +transition(.3s)
 
   .column
-    +background(linear-gradient(top, #333, #555))
-    //+background(linear-gradient(top, #333 0%, #444 40%, #333 50%, #444 60%, #555 100%))
-    +single-text-shadow(rgba(0, 0, 0, .75), 0px, 1px, 4px)
-    +single-box-shadow(rgba(0, 0, 0, 1))
-    border: 2px solid #555
+    +single-box-shadow(rgba(0, 0, 0, .33), 0, 0, 8px, 4px, inset)
+    border: 1px solid #000
+    border-bottom-color: #444
+    +border-radius(4px)
+    +background(linear-gradient(top, #222, #444))
     padding: 10px
     display: table-cell
     vertical-align: middle
 
     &:first-child
-      +border-left-radius(3px)
 
     &:last-child
-      +border-right-radius(3px)
+
+    .separator
+      position: absolute
+      left: 0
+      top: 50%
+      width: 100%
+      border: 1px solid rgba(0, 0, 0, .1)
 
     &.icon
       width: 5%
@@ -41,17 +46,16 @@
       position: relative
 
       .bar
-        +background(linear-gradient(top, #909090, #fff))
-        +border-radius(2px)
+        background-color: rgba(0, 0, 0, .3)
+        +border-radius(8px)
         +transition-property(width)
         +transition-duration(2s)
         position: absolute
-        top: -2px
-        left: -2px
-        border: 2px solid #fff
+        top: 10px
+        left: 8px
         display: block
         width: 0px
-        height: 100%
+        height: 40px
 
       .count
         position: absolute
@@ -73,15 +77,13 @@
       img
         +inline-block
         margin-right: 5px
-        padding: 2px
+        padding: 1px
         height: 30px
         background-color: #fff
-        +single-box-shadow
 
   &.failed
     .column
-      +background(linear-gradient(top, #800, #b00))
-      border: 2px solid #b00
+      +background(linear-gradient(top, #b00, #800))
 
       .icon
         color: #b00
@@ -97,8 +99,7 @@
         +inline-block
 
     .column
-      +background(linear-gradient(top, #a80, #ca0))
-      border: 2px solid #ca0
+      +background(linear-gradient(top, #ca0 0%, #a80 50%, #ca0 100%))
 
   &.animate-hide
     +transition(.3s)

diff --git a/source/stylesheets/main.css.sass b/source/stylesheets/main.css.sass
@@ -4,6 +4,7 @@
 @import basic
 @import layout
 @import canvas
+@import header
 @import projects
 @import block
 @import news