express_ui 0.5.0 → 0.5.1

data/app/assets/stylesheets/express_ui/templates/_content_sidebar.sass

@@ -44,7 +44,6 @@
     position: absolute
     padding: $container-padding*2 $container-padding*4
     right: $container-padding*4
-    overflow: auto
 
     @include tablet-max
       padding-top: $container-padding*6 !important

data/app/assets/stylesheets/express_ui/templates/_full_width.sass

@@ -1,5 +1,14 @@
 .ae-template-full-width
+  position: relative
+
+  .ae-container
+    height: auto
+    min-height: 100%
+    max-width: 100%
+
   .ae-content
+    margin: 0 3em
+
     @include laptop-max
       padding-left: $container-padding*4
       padding-right: $container-padding*4

data/app/assets/stylesheets/express_ui/templates/_master_detail.sass

@@ -16,18 +16,61 @@
       left: 0 !important
       right: 0 !important
 
+  @include tablet
+    .ae-sidebar
+      padding-top: $header-height
+
   .ae-container
     position: fixed
     left: 15%
     right: 30%
     height: 100%
     width: auto
+    padding-top: $header-height
+    padding-bottom: $header-height
+    overflow: scroll
+
+    @include tablet-max
+      width: 100%
+      left: 0
+      right: 0
+
+
+
+.ae-template-master-detail-sidebar
+  @include tablet-max
+    .ae-sidebar-left
+      display: none
+      left: 10px
+      margin-top: 2em
+      right: 10px
+      width: auto !important
+      z-index: 99
+      height: auto !important
+
+    .ae-sidebar-right
+      display: none
+
+    .ae-content
+      left: 0 !important
+      right: 0 !important
+
+  .ae-container
+    position: fixed
+    left: 15%
+    right: 0
+    height: 100%
+    width: auto
+    max-width: 100%
 
     @include tablet-max
       width: 100%
       left: 0
       right: 0
 
+  .ae-sidebar-left
+    border-right: 1px solid $border-light
+
 
 .ae-template-master-detail
   @include sidebar(15%)
@@ -54,9 +97,14 @@
     @include tablet
       width: auto
 
-.ae-template-master-detail-fixed
+
+.ae-template-master-detail-fixed, .ae-template-master-detail-sidebar
   @include sidebar-right(30%)
   @include sidebar-fixed(15%)
+
+  @media only screen and (min-width: $tablet) and (max-width: $small-desktop)
+    @include sidebar-right(40%)
+
   display: flex
   flex-flow: row nowrap
   align-items: stretch
@@ -73,6 +121,10 @@
     height: 100%
     right: 0
 
+    & > section
+      overflow-y: auto
+      height: 100%
+
   .ae-content
     padding: $container-padding $container-padding*4
 

data/app/controllers/express_ui/uicomponents_controller.rb

@@ -17,6 +17,9 @@ module ExpressUi
     def master_detail_fixed
     end
 
+    def master_detail_sidebar
+    end
+
     def content_and_sidebar
     end
 

data/app/helpers/express_ui/application_helper.rb

@@ -1,5 +1,6 @@
 module ExpressUi
   module ApplicationHelper
+    include ChecksForTesting
 
     def nav_link_to(text, path)
       class_name = current_page?(path) ? 'ae-nav-item active' : 'ae-nav-item'

data/app/helpers/express_ui/checks_for_testing.rb

@@ -0,0 +1,13 @@
+module ExpressUi
+  module ChecksForTesting
+
+    # Returns boolean as to whether something is for testing
+    #
+    # For example, this can be used to
+    # show styles/elements or any visual indication for the product owner
+    # to easily distinguish a test/acceptance environment from production
+    def for_testing?
+      !Rails.env.production? && !Rails.env.development?
+    end
+  end
+end

data/app/views/express_ui/shared/_header.html.erb

@@ -5,7 +5,6 @@
       <%= nav_link_to 'About Express UI', about_path %>
       <%= nav_link_to 'Style Guide', styleguide_url %>
       <%= nav_link_to 'Scripts', scripts_url %>
-      <%= nav_link_to 'UI Components', uicomponents_path %>
     </ul>
   </nav>
 </header>

data/app/views/express_ui/styleguide/index.html.erb

@@ -52,13 +52,7 @@
         <li><h3>Lists</h3>
           <%= render "express_ui/molecules/lists" %>
         </li>
-        <li><h3>Nav</h3>
-          <%= render "express_ui/molecules/nav" %>
-        </li>
         <li><h3>Pagination</h3></li>
-        <li><h3>Progress Indicator</h3>
-          <%= render "express_ui/molecules/progress_indicator" %>
-        </li>
         <li><h3>Table</h3>
           <%= render "express_ui/molecules/table" %>
         </li>

data/app/views/express_ui/templates/master_detail_fixed.html.erb

@@ -9,32 +9,32 @@
     <p>{Detail}</p>
   </div>
 
-  <div class="ae-content content">
-    <%= render "express_ui/shared/search_box" %>
-
-    <h1>This is a fixed master-detail layout</h1>
-
-    <%= highlight_code_block do %>
-    <%= "<header></header>" %>
-    <%= "<div class=\"ae-template-master-detail-fixed\">" %>
-      <%= "<div class=\"ae-sidebar ae-sidebar-left\">" %>
-        <%= "<nav>" %>
-          <%= "{Sidebar Menu}" %>
-        <%= "</nav>" %>
-      <%= "</div>" %>
-      <%= "<div class=\"ae-sidebar ae-sidebar-right\">" %>
-        <%= "{Detail View}" %>
+  <div class="ae-container">
+    <div class="ae-content content">
+      <%= render "express_ui/shared/search_box" %>
+
+      <h1>This is a fixed master-detail layout</h1>
+      <%= highlight_code_block do %>
+      <%= "<header></header>" %>
+      <%= "<div class=\"ae-template-master-detail-fixed\">" %>
+        <%= "<div class=\"ae-sidebar ae-sidebar-left\">" %>
+          <%= "<nav>" %>
+            <%= "{Sidebar Menu}" %>
+          <%= "</nav>" %>
+        <%= "</div>" %>
+        <%= "<div class=\"ae-sidebar ae-sidebar-right\">" %>
+          <%= "{Detail View}" %>
+        <%= "</div>" %>
+        <%= "<div class=\"ae-content\">" %>
+          <%= "{Content}" %>
+        <%= "</div>" %>
       <%= "</div>" %>
-      <%= "<div class=\"ae-content\">" %>
-        <%= "{Content}" %>
-      <%= "</div>" %>
-    <%= "</div>" %>
-    <%= "<footer></footer>" %>
-    <% end %>
+      <%= "<footer></footer>" %>
+      <% end %>
 
-    <div class="ae-btn-group ae-btn-group-left">
-    <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
-    </div>
+      <div class="ae-btn-group ae-btn-group-left">
+      <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+      </div>
 
 
     </div>

data/app/views/layouts/express_ui/_doctype_html.html.erb

@@ -0,0 +1,9 @@
+<!--[if IE 7]><html class='no-js ie7 no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><![endif]-->
+<!--[if IE 8]><html class='no-js ie8 no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><![endif]-->
+<!--[if IE 9]><html class='no-js ie9 no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><![endif]-->
+<!--[if gt IE 9]><!-->
+  <!DOCTYPE HTML>
+  <html class='no-js no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'>
+<!--<![endif]-->
+  <%= yield %>
+</html>

data/app/views/layouts/express_ui/_head.html.erb

@@ -1,16 +1,10 @@
-  <!--[if IE 7]><html class='no-js ie7 no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><![endif]-->
-  <!--[if IE 8]><html class='no-js ie8 no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><![endif]-->
-  <!--[if IE 9]><html class='no-js ie9 no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><![endif]-->
-  <!--[if gt IE 9]><!-->
-  <!DOCTYPE HTML>
-  <html class='no-js no-freight base #{yield :document_class}' data-topic="#{yield :topic}" lang='en'><!--<![endif]-->
   <head>
     <meta charset="utf-8"/>
     <meta content="AppExpress" name="author"/>
     <title><%= @page_title || content_for(:page_title) || (page_title rescue "No Page Title Set") %></title>
     <%= csrf_meta_tags %>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
-    <%= stylesheet_link_tag 'express_ui/styleguide', :media => "all" %>
+    <%= stylesheet_link_tag 'express_ui/application', :media => "all" %>
     <%= stylesheet_link_tag 'application', :media => "all" %>
     <%= javascript_include_tag 'express_ui/application', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

data/app/views/layouts/express_ui/content_and_sidebar.html.erb

@@ -1,18 +1,32 @@
-<html>
+<%= render 'layouts/express_ui/doctype_html' do %>
   <%= render partial: 'layouts/express_ui/head' %>
-  <body>
-    <header>
-      <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
+  <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
+    <header class="<%= for_testing? ? "ae-testing-header" : "" %>">
+      <%= render(partial: 'shared/header') %>
     </header>
-    <div class=".ae-template-content-sidebar">
+
+    <div class="ae-template-content-sidebar">
+
+      <%= content_for(:sidebar_link) rescue nil %>
+
+      <div class="js-ae-sidebar-right">
+      </div>
+
       <div class="ae-container">
-        <div class="ae-content">
+        <%= content_for(:search) ||  render(partial: 'search/input') rescue nil %>
+
+        <div class="ae-sidebar ae-sidebar-left js-ae-sidebar">
+          <%= content_for(:sidebar) rescue nil %>
+        </div>
+
+        <div class="ae-content js-ae-content">
           <%= yield %>
+
+          <footer>
+            <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
+          </footer>
         </div>
       </div>
     </div>
-    <footer>
-      <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
-    </footer>
   </body>
-</head>
+<% end %>

data/app/views/layouts/express_ui/content_and_sidebar_fixed.html.erb

