chr 0.4.18 → 0.4.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 694f33f3af909f7b9db991bf0cfc7ad91e52de3c
-  data.tar.gz: 76d5e2f2569bebdfbbf2bd38bb9352aa82580c52
+  metadata.gz: 4e8b7f15e58ff7b8d4d456245f1fb1b5e038b495
+  data.tar.gz: c34afc47f2d710bd65a4a11a2fc4eff43151db10
 SHA512:
-  metadata.gz: 992ebba60ca4a6354e1f561670117bf5e35bc571af8b59609fea4c501a84d6bc21ff2f81d91e6c7d5d77cd1534fca58f7b412d079a9cc28101955d77674e6563
-  data.tar.gz: 0eb0db6333f958a0123419c0131abc3a1e0820168456b6118b48eb56758d4c62130c86b1d9c9d841bb63b0dece139007b151c5231926f542b86b1cdd7712e090
+  metadata.gz: 0692d6811c5fa7451d0d07d72913f6653ae2c0c1146627bd8b46b42edb17137136a5689d8ed7e7e6f401ed7e35cbb05f06da17d7eb617f224df637754a7e6fa7
+  data.tar.gz: f89d66d24ec1d3ecd6992b91d462340b99452377e8734820ffd882952d6de690f820f8a5136fd1a5144aa27bc2d94d6dcda60acfe80fcffb23ae308c30ab5365

data/app/assets/javascripts/chr.coffee

@@ -13,3 +13,10 @@
 #= require ./stores/rails-array
 
 #= require formagic
+
+@Icons =
+  reorder: "<i class='fa fa-ellipsis-v'></i>"
+  folder: "<i class='fa fa-angle-right'></i>"
+  search: "<i class='fa fa-search'></i>"
+  add: "<i class='fa fa-plus'></i>"
+  close: "<i class='fa fa-chevron-left'></i>"

data/app/assets/javascripts/chr/item.coffee

@@ -74,14 +74,14 @@ class @Item
     @_render_subtitle()
 
     if @type == 'folder'
-      @$el.append $("<div class='icon-folder'></div>")
+      @$el.append $("<div class='icon-folder'>#{Icons.folder}</div>")
 
     if @type == 'object'
       @_render_thumbnail()
 
       if @config.arrayStore and @config.arrayStore.reorderable
         @$el.addClass('reorderable')
-        @$el.append $("<div class='icon-reorder'></div>")
+        @$el.append $("<div class='icon-reorder'>#{Icons.reorder}</div>")
 
     if @type == 'object'
       @config.onItemRender?(this)

data/app/assets/javascripts/chr/list.coffee

@@ -64,10 +64,10 @@ class @List
     @$el.append @$header
 
     # back
+    @$backBtn =$ "<a href='#/' class='back'>#{ Icons.close }</a>"
     if @parentList
-      @$backBtn =$ "<a href='#{ @parentList.path }' class='back'>Close</a>"
-    else
-      @$backBtn =$ "<a href='#/' class='back'>Close</a>"
+      @$backBtn.attr 'href', @parentList.path
+
     @$header.prepend @$backBtn
 
     # spinner & title
@@ -76,7 +76,7 @@ class @List
 
     # new item
     if not @config.disableNewItems and @config.formSchema
-      @$newBtn =$ "<a href='#{ @path }/new' class='new'></a>"
+      @$newBtn =$ "<a href='#{ @path }/new' class='new'>#{Icons.add}</a>"
       @$header.append @$newBtn
 
     if @config.items       then @_process_config_items()

data/app/assets/javascripts/chr/list_search.coffee

@@ -8,7 +8,7 @@
 
   _bind_search: ->
     @$search       =$ "<div class='search'></div>"
-    @$searchIcon   =$ "<a href='#' class='icon'></a>"
+    @$searchIcon   =$ "<a href='#' class='icon'>#{Icons.search}</a>"
     @$searchInput  =$ "<input type='text' placeholder='Search' />"
     @$searchCancel =$ "<a href='#' class='cancel'>Cancel</a>"
 

data/app/assets/javascripts/chr/view.coffee

@@ -50,7 +50,7 @@ class @View
     @$el.append @$header
 
     # close
-    @$closeBtn =$ "<a href='#{ @closePath }' class='close'>Close</a>"
+    @$closeBtn =$ "<a href='#{ @closePath }' class='close'>#{Icons.close}</a>"
     @$header.append @$closeBtn
 
     # content
@@ -200,7 +200,3 @@ class @View
       @store.loadObject(objectId, callbacks)
 
 include(View, viewTabs)
-
-
-
-

data/app/assets/stylesheets/chr/layout.scss

