dvl-core 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 80985cd1efd94694ea77912db8b906c7a6dbfc4e
-  data.tar.gz: e21f200cff904493c23208253b11e59d46570b21
+  metadata.gz: 9d483c9ce83bd8cc33e07fbc1f6145da935056ec
+  data.tar.gz: 0faea3855a6d151647eb907766ab85cc0ada5526
 SHA512:
-  metadata.gz: 5a61a459c89b6e62c776eb0f44a6e33d0c81aa7a6846365f6c80d3322e7dca75b5632282a95e2871599a919854b6933220b70937f9ee2bafd2b1d6ee8d644839
-  data.tar.gz: c24eb2160c50870a5e5848dee5df9ee089edb23f28985165dc61854a4e1394d888c7a14b15f51a27724037a49f43befb4b4f59c4b397c324230a3b6a0064f7d6
+  metadata.gz: a28c487f354160e0378f1055575ac02a5ed004304d3a94433fb4ae0c842525319c474cf3a7d0b51f3eb015a6b10f14b7f791587bc1cec17a3c9cbb4c576c9992
+  data.tar.gz: 6efb14e5f11365fd9632aec7c3c3758a406fb4555b5a9b7ea4aa8c193dd8c06aa1fe137cfd701e7500d25b88d3a927410bc100231e42efc060a9f43146cc45ba

data/README.md

@@ -19,7 +19,19 @@ gem 'dvl-core'
 
 ## Screenshots
 
-![all_760](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/all_760.png)
+### Core
+
+![core_760](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/core_760.png)
+
+### Footer
+
+![footer](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/footer.png)
+
+### Flashes
+
+![flash_error](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/flash_error.png)
+![flash_success](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/flash_success.png)
+![flash_info](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/flash_info.png)
 
 ## Development
 

data/config/locales/en.yml

@@ -0,0 +1,8 @@
+en:
+  dvl_core:
+    footer:
+      about: " is an application by <a href='http://www.dobt.co' target='_blank'>The Department of Better Technology</a>."
+      status: Service Status
+      legal: Legal
+      help: Get Help
+      contact: Contact Us

data/dvl-core.gemspec

@@ -25,6 +25,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'poltergeist', '1.5.1'
   s.add_development_dependency 'rerun', '0.10.0'
   s.add_development_dependency 'rspec', '3.1.0'
+  s.add_development_dependency 'rspec-html-matchers', '0.6.1'
   s.add_development_dependency 'sinatra', '1.4.5'
   s.add_development_dependency 'sinatra-assetpack', '0.3.3'
 end

data/lib/dvl/core/components/flashes.rb

@@ -0,0 +1,13 @@
+class Dvl::Core::Components::Flashes < Erector::Widget
+  needs :flash
+
+  def content
+    @flash.select { |k, v| k.to_s.in?(%w(success error info)) && v.present? }.each do |k, v|
+      div(class: "flash flash_#{k}") {
+        a.flash_close '&times;'.html_safe
+        span text v
+      }
+    end
+  end
+end
+

data/lib/dvl/core/components/footer.rb

@@ -0,0 +1,21 @@
+class Dvl::Core::Components::Footer < Erector::Widget
+  needs :application_name
+
+  def content
+    footer.footer {
+      div.footer_inner {
+        span {
+          text @application_name
+          rawtext t('dvl_core.footer.about')
+        }
+
+        ul {
+          li { a t('dvl_core.footer.status'), href: 'http://status.dobt.co', target: '_blank' }
+          li { a t('dvl_core.footer.legal'), href: 'https://dashboard.dobt.co/terms', target: '_blank' }
+          li { a t('dvl_core.footer.help'), href: 'http://help.dobt.co', target: '_blank' }
+          li { a t('dvl_core.footer.contact'), href: 'mailto:support@dobt.co' }
+        }
+      }
+    }
+  end
+end

data/lib/dvl/core/version.rb

