woople-theme 0.0.2

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,20 @@
+# Woople Theme
+
+The look and feel of the woople front end
+
+## Purpose & Rationale
+
+* Extract CSS and components into a front-end framework
+* Keep things as close to being open source as possible
+
+## Installation
+
+gem 'woople-theme' from your Gemfile
+
+## Usage
+
+coming soon
+
+## Copyright
+
+Copyright (c) 2012 Woople LLC. See LICENSE.txt for further details.

data/Rakefile

@@ -0,0 +1,37 @@
+#!/usr/bin/env rake
+begin
+  require 'rubygems'
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+require 'rspec/core/rake_task'
+require 'rake/testtask'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'WoopleTheme'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+RSpec::Core::RakeTask.new(:spec)
+Bundler::GemHelper.install_tasks
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task :default => :spec

data/app/assets/javascripts/woople-theme/theme.js

@@ -0,0 +1,39 @@
+//= require jquery
+//= require jquery_ujs
+//= require modernizr
+//= require twitter/bootstrap/dropdown
+//= require twitter/bootstrap/modal
+//= require twitter/bootstrap/button
+//= require fastclick.min_
+//= require_tree .
+
+function resizeFix() {
+  if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
+    var viewportmeta = document.querySelector('meta[name="viewport"]');
+    if (viewportmeta) {
+      viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
+      document.body.addEventListener('gesturestart', function () {
+        viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
+      }, false);
+    }
+  }
+}
+
+
+$(document).ready(function() {
+  resizeFix();
+
+  if (Modernizr.touch) {
+    new FastClick(document.body);
+  }
+
+  $('.touch .content-item').on('click', function() {
+    window.location = $(this).find('a').attr('href');
+  });
+
+  $('.touch .outline tr').on('click', function(e) {
+    window.location = $(this).find('a').attr('href');
+  });
+
+});
+

data/app/assets/stylesheets/woople-theme/base.css.less

@@ -0,0 +1,101 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+body {
+  background: @background;
+}
+
+body > .container {
+  margin-bottom:40px;
+  overflow-x:hidden;
+}
+
+.close-navigation, .navigation {
+  display:none;
+}
+
+a {
+  color:@primary;
+}
+
+a:hover {
+  color:@primary;
+}
+
+#masthead {
+  padding-top:@logoSize;
+  padding-bottom:@logoSize;
+  height:@logoSize;
+  position:relative;
+  z-index:1000;
+
+  .masthead-logo {
+    width:140px;
+  }
+
+}
+
+.copyright {
+  text-align:right;
+  margin-right:30px;
+  margin-top:15px;
+  color:rgba(0,0,0,0.5);
+}
+
+@media (max-width: 768px) {
+  .container > .row {
+    margin-left:0;
+  }
+
+  #masthead {
+    .masthead-logo {
+      display:block;
+      margin-left:auto;
+      margin-right:auto;
+    }
+  }
+
+  body {
+    padding:0;
+  }
+
+  body > .container {
+    margin-left:0;
+    margin-right:0;
+    width:100%;
+  }
+
+  .close-navigation {
+    z-index:3;
+  }
+
+  .navigation {
+    display:block;
+    z-index:2;
+
+    .icon-th-list {
+      background:url(/assets/woople-theme/icons/menu.png);
+      background-position:0 0;
+    }
+  }
+
+  .navigation, .close-navigation {
+    position:absolute;
+    margin-right:0;
+    margin-bottom:0;
+    width:50%;
+    top:0;
+    line-height:@logoWithPadding;
+    text-indent:@phoneMargin;
+  }
+
+  #navigation:target .close-navigation {
+    display:block;
+    left:0;
+  }
+
+  #navigation:target .navigation {
+    display:none;
+  }
+}
+

data/app/assets/stylesheets/woople-theme/buttons.css.less

@@ -0,0 +1,38 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.action {
+  display:inline-block;
+  position:absolute;
+  margin-left:-9px;
+  margin-top:-4px;
+  width:9px;
+  padding-left:5px;
+  padding-right:9px;
+  line-height:10px;
+  .border-radius(14px);
+  .buttonBackground(lighten(@primary,5%), @primary);
+}
+
+
+.action-large {
+  line-height:30px;
+  .border-radius(30px);
+  padding-left:13px;
+  padding-right:18px;
+}
+
+.btn-group {
+  .btn:last-child, .btn:first-child {
+    .border-radius(0);
+  }
+
+  .btn-primary {
+   .buttonBackground(lighten(@primary,5%), @primary);
+  }
+
+  .active {
+    color:@secondaryTextColour;
+    text-shadow:none;
+  }
+}

data/app/assets/stylesheets/woople-theme/colours.css.less

@@ -0,0 +1,29 @@
+@primary: #4984d0;
+@highlight: #8bc03f;
+
+@primaryTextColour: #42474e;
+@secondaryTextColour: #7d7c7c;
+
+@background: spin(darken(fade(@primary, 20%), 20%), -9);
+
+@highlightBackground: fade(@highlight, 4%);
+
+@contentBackground: #f9f7f7;
+@contentBorder: darken(@contentBackground, 25%);
+@insetContentBorder: #e0dede;
+@insideShadowColour: rgba(0,0,0,0.10);
+
+
+@menuTextShadowColour: @secondaryTextColour;
+@menuActiveColour: @highlight;
+@menuHoverColour: rgba(255,255,255,0.25);
+@menuLinkColour: rgba(255, 255, 255, 0.75);
+@menuHeadingColour: white;
+
+@menuLabelBackground: darken(@primary, 10%);
+@menuHoverLabelColour: lighten(@primary, 5%);
+@menuActiveLabelColour: darken(@menuActiveColour, 10%);
+
+/* LEGACY */
+@legacyBackground: #d3dfe8;
+@legacyMenuLinkColour: #fff;

data/app/assets/stylesheets/woople-theme/content-item.css.less

@@ -0,0 +1,157 @@
+@import "woople-theme/variables.css.less";
+
+.content-item-header {
+  margin-left:0;
+  margin-top:@contentPadding * -1;
+  padding-top:@contentPadding * 0.5;
+  padding-left:@contentPadding;
+  padding-bottom:@contentPadding * 0.5;
+  font-weight:bold;
+  border-bottom:solid 1px @insetContentBorder;
+
+  a {
+    color:@secondaryTextColour;
+  }
+
+  .span1:first-child {
+    margin-left:0;
+  }
+
+  .icon-chevron-up {
+    display:none;
+    background-image:url(/assets/woople-theme/icons/sortASC.png);
+    background-position:0 0;
+  }
+
+  .icon-chevron-down {
+    display:none;
+    background-image:url(/assets/woople-theme/icons/sortDESC.png);
+    background-position:0 0;
+  }
+
+  .sortAsc {
+    .icon-chevron-up { display:inline-block; }
+  }
+
+  .sortDesc {
+    .icon-chevron-down { display:inline-block; }
+  }
+}
+
+.touch .content-item:active {
+  .box-shadow(inset 0 0 5px rgba(0,0,0,0.25));
+  padding-bottom:@contentPadding * 1.5 - 1;
+  padding-top:@contentPadding + 1;
+}
+
+#browse_show .completed {
+  background-image:url(/assets/woople-theme/completed-triangle.png);
+  background-position:top right;
+  background-repeat:no-repeat;
+}
+
+.content-item {
+  position:relative;
+  margin-left:0;
+  padding-left:@contentPadding;
+  border-bottom:solid 1px @insetContentBorder;
+  padding-top:@contentPadding;
+  padding-bottom:@contentPadding * 1.5;
+
+  -webkit-tap-highlight-color: transparent;
+  -moz-tap-highlight-color: transparent;
+  -o-tap-highlight-color: transparent;
+  -ms-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+
+  > * { 
+    position:relative;
+    z-index:2;
+  }
+
+  .content-item-image {
+    margin-left:0;
+
+    img {
+      .course-image();
+    }
+
+  }
+
+  .content-item-content {
+    h2 {
+      .content-title();
+
+      a {
+        color:@primaryTextColour;
+      }
+    }
+
+    .content-item-metadata  {
+      color:@secondaryTextColour;
+
+      .badge {
+        background:@highlight;
+        cursor:initial;
+      }
+
+      .icon-star {
+        width:15px;
+        height:15px;
+        margin-top:-1px;
+        background-image:url(/assets/woople-theme/star-icon.png);
+        background-position:0 0;
+      }
+
+      em {
+        color:@primaryTextColour;
+        font-style:normal;
+      }
+    }
+  }
+
+  .content-item-progress-bar {
+    height:2px;
+    position:absolute;
+    z-index:1;
+    left:0;
+    bottom:0;
+    background:fade(@highlight, 100%);
+  }
+}
+
+@media (max-width: 767px) {
+  .content-item-header {
+    display:none;
+  }
+
+  .content-item {
+    padding-left:@phoneMargin;
+
+    .content-item-image {
+      width:@phoneImageSize;
+      height:@phoneImageSize;
+      float:left;
+      margin-right:@phoneMargin;
+    }
+
+    .content-item-content {
+      h2 {
+        margin-left:@phoneOffset;
+        margin-right:@phoneMargin;
+        font-size:14px;
+      }
+    }
+
+    .content-item-metadata {
+      margin-left: @phoneOffset;
+
+      > div {
+        float:left;
+        margin-right:@phoneMargin;
+      }
+    }
+
+
+  }
+}