activeadmin_blaze_theme 0.1.6 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fa56215f4edbaa4ee8628bfdbd9f34676bd29241
-  data.tar.gz: d9a2005e6ae70f401128a226a92efe10cbc4936a
+  metadata.gz: fc7aee2eeb76864ffe690c64e5ebb35467c45bd7
+  data.tar.gz: ae25d8209466f127c2c45ad849f5f85e152fdf2d
 SHA512:
-  metadata.gz: cb7fe4496339b8d5e72c4d7f445bbbbff68185b32193acdce613c4fbf28fa96c6031fdded78e93ca9bf6b4efc79f09831b71d9ce3e3c3b25371d28dfeec163bd
-  data.tar.gz: c7ce4c9408b631e205f604136790ba058128b8b116f20556f464e31367c012e00f1c69ddf059b2a0b460792288fc20d38a9bc08eacf680b658c8d751f2a72e5e
+  metadata.gz: 7e1f97d0db8ccc77f517f169346db5f0e01498ac47cf8eb83703d152398ef2a44b9a14b18754bd8a8f29a9de35a0a95cb4625424377138a7f001f0225772604e
+  data.tar.gz: 7579babf1e7397f7b3ad3f61e7c42e2d7a9a542773d2bd784e80a63885ea4a811eaca98bd8e936164e21c23b7b2fb8406b6680e629d7baf00eac09800c56fb27

data/README.md

@@ -5,8 +5,10 @@ A theme for Active Admin using [Blaze CSS](http://blazecss.com/)
 Features:
 
 - clean UI
+- customizable
 - compact edit form
-- Blaze CSS widgets
+- some custom fields: toggle
+- Blaze CSS widgets available
 
 ## Install
 
@@ -50,6 +52,20 @@ $height-inputs: 28px;
 $text-shadow: #000;
 ```
 
+## Custom fields
+
+### Toggle
+
+In *form* \ *inputs* block:
+
+`f.input :boolean, as: :blaze_toggle`
+
+To change toggle color:
+
+`f.input :boolean, as: :blaze_toggle, input_html: { toggle_class: 'c-toggle--brand' }`
+
+Available: `c-toggle--brand, c-toggle--info, c-toggle--warning, c-toggle--success, c-toggle--error`
+
 ## Screenshots
 
 Index:

data/activeadmin_blaze_theme.gemspec

@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
   spec.authors       = ["Mattia Roccoberton"]
   spec.email         = ["mat@blocknot.es"]
   spec.summary       = "ActiveAdmin Blaze Theme"
-  spec.description   = "An ActiveAdmin theme which use Blaze CSS toolkit"
+  spec.description   = "An ActiveAdmin theme which use Blaze CSS UI toolkit"
   spec.homepage      = "https://github.com/blocknotes/activeadmin_blaze_theme"
   spec.license       = "MIT"
 
@@ -17,4 +17,6 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency 'activeadmin'
 end

data/app/assets/stylesheets/activeadmin_blaze_theme/theme.scss

@@ -11,6 +11,7 @@ $bg-header: $color-brand !default;          // bg header bar
 $bg-inputs: #fff !default;                // bg forms inputs
 $bg-menu-active: #7b929e !default;        // bg menu item current / hover
 $fg-box-title: #fff !default;
+$fg-menu-items: #f8f8f8 !default;
 $fg-link2: #eee !default;
 $fg-table-borders: #e4e4e4 !default;
 
@@ -36,8 +37,14 @@ body.active_admin {
   // forms
   form {
     // inputs
+    input[type='datetime-local'],
+    input[type='email'],
     input[type='number'],
+    input[type='password'],
+    input[type='search'],
+    input[type='tel'],
     input[type='text'],
+    input[type='url'],
     select,
     textarea {
       @extend .c-field;
@@ -45,6 +52,27 @@ body.active_admin {
       display: inline-block;
       height: $height-inputs;
     }
+    input[type='radio'] {
+      margin-right: 0.4em;
+    }
+    input[type='range'] {
+      @extend .c-range;
+      background: transparent;
+      display: inline-block;
+      height: $height-inputs;
+      min-width: 200px;
+      width: 30%;
+    }
+    select[multiple], textarea {
+      height: auto;
+    }
+    .selectize-input {
+      line-height: $height-inputs;
+      padding-left: 8px;
+    }
+    abbr {
+      padding-left: 3px;
+    }
 
     // buttons
     button,
@@ -76,11 +104,24 @@ body.active_admin {
       @extend .c-button--success;
     }
 
+    // custom fields
+    .blaze_toggle {
+      label {
+        display: inline-block;
+      }
+    }
+
     // filter forms
     &.filter_form {
       .filter_form_field.filter_date_range {
+        input[type='datetime-local'],
+        input[type='email'],
         input[type='number'],
-        input[type='text'] {
+        input[type='password'],
+        input[type='search'],
+        input[type='tel'],
+        input[type='text'],
+        input[type='url'], {
           max-width: 100px;
           width: auto;
         }
@@ -100,8 +141,14 @@ body.active_admin {
         background-color: transparent;
         box-shadow: none;
         padding: 0;
+        input[type='datetime-local'],
+        input[type='email'],
         input[type='number'],
+        input[type='password'],
+        input[type='search'],
+        input[type='tel'],
         input[type='text'],
+        input[type='url'],
         select,
         textarea {
           background-color: $bg-inputs;
@@ -135,8 +182,14 @@ body.active_admin {
           }
         }
         .fragment {
+          input[type='datetime-local'],
+          input[type='email'],
           input[type='number'],
+          input[type='password'],
+          input[type='search'],
+          input[type='tel'],
           input[type='text'],
+          input[type='url'],
           select {
             width: auto;
           }
@@ -146,7 +199,7 @@ body.active_admin {
         padding: 0;
         > li {
           padding: 0 0 $inputs-spacing 0;
-          &.boolean label {
+          &.boolean label, &.blaze_toggle label {
             float: none;
           }
           &.has_many_container {
@@ -228,7 +281,13 @@ body.active_admin {
     .header-item {
       top: 0;
     }
+    .site_title {
+      color: $fg-menu-items;
+    }
     ul.tabs {
+      li > a {
+        color: $fg-menu-items;
+      }
       li:hover, li.current {
         background: $bg-menu-active;
       }
@@ -239,6 +298,8 @@ body.active_admin {
         }
         > ul {
           background: lighten( $bg-header, 5% );
+          border-radius: 0;
+          padding: 0;
           margin: 0;
           a {
             line-height: 2em;
@@ -251,6 +312,48 @@ body.active_admin {
     }
   }
 
+  // pagination
+  nav.pagination {
+    @extend .c-pagination;
+    span > a {
+      background: transparent;
+      background-image: none;
+      border: 0 none;
+      box-shadow: none;
+      color: initial;
+      cursor: pointer;
+      padding: 6px 10px;
+      margin: 0 auto;
+      text-shadow: none;
+    }
+    a:hover, span:hover > a {
+      background: transparent;
+      background-image: none;
+      color: #fff;
+      text-shadow: none;
+    }
+    .first, .prev, .next, .last {
+      @extend .c-pagination__control;
+      display: inline-block;
+      margin-right: 2px;
+      padding: 0;
+    }
+    .page {
+      @extend .c-pagination__page;
+      display: inline-block;
+      margin-right: 2px;
+      padding: 0;
+      &.current {
+        @extend .c-pagination__page--current;
+        background-image: none;
+        padding: 6px 10px;
+      }
+      &.current:hover {
+        background-image: none;
+      }
+    }
+  }
+
   // navbar / menu
   #tabs, #utility_nav {
     @extend .c-nav;
@@ -289,8 +392,14 @@ body.active_admin {
     @extend .c-card;
     @extend .u-high;
     .filter_form_field {
+      input[type='datetime-local'],
+      input[type='email'],
       input[type='number'],
+      input[type='password'],
+      input[type='search'],
+      input[type='tel'],
       input[type='text'],
+      input[type='url'],
       select,
       textarea {
         background-color: $bg-inputs;
@@ -429,4 +538,26 @@ body.active_admin {
     padding: 10px 0 0 0;
     text-align: center;
   }
+
+  // misc
+  .ui-datepicker {
+    > .ui-datepicker-header {
+      border-bottom: 0 none;
+      border-radius: 0;
+      height: auto;
+      margin: 0;
+      padding: 8px 10px;
+      width: 100%;
+    }
+    .ui-datepicker-calendar th {
+      padding: 3px 0;
+    }
+    > .ui-datepicker-calendar {
+      left: 0;
+      width: 100%;
+      a {
+        text-decoration: none;
+      }
+    }
+  }
 }

data/lib/activeadmin_blaze_theme.rb

@@ -1,8 +1,10 @@
-require "activeadmin_blaze_theme/version"
+require 'activeadmin_blaze_theme/version'
+
+require 'formtastic/inputs/blaze_toggle_input'
 
 module ActiveAdminBlazeTheme
   module Rails
     class Engine < ::Rails::Engine
     end
   end
-end
+end

data/lib/activeadmin_blaze_theme/version.rb

@@ -1,3 +1,3 @@
 module ActiveAdminBlazeTheme
-  VERSION = "0.1.6"
+  VERSION = "0.2.0"
 end

data/lib/formtastic/inputs/blaze_toggle_input.rb

@@ -0,0 +1,52 @@
+module Formtastic
+  module Inputs
+    class BlazeToggleInput < Formtastic::Inputs::BooleanInput
+      include Formtastic::Inputs::Base
+
+      # def to_html
+      #   input_wrapping do
+      #     # hidden_field_html <<
+      #     label_html <<
+      #     builder.check_box( method, input_html_options )
+      #     # label_with_nested_checkbox
+      #   end
+      # end
+
+      def to_html
+        input_wrapping do
+          toggle_label <<
+          hidden_field_html <<
+          toggle_checkbox
+        end
+      end
+
+      def toggle_label
+        builder.label(
+          method
+        )
+      end
+
+      def toggle_checkbox
+        builder.label(
+          method,
+          label_with_embedded_checkbox,
+          label_html_options
+        )
+      end
+
+      def label_html_options
+        super.merge( for: input_html_options[:id], class: ['c-toggle', input_html_options[:toggle_class] ] - ['label'] )
+      end
+
+      def label_with_embedded_checkbox
+        check_box_html << "" << toggle_html # << label_text
+      end
+
+      def toggle_html
+        template.content_tag( :div, Formtastic::Util.html_safe(
+          template.content_tag( :div, '', class: 'c-toggle__handle' )
+        ), class: 'c-toggle__track' )
+      end
+    end
+  end
+end

metadata

@@ -1,16 +1,30 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_blaze_theme
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.2.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-05-19 00:00:00.000000000 Z
-dependencies: []
-description: An ActiveAdmin theme which use Blaze CSS toolkit
+date: 2017-05-20 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: activeadmin
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: An ActiveAdmin theme which use Blaze CSS UI toolkit
 email:
 - mat@blocknot.es
 executables: []
@@ -87,6 +101,7 @@ files:
 - app/assets/stylesheets/activeadmin_blaze_theme/theme.scss
 - lib/activeadmin_blaze_theme.rb
 - lib/activeadmin_blaze_theme/version.rb
+- lib/formtastic/inputs/blaze_toggle_input.rb
 - screenshot1.jpg
 - screenshot2.jpg
 homepage: https://github.com/blocknotes/activeadmin_blaze_theme