lay_me_out 1.2.8

data/app/assets/stylesheets/lay_me_out/mixins.css.scss

@@ -0,0 +1,5 @@
+@mixin background-gradient($colour1, $colour2) {
+  background: -webkit-linear-gradient($colour1, $colour2);
+  background: -moz-linear-gradient($colour1, $colour2);
+  background: linear-gradient($colour1, $colour2);
+}

data/app/assets/stylesheets/lay_me_out/reset.css.scss

@@ -0,0 +1,37 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  line-height:1;
+  font-family: Helvetica,Arial;
+  font-size: 12px;
+  color: #696969;
+  background: image-url('lay_me_out/main-background.png') #dedede;
+  margin: 0
+}
+
+a {
+  text-decoration:none;
+}
+
+ul {
+  list-style:none;
+}

data/app/assets/stylesheets/lay_me_out/side_menu.css.scss

@@ -0,0 +1,32 @@
+@import "mixins.css.scss";
+
+div#side-menu {
+  width:250px;
+  float:left;
+
+  li a {
+    color: #d8d8d8;
+    text-shadow: 0 -1px 0 black;
+    @include background-gradient(#4d4d4d,#464646);
+    border-top: 1px solid rgba(0,0,0,0.1);
+    border-left: 0;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    border-right: 0;
+    box-shadow: inset 0 1px 0 rgba(141,141,141,0.2);
+    font-weight: normal;
+    padding: 12px 15px;
+    display:block;
+
+    &:hover { @include background-gradient(#5F5F5F, #555); }
+  }
+
+  li.active a {
+    background: #f7f7f7;
+    border-left: 3px solid #52c7ec;
+    color: #707070;
+    text-shadow: none;
+    font-weight: bold;
+    box-shadow: -4px 6px 6px rgba(34,34,34,0.23);
+  }
+}
+

data/app/assets/stylesheets/lay_me_out/simple.css.scss

@@ -0,0 +1,96 @@
+@import "colors.css.scss";
+
+body.simple {
+  -webkit-user-select: none;
+  user-select: none;
+
+  header {
+    background: #222;
+
+    .tagline {
+      height: 46px;
+      display: inline-block;
+      border-left: 1px solid rgba(255, 255, 255, 0.06);
+      margin-left: 15px;
+      vertical-align: top;
+
+      p {
+        font-size: 17px;
+        font-weight: lighter;
+        margin-top: 12px;
+        padding-left: 20px;
+        color: #979797;
+        text-shadow: 1px 1px 1px #000;
+        font-family: Helvetica Neue, Helvetica, Arial;
+      }
+
+      strong {
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+
+  div.wrapper {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 25px;
+  }
+
+  section#contents-container {
+    margin:45px 0 40px;
+
+    div#content {
+      margin: 0 auto;
+      box-shadow: 0 4px 10px rgba(0,0,0,0.12),inset 0 1px 0 white;
+      border-radius: 5px;
+      background: #f7f7f7;
+      padding: 25px;
+      border: 1px solid rgba(0,0,0,0.25);
+
+      h3 {
+        font-weight: normal;
+        font-size: 16px;
+        color: #999;
+        text-align: center;
+      }
+
+    }
+  }
+
+  footer {
+    margin-top: 40px;
+    width: 100%;
+    height: 60px;
+
+    text-align: center;
+    margin-bottom: 50px;
+
+    ul {
+      list-style: none;
+      padding: 5px 0;
+
+      li {
+        display: inline-block;
+      }
+    }
+
+    ul#legalese li {
+      display:inline-block;
+
+      a {
+        background: #fff;
+        padding: 3px 6px 4px;
+        font-size: 11px;
+        border-radius: 2px;
+        vertical-align: 2px;
+        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
+        border: 1px solid #d0d0d0;
+      }
+
+      a:active {
+        box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.05);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lay_me_out/simple_mobile.css.scss

@@ -0,0 +1,112 @@
+body.simple {
+  button,
+  input[type=submit] {
+    -webkit-appearance: none; // turn off iOS's button re-styling
+  }
+}
+
+// general adjustment to switch to mobile mode
+@media only
+screen and (max-width: 550px),
+screen and (max-height: 550px) {
+  body.simple {
+    -webkit-text-size-adjust: none; // turn off iOS's text scaling
+
+    footer {
+      display: none;
+    }
+
+    header {
+      text-align: center;
+
+      .tagline {
+        border: none;
+        margin: 0;
+        height: initial;
+
+        p {
+          padding: 0;
+        }
+      }
+    }
+
+    section#contents-container {
+      margin: 0;
+
+      form {
+        label {
+          display: inline;
+          font-size: 16px;
+        }
+
+        input[type=text],
+        input[type=password] {
+          margin-top: 5px;
+          font-size: 24px;
+          height: 50px;
+        }
+
+        input[type=submit] {
+          width: 100%;
+          height: 50px;
+          font-size: 120%;
+        }
+
+      }
+
+      .wrapper {
+        padding: 0;
+
+        #content {
+          border: none;
+          border-radius: 0;
+          box-shadow: none;
+          width: auto;
+        }
+      }
+    }
+
+  }
+
+}
+
+// specific tweaks for horizontal mode
+@media only
+screen and (max-height: 426px) {
+  body.simple {
+    header {
+      padding: 0;
+
+      .tagline {
+        display: none;
+      }
+    }
+
+    section#contents-container {
+
+      form {
+        label {
+          font-size: 12px;
+        }
+
+        input[type=text],
+        input[type=password] {
+          font-size: 16px;
+          height: 34px;
+          margin-bottom: 10px;
+        }
+
+        input[type=submit] {
+          height: 34px;
+        }
+
+      }
+
+      .wrapper {
+        #content {
+          padding: 10px;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/lay_me_out/tables.css.scss

@@ -0,0 +1,39 @@
+table.normal {
+  position: relative;
+  margin-bottom: 30px;
+  width: 100%;
+  overflow: visible;
+  border: 1px solid #E9E9E9;
+}
+
+table.normal tr{font-size: 12px;}
+
+table.normal tr th, summary {
+  color: #878787;
+  font-weight: bold;
+  font-size: 11px;
+  text-align: left;
+  text-shadow: 1px 1px 0 white;
+  background: -webkit-linear-gradient(#E6E6E6, #dcdcdc);
+  background: -moz-linear-gradient(#E6E6E6, #dcdcdc);
+  background: linear-gradient(#E6E6E6, #dcdcdc);
+  padding: 5px 15px 2px;
+  border: 1px solid #DDD;
+  border-bottom: 1px solid #BBB;
+}
+
+table.normal th, table.normal td {
+  padding: 6px 8px;
+  border: 1px solid #e9e9e9;
+  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
+  vertical-align: middle;
+  text-align: left;
+  line-height: 20px;
+}
+
+table.normal th:first-child {box-shadow: inset 0 1px 0 #fff;}
+table.normal th:last-child, .table td:last-child {border-right: 0 none;}
+table.normal tr:nth-child(odd) td {background: #f2f2f2;}
+table.normal tr:nth-child(even) td {background: #f8f8f8;}
+table.normal tr:last-child td {border-bottom: 0 none;}
+table.normal tbody tr:hover td { color: #2d2d2d; }

data/app/assets/stylesheets/lay_me_out/text.css.scss

@@ -0,0 +1,3 @@
+p {
+  margin-bottom:10px;
+}

data/app/controllers/lay_me_out/styleguide_controller.rb

@@ -0,0 +1,11 @@
+module LayMeOut
+  class StyleguideController < ::ApplicationController
+    add_breadcrumb "Styleguide", :root_path
+
+    def index
+      flash.now[:error] = "This is an error message!"
+      flash.now[:warning] = "This is a warning message"
+      flash.now[:success] = ["This is a success message!", "So it this!"]
+    end
+  end
+end

data/app/helpers/lay_me_out/application_helper.rb

@@ -0,0 +1,49 @@
+module LayMeOut
+  module ApplicationHelper
+    def render_user_profile
+      render :partial => "lay_me_out/common/user_profile", :locals => { :user => controller.current_user_details } if has_value_for?(:current_user_details)
+    end
+
+    def render_navigation
+      render :partial => 'lay_me_out/common/navigation', :locals => { :links => controller.navigation_links } if has_value_for?(:navigation_links)
+    end
+
+    def css_active_class_for(path)
+      is_active = false
+
+      if path.is_a? Hash
+        path.each do |key, subpath|
+          is_active = controller.active_page?(subpath)
+          break if is_active
+        end
+      else
+        is_active = controller.active_page?(path)
+      end
+
+      is_active ? "active" : ""
+    end
+
+    def content_class
+      content_for?(:side_menu) ? "two-column" : "one-column"
+    end
+
+    def convert_flash_to_json
+      messages = []
+
+      flash.each do |key, values|
+        values = [values] unless values.is_a?(Array)
+        values.each do |value|
+          messages << { :content => value, :type => key }
+        end
+      end
+
+      messages.to_json
+    end
+
+    private
+
+    def has_value_for?(method)
+      !!(controller.class.method_defined?(method) and controller.send(method))
+    end
+  end
+end

data/app/models/lay_me_out/user_details.rb

@@ -0,0 +1,20 @@
+module LayMeOut
+  class UserDetails
+    def initialize(attr)
+      @name = attr.fetch(:name)
+      @position = attr[:position]
+      @links = attr[:links]
+      @profile_picture = attr[:profile_picture]
+    end
+
+    attr_reader :name, :position
+
+    def profile_picture
+      @profile_picture ||= 'lay_me_out/missing_profile.png'
+    end
+
+    def links
+      @links ||= {}
+    end
+  end
+end

data/app/views/lay_me_out/common/_flash.html.haml

@@ -0,0 +1,14 @@
+%script{:id => 'flash-message-template', :type => 'text/html'}
+  = render :template => 'lay_me_out/common/_flash.mustache'
+
+:javascript
+  $(function() {
+    var flash = LayMeOut.Utils.FlashMessage.getInstance({
+      containerId: 'flash',
+      messageClass: 'message',
+      messageTemplateId: 'flash-message-template',
+      interval: 5000
+    });
+
+    flash.showFlashMessages(#{convert_flash_to_json});
+  });

data/app/views/lay_me_out/common/_flash.mustache.haml

@@ -0,0 +1,3 @@
+%div{ :class => "message {{type}}"}
+  %p {{content}}
+  %span.close

data/app/views/lay_me_out/common/_navigation.html.haml

@@ -0,0 +1,12 @@
+%ul
+  - links.each do |text, path|
+    - if path.is_a? Hash
+      %li{ :class => "has-sub-menu #{css_active_class_for(path) }" }
+        = link_to text, "#"
+        %nav.sub-menu
+          .wrapper
+            %ul
+              - path.each do |text, subpath|
+                %li{ :class => css_active_class_for(subpath) }= link_to text, subpath
+    - else
+      %li{ :class => css_active_class_for(path) }= link_to text, path