@@ -1,5 +1,5 @@
 module Dvl
   module Core
-    VERSION = '0.0.3'
+    VERSION = '0.0.4'
   end
 end

data/lib/dvl/core.rb

@@ -9,3 +9,13 @@ if defined?(Rails)
     end
   end
 end
+
+module Dvl
+  module Core
+    module Components
+    end
+  end
+end
+
+require 'dvl/core/components/footer'
+require 'dvl/core/components/flashes'

data/preview/app.rb

@@ -3,36 +3,43 @@ require 'sinatra/assetpack'
 require 'active_support/all'
 require 'erector'
 require 'dvl/core'
+require 'yaml'
 
 module AppHelpers
   def docs(name, &block)
     div.section_header name, id: name.downcase
     yield
   end
-end
-
-Erector::HTMLWidget.send(:include, AppHelpers)
 
-class App < Sinatra::Base
+  def translations
+    @translations ||= YAML::load(File.read("#{File.dirname(__FILE__)}/../config/locales/en.yml"))['en']
+  end
 
-  set :root, File.dirname(__FILE__)
-  set :scss, { load_paths: [ "#{self.root}/../vendor/assets/stylesheets/dvl" ] }
+  def t(key)
+    pieces = key.split('.')
+    found = translations.dup
 
-  register Sinatra::AssetPack
+    while pieces.length > 0
+      found = found[pieces.shift] || {}
+    end
 
-  assets do
-    serve '/css', from: '../vendor/assets/stylesheets'
-    serve '/js', from: '../vendor/assets/javascripts'
+    found
   end
+end
 