@@ -2,7 +2,6 @@
 $tablet:  "screen and (min-width:768px)";
 $desktop: "screen and (min-width:1024px)";
 
-
 /* Global ------------------------------------------------------------------ */
 *,
 *:before,
@@ -11,34 +10,54 @@ html     {  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibil
 a        { text-decoration: none; }
 .spinner { @include spinner; }
 
-
 /* Menu -------------------------------------------------------------------- */
+.menu {
+  margin-top: 1em;
+}
+
 .menu a {
   display  : block;
   position : relative;
   padding  : 1em;
 }
+
 .menu .fa {
   margin-left: -.25em;
 }
 
-
 /* Header ------------------------------------------------------------------ */
 .header {
-  height     : 41px;
-  text-align : center;
+  height: 41px;
+  text-align: center;
 }
 
 .header {
-  .title         { @include ellipsis(70%); }
-  .title, a      { line-height: 2.5; }
-  .new           { @include position(absolute, 0 0 null null); }
-  .new + .search { @include position(absolute, 0 40px inherit inherit); } // @todo: refactor to em
-  .save          { @include position(absolute, 0 1em null null); }
-  .back, .close  { @include position(absolute, 0 null null 0);
-    overflow : hidden;
+  .title {
+    @include ellipsis(70%);
+    line-height: 41px;
+  }
+  a {
+    line-height: 2.5;
   }
-  .spinner       { @include position(absolute, .4em null null null);
+  .new {
+    @include position(absolute, 0 0 null null);
+    @include header-icon-base;
+  }
+  .new + .search {
+    @include position(absolute, 0 40px inherit inherit);
+  }
+  .save {
+    @include position(absolute, 0 1em null null);
+  }
+  .back, .close {
+    @include position(absolute, 0 null null 0);
+    @include header-icon-base;
+    &:before {
+      display: none;
+    }
+  }
+  .spinner {
+    @include position(absolute, .4em null null null);
     margin-left : -2.25em;
     visibility  : hidden;
   }
@@ -46,7 +65,6 @@ a        { text-decoration: none; }
 
 .show-spinner .spinner { visibility: visible; }
 
-
 /* Item -------------------------------------------------------------------- */
 .item {
   display  : block;
@@ -55,13 +73,9 @@ a        { text-decoration: none; }
 }
 
 .item {
+  .icon-folder,
   .icon-reorder {
-    @include position(absolute, 50% 0 null null);
-    margin-top : -20px; // @todo: refactor to em
-  }
-  .icon-folder {
-    @include position(absolute, 50% 0 null null);
-    margin-top : -20px; // @todo: refactor to em
+    @include item-icon-base;
   }
 }
 
@@ -77,7 +91,6 @@ a        { text-decoration: none; }
 .item-thumbnail     { @include position(absolute, .5em 0 0 .5em); width: 3.1em; height: 3.1em; }
 .item-thumbnail img { width: 100%; border-radius: 1.55em; }
 
-
 /* Search ------------------------------------------------------------------ */
 .search {
   @include position(absolute, 0 0 null null);
@@ -85,7 +98,13 @@ a        { text-decoration: none; }
   height   : 40px; // @todo: refactor to em
   overflow : hidden;
 
-  .icon   { @include position(absolute, 0 null null 0); }
+  .icon {
+    @include position(absolute, 0 null null 0);
+    text-align: center;
+    line-height: 40px;
+    width: 40px;
+  }
+
   .cancel { @include position(absolute, 0 1em null null); }
 
   input {
@@ -112,7 +131,6 @@ a        { text-decoration: none; }
   }
 }
 
-
 /* View -------------------------------------------------------------------- */
 .view-saving .save    { visibility : hidden;  }
 .view-saving .spinner { visibility : visible; }
@@ -129,8 +147,6 @@ a        { text-decoration: none; }
   a { display : inline-block; }
 }
 
-
-
 /* Mobile ------------------------------------------------------------------ */
 .header {
   @include position(fixed, 0 null null null);
@@ -157,7 +173,6 @@ a        { text-decoration: none; }
   z-index        : 0;
 }
 
-
 /* Tablet ------------------------------------------------------------------ */
 @media #{$tablet} {
   body { overflow: hidden; }
@@ -189,7 +204,6 @@ a        { text-decoration: none; }
   .module .list:first-child .back { display: none; }
 }
 
-
 /* Desktop ----------------------------------------------------------------- */
 @media #{$desktop} {
   .sidebar         { width : 10em; }
@@ -204,7 +218,3 @@ a        { text-decoration: none; }
 
   .list.list-aside .back { @include header-back-label; }
 }
-
-
-
-

data/app/assets/stylesheets/chr/mixins.scss

@@ -1,5 +1,4 @@
 /* Mixins ------------------------------------------------------------------ */
-
 @mixin spinner {
   display     : inline-block;
   border      : .25em solid rgba(black, 0.2);
@@ -26,69 +25,25 @@
 
 @mixin header-back-label {
   @include position(absolute, 0 null null 1em);
-  width : auto;
-  &:before { display: none; }
-}
-
-/* Icons ------------------------------------------------------------------- */
-
-@mixin header-icon-base {
-  display : block;
-  width   : 40px;
-  height  : 40px;
-
-  &:before {
-    content : '';
-    display : block;
-    width   : 40px;
-    height  : 40px;
-    background-repeat : no-repeat;
+  width: auto;
+  i {
+    display: none;
   }
-}
-
-@mixin icon-search($color) {
-  @include header-icon-base;
-
-  &:before {
-    background-image    : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle cx='15' cy='15' r='10' stroke='#{ $color }' stroke-width='2' fill='transparent'></circle><line x1='22' y1='22' x2='30' y2='30' stroke-width='3' stroke='#{ $color }' /></svg>");
-    background-size     : 22px 22px;
-    background-position : 8px 8px;
-  }
-}
-
-@mixin icon-plus($color) {
-  @include header-icon-base;
-
   &:before {
-    background-image    : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><line x1='10' y1='0' x2='10' y2='20' stroke-width='2' stroke='#{ $color }' /><line x1='0' y1='10' x2='20' y2='10' stroke-width='2' stroke='#{ $color }' /></svg>");
-    background-size     : 20px 20px;
-    background-position : 10px 10px;
+    display: inline;
   }
 }
 
-@mixin icon-folder($color) {
-  @include header-icon-base;
-
-  &:before {
-    background-image    : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{ $color }'/></svg>");
-    background-size     : 10px 16px;
-    background-position : 9px 12px;
-  }
-
-  @include transform(rotate(180deg));
+@mixin header-icon-base {
+  width: 40px;
+  line-height: 40px;
+  text-align: center;
 }
 
-@mixin icon-arrow($color) {
-  @include header-icon-base;
-
-  &:before {
-    background-image    : url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{ $color }'/></svg>");
-    background-size     : 12px 20px;
-    background-position : 12px 9px;
-  }
+@mixin item-icon-base {
+  @include position(absolute, 50% 0 null null);
+  margin-top: -20px;
+  line-height: 40px;
+  width: 30px;
+  text-align: center;
 }
-
-
-
-
-

data/app/assets/stylesheets/chr/themes/basic.scss

@@ -1,47 +1,52 @@
 /* Settings ---------------------------------------------------------------- */
 
-$base-font-family : 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;
-
-$thin      : 100 !default;
-$light     : 300 !default;
-$regular   : 400 !default;
-$medium    : 500 !default;
-$semibold  : 600 !default;
-$bold      : 700 !default;
-$extrabold : 800 !default;
-$black     : 900 !default;
-
-$base-font-color : #2e2e2e !default;
-$positive-color  : #4a87ee !default;
-$assertive-color : #ee5f4a !default;
-$border-color    : #f6f6f6 !default;
-
-$sidebar-color           : #aaa    !default;
-$sidebar-bg-color        : #222    !default;
-$sidebar-active-color    : white   !default;
-$sidebar-active-bg-color : #1a1a1a !default;
-
-$list-bg-color : #fafafa !default;
-
-$formagic-base-color      : $base-font-color;
-$formagic-positive-color  : $positive-color;
-$formagic-assertive-color : $assertive-color;
-$formagic-border-color    : $border-color;
+$base-font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default;
 
-/* Theme ------------------------------------------------------------------- */
+$thin: 100 !default;
+$light: 300 !default;
+$regular: 400 !default;
+$medium: 500 !default;
+$semibold: 600 !default;
+$bold: 700 !default;
+$extrabold: 800 !default;
+$black: 900 !default;
+
+$white-color: #fff;
+
+$base-font-color: #2e2e2e !default;
+$positive-color: #4a87ee !default;
+$assertive-color: #e32e2e !default;
+$border-color: #f1f1f1 !default;
+
+$sidebar-color: rgba(255, 255, 255, 0.5) !default;
+$sidebar-bg-color: #414d65 !default;
+$sidebar-active-color: $white-color !default;
+$sidebar-active-bg-color: #29354f !default;
+
+$list-bg-color: #fbfbfd !default;
+
+$formagic-base-color: $base-font-color;
+$formagic-positive-color: $positive-color;
+$formagic-assertive-color: $assertive-color;
+$formagic-border-color: $border-color;
 
+/* Theme ------------------------------------------------------------------- */
 html {
-  font-family : $base-font-family;
-  color       : $base-font-color;
+  font-family: $base-font-family;
+  color: $base-font-color;
 }
 
 a {
-  color : $positive-color;
+  color: $positive-color;
 }
 
 .menu a {
-  color   : $base-font-color;
-  padding : .75em 1em;
+  color: $base-font-color;
+  padding: .75em 1em;
+}
+
+.header .title {
+  font-size: .9em;
 }
 
 .header .title,
@@ -87,7 +92,7 @@ a {
   &:hover,
   &:active {
     background-color : $assertive-color;
-    color            : white;
+    color            : $white-color;
   }
 }
 
@@ -108,16 +113,19 @@ a {
 
     &.active {
       background-color : $positive-color;
-      color            : white;
+      color            : $white-color;
       &:hover {
-        color : white;
+        color : $white-color;
       }
     }
   }
 }
 
-/* Sign in ----------------------------------------------------------------- */
+.search input {
+  font-size: .9em;
+}
 
+/* Sign in ----------------------------------------------------------------- */
 .signin-modal {
   @include position(relative);
 
@@ -137,7 +145,7 @@ a {
   }
 
   input[type=submit] {
-    background-color : white;
+    background-color : $white-color;
     border-radius    : .25em;
     padding          : 1em 3em;
     display          : block;
@@ -147,7 +155,7 @@ a {
 
     &:hover {
       background-color : $positive-color;
-      color            : white;
+      color            : $white-color;
     }
   }
 
@@ -162,49 +170,47 @@ a {
 }
 
 /* Icons ------------------------------------------------------------------- */
+.list-search .search .icon,
+.icon-reorder,
+.icon-folder {
+  color: lighten($base-font-color, 50%);
+}
 
-.search .icon { @include icon-search($positive-color); }
-.list-search .search .icon { @include icon-search(lighten($base-font-color, 40%)); }
-
-.header .new { @include icon-plus($positive-color); }
-
-.icon-reorder { @include icon-reorder(lighten($base-font-color, 50%)); }
-.icon-folder  { @include icon-folder(lighten($base-font-color, 50%)); }
-
-.slip-reordering > .icon-reorder:before,
-.slip-reordering > .icon-reorder:after { background-color: $positive-color; }
-
-.header .back, .header .close { @include icon-arrow($positive-color); }
+.header .back,
+.header .close {
+  &:before {
+    content: 'Close';
+  }
+}
 
 /* Layouts ----------------------------------------------------------------- */
-
 @media #{$tablet} {
   .sidebar {
-    background-color : $sidebar-bg-color;
+    background-color: $sidebar-bg-color;
   }
 
   .menu a {
-    border-left : 2px solid $sidebar-bg-color;
-    color       : $sidebar-color;
+    border-left: 2px solid $sidebar-bg-color;
+    color: $sidebar-color;
     &:hover {
-      background-color : $sidebar-active-bg-color;
-      border-color     : $sidebar-active-bg-color;
-      color            : $sidebar-active-color;
+      background-color: $sidebar-active-bg-color;
+      border-color: $sidebar-active-bg-color;
+      color: $sidebar-active-color;
     }
     &.active {
-      background-color : $sidebar-active-bg-color;
-      border-color     : $positive-color;
-      color            : $sidebar-active-color;
+      background-color: $sidebar-active-bg-color;
+      border-color: $white-color;
+      color: $sidebar-active-color;
     }
   }
 
   .admin-devise_overrides-passwords,
   .admin-devise_overrides-sessions {
-    background-color : $list-bg-color;
+    background-color: $list-bg-color;
   }
 
   .signin-modal {
-    background : white;
+    background : $white-color;
     max-width  : 26em;
     border     : 1px solid $border-color;
     margin     : 5em auto 1em;
@@ -220,9 +226,9 @@ a {
       background-color : $list-bg-color;
     }
     &.list-aside {
-      background-color : white;
+      background-color : $white-color;
       .header {
-        background-color : white;
+        background-color : $white-color;
       }
     }
   }

data/lib/chr/version.rb

@@ -1,5 +1,5 @@
 module Chr
   RAILS_VERSION = "~> 4.2.5"
   RUBY_VERSION = IO.read("#{File.dirname(__FILE__)}/../../.ruby-version").strip
-  VERSION = "0.4.18"
+  VERSION = "0.4.19"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chr
 version: !ruby/object:Gem::Version
-  version: 0.4.18
+  version: 0.4.19
 platform: ruby
 authors:
 - Alexander Kravets
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-19 00:00:00.000000000 Z
+date: 2015-11-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails