dvl-core 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9d483c9ce83bd8cc33e07fbc1f6145da935056ec
-  data.tar.gz: 0faea3855a6d151647eb907766ab85cc0ada5526
+  metadata.gz: cc2345f55387cc09bb5531eb7ae72c4ee9f45502
+  data.tar.gz: b17acdbf412ed3f8c82f094168d44fb7af2db5f3
 SHA512:
-  metadata.gz: a28c487f354160e0378f1055575ac02a5ed004304d3a94433fb4ae0c842525319c474cf3a7d0b51f3eb015a6b10f14b7f791587bc1cec17a3c9cbb4c576c9992
-  data.tar.gz: 6efb14e5f11365fd9632aec7c3c3758a406fb4555b5a9b7ea4aa8c193dd8c06aa1fe137cfd701e7500d25b88d3a927410bc100231e42efc060a9f43146cc45ba
+  metadata.gz: 6fda03c9527f401603ff5100b7e628b98adb33884578bf9018ce69484f176dbe28c07446ca400488e5eea976859de8154dc1c485da8f14d414a78a149c656293
+  data.tar.gz: 7fa211bbd00527a19a6e78222df7b268e44a887a92830c5a9b3a01766d7b63f4c34c293442032d7ac0306b50abdf6945bea979c40bf5399fa170f6f793b16322

data/README.md

@@ -33,6 +33,11 @@ gem 'dvl-core'
 ![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)
 
+### Modals
+
+![modal](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/modal.png)
+![confirm_modal](http://artifinder.herokuapp.com/gh/dobtco/dvl-core/x/artifacts/0/home/ubuntu/dvl-core/screenshots/confirm_modal.png)
+
 ## Development
 
 1. `script/bootstrap`

data/lib/dvl/{core/components → components}/flashes.rb

@@ -1,4 +1,4 @@
-class Dvl::Core::Components::Flashes < Erector::Widget
+class Dvl::Components::Flashes < Erector::Widget
   needs :flash
 
   def content

data/lib/dvl/{core/components → components}/footer.rb

@@ -1,4 +1,4 @@
-class Dvl::Core::Components::Footer < Erector::Widget
+class Dvl::Components::Footer < Erector::Widget
   needs :application_name
 
   def content

data/lib/dvl/components/modal.rb

@@ -0,0 +1,24 @@
+class Dvl::Components::Modal < Erector::Widget
+  needs :title,
+        id: nil,
+        html_opts: {}
+
+  def content
+    div(@html_opts.merge(class: "modal #{@html_opts[:class]}", tabindex: '-1', id: @id)) {
+      div.modal_dialog {
+        div.modal_content {
+          div.modal_header {
+            a.close '&times;'.html_safe, 'data-dismiss' => 'modal'
+            h3 @title.html_safe
+          }
+
+          modal_content
+        }
+      }
+    }
+  end
+
+  def modal_content
+    call_block
+  end
+end

data/lib/dvl/core/version.rb

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

data/lib/dvl/core.rb

@@ -1,21 +1,17 @@
 require 'dvl/core/version'
 
-if defined?(Rails)
-  module Dvl
-    module Core
+module Dvl
+  module Core
+    if defined?(Rails)
       class Engine < ::Rails::Engine
-        # nada
       end
     end
   end
-end
 
-module Dvl
-  module Core
-    module Components
-    end
+  module Components
   end
 end
 
-require 'dvl/core/components/footer'
-require 'dvl/core/components/flashes'
+require 'dvl/components/footer'
+require 'dvl/components/flashes'
+require 'dvl/components/modal'

data/preview/app.rb

@@ -169,24 +169,27 @@ module Views
 
       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 '×'.html_safe, 'data-dismiss' => 'modal'
-                h3 'Awesome modal'.html_safe
-              }
+        widget Dvl::Components::Modal.new(title: 'Awesome modal', id: 'modal') do
+          div.modal_body {
+            text 'This is the modal body!'
+          }
+        end
 
-              div.modal_body {
-                text 'This is the modal body!'
-              }
+        br
 
-              div.modal_footer {
-                text 'This is the modal footer!'
-              }
-            }
+        a 'Confirmation modal', 'data-toggle' => 'modal', href: '#confirmModal'
+        widget Dvl::Components::Modal.new(
+          title: 'Are you sure?',
+          id: 'confirmModal',
+          html_opts: { class: 'modal_confirm' }
+        ) do
+          div.modal_body {
+            text 'Are you sure?'
           }
-        }
+          div.modal_footer {
+            a.button.error 'OK'
+          }
+        end
       end
 
       docs 'Pagination' do
@@ -295,7 +298,7 @@ module Views
     def main
       br
       br
-      widget Dvl::Core::Components::Footer.new(application_name: 'dvl-core')
+      widget Dvl::Components::Footer.new(application_name: 'dvl-core')
     end
   end
 end

data/spec/dvl_flashes_spec.rb

@@ -11,7 +11,7 @@ describe 'Flashes' do
     end
   end
 
