spina 0.10.0 → 0.11.0

data/app/assets/javascripts/spina/admin/{spina.trix.js.coffee.erb → trix.coffee.erb}

@@ -1,35 +1,36 @@
 window.Spina = {}
 
 Trix.config.blockAttributes = $.extend Trix.config.blockAttributes, {
-  h1:
-    tagName: 'h1'
-    singleLine: true
-    leaf: true
-  h2:
-    tagName: 'h2'
-    singleLine: true
-    leaf: true
-  h3:
-    tagName: 'h3'
-    singleLine: true
-    leaf: true
-  h4:
-    tagName: 'h4'
-    singleLine: true
-    leaf: true
-  h5:
-    tagName: 'h5'
-    singleLine: true
-    leaf: true
-  h6:
-    tagName: 'h6'
-    singleLine: true
-    leaf: true
+  heading2:
+    tagName: "h2"
+    terminal: true
+    breakOnReturn: true
+    group: false
+  heading3:
+    tagName: "h3"
+    terminal: true
+    breakOnReturn: true
+    group: false
+  heading4:
+    tagName: "h4"
+    terminal: true
+    breakOnReturn: true
+    group: false
+  heading5:
+    tagName: "h5"
+    terminal: true
+    breakOnReturn: true
+    group: false
+  heading6:
+    tagName: "h6"
+    terminal: true
+    breakOnReturn: true
+    group: false
 }
 
 class Spina.TrixAttachment
   @photoSelect: (e) ->
-    editor_id = $(this).closest('trix-toolbar').data('editor-id')
+    editor_id = $(this).closest('trix-toolbar').data('trix-editor-id')
     $.get("<%= Spina::Engine.routes.url_helpers.wysihtml5_select_admin_photos_path('') %>/#{editor_id}")
 
   @photoInsert: (e, url) ->

data/app/assets/javascripts/spina/admin/uploads.coffee

@@ -0,0 +1,35 @@
+ # Upload photo
+$.fn.uploadPhoto = ->
+  $(this).fileupload
+    dataType: "script"
+    singleFileUploads: true
+    dropZone: $(this).find('.photo-field')
+    # maxNumberOfFiles: 1
+    add: (e, data) ->
+      types = /(\.|\/)(gif|jpe?g|png)$/i
+      file = data.files[0]
+      if types.test(file.type) || types.test(file.name)
+        $(this).find('.customfile').addClass('loading')
+        data.submit()
+      else
+        alert("#{file.name} is geen gif-, jpeg- of png-bestand")
+    done: (e, data) ->
+      $(this).find('.customfile').removeClass('loading')
+
+# Upload document
+$.fn.uploadDocument = ->
+  $(this).fileupload
+    dataType: "script"
+    singleFileUploads: true
+    dropZone: $(this).find('.attachment-field')
+    maxNumberOfFiles: 1
+    add: (e, data) ->
+      types = /(\.|\/)(pdf|docx?|rtf|txt)$/i
+      file = data.files[0]
+      if types.test(file.type) || types.test(file.name)
+        $(this).find('.customfile').addClass('loading')
+        data.submit()
+      else
+        alert("#{file.name} is geen pdf-, word-, txt- of rtf-bestand")
+    done: (e, data) ->
+      $(this).find('.customfile').removeClass('loading')

data/app/assets/stylesheets/spina/_admin_editing.sass

@@ -0,0 +1,25 @@
+// Configuration
+@import configuration
+
+// Normalizing
+@import spina/normalize
+
+// Mixins
+@import bourbon
+@import neat
+
+// Fonts
+@import fonts
+
+#admin_bar
+  background: #f5f5f5
+  border-bottom: 1px solid #ddd
+  font-family: "Proxima Nova"
+  padding: 12px 12px 8px 0
+  text-align: right
+
+  // Styles
+  @import buttons
+
+  .button.button-hollow
+    background: #fff

data/app/assets/stylesheets/spina/_buttons.sass

