From 865a84c05f10ce7ff05d230a348b2a67d05d6bba Mon Sep 17 00:00:00 2001 From: Kevin Tuhumury Date: Thu, 21 Jun 2012 12:15:09 +0200 Subject: [PATCH] Layout WIP. --- Gemfile | 1 + Gemfile.lock | 3 + build/index.html | 2 +- config.rb | 81 +--------------------- source/javascripts/project_board.js.coffee | 15 +++- source/layout.slim | 13 +++- source/stylesheets/_basic.sass | 2 +- source/stylesheets/_block.sass | 4 -- source/stylesheets/_canvas.sass | 3 - source/stylesheets/_header.sass | 3 + source/stylesheets/_message.sass | 33 ++++++--- source/stylesheets/_projects.sass | 39 ++++++----- source/stylesheets/main.css.sass | 1 + 13 files changed, 78 insertions(+), 122 deletions(-) create mode 100644 source/stylesheets/_header.sass diff --git a/Gemfile b/Gemfile index 840587f..bf05a2f 100644 --- 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 index dc8e2b2..38b0091 100644 --- 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 index 9e80f4d..4f5e57b 100644 --- a/build/index.html +++ b/build/index.html @@ -1 +1 @@ -BlueBoard
00:00
\ No newline at end of file +BlueBoard
project
delivered
project members
00:00
\ No newline at end of file diff --git a/config.rb b/config.rb index da97b7e..5aa6fd6 100644 --- 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 index 7e6155f..35427a7 100644 --- a/source/javascripts/project_board.js.coffee +++ b/source/javascripts/project_board.js.coffee @@ -28,17 +28,26 @@ ProjectBoard =
+

+
+
+
+
+
+
+
+
+
+
+
-
-
-
") diff --git a/source/layout.slim b/source/layout.slim index 8743197..bb4ff86 100644 --- a/source/layout.slim +++ b/source/layout.slim @@ -13,6 +13,14 @@ 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 @@ -20,10 +28,11 @@ html .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 index 4592f68..a0ab87f 100644 --- 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 index 996af5e..71fbaf3 100644 --- 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 index 3036781..61853a1 100644 --- 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 new file mode 100644 index 0000000..a4cbbc2 --- /dev/null +++ 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 index 5ee998a..a9c4fed 100644 --- 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 index 78ac281..73d295b 100644 --- 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 index 9af66b9..6fc9dcc 100644 --- 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