@@ -1,18 +1,33 @@
-<html>
+<%= render 'layouts/express_ui/doctype_html' do %>
   <%= render partial: 'layouts/express_ui/head' %>
-  <body>
-    <header>
-      <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
+  <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
+    <header class="<%= for_testing? ? "ae-testing-header" : "" %>">
+      <%= render(partial: 'shared/header') %>
     </header>
-    <div class=".ae-template-content-sidebar-fixed">
+
+    <div class="ae-template-content-sidebar-fixed">
+
+      <%= content_for(:sidebar_link) rescue nil %>
+
+      <div class="js-ae-sidebar-right">
+      </div>
+
       <div class="ae-container">
-        <div class="ae-content">
+        <%= content_for(:search) ||  render(partial: 'search/input') rescue nil %>
+
+        <div class="ae-sidebar ae-sidebar-left js-ae-sidebar">
+          <%= content_for(:sidebar) rescue nil %>
+        </div>
+
+        <div class="ae-content js-ae-content">
           <%= yield %>
         </div>
+
+        <footer>
+          <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
+        </footer>
+
       </div>
     </div>
-    <footer>
-      <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
-    </footer>
   </body>
-</head>
+<% end %>

data/app/views/layouts/express_ui/full_width.html.erb

@@ -1,18 +1,22 @@
-<html>
+<%= render 'layouts/express_ui/doctype_html' do %>
   <%= render partial: 'layouts/express_ui/head' %>
   <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
-      <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
+      <%= content_for(:header) ||  render(partial: 'shared/header') rescue nil %>
     </header>
+
     <div class="ae-template-full-width">
       <div class="ae-container">
+
+        <%= content_for(:search) ||  render(partial: 'search/input') rescue nil %>
+
         <div class="ae-content">
           <%= yield %>
         </div>
       </div>
+      <footer>
+        <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
+      </footer>
     </div>
-    <footer>
-      <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
-    </footer>
   </body>
-</head>
+<% end %>

data/app/views/layouts/express_ui/half_width.html.erb

@@ -1,4 +1,4 @@
-<html>
+<%= render 'layouts/express_ui/doctype_html' do %>
   <%= render partial: 'layouts/express_ui/head' %>
   <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
@@ -15,4 +15,4 @@
       <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
     </footer>
   </body>
-</head>
+<% end %>

data/app/views/layouts/express_ui/master_detail.html.html.erb

@@ -1,4 +1,4 @@
-<html>
+<%= render 'layouts/express_ui/doctype_html' do %>
   <%= render partial: 'layouts/express_ui/head' %>
   <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
@@ -6,13 +6,17 @@
     </header>
     <div class="ae-template-master-detail">
       <div class="ae-container">
+        <%= content_for(:search) ||  render(partial: 'search/input') rescue nil %>
+
         <div class="ae-content">
           <%= yield %>
         </div>
+
+        <footer>
+          <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
+        </footer>
+
       </div>
     </div>
-    <footer>
-      <%= content_for(:footer) ||  render(partial: 'shared/footer') rescue nil %>
-    </footer>
   </body>
-</head>
+<% end %>

data/app/views/layouts/express_ui/master_detail_fixed.html.erb

@@ -1,29 +1,35 @@
-<html>
+<%= render 'layouts/express_ui/doctype_html' do %>
   <%= render partial: 'layouts/express_ui/head' %>
   <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
 
     <header>
-      <%= content_for(:header) || render(partial: 'express_ui/shared/header') rescue nil %>
+      <%= content_for(:header) || render(partial: 'shared/header') %>
     </header>
 
     <div class="ae-template-master-detail-fixed">
       <a href="#" class="ae-mobile-only ae-btn ae-btn-primary ae-show-left-sidebar ae-btn-sm js-ae-show-left-sidebar"><i class="fa fa-bars"></i> Show More</a>
 
-      <div class="ae-sidebar ae-sidebar-left js-ae-sidebar">
-        <%= content_for(:sidebar) rescue nil %>
-      </div>
-
-      <div class="js-ae-sidebar-right">
+      <div class="ae-sidebar ae-sidebar-right js-ae-sidebar-right ae-detail-view">
+        <%= content_for(:detail) rescue nil %>
       </div>
 
       <div class="ae-container">
+        <%= content_for(:search) ||  render(partial: 'search/input') rescue nil %>
+
+        <div class="ae-sidebar ae-sidebar-left js-ae-sidebar">
+          <%= content_for(:sidebar) rescue nil %>
+        </div>
+
         <div class="ae-content">
           <%= yield %>
         </div>
+
+        <footer>
+          <%= content_for(:footer) ||  render(partial: 'express_ui/shared/footer') rescue nil %>
+        </footer>
+
       </div>
+
     </div>
-    <footer>
-      <%= content_for(:footer) ||  render(partial: 'express_ui/shared/footer') rescue nil %>
-    </footer>
   </body>
-</head>
+<% end %>