-  describe Dvl::Core::Components::Flashes do
+  describe Dvl::Components::Flashes do
     let!(:success_html) do
       described_class.new(
         flash: { 'success' => 'Yeah!' }

data/spec/main_spec.rb

@@ -2,13 +2,15 @@ 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
+    take_screenshot '/', 'core_1200', res_x: 1200, res_y: 1000, full: true
+    take_screenshot '/', 'core_760', res_x: 760, res_y: 1000, full: true
+    take_screenshot '/', 'core_400', res_x: 400, res_y: 1000, full: true
+    take_screenshot '/footer', 'footer', res_x: 1000, res_y: 200
+    take_screenshot '/flashes', 'flash_error', res_y: 100, before: Proc.new { click_link('Error') }
+    take_screenshot '/flashes', 'flash_success', res_y: 100, before: Proc.new { click_link('Success') }
+    take_screenshot '/flashes', 'flash_info', res_y: 100, before: Proc.new { click_link('Info') }
+    take_screenshot '/flashes', 'flash_error_mobile', res_x: 320, res_y: 100, before: Proc.new { click_link('Error') }
+    take_screenshot '/', 'modal', res_x: 1000, res_y: 250, before: Proc.new { click_link('Open modal') }
+    take_screenshot '/', 'confirm_modal', res_x: 1000, res_y: 250, before: Proc.new { click_link('Confirmation modal') }
   end
 end

data/spec/spec_helper.rb

@@ -9,30 +9,16 @@ require_relative '../preview/app'
 Capybara.app = App
 Capybara.javascript_driver = :poltergeist
 
-def take_screenshot(path, name, res_x = 900, res_y = 150, opts = {})
+def take_screenshot(path, name, opts = {})
   describe "taking screenshot: #{name}.png" do
     before do
-      page.driver.resize(res_x, res_y)
+      page.driver.resize(opts[:res_x] || 900, opts[:res_y] || 500)
     end
 
     it 'works' do
       visit path
-      page.save_screenshot "screenshots/#{name}.png", opts
+      self.instance_eval(&opts[:before]) if opts[:before]
+      page.save_screenshot "screenshots/#{name}.png", opts.slice(:full)
     end
   end
 end
-
-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/stylesheets/dvl/core/modals.scss

@@ -46,10 +46,23 @@
   position: relative;
   background-color: #fff;
   border: 1px solid rgba(#000,0.15);
-  border-radius: $radius * 2;
+  border-radius: $radius;
   background-clip: padding-box;
   // Remove focus outline from opened modal
   outline: 0;
+  box-shadow: 0 1px 3px rgba(#000,0.18);
+  animation: modal_show 0.25s ease-out;
+}
+
+@keyframes modal_show {
+  0% {
+    opacity: 0;
+    transform: scale(0.93);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 // Modal background
@@ -60,11 +73,15 @@
   bottom: 0;
   left: 0;
   background-color: #000;
-  // Fade for backdrop
-  &.fade {
+  opacity: 0.5;
+  animation: fade_half 170ms ease-in;
+}
+
+@keyframes fade_half {
+  0% {
     opacity: 0;
   }
-  &.in {
+  100% {
     opacity: 0.5;
   }
 }
@@ -75,29 +92,26 @@
   padding: 1rem 2rem;
   background-color: #f0f0f0;
   margin-bottom: 1rem;
-  @include border_top_radius(($radius * 2) - 1);
   position: relative;
+  padding: 0.5rem 1.75rem;
   h3 {
-    font-size: 1.6rem;
-    font-weight: normal;
+    font-size: 1.35rem;
+    font-weight: 600;
     margin: 0;
-    color: #333;
+    color: #444;
+    line-height: 2rem;
   }
   .close {
-    position: absolute;
-    top: -9px;
-    right: -9px;
-    color: #fff;
-    background-color: $darkestGray;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
+    float: right;
+    color: rgba(#000,0.6);
     text-decoration: none;
-    text-align: center;
-    font-size: 20px;
-    line-height: 24px;
+    text-align: right;
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 2rem;
+    width: 2rem;
     &:hover {
-      background-color: #4d4d4d;
+      color: rgba(#000,0.75);
     }
   }
 }
@@ -149,6 +163,12 @@
       color: #fff;
     }
   }
+  .close {
+    color: rgba(#fff,0.8);
+    &:hover {
+      color: rgba(#fff,0.92);
+    }
+  }
   .modal_body p {
     font-size: 1.1rem;
     margin-bottom: 0;

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

@@ -60,15 +60,13 @@ ul {
   margin: 0 0 1rem;
 }
 
-dl {
-  dt {
-    color: $black;
-    font-weight: 700;
-  }
+dt {
+  color: #888;
+  font-size: 0.9rem;
+}
 
-  dd {
-    margin: 0 0 1rem;
-  }
+dd {
+  margin: 0 0 1.5rem;
 }
 
 em,

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dvl-core
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Adam Becker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-23 00:00:00.000000000 Z
+date: 2014-11-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -177,9 +177,10 @@ files:
 - circle.yml
 - config/locales/en.yml
 - dvl-core.gemspec
+- lib/dvl/components/flashes.rb
+- lib/dvl/components/footer.rb
+- lib/dvl/components/modal.rb
 - 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