undercase 0.2.29 → 0.2.57

data/app/assets/stylesheets/undercase/patterns/_typography.scss

@@ -22,7 +22,7 @@ strong {
 }
 
 //
-// RANDO
+// RANDOM
 //
 .notification-indicator {
   @include border-radius(2px);
@@ -207,6 +207,18 @@ strong {
   line-height: 2rem;
 }
 
+.uc-highlight__yellow {
+  background-color: $middle-dark-yellow;
+  font-weight: 600;
+  padding: 0 $gutter*0.3;
+}
+
+.uc-highlight__blue {
+  background-color: $sky-blue;
+  font-weight: 600;
+  padding: 0 $gutter*0.3;
+}
+
 .uc-t-links-page-banner {
   font-size: 1.286rem;
   font-weight: 600;

data/app/assets/stylesheets/undercase/patterns_new_front_end/_cards.scss

@@ -64,6 +64,16 @@
   }
 }
 
+.uc-history-card__header {
+  padding: $gutter*0.4 $gutter;
+  position: relative;
+  background-color: $light-yellow;
+  border-bottom: $dotted-yellow-border;
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+}
 
 //
 // CARD OTHER
@@ -78,6 +88,41 @@
   }
 }
 
+.uc-history-card__label {
+  background-color: $yellow;
+  display: inline-block;
+  line-height: 1.75em;
+  padding: $gutter/4 $gutter;
+  margin: $gutter;
+  margin-left: 0;
+}
+
+.uc-history_card__info {
+  display: inline-block;
+
+  li {
+    display: inline-block;
+
+    &:last-child {
+      &:after {
+        content: none;
+        padding: 0;
+      }
+    }
+
+    &:after {
+      content: "|";
+      padding: 0 $gutter 0 $gutter/2;
+      color: $yellow;
+    }
+  }
+}
+
+.uc-paragraphs--gapped {
+  p {
+    margin-bottom: $gutter;
+  }
+}
 
 //
 // tabs

data/app/assets/stylesheets/undercase/vendor_static/_all.scss

@@ -8,5 +8,6 @@
 @import "groundworkcss/responsive/all-responsive";
 
 @import "calendrical";
+@import "timepicker";
 @import "jquery-ui-1.8.13.custom";
 @import "icons";

data/app/assets/stylesheets/undercase/vendor_static/_timepicker.scss

@@ -0,0 +1,72 @@
+.ui-timepicker-wrapper {
+	overflow-y: auto;
+	height: 150px;
+	width: 6.5em;
+	background: #fff;
+	border: 1px solid #ddd;
+	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	box-shadow:0 5px 10px rgba(0,0,0,0.2);
+	outline: none;
+	z-index: 10001;
+	margin: 0;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration {
+	width: 13em;
+}
+
+.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
+.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
+	width: 11em;
+}
+
+.ui-timepicker-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ui-timepicker-duration {
+	margin-left: 5px; color: #888;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-duration {
+	color: #888;
+}
+
+.ui-timepicker-list li {
+	padding: 3px 0 3px 5px;
+	cursor: pointer;
+	white-space: nowrap;
+	color: #000;
+	list-style: none;
+	margin: 0;
+}
+
+.ui-timepicker-list:hover .ui-timepicker-selected {
+	background: #fff; color: #000;
+}
+
+li.ui-timepicker-selected,
+.ui-timepicker-list li:hover,
+.ui-timepicker-list .ui-timepicker-selected:hover {
+	background: #1980EC; color: #fff;
+}
+
+li.ui-timepicker-selected .ui-timepicker-duration,
+.ui-timepicker-list li:hover .ui-timepicker-duration {
+	color: #ccc;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled,
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	color: #888;
+	cursor: default;
+}
+
+.ui-timepicker-list li.ui-timepicker-disabled:hover,
+.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+	background: #f2f2f2;
+}

data/app/assets/stylesheets/undercase_frame/_dummy_site.scss

@@ -305,3 +305,80 @@
   height: 20px;
   margin-bottom: 10px;
 }
+
+.uf-demo-set {
+  border: 1px dashed $light-gray;
+}
+
+.uf-demo-margins {
+  background: url(../assets/backgrounds/diag_black.png);
+  overflow: hidden;
+}
+
+.uf-demo-container {
+  background-color: $sky-blue;
+}
+
+.uf-demo-container-2up {
+  background-color: $lightest-gray;
+}
+
+.uf-demo-object {
+  background-color: $white;
+}
+
+.uf-responsive-demo {
+  &:after {
+    content: '$desktop and $not-mobile';
+    @media #{$not-desktop} {
+      content: '$not-mobile and $not-desktop';
+    }
+    @media #{$small-tablet} {
+      content: '$small-tablet, $not-mobile and $not-desktop';
+    }
+    @media #{$mobile} {
+      content: '$mobile and $not-desktop';
+    }
+  }
+}
+
+.uf-demo-mobile,
+.uf-demo-not-mobile,
+.uf-demo-small-tablet,
+.uf-demo-not-desktop,
+.uf-demo-desktop {
+  padding: $gutter;
+  background: $lightest-gray;
+}
+
+@mixin uf-current-breakpoint {
+  background: $blue;
+  color: $white;
+  font-weight: bold;
+}
+@media #{$mobile} {
+  .uf-demo-mobile {
+    @include uf-current-breakpoint();
+  }
+}
+@media #{$not-mobile} {
+  .uf-demo-not-mobile {
+    @include uf-current-breakpoint();
+  }
+}
+@media #{$small-tablet} {
+  .uf-demo-small-tablet {
+    @include uf-current-breakpoint();
+  }
+}
+@media #{$not-desktop} {
+  .uf-demo-not-desktop {
+    @include uf-current-breakpoint();
+  }
+}
+@media #{$desktop} {
+  .uf-demo-desktop {
+    @include uf-current-breakpoint();
+  }
+}
+

data/app/controllers/undercase/application_controller.rb

@@ -1,4 +1,5 @@
 module Undercase
   class ApplicationController < ActionController::Base
+    http_basic_authenticate_with :name => "casebook", :password => "casebook", realm: "Undercase" unless %w(development test).include?(ENV['RACK_ENV'] || ENV['RAILS_ENV'])
   end
 end

data/app/inputs/date_picker_input.rb

@@ -19,7 +19,7 @@ class DatePickerInput < SimpleForm::Inputs::StringInput
     options[:hint_html] ||= {}
     options[:hint_html].merge!(id: hint_id, class: 'hidden')
     hint_text = 'Date (format: MM/DD/YYYY)'
-    if options[:input_html]["disable-future-dates"]
+    if options[:input_html] && options[:input_html]["disable-future-dates"]
       hint_text << '. You cannot select a future date.'
     end
     hint_text
@@ -60,7 +60,7 @@ class DatePickerInput < SimpleForm::Inputs::StringInput
   end
 
   def date_id
-    "#{object.class.name.underscore}_#{object_id}_datepicker"
+    @date_id ||= SecureRandom.uuid
   end
 
   def date_value

data/app/views/layouts/undercase/application.html.haml

@@ -21,7 +21,7 @@
     %nav.uf-nav.hide-on-modal.row
       .container
         %ul.uf-nav-list.one.whole
-          %li= link_to "Getting Started!", undercase.root_path, class: ("current" if params[:category].blank?)
+          %li= link_to "Getting Started", undercase.root_path, class: ("current" if params[:category].blank?)
           %li= link_to "Grids/Spacing", undercase.category_path(category: "grids"), class: ("current" if params[:category] == "grids")
           %li= link_to "Colors", undercase.category_path(category: "colors"), class: ("current" if params[:category] == "colors")
           %li= link_to "Borders", undercase.category_path(category: "borders"), class: ("current" if params[:category] == "borders")
@@ -41,6 +41,11 @@
       .row
         .one.whole.pad-left.pad-right.double-pad-bottom
           %h1.uf-h1= yield :title
+          - if params[:category].blank?
+            %p.uc-card__header__corner-links
+              =link_to "/undercase-#{Undercase::VERSION}.tar.gz", class: 'cc-button-flat-green-primary'  do
+                %span.uc-icon-download.half-pad-right
+                %span Download
       .row
         .two.twelfths.double-pad-bottom
           %ul.uf-subnav

data/app/views/undercase/patterns/_definition_list.html.haml

@@ -0,0 +1,9 @@
+%dl.uc-list-paired
+  %dt Term
+  %dd Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  %dt Lorem ipsum dolor sit amet, consectetur
+  %dd Definition
+  %dt Term
+  %dd Definition
+  %dt Term
+  %dd Definition

data/app/views/undercase/patterns/_filters.html.haml

@@ -208,3 +208,16 @@
                   .uc-filter-facets__facet
                     .uc-filter-facets__facet__left-col--no-subfacets
                       %a.blue-link-clean{href: '#'} Add More Regions/Counties
+          %section{ data: { presents: 'Filter' } }
+            .uc-filter__header
+              %a.uc-filter-clear.blue-link-clean.js-clear-filters-link{href: '#'} Clear
+              %h4.uc-filter-heading
+                Filter By
+                %span.uc-filter-heading__category Kittens
+            .uc-filter__body
+              - kitten_list = ['kitten 1', 'kitten 2', 'kitten with a very long and awesome name']
+              = f.input :kitten_list, as: :check_boxes, label: false,
+                collection: kitten_list,
+                checked: 'kitten 1',
+                input_html: { class: 'js-filter__facet' },
+                wrapper_html: { class: 'uc-filter__collection' }

data/app/views/undercase/patterns/_filters_show_only.html.haml

@@ -47,6 +47,11 @@
                           label: 'Child & Family Team Meeting',
                           input_html: { class: 'js-filter__sub-facet' },
                           wrapper_html: { class: 'uc-form-field--boolean' }
+                      - sub_things = ['Thing 1', 'Thing 2', 'Thing 3']
+                      = f.input :sub_things, as: :check_boxes, label: false,
+                        collection: sub_things,
+                        wrapper_html: { class: 'uc-filter__collection--show-only' },
+                        input_html: {class: 'js-filter__sub-facet'}
                 %li.js-filter
                   .uc-filter-facets__facet
                     = f.input :file_uploads,

data/app/views/undercase/patterns/_grids_basic.html.haml

@@ -0,0 +1,39 @@
+%h1 Three Column
+.uf-demo-set
+  .row.uf-demo-container
+    .two.twelfths.pad-left
+      .uf-demo-object
+        %p .two.twelfths
+        %p .pad-left
+    .eight.twelfths.pad-left.pad-right
+      .uf-demo-object
+        %p .eight.twelfths
+        %p .pad-left.pad-right
+    .two.twelfths.pad-right
+      .uf-demo-object
+        %p .two.twelfths
+        %p .pad-right
+
+%h1 Two Column Two/Ten Split
+.uf-demo-set
+  .row.uf-demo-container
+    .two.twelfths.pad-left
+      .uf-demo-object
+        %p .two.twelfths
+        %p .pad-left
+    .ten.twelfths.pad-left.pad-right
+      .uf-demo-object
+        %p .ten.twelfths
+        %p .pad-left.pad-right
+
+%h1 Dashboard Grid
+.uf-demo-set
+  .row.uf-demo-container
+    .eight.twelfths.pad-left.pad-right
+      .uf-demo-object
+        %p .eight.twelfths
+        %p .pad-left.pad-right
+    .four.twelfths.pad-right
+      .uf-demo-object
+        %p .four.twelfths
+        %p .pad-right

data/app/views/undercase/patterns/_grids_element_spacing.html.haml

@@ -0,0 +1,94 @@
+%h1 Gaps and Padding
+%p .padded adds padding in all directions:
+.row.uf-demo-container
+  .padded
+    .uf-demo-object
+      %p .padded
+
+%p.double-gap-top .gapped adds margin in all directions:
+.row.uf-demo-margins
+  .gapped
+    .uf-demo-object
+      %p .gapped
+
+%p.double-gap-top .double-padded and .double-gapped gives twice the padding or margin of the default classes:
+.row
+  .one.half.uf-demo-container
+    .double-padded
+      .uf-demo-object
+        %p .double-padded
+  .one-half.uf-demo-margins
+    .double-gapped
+      .uf-demo-object
+        %p .double-gapped
+
+%p.double-gap-top .one-and-a-half-padded and .one-and-a-half-gapped gives 1.5x the padding or margin of the default classes:
+.row
+  .one.half.uf-demo-container
+    .one-and-a-half-padded
+      .uf-demo-object
+        %p .one-and-a-half-padded
+  .one-half.uf-demo-margins
+    .one-and-a-half-gapped
+      .uf-demo-object
+        %p .one-and-a-half-gapped
+
+%p.double-gap-top .half-padded and .half-gapped gives half the padding or margin of the default classes:
+.row
+  .one.half.uf-demo-container
+    .half-padded
+      .uf-demo-object
+        %p .half-padded
+  .one-half.uf-demo-margins
+    .half-gapped
+      .uf-demo-object
+        %p .half-gapped
+
+%h1.double-gap-top Gap/Padding direction
+%p Can be applied with both .gap-* and .pad-* classes, including size (.double-pad-right, for example). .pad-* for illustration:
+.row
+  .one.fourth
+    %p To the top:
+    .uf-demo-set
+      .uf-demo-container
+        .pad-top
+          .uf-demo-object
+            %p .pad-top
+
+  .one.fourth
+    %p To the right:
+    .uf-demo-set
+      .uf-demo-container
+        .pad-right
+          .uf-demo-object
+            %p .pad-right
+
+  .one.fourth
+    %p To the bottom:
+    .uf-demo-set
+      .uf-demo-container
+        .pad-bottom
+          .uf-demo-object
+            %p .pad-bottom
+
+  .one.fourth
+    %p To the left:
+    .uf-demo-set
+      .uf-demo-container
+        .pad-left
+          .uf-demo-object
+            %p .pad-left
+
+%p.double-gap-top Gap and Pad can be combined on an element. Typically on Casebook, padding is used for left/right while margin is used for top/bottom, such as this example:
+.row
+  .uf-demo-margins
+    .uf-demo-container
+      .double-gap-top.double-gap-bottom.pad-left.pad-right
+        .uf-demo-object
+          %p .double-gap-top.double-gap-bottom.pad-left.pad-right
+
+%h1.double-gap-top Paragraphs gapped
+.uc-paragraphs--gapped
+  %p Candy jelly beans brownie. Donut apple pie brownie jelly beans marzipan pastry. Cake pudding cake chocolate bar.
+  %p Sweet roll oat cake sesame snaps marshmallow gingerbread pastry. Cheesecake powder cotton candy cake marshmallow jelly gingerbread sugar plum. Pie dessert jujubes. Powder ice cream gingerbread lollipop caramels dessert lemon drops croissant.
+  %p Topping tart jelly applicake croissant powder brownie. Chupa chups sweet roll cake fruitcake cookie soufflé. Jelly-o soufflé muffin.