@@ -0,0 +1,367 @@
+// Buttons
+
+button, input[type="submit"], input[type="button"]
+  border: none
+
+.button
+  background: #efefef
+  border-radius: 3px
+  color: #444
+  display: inline-block
+  font-size: 14px
+  font-weight: bold
+  line-height: 20px
+  margin: 0 4px 4px 0
+  outline: none
+  padding: 8px 16px
+  text-decoration: none
+  @include transition(all .3s ease)
+
+  &:hover
+    background: shade(#efefef, 5%)
+    color: inherit
+
+  &.button-shaded:hover
+    background: #efefef
+
+  &:active, &.button-active, &.button-shaded, &.button-shaded:active
+    background: shade(#efefef, 10%)
+    @include transform(scale(0.95))
+
+  &:focus
+    outline: none
+
+  &.button-primary
+    background: $primary-color
+    color: #fff
+
+    &:hover
+      background: shade($primary-color, 10%)
+
+    &.button-shaded:hover
+      background: $primary-color
+
+    &:active, &.button-active, &.button-shaded, &.button-shaded:active
+      background: shade($primary-color, 20%)
+
+  &.button-success
+    background: $success-color
+    color: #fff
+
+    &:hover
+      background: tint($success-color, 20%)
+
+    &.button-shaded:hover
+      background: $success-color
+
+    &:active, &.button-active, &.button-shaded, &.button-shaded:active
+      background: shade($success-color, 10%)
+
+  &.button-danger
+    color: $danger-color
+
+  &.button-block
+    display: block
+    text-align: center
+
+  &.button-link
+    background: none
+    font-weight: 600
+
+    &:hover
+      color: #333
+
+    &:active, &.button-active
+      color: #111
+
+  i.icon
+    margin-right: 8px
+    margin-top: -2px
+
+  &.icon-only
+    &:before, i.icon
+      margin-right: 0
+
+  &.icon-mini:before
+    margin-right: 4px
+
+  &.button-large
+    border-radius: 4px
+    padding: 11px 18px
+
+    &:before
+      margin-right: 10px
+
+  &.button-small
+    font-size: 13px
+    padding: 6px 12px
+
+    i.icon
+      margin-right: 4px
+
+  &.button-mini
+    font-size: 12px
+    padding: 3px 10px
+
+  &.button-hollow
+    background: none
+    border: 1px solid #ccc
+    color: #777
+
+    &:hover
+      border: 1px solid #bbb
+      color: #666
+
+    &:active, &.button-active
+      border: 1px solid #aaa
+      color: #444
+
+  &.button-round
+    border-radius: 21px
+
+  &.button-saving
+    background: #999 !important
+
+  &.button-saving:before
+    display: inline-block
+    @include animation(rotate 3.0s linear infinite)
+
+@include keyframes(rotate)
+  from
+    @include transform(rotate(0deg))
+  to
+    @include transform(rotate(360deg))
+
+.pull-right .button
+  margin: 0 0 4px 4px
+
+// Button groups
+
+.button-group
+  .button
+    border-radius: 0
+    float: left
+    margin-right: 0
+
+  .button:first-child
+    border-radius: 3px 0 0 3px
+
+  .button:last-child
+    border-radius: 0 3px 3px 0
+
+  &:after
+    clear: both
+    content: ""
+    display: block
+
+.button-group.button-group-round
+  .button
+    float: left
+    margin-left: 0
+    border-right: none
+
+  .button:first-child
+    border-radius: 21px 0 0 21px
+
+  .button:last-child
+    border-radius: 0 21px 21px 0
+
+// Pagination
+
+.pagination-container
+  background: #f9f9f9
+  border: 1px solid #eee
+  border-left: none
+  border-right: none
+  margin: 0 -40px
+  padding: 0 40px
+
+.pagination
+
+  .previous_page, .next_page, em.current, a
+    color: #999
+    display: inline-block
+    font-size: 14px
+    font-style: normal
+    font-weight: 600
+    line-height: 20px
+    padding: 6px 8px
+
+    &:first-child
+      padding-left: 0
+
+  .disabled
+    display: none
+
+// Dropdowns
+
+[data-dropdown]
+  position: relative
+
+  ul, .sliding-dropdown
+    background: #fff
+    border: 1px solid #ccc
+    border-radius: 3px
+    box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
+    display: none
+    list-style: none
+    margin: 0
+    margin-top: 6px
+    padding: 6px 0
+    position: absolute
+    width: 200px
+    z-index: 999
+
+    &.animated
+      display: block
+      @include animation-duration(.3s)
+
+    &.no-animation
+      @include animation(none)
+
+  ul:before, .sliding-dropdown:before
+    content: ""
+    display: block
+    height: 0
+    position: absolute
+    left: 11px
+    top: -8px
+    width: 0
+    border-bottom: 8px solid #aaa
+    border-left: 8px solid transparent
+    border-right: 8px solid transparent
+
+  ul:after, .sliding-dropdown:after
+    content: ""
+    display: block
+    height: 0
+    position: absolute
+    left: 12px
+    top: -7px
+    width: 0
+    border-bottom: 7px solid #fff
+    border-left: 7px solid transparent
+    border-right: 7px solid transparent
+
+  ul.align-right, .sliding-dropdown.align-right
+    right: 0px
+
+  ul.align-right:before, .sliding-dropdown.align-right:before
+    left: auto
+    right: 11px
+
+  ul.align-right:after, .sliding-dropdown.align-right:after
+    left: auto
+    right: 12px
+
+  ul li.divider
+    border-top: 1px solid #e9e9e9
+    margin: 8px 0
+
+  ul li a, ul li button
+    background: none
+    color: #333
+    display: block
+    font-size: 14px
+    padding: 8px 16px
+    text-align: left
+    text-decoration: none
+    width: 100%
+
+  ul li a:hover, ul li button:hover
+    background-color: $primary-color
+    color: #fff
+
+  ul li a:before, ul li button:before
+    margin-right: 8px
+
+[data-dropdown] .sliding-dropdown
+  padding: 0
+  width: 300px
+
+  .slide-controls
+    border-bottom: 1px solid #eaeaea
+    color: #333
+    font-size: 14px
+    font-weight: 600
+    line-height: 44px
+    text-align: center
+
+    .slide-title
+      display: none
+
+    .slide-title.active
+      display: block
+
+    .previous, .next
+      color: #666
+      font-size: 12px
+      outline: none
+      padding: 0 12px
+      position: absolute
+      top: 0px
+
+      .icon:before
+        line-height: 44px
+
+      &:hover
+        color: #333
+
+      &.muted
+        color: #ccc
+        cursor: default
+
+    .previous
+      left: 0px
+
+    .next
+      right: 0px
+
+  .slide-controls.open
+    display: block
+
+  .slide
+    display: none
+    text-align: center
+
+    &.active
+      display: block
+
+    p
+      color: #333
+      font-size: 14px
+      font-weight: 400
+      margin: 16px
+
+    p.muted
+      color: #999
+
+    .button
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+      margin: -1px
+      width: 300px
+
+      &.button-primary
+        background: lighten($primary-color, 40%)
+        border: 1px solid lighten($primary-color, 30%)
+        color: $primary-color
+
+        &:hover
+          background: $primary-color
+          border: 1px solid $primary-color
+          color: #fff
+
+  .slide-dots
+    margin: 12px
+    text-align: center
+
+    .slide-dot
+      background: #ccc
+      border-radius: 2px
+      display: inline-block
+      height: 4px
+      width: 4px
+
+      &.active
+        background: #333

data/app/assets/stylesheets/spina/_cards.sass

@@ -0,0 +1,54 @@
+.card
+  background: #fff
+  border: 1px solid #e9e9e9
+  border-radius: 3px
+  display: inline-block
+  margin: 0 28px 30px 0
+  text-align: center
+  width: 225px
+
+  .card-heading
+    color: #333
+    font-size: 12px
+    font-weight: 600
+    line-height: 24px
+    padding: 12px
+    text-transform: uppercase
+
+  .card-content
+    padding: 12px 12px 24px 12px
+
+  .card-footer
+    border-top: 1px solid #e9e9e9
+    color: #999
+    font-size: 16px
+    font-weight: 400
+    line-height: 28px
+    padding: 4px 12px
+
+  .card-score
+    color: #666
+    font-size: 64px
+    font-weight: bold
+    margin: 12px 0
+
+    &.card-score-a
+      color: #00c309
+
+    &.card-score-b
+      color: #8dbe50
+
+    &.card-score-c
+      color: #f3e64c
+
+    &.card-score-d
+      color: #f0aa50
+
+    &.card-score-f
+      color: #e62f36
+
+    small
+      color: #666
+      display: block
+      font-size: 13px
+      font-weight: 400

data/app/assets/stylesheets/spina/_configuration.sass

@@ -0,0 +1,15 @@
+$primary-color: #6865b4
+$success-color: #80b867
+$danger-color: #da3939
+$info-color: #17577c
+$error-color: #6a1515
+$alert-color: orange
+
+$asset-pipeline: true
+$font-family: "Proxima Nova", "Helvetica Neue", "Helvetica", sans-serif
+$icon-font: $font-family
+$gutter: 5em
+
+$desktop: min-width 768px 8
+$tablet: max-width 768px 8
+$mobile: max-width 480px 4

data/app/assets/stylesheets/spina/_custom_animations.sass

@@ -0,0 +1,61 @@
+@include keyframes("flyIn")
+  0%
+    opacity: 0
+    @include transform(scale(.9))
+  100%
+    opacity: 1
+    @include transform(scale(1))
+
+.animated.flyIn
+  @include animation("flyIn" .4s ease)
+
+@include keyframes("flyOut")
+  0%
+    opacity: 1
+    @include transform(scale(1))
+  100%
+    opacity: 0
+    @include transform(scale(.9))
+
+.animated.flyOut
+  @include animation("flyOut" .4s ease)
+
+@include keyframes("small-shake")
+  0%, 100%
+    @include transform(translateX(0))
+  20%, 60%
+    @include transform(translateX(7px))
+  40%, 80%
+    @include transform(translateX(-7px))
+
+.animated.small-shake
+  @include animation("small-shake" .6s ease-in)
+
+@include keyframes("switchon")
+  0%
+    @include transform(translate3d(0, 0, 0))
+  50%
+    width: 32px
+    @include transform(translate3d(0, 0, 0))
+  100%
+    width: 23px
+    @include transform(translate3d(17px, 0, 0))
+
+@include keyframes("switchoff")
+  0%
+    @include transform(translate3d(17px, 0, 0))
+  100%
+    @include transform(translate3d(0, 0, 0))
+
+.deactivated .knob
+  @include animation("switchoff" .2s ease)
+
+.activated .knob
+  @include animation("switchon" .4s)
+  @include animation-fill-mode(forwards)
+
+@include keyframes("rotate")
+  0%
+    @include transform(rotate(0deg))
+  100%
+    @include transform(rotate(360deg))

data/app/assets/stylesheets/spina/_farbtastic.sass

@@ -0,0 +1,37 @@
+.farbtastic
+  background: #fff
+  border-radius: 100px
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
+  display: none
+  position: absolute
+  z-index: 3
+
+  *
+    cursor: crosshair
+    position: absolute
+
+  .color, .overlay
+    height: 101px
+    left: 47px
+    top: 47px
+    width: 101px
+
+  .wheel
+    background: url(asset-path('spina/wheel.png'))
+    height: 195px
+    width: 195px
+
+  .overlay
+    background: url(asset-path('spina/mask.png'))
+
+  .marker
+    background: url(asset-path('spina/marker.png'))
+    height: 17px
+    margin: -8px 0 0 -8px
+    overflow: hidden
+    width: 17px
+
+.farbtastic, .farbtastic .wheel
+  height: 195px
+  width: 195px
+

data/app/assets/stylesheets/spina/_fonts.sass

@@ -0,0 +1,18 @@
+// Icons
+
+@include font-face("ics_spina", "spina/ics_spina", $asset-pipeline: true, $file-formats: eot woff ttf svg)
+
+.icon
+  display: inline-block
+  vertical-align: middle
+  font-size: inherit
+  line-height: inherit // NOTE: should be 1
+  font-family: "ics_spina" !important
+  font-style: normal !important
+  font-variant: normal !important
+  font-weight: normal !important
+  text-transform: none !important
+  speak: none
+  text-rendering: auto
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale