woople-theme 0.0.2

data/app/assets/stylesheets/woople-theme/page-header.css.less

@@ -0,0 +1,48 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.page-header {
+  border-color:fade(@highlight, 10%);
+  padding-left:@contentPadding;
+  padding-right:@contentPadding;
+  margin-top:0;
+  padding-top:@contentPadding * 1.5;
+  background: @highlightBackground;
+
+  h1 {
+    font-weight:200;
+    font-family:HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    color:#0089D0;
+    font-size:50px;
+    line-height:55px;
+    margin-bottom:10px;
+  }
+
+  p {
+    font-size:16px;
+    line-height:23px;
+    color:@secondaryTextColour;
+    margin-bottom:-4px;
+  }
+}
+
+@media (max-width: 767px) {
+  .page-header {
+    padding-left:@phoneMargin;
+    padding-right:@phoneMargin;
+    padding-top:@phoneMargin * 1.5;
+    margin-bottom:0;
+
+    h1 {
+      font-size:28px;
+      line-height:32px;
+    }
+
+    p {
+      font-size:12px;
+      line-height:18px;
+    }
+
+  }
+
+}

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

@@ -0,0 +1,31 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.pagination {
+  margin-top:0;
+  .box-shadow(inset 0 1px 3px @insideShadowColour);
+
+  ul {
+    .box-shadow(0 0 0 transparent);
+    .border-radius(0);
+  }
+  li:first-child a {
+    border-radius:0;
+    -webkit-border-radius:0;
+  }
+
+  li:last-child a {
+    border-radius:0;
+    -webkit-border-radius:0;
+  }
+
+  a {
+    border:none;
+  }
+
+  a:hover, .active a {
+    background-color:@highlightBackground;
+  }
+
+}
+

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

@@ -0,0 +1,120 @@
+@import "woople-theme/variables.css.less";
+@import "woople-theme/colours.css.less";
+
+.profile {
+  position:absolute;
+  top:19px;
+  right:30px;
+  width:300px;
+
+  .profile-link {
+    float:right;
+    margin-bottom:0;
+
+    .dropdown-menu {
+      background: @contentBackground;
+      .border-radius(0);
+      .box-shadow();
+      top:33px;
+      border:none;
+      left:auto;
+      right:2px;
+
+      li > a:hover, .active > a, .active a:hover {
+        background-color:@primary;
+      }
+
+      .divider:last-child {
+        display:none;
+      }
+    }
+
+    .dropdown-toggle {
+      height:28px;
+      width:28px;
+      padding:2px;
+      position:relative;
+      z-index:1001;
+      border:none;
+
+      &:hover {
+        img {
+          .box-shadow(none);
+        }
+      }
+    }
+
+    .open .dropdown-toggle {
+      background: @contentBackground;
+      border-color:@contentBorder;
+      border-bottom:none;
+      border-bottom-left-radius:0;
+      border-bottom-right-radius:0;
+
+      img {
+        .box-shadow(none);
+      }
+    }
+
+    img {
+      max-width:28px;
+      .border-radius(5px);
+      .box-shadow(0 1px 3px rgba(0,0,0,0.10));
+    }
+  }
+
+  .search {
+    float:left;
+    display:inline-block;
+    position:relative;
+    margin-bottom:0;
+    margin-top:3px;
+    margin-right:5px;
+
+    .search-page {
+      position:absolute;
+      left:10px;
+      top:6px;
+      opacity:0.5;
+
+      .icon-search {
+        background:url(/assets/woople-theme/icons/search.png);
+        background-position:0 0;
+      }
+    }
+
+    .search-query {
+      padding-left:30px;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .profile {
+    right:5px;
+    width:auto;
+
+    .search {
+      margin-right:0;
+
+      input { display:none; }
+
+      .search-page {
+        opacity:1.0;
+        position:relative;
+        display:inline-block;
+        width:30px;
+        height:30px;
+        top:0;
+        left:0;
+        margin-right:5px;
+
+        .icon-search {
+          position:absolute;
+          left:8px;
+          top:8px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@import "twitter/bootstrap/responsive";

data/app/assets/stylesheets/woople-theme/theme-retina.css

@@ -0,0 +1,44 @@
+.navigation .icon-th-list {
+  background-image:url(/assets/woople-theme/icons/menu2x.png);
+  background-size: 14px 14px;
+}
+
+.profile .search .search-page .icon-search {
+  background-image:url(/assets/woople-theme/icons/search2x.png);
+  background-size:14px 14px;
+}
+
+#browse_show .completed {
+  background-image:url(/assets/woople-theme/completed-triangle2x.png);
+  background-size:34px 27px;
+}
+
+.content-item .content-item-content .content-item-metadata .icon-star {
+  background-image:url(/assets/woople-theme/star-icon2x.png);
+  background-size:15px 15px;
+}
+
+.menu .cert-status-red {
+  background-image:url(/assets/woople-theme/certification/red-icon2x.png);
+  background-size:25px 25px;
+}
+
+.content-item-header .sortAsc .icon-chevron-up {
+  background-image:url(/assets/woople-theme/icons/sortASC2x.png);
+  background-size:14px 14px;
+}
+
+.content-item-header .sortDesc .icon-chevron-down {
+  background-image:url(/assets/woople-theme/icons/sortDESC2x.png);
+  background-size:14px 14px;
+}
+
+.icon-thumbs-up {
+  background-image:url(/assets/woople-theme/icons/thumbs_up2x.png);
+  background-size:15px 16px;
+}
+
+.icon-thumbs-down {
+  background-image:url(/assets/woople-theme/icons/thumbs_down2x.png);
+  background-size:15px 16px;
+}

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

@@ -0,0 +1,8 @@
+/*
+ *= require twitter/bootstrap
+ *= require woople-theme/index
+ */
+
+.somestyle {
+  background:red;
+}

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

@@ -0,0 +1,68 @@
+@import "twitter/bootstrap/mixins";
+@import "twitter/bootstrap/variables";
+@import "woople-theme/colours.css.less";
+
+@contentPadding: 20px;
+@menuWidth: 255px;
+@contentOverlap: 5px;
+@contentOffset: @menuWidth - @contentOverlap;
+@negativeContentOffset: @contentOffset * -1;
+
+@logoSize: 24px;
+@logoWithPadding: @logoSize * 3;
+
+/*course*/
+@imageWidth: 50px;
+@tableCellPadding: 10px;
+@leftColumnOffset: (@gridGutterWidth*2) + @imageWidth;
+
+
+@phoneImageSize: 50px;
+@phoneMargin: @contentPadding / 2;
+@phoneOffset: @phoneImageSize + @phoneMargin;
+@phoneLeftColumnOffset: @phoneMargin + @gridGutterWidth + @imageWidth;
+
+.content-title() {
+  font-weight:300;
+  font-size:18px;
+  line-height:1.5em;
+  margin-bottom:0.5em;
+}
+
+.outline-title(@left: @leftColumnOffset) {
+  line-height:1.5em;
+  font-size:11px;
+  text-transform:uppercase;
+  padding-left:@left;
+  border-top:solid 1px @insetContentBorder;
+  color: @secondaryTextColour;
+  padding-top:@contentPadding * 1.5;
+  margin-bottom:@contentPadding / 2;
+  padding-right:@leftColumnOffset;
+}
+.modal-video() {
+  max-height:600px;
+  overflow:visible;
+
+  .modal-video {
+    position:relative;
+    padding-bottom: 56.25%;
+    padding-top:30px; /* ie 6 workaround */
+    height:0;
+    overflow:hidden;
+
+    iframe, object, embed {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+    }
+  }
+}
+
+.course-image() {
+  width:100%;
+  .border-radius(10px);
+  .box-shadow(0 1px 3px rgba(0, 0, 0, 0.10));
+}

data/app/helpers/javascript_helper.rb

@@ -0,0 +1,5 @@
+module JavascriptHelper
+  def application_javascript
+    javascript_include_tag(WoopleTheme.configuration.layout_javascript) if WoopleTheme.configuration.layout_javascript.present?
+  end
+end

data/app/helpers/theme_helper.rb

@@ -0,0 +1,36 @@
+module ThemeHelper
+  # This allows you to generate a page-header component
+  def page_header(data, presenter = nil)
+    data = ThemePresentation.wrap(data, PageHeaderPresenter, presenter)
+    render 'woople-theme/page_header', header: data
+  end
+
+  def content_items(items, presenter = nil)
+    collection = ThemePresentation.wrap_collection(items, ContentItemPresenter, presenter)
+    render partial: 'woople-theme/content_item', collection: collection
+  end
+
+  def video_modal(video, presenter = nil)
+    video = ThemePresentation.wrap(video, presenter)
+    render 'woople-theme/video_modal', video: video
+  end
+
+  def content_item_header
+    render partial: 'woople-theme/content_item_header'
+  end
+
+  def outline(items, presenter = nil)
+    collection = ThemePresentation.wrap_collection(items, OutlinePresenter, presenter)
+    render partial: 'woople-theme/outline', collection: collection
+  end
+
+  def profile
+    model = ThemePresentation.wrap(send(WoopleTheme.configuration.profile_helper), ProfilePresenter)
+    render 'woople-theme/profile', profile: model
+  end
+
+  def menu
+    model = ThemePresentation.wrap(send(WoopleTheme.configuration.menu_helper), MenuPresenter)
+    render 'woople-theme/menu', menu: model
+  end
+end

data/app/presenters/content_image.rb

@@ -0,0 +1,7 @@
+module ContentImage
+  DEFAULT_IMAGE = 'woople-theme/missing.png'
+
+  def image(&block)
+    yield(__getobj__.image || DEFAULT_IMAGE) if __getobj__.respond_to? :image
+  end
+end

data/app/presenters/content_item_presenter.rb

@@ -0,0 +1,14 @@
+require 'delegate'
+require_relative 'content_image'
+
+class ContentItemPresenter < SimpleDelegator
+  include ContentImage
+
+  def certification_metadata(&block)
+    yield(source.certification_metadata) if source.certification_metadata.present?
+  end
+
+  def source
+    __getobj__
+  end
+end

data/app/presenters/menu_link_presenter.rb

@@ -0,0 +1,52 @@
+require 'action_view'
+require 'delegate'
+
+class MenuLinkPresenter < SimpleDelegator
+  include ActionView::Helpers::TagHelper
+
+  def featured_tag(name)
+    if featured?
+      content_tag(:em, name.html_safe)
+    else
+      name
+    end
+  end
+
+  def badge
+    return "" if no_badge?
+
+    content_tag(:span, link.badge, class: 'badge')
+  end
+
+  def certification_badge
+   return "" if no_certification_badge?
+
+    content_tag(:span, content_tag(:i, '', class: "cert-status-#{link.certification_badge}") + " #{link.certification_badge.titleize}", class: 'badge label-icon')
+  end
+
+  def css_class
+    "active" if selected?
+  end
+
+  private
+
+  def link
+    __getobj__
+  end
+
+  def featured?
+    link.respond_to?(:featured) && link.featured
+  end
+
+  def no_badge?
+    !link.respond_to?(:badge)
+  end
+
+  def no_certification_badge?
+    !link.respond_to?(:certification_badge)
+  end
+
+  def selected?
+    link.respond_to?(:selected) && link.selected
+  end
+end