-  get '/' do
-    Erector.inline {
+Erector::HTMLWidget.send(:include, AppHelpers)
+
+module Views
+  class Base < Erector::Widget
+    def content
       rawtext '<!doctype html>'
       html {
         head {
           link href: '//fonts.googleapis.com/css?family=Open+Sans:400,300,700,600', rel: 'stylesheet', type: 'text/css'
 
           link href: '/css/dvl/core.css', rel: 'stylesheet', type: 'text/css', media: 'all'
+          link href: '/css/dvl/components/flashes.css', rel: 'stylesheet', type: 'text/css', media: 'all'
+          link href: '/css/dvl/components/footer.css', rel: 'stylesheet', type: 'text/css', media: 'all'
           style(type: 'text/css') {
             rawtext %{
               body {
@@ -50,215 +57,271 @@ class App < Sinatra::Base
           }
         }
         body {
-          docs 'Buttons' do
-            a.button 'Yo!'
-            text ' '
-            a.button.info 'Info'
-            text ' '
-            a.button.primary 'Primary'
-            text ' '
-            a.button.success 'Success'
-            text ' '
-            a.button.white 'White'
-            text ' '
-            a.button_uppercase 'Uppercase'
-          end
-
-          docs 'Code' do
-            pre %{<p>This is some awesome code</p>}
-            p %{This is a paragraph with <code>code</code>.}.html_safe
-          end
-
-          docs 'Dropdowns' do
-            span.dropdown {
-              a.dropdown_toggle 'Click me',
-                                'data-toggle' => 'dropdown'
-              div.dropdown_menu {
-                ul.dropdown_body {
-                  li {
-                    a 'Hey!'
-                  }
-                  li {
-                    a 'No!'
-                  }
-                }
-              }
-            }
-          end
-
-          docs 'Forms' do
-            form {
-              input type: 'text'
-              label.checkbox {
-                input type: 'checkbox'
-                text 'Foo'
-              }
-              div.input_sub {
-                label.checkbox {
-                  input type: 'checkbox'
-                  text 'This is a sub-option of foo.'
-                }
+          main
+
+          script src: '//code.jquery.com/jquery-1.11.1.min.js'
+          script src: '/js/dvl/core/modals.js'
+          script src: '/js/dvl/core/dropdowns.js'
+          script src: '/js/dvl/core/tooltips.js'
+          script src: '/js/dvl/core/buttons.js'
+          script src: '/js/dvl/components/flashes.js'
+          script %{
+            $('[data-toggle="tooltip"]').tooltip()
+          }.html_safe
+        }
+      }
+    end
+  end
+
+  class Home < Base
+    def main
+      docs 'Buttons' do
+        a.button 'Yo!'
+        text ' '
+        a.button.info 'Info'
+        text ' '
+        a.button.primary 'Primary'
+        text ' '
+        a.button.success 'Success'
+        text ' '
+        a.button.white 'White'
+        text ' '
+        a.button_uppercase 'Uppercase'
+      end
+
+      docs 'Code' do
+        pre %{<p>This is some awesome code</p>}
+        p %{This is a paragraph with <code>code</code>.}.html_safe
+      end
+
+      docs 'Dropdowns' do
+        span.dropdown {
+          a.dropdown_toggle 'Click me',
+                            'data-toggle' => 'dropdown'
+          div.dropdown_menu {
+            ul.dropdown_body {
+              li {
+                a 'Hey!'
               }
-              div.form_actions {
-                button.button.primary 'Submit'
+              li {
+                a 'No!'
               }
             }
-          end
+          }
+        }
+      end
 
-          docs 'Grid' do
-            div.grid {
-              div.item.six_columns 'six_columns'
-              div.item.six_columns 'six_columns'
-            }
-            div.grid.gutter_none {
-              div.item.three_columns 'three_columns (gutter_none)'
-              div.item.three_columns 'three_columns (gutter_none)'
-              div.item.three_columns 'three_columns (gutter_none)'
-              div.item.three_columns 'three_columns (gutter_none)'
-            }
-          end
-
-          docs 'Labels' do
-            span.label.label_error 'Error'
-            text ' '
-            span.label.label_success 'Success'
-            text ' '
-            span.label.label_info 'Info'
-            text ' '
-            span.label.label_warning 'Warning'
-          end
-
-          docs 'Links' do
-            a.uppercase 'Uppercase'
-            text ' '
-            a.smallbold 'Smallbold'
-          end
-
-          docs 'Lists' do
-            ul {
-              li 'This'
-              li 'is a'
-              li 'list!'
-            }
-          end
-
-          docs 'Modals' do
-            a 'Open modal', 'data-toggle' => 'modal', href: '#modal'
-            div(class: 'modal', tabindex: '-1', id: 'modal') {
-              div.modal_dialog {
-                div.modal_content {
-                  div.modal_header {
-                    a.close '&times;'.html_safe, 'data-dismiss' => 'modal'
-                    h3 'Awesome modal'.html_safe
-                  }
-
-                  div.modal_body {
-                    text 'This is the modal body!'
-                  }
-
-                  div.modal_footer {
-                    text 'This is the modal footer!'
-                  }
-                }
-              }
+      docs 'Forms' do
+        form {
+          input type: 'text'
+          label.checkbox {
+            input type: 'checkbox'
+            text 'Foo'
+          }
+          div.input_sub {
+            label.checkbox {
+              input type: 'checkbox'
+              text 'This is a sub-option of foo.'
             }
-          end
-
-          docs 'Pagination' do
-            div(class: 'pagination-wrapper') {
-              ul {
-                li { a '‹' }
-                li { a '1' }
-                li { span '2' }
-                li { a '3' }
-                li { a '›' }
+          }
+          div.form_actions {
+            button.button.primary 'Submit'
+          }
+        }
+      end
+
+      docs 'Grid' do
+        div.grid {
+          div.item.six_columns 'six_columns'
+          div.item.six_columns 'six_columns'
+        }
+        div.grid.gutter_none {
+          div.item.three_columns 'three_columns (gutter_none)'
+          div.item.three_columns 'three_columns (gutter_none)'
+          div.item.three_columns 'three_columns (gutter_none)'
+          div.item.three_columns 'three_columns (gutter_none)'
+        }
+      end
+
+      docs 'Labels' do
+        span.label.label_error 'Error'
+        text ' '
+        span.label.label_success 'Success'
+        text ' '
+        span.label.label_info 'Info'
+        text ' '
+        span.label.label_warning 'Warning'
+      end
+
+      docs 'Links' do
+        a.uppercase 'Uppercase'
+        text ' '
+        a.smallbold 'Smallbold'
+      end
+
+      docs 'Lists' do
+        ul {
+          li 'This'
+          li 'is a'
+          li 'list!'
+        }
+      end
+
+      docs 'Modals' do
+        a 'Open modal', 'data-toggle' => 'modal', href: '#modal'
+        div(class: 'modal', tabindex: '-1', id: 'modal') {
+          div.modal_dialog {
+            div.modal_content {
+              div.modal_header {
+                a.close '&times;'.html_safe, 'data-dismiss' => 'modal'
+                h3 'Awesome modal'.html_safe
               }
-            }
-          end
 
-          docs 'Progress' do
-            div.progress {
-              div.progress_inner(style: "width: 30%") {
-                text '30%'
+              div.modal_body {
+                text 'This is the modal body!'
               }
-            }
-          end
-
-          docs 'Sidebar' do
-            div.sidebar_box {
-              ul.sidebar_data {
-                li {
-                  div.sidebar_data_icon {
-                    i '✓'
-                  }
-                  div.sidebar_data_text {
-                    div.sidebar_data_label 'Label'
-                    div.sidebar_data_value 'Value'
-                    div.sidebar_data_details 'Details'
-                  }
-                }
+
+              div.modal_footer {
+                text 'This is the modal footer!'
               }
             }
-          end
-
-          docs 'Tables' do
-            table.stripes {
-              thead {
-                tr {
-                  th 'ID'
-                  th 'Name'
-                }
+          }
+        }
+      end
+
+      docs 'Pagination' do
+        div(class: 'pagination-wrapper') {
+          ul {
+            li { a '‹' }
+            li { a '1' }
+            li { span '2' }
+            li { a '3' }
+            li { a '›' }
+          }
+        }
+      end
+
+      docs 'Progress' do
+        div.progress {
+          div.progress_inner(style: "width: 30%") {
+            text '30%'
+          }
+        }
+      end
+
+      docs 'Sidebar' do
+        div.sidebar_box {
+          ul.sidebar_data {
+            li {
+              div.sidebar_data_icon {
+                i '✓'
               }
-              tbody {
-                tr {
-                  td '1'
-                  td 'Bob'
-                }
-                tr {
-                  td '2'
-                  td 'Job'
-                }
+              div.sidebar_data_text {
+                div.sidebar_data_label 'Label'
+                div.sidebar_data_value 'Value'
+                div.sidebar_data_details 'Details'
               }
             }
-          end
-
-          docs 'Tooltips' do
-            %w(top right bottom left).each do |x|
-              a x.capitalize,
-                'data-toggle' => 'tooltip',
-                'data-placement' => x,
-                'data-container' => 'body',
-                title: "Tooltip on the #{x}!"
-              text ' '
-            end
-          end
-
-          docs 'Typography' do
-            h1 'Heading 1'
-            h2 'Heading 2'
-            h3 'Heading 3'
-            h4 'Heading 4'
-            h5 'Heading 5'
-            h6 'Heading 6'
-            p 'Lorem ipsum.'
-
-            p.microcopy {
-              text 'This is some awesome .microcopy.'
-              a.microcopy_action 'Microcopy action'
+          }
+        }
+      end
+
+      docs 'Tables' do
+        table {
+          thead {
+            tr {
+              th 'ID'
+              th 'Name'
+            }
+          }
+          tbody {
+            tr {
+              td '1'
+              td 'Bob'
             }
-          end
+            tr {
+              td '2'
+              td 'Job'
+            }
+          }
+        }
+      end
 
-          script src: '//code.jquery.com/jquery-1.11.1.min.js'
-          script src: '/js/dvl/core/modals.js'
-          script src: '/js/dvl/core/dropdowns.js'
-          script src: '/js/dvl/core/tooltips.js'
-          script src: '/js/dvl/core/buttons.js'
-          script %{
-            $('[data-toggle="tooltip"]').tooltip()
-          }.html_safe
+      docs 'Tooltips' do
+        %w(top right bottom left).each do |x|
+          a x.capitalize,
+            'data-toggle' => 'tooltip',
+            'data-placement' => x,
+            'data-container' => 'body',
+            title: "Tooltip on the #{x}!"
+          text ' '
+        end
+      end
+
+      docs 'Typography' do
+        h1 'Heading 1'
+        h2 'Heading 2'
+        h3 'Heading 3'
+        h4 'Heading 4'
+        h5 'Heading 5'
+        h6 'Heading 6'
+        p 'Lorem ipsum.'
+
+        p.microcopy {
+          text 'This is some awesome .microcopy.'
+          a.microcopy_action 'Microcopy action'
+        }
+      end
+    end
+  end
+
+  class Flashes < Base
+    def main
+      ul {
+        li {
+          a 'Success', href: 'javascript:DvlFlash("success", "You did it!")'
+        }
+        li {
+          a 'Info', href: 'javascript:DvlFlash("info", "An informational message...")'
+        }
+        li {
+          a 'Error', href: 'javascript:DvlFlash("error", "Oh no, an error occured!")'
         }
       }
-    }.to_html
+    end
+  end
+
+  class Footer < Base
+    def main
+      br
+      br
+      widget Dvl::Core::Components::Footer.new(application_name: 'dvl-core')
+    end
+  end
+end
+
+class App < Sinatra::Base
+
+  set :root, File.dirname(__FILE__)
+  set :scss, { load_paths: [ "#{self.root}/../vendor/assets/stylesheets", "#{self.root}/../vendor/assets/stylesheets/dvl" ] }
+
+  register Sinatra::AssetPack
+
+  assets do
+    serve '/css', from: '../vendor/assets/stylesheets'
+    serve '/js', from: '../vendor/assets/javascripts'
+  end
+
+  get '/' do
+    Views::Home.new.to_html
+  end
+
+  get '/flashes' do
+    Views::Flashes.new.to_html
+  end
+
+  get '/footer' do
+    Views::Footer.new.to_html
   end
 
   run! if app_file == $0

data/spec/dvl_flashes_spec.rb

@@ -0,0 +1,35 @@
+require 'spec_helper'
+
+describe 'Flashes' do
+  describe 'Integration', type: :feature, js: true do
+    it 'Flashes properly' do
+      visit '/'
+      page.execute_script "DvlFlash('error', 'Yeah!')"
+      expect(page).to have_selector '.flash.flash_error', text: 'Yeah!'
+      sleep 4
+      expect(page).to_not have_selector '.flash.flash_error', text: 'Yeah!'
+    end
+  end
+
+  describe Dvl::Core::Components::Flashes do
+    let!(:success_html) do
+      described_class.new(
+        flash: { 'success' => 'Yeah!' }
+      ).to_html
+    end
+
+    let!(:error_html) do
+      described_class.new(
+        flash: { 'error' => 'No!' }
+      ).to_html
+    end
+
+    it 'renders the proper html' do
+      expect(success_html).to have_tag('div.flash_success', content: 'Yeah!')
+    end
+
+    it 'renders the proper html' do
+      expect(error_html).to have_tag('div.flash_error', content: 'No!')
+    end
+  end
+end

data/spec/main_spec.rb

@@ -0,0 +1,14 @@
+require 'spec_helper'
+
+describe 'Main' do
+  describe 'Screenshots', type: :feature, js: true do
+    take_screenshot '/', 'core_1200', 1200, 1000, full: true
+    take_screenshot '/', 'core_760', 760, 1000, full: true
+    take_screenshot '/', 'core_400', 400, 1000, full: true
+    take_screenshot '/footer', 'footer', 1000, 400
+    take_flash_screenshot 'Error', 'flash_error'
+    take_flash_screenshot 'Success', 'flash_success'
+    take_flash_screenshot 'Info', 'flash_info'
+    take_flash_screenshot 'Error', 'flash_error_mobile', 320, 150
+  end
+end

data/spec/{dvl_core_spec.rb → spec_helper.rb}

@@ -1,5 +1,6 @@
 require 'capybara/rspec'
 require 'capybara/poltergeist'
+require 'rspec-html-matchers'
 require 'active_support/all'
 require 'erector'
 require 'dvl/core'
@@ -21,10 +22,17 @@ def take_screenshot(path, name, res_x = 900, res_y = 150, opts = {})
   end
 end
 
-describe Dvl::Core do
-  describe 'Screenshots', type: :feature, js: true do
-    take_screenshot '/', 'all_1200', 1200, 1000, full: true
-    take_screenshot '/', 'all_760', 760, 1000, full: true
-    take_screenshot '/', 'all_400', 400, 1000, full: true
+def take_flash_screenshot(type, name, res_x = 900, res_y = 150, opts = {})
+  describe "taking flash screenshot: #{name}.png" do
+    before do
+      page.driver.resize(res_x, res_y)
+    end
+
+    it 'works' do
+      visit '/flashes'
+      click_link type
+      page.save_screenshot "screenshots/#{name}.png", opts
+    end
   end
 end
+

data/vendor/assets/javascripts/dvl/components/flashes.coffee

@@ -0,0 +1,48 @@
+TRANSITION_LENGTH = 300
+FLASH_ALERT_LENGTH = 3500
+
+# Grab alerts rendered by the server and apply our behavior to them
+$ ->
+  $('.flash').each ->
+    DvlFlash $(@)
+
+window.DvlFlash = (alertType, message, lengthInMilliseconds) ->
+  # Initialize from an existing alert
+  if alertType instanceof jQuery
+    $alert = alertType
+  else
+    $alert = $("""
+      <div class="flash flash_#{alertType}">
+        <a class='flash_close'>&times;</a>
+        <span>#{message}</span>
+      </div>
+    """).appendTo("body")
+
+  setTimeout ->
+    $alert.addClass 'is_visible'
+  , 0
+
+  mousedOver = undefined
+  timeoutExpired = undefined
+
+  hide = ->
+    $alert.removeClass 'is_visible'
+    setTimeout ->
+      $alert.remove()
+    , TRANSITION_LENGTH
+
+  setTimeout ->
+    hide() unless mousedOver
+    timeoutExpired = true
+  , lengthInMilliseconds || FLASH_ALERT_LENGTH
+
+  $alert.on 'mouseover', ->
+    mousedOver = true
+
+    $alert.one 'mouseout', ->
+      mousedOver = undefined
+      hide() if timeoutExpired
+
+  $alert.on 'click', '.flash_close', ->
+    mousedOver = undefined
+    hide()

data/vendor/assets/stylesheets/dvl/components/flashes.scss

@@ -0,0 +1,66 @@
+@import 'dvl/core/includes';
+
+$dvlFlashZIndex: 1031 !default; // above modal
+$dvlFlashDefaultColor: #2886A8 !default;
+
+.flash {
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translateY(-8rem);
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.15s ease-out;
+  width: 95%;
+  margin: 1rem 2.5% 0;
+  z-index: $dvlFlashZIndex;
+  background: $dvlFlashDefaultColor;
+  border-radius: $radius;
+  padding: 0.75rem 1rem;
+  font-size: 0.9rem;
+  color: $white;
+  box-shadow: 0 1px 0 rgba(#000,0.2);
+  line-height: 1rem;
+  span {
+    display: inline-block;
+    max-width: 95%;
+  }
+  a {
+    text-decoration: underline;
+    color: $white;
+  }
+  &.is_visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .flash_close {
+    position: absolute;
+    line-height: 2.5rem;
+    text-decoration: none;
+    right: 1rem;
+    top: 0;
+    font-weight: bold;
+    color: $lightGray;
+    &:hover {
+      color: $white;
+      text-decoration: none;
+    }
+  }
+}
+
+// Colors
+
+.flash_error {
+  background: $errorColor;
+}
+
+.flash_success {
+  background: $successColor;
+}
+
+@media only screen and (min-width: 768px) {
+  .flash {
+    width: 50rem;
+    margin-left: -25rem;
+    left: 50%;
+  }
+}

data/vendor/assets/stylesheets/dvl/components/footer.scss

@@ -0,0 +1,16 @@
+@import "dvl/core/includes";
+
+.footer {
+  font-size: 0.85rem;
+  color: $darkGray;
+  padding: 1rem 0;
+  line-height: 22px;
+  border-top: 1px solid #f2f2f2;
+  li {
+    display: inline;
+    margin-right: 0.75rem;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

data/vendor/assets/stylesheets/dvl/core/dropdowns.scss

@@ -46,7 +46,7 @@ span.dropdown {
 // Links
 .dropdown_body {
   max-height: 350px;
-  overflow: scroll;
+  overflow: auto;
   > li {
     > a,
     > span {

data/vendor/assets/stylesheets/dvl/core/tables.scss

@@ -116,7 +116,4 @@ table {
       }
     }
   }
-  &.stripes tbody > tr:nth-child(even) {
-    background-color: $lightestGray;
-  }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dvl-core
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Adam Becker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-15 00:00:00.000000000 Z
+date: 2014-11-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -122,6 +122,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 3.1.0
+- !ruby/object:Gem::Dependency
+  name: rspec-html-matchers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.6.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.6.1
 - !ruby/object:Gem::Dependency
   name: sinatra
   requirement: !ruby/object:Gem::Requirement
@@ -161,20 +175,28 @@ files:
 - Gemfile
 - README.md
 - circle.yml
+- config/locales/en.yml
 - dvl-core.gemspec
 - lib/dvl/core.rb
+- lib/dvl/core/components/flashes.rb
+- lib/dvl/core/components/footer.rb
 - lib/dvl/core/version.rb
 - preview/app.rb
 - script/bootstrap
 - script/cibuild
 - script/preview
 - script/release
-- spec/dvl_core_spec.rb
+- spec/dvl_flashes_spec.rb
+- spec/main_spec.rb
+- spec/spec_helper.rb
+- vendor/assets/javascripts/dvl/components/flashes.coffee
 - vendor/assets/javascripts/dvl/core.js
 - vendor/assets/javascripts/dvl/core/buttons.js
 - vendor/assets/javascripts/dvl/core/dropdowns.js
 - vendor/assets/javascripts/dvl/core/modals.js
 - vendor/assets/javascripts/dvl/core/tooltips.js
+- vendor/assets/stylesheets/dvl/components/flashes.scss
+- vendor/assets/stylesheets/dvl/components/footer.scss
 - vendor/assets/stylesheets/dvl/core.scss
 - vendor/assets/stylesheets/dvl/core/buttons.scss
 - vendor/assets/stylesheets/dvl/core/code.scss
@@ -222,5 +244,7 @@ signing_key:
 specification_version: 4
 summary: Base styles for the DOBT View Layer.
 test_files:
-- spec/dvl_core_spec.rb
+- spec/dvl_flashes_spec.rb
+- spec/main_spec.rb
+- spec/spec_helper.rb
 has_rdoc: