spina-template 0.3.3 → 0.4.0

data/app/assets/icons/spina/product-outline.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M253.719,119.768 L205.719,39.768 C202.827,34.95 197.619,32 192,32 L64,32 C58.379,32 53.17,34.949 50.279,39.768 L2.279,119.768 C0.787,122.255 0,125.1 0,128 L0,208 C0,216.836 7.162,224 16,224 L240,224 C248.836,224 256,216.836 256,208 L256,128 C256,125.1 255.211,122.255 253.719,119.768 L253.719,119.768 Z M192,48 L237.6,124 L167.098,124 L159.588,101.471 C158.5,98.203 155.442,96 152,96 L132,96 L132,64 L144,64 C148.418,64 152,60.418 152,56 L152,48 L192,48 L192,48 Z M152,104 L160,128 L160,152 L96,152 L96,128 L104,104 L152,104 L152,104 Z M112,48 L144,48 L144,56 L112,56 L112,48 L112,48 Z M64,48 L104,48 L104,56 C104,60.418 107.58,64 112,64 L124,64 L124,96 L104,96 C100.556,96 97.498,98.203 96.41,101.471 L88.9,124 L18.398,124 L64,48 L64,48 Z M16,208 L16,132 L16,132 L88,132 L88,152 C88,156.418 91.58,160 96,160 L160,160 C164.418,160 168,156.418 168,152 L168,132 L240,132 L240,208 L16,208 L16,208 Z" id="Shape" fill="#000000"></path>
+    </g>
+</svg>

data/app/assets/icons/spina/shop.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Shop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<path d="M6.123,7.25L6.914,2H2.8L1.081,6.5C1.028,6.66,1,6.826,1,7c0,1.104,1.15,2,2.571,2C4.881,9,5.964,8.236,6.123,7.25z M10,9
+	c1.42,0,2.571-0.896,2.571-2c0-0.041-0.003-0.082-0.005-0.121L12.057,2H7.943l-0.51,4.875C7.431,6.916,7.429,6.957,7.429,7
+	C7.429,8.104,8.58,9,10,9z M15,10.046V14H5v-3.948C4.562,10.21,4.08,10.3,3.571,10.3c-0.195,0-0.384-0.023-0.571-0.049V16.6
+	c0,0.77,0.629,1.4,1.398,1.4H15.6c0.77,0,1.4-0.631,1.4-1.4v-6.348c-0.188,0.025-0.376,0.049-0.571,0.049
+	C15.923,10.3,15.439,10.208,15,10.046z M18.92,6.5L17.199,2h-4.113l0.79,5.242C14.03,8.232,15.113,9,16.429,9
+	C17.849,9,19,8.104,19,7C19,6.826,18.972,6.66,18.92,6.5z"/>
+</svg>

data/app/assets/javascripts/spina.coffee.erb

@@ -4,6 +4,7 @@
 #= require spina/jquery.nestable
 #= require spina/jquery.customfileinput
 #= require spina/jquery.farbtastic
+#= require spina/sortable
 #= require jquery-fileupload/basic
 #= require spina/raphael
 #= require spina/morris
@@ -18,6 +19,8 @@
 #= require spina/dropdown
 #= require spina/galleryselect
 #= require spina/uploads
+#= require spina/navigation
+#= require spina/notifications
 
 # Nprogress
 $(document).on 'page:fetch', -> NProgress.start()
@@ -25,9 +28,20 @@ $(document).on 'page:change', -> NProgress.done()
 $(document).on 'page:restore', -> NProgress.remove()
 
 # Clickable TR's
-$(document).on 'click', '.table-clickable tbody tr', ->
-  checkbox = $(this).find('input[type="checkbox"]:first, input[type="radio"]:first')
-  checkbox.prop("checked", !checkbox.prop("checked"))
+$(document).on 'click', '.table-clickable tbody tr', (e) ->
+  $row = $(this).closest('tr')
+  checkbox = $row.find('input[type="checkbox"]:first, input[type="radio"]:first')
+
+  if checkbox.length > 0
+    checkbox.prop("checked", !checkbox.prop("checked"))
+  else
+    $row.find('a.table-link:first')[0].click()
+
+$(document).on 'click', '.table-clickable tbody .table-link', (e) ->
+  e.stopPropagation()
+
+$(document).on 'click', '.table-clickable tbody tr input', (e) ->
+  e.stopPropagation()
 
 # Search inputs
 $(document).on 'keyup', '.search-input input', (e) ->
@@ -61,6 +75,11 @@ $(document).on 'change', '.dd', ->
 
 ready = ->
 
+  # Set paddingTop for section#main
+  if header = document.getElementById('header')
+    headerHeight = header.getBoundingClientRect().height
+    $('section#main').css({paddingTop: headerHeight})
+
   # Custom file
   $('input[type="file"][data-customfileinput]:visible').each ->
     $(this).customFileInput()
@@ -115,9 +134,6 @@ ready = ->
     editor.on "blur", ->
       container.find(".choose-text-type").fadeOut(100)
 
-  $(".dd").nestable
-    maxDepth: 3
-
   $(".structure-form-menu ul").sortable
     handle: '.sortable-handle'
 
@@ -153,5 +169,4 @@ ready = ->
         }
       }
 
-$(document).ready(ready)
-$(document).on 'page:load', ready
+$(document).on 'turbolinks:load', ready

data/app/assets/javascripts/spina/dropdown.coffee

@@ -11,6 +11,7 @@ $(document).on 'click', '[data-trigger="dropdown"]', ->
     body.removeClass('dropdown')
     dropdown.removeClass('animated fadeInDown')
   else
+    dropdown.removeClass('no-animation')
     trigger.addClass('button-active')
     body.addClass('dropdown')
     dropdown.addClass('animated fadeInDown')
@@ -57,8 +58,18 @@ $(document).on 'click', '.slide-controls .previous, .slide-controls .next', (e)
   else
     sliding_dropdown.find('.previous').addClass('muted')
 
+  # Force redraw dropdown
+  sliding_dropdown.addClass('no-animation')
+  forceRedraw(sliding_dropdown[0])
+
 closeDropdown = ->
   $('body').removeClass('dropdown')
   $('[data-dropdown] ul, [data-dropdown] .sliding-dropdown').removeClass('animated fadeInDown')
   $('[data-trigger="dropdown"]').removeClass('button-active')
   return false
+
+forceRedraw = (element) ->
+  disp = element.style.display
+  element.style.display = 'none'
+  trick = element.offsetHeight
+  element.style.display = disp

data/app/assets/javascripts/spina/galleryselect.coffee

@@ -12,8 +12,9 @@ $(document).on 'click', '.gallery .item:not(.item-uploader)', ->
     else
       $form.find('.gallery-select-counter').text("")
   else
+    checked = $(this).find('input').prop('checked')
     gallery.find('.item').removeClass('selected')
     gallery.find('.item input').prop('checked', false)
-    $(this).toggleClass('selected')
-    $(this).find('input').prop('checked', true)
-    $(this).closest('form').submit()
+    $(this).addClass('selected') unless checked
+    $(this).find('input').prop('checked', !checked)
+    $(this).closest('form').submit()

data/app/assets/javascripts/spina/navigation.coffee

@@ -0,0 +1,19 @@
+$(document).on 'click', 'nav#primary a.back-to-main-menu', (e) ->
+  $('nav#primary').addClass('animated')
+  $('nav#primary').removeClass('transformed')
+  e.preventDefault()
+
+$(document).on 'click', 'nav#primary:not(.transformed) > ul > li > a', (e) ->
+  if $(this).parent().find('ul').length > 0
+    e.preventDefault()
+
+    $(this).parent().siblings().removeClass('active')
+    $(this).parent().addClass('active')
+
+# Clicking something from the primary menu adds the animation
+$(document).on 'click', 'nav#primary:not(.transformed) > ul > li > a', (e) ->
+  $('nav#primary').addClass('animated').addClass('transformed')
+
+# Clicking directly on the primary menu when it's transformed removes the animation
+$(document).on 'click', 'nav#primary.transformed > ul > li > a', (e) ->
+  $('nav#primary').removeClass('animated')

data/app/assets/javascripts/spina/notifications.coffee

@@ -0,0 +1,7 @@
+$(document).on 'click', '.notification [data-close-notification]', (e) ->
+  $notification = $(this).parents('.notification')
+  $notification.removeClass('fadeInRight').addClass('fadeOutRight')
+  setTimeout ->
+    $notification.remove()
+  , 400
+  e.preventDefault()

data/app/assets/stylesheets/spina.sass

@@ -32,6 +32,8 @@
 @import spina/login
 @import spina/cards
 @import spina/trix
+@import spina/wizard
+@import spina/notifications
 
 // Plugins
 @import spina/morris
@@ -48,263 +50,159 @@ html, body
   -webkit-font-smoothing: antialiased
 
 body
-  @include display(flex)
+  background: #f5f5fa
+  min-width: 1024px
 
 // Primary navigation
-
 nav#primary
-  background: #444882
   height: 100%
-  padding-top: 10px
-  position: relative
-  text-align: center
-  width: 80px
+  overflow: hidden
+  position: fixed
+  width: 300px
   @include linear-gradient(#3b3f74, #7a76ad)
 
-  @include media($tablet)
-    width: 80px
-
-  ul li a
-    color: #fff
-    display: block
-    font-size: 10px
-    font-weight: 700
-    opacity: .6
-    padding: 20px 0
+  & > ul
+    height: 100%
+    padding-top: 12px
     position: relative
-    text-decoration: none
-    text-transform: uppercase
     width: 100%
-    @include transition(color .15s ease)
 
-    @include media($tablet)
-      padding: 12px 0
-
-  ul li.active a, ul li a:hover
-    opacity: 1
+  ul li
+    display: block
 
-  ul li.bottom a
-    bottom: 0
-    left: 0
+  ul li.bottom
+    bottom: 10px
     position: absolute
 
-  ul li a i.icon
+  ul li a
+    color: #f5f5fa
     display: block
-    font-size: 28px
-    margin-bottom: 8px
-    text-transform: none
+    font-size: 15px
+    font-weight: 600
+    line-height: 54px
+    opacity: .5
+    padding: 0 20px
+    position: relative
 
-    @include media($tablet)
-      font-size: 20px
+    &:hover
+      opacity: 1
 
-  ul li:first-child a i.icon
-    font-size: 32px
-    margin-bottom: 3px
+    .icon
+      font-size: 26px
+      margin-left: 5px
+      margin-right: 11px
 
-  ul li a[data-badge]:after
-    background: $danger-color
-    border-radius: 8px
-    color: #fff
-    content: attr(data-badge)
-    display: block
-    font-size: 12px
-    font-weight: bold
-    line-height: 16px
-    min-width: 10px
-    padding: 0 3px
-    position: absolute
-    right: 28px
-    top: 12px
+    .icon-caret-right
+      font-size: 18px
+      position: absolute
+      right: 10px
 
-// Secondary navigation
+    .icon-home
+      font-size: 32px
+      margin-left: 2px
+      margin-right: 8px
 
-nav#secondary
-  background: #f9f9f9
-  border-right: 1px solid #ccc
-  height: 100%
-  padding: 30px 0
-  width: 300px
+  ul li.active > a
+    opacity: 1
 
-  @include media($tablet)
+  ul li ul
+    bottom: 0
     left: 80px
-    padding-top: 12px
-    width: 200px
-
-  h1
-    color: #333
-    font-size: 24px
-    font-weight: 300
-    margin-bottom: 36px
-    padding: 0 30px
+    padding-top: 20px
+    position: absolute
+    top: 0
+    width: 100%
+    z-index: 1
+    @include linear-gradient(#3b3f74, #7a76ad)
+    @include transform(translateX(100%))
 
-    @include media($tablet)
-      display: none
+    li a
+      line-height: 40px
 
-  ul li
-    position: relative
+  ul li ul li a.back-to-main-menu
+    font-size: 13px
+    font-weight: 700
+    opacity: .25
+    text-transform: uppercase
 
-  ul li a
-    color: #333
-    display: block
-    font-size: 15px
-    font-weight: 600
-    line-height: 15px
-    padding: 16px 30px 16px 66px
-    text-decoration: none
-    @include transition(all .2s ease)
+    .icon
+      font-size: 16px
+      margin: -2px 0 0 -2px
 
-    @include media($tablet)
-      margin-left: 24px
-      padding-left: 0
+    &:hover
+      opacity: .5
 
-    small
-      color: #666
-      display: block
-      font-size: 14px
-      font-weight: normal
-      line-height: 18px
-      margin-top: 2px
-      @include transition(color .15s ease)
+  &.animated > ul
+    @include transition(background .2s ease)
 
-      @include media($tablet)
-        display: none
+    & > li > a
+      @include transition(all .2s ease)
 
-  ul li a:hover
-    background: #f1f1f1
+      .icon
+        @include transition(all .2s ease)
 
-  ul li.active a
-    background: #f1f1f1
-    color: $primary-color
+    li.active ul 
+      @include transition(all .2s ease)
 
-    small, i.icon
-      color: inherit
+  &.transformed > ul
+    background: rgba(0, 0, 0, .4)
 
-  ul li a i.icon
-    color: #666
-    display: block
-    float: left
-    font-size: 24px
-    line-height: 1
-    margin-left: -36px
-    text-align: center
-    width: 24px
-    @include transition(color .15s ease)
-
-    @include media($tablet)
-      display: none
+    & > li > a
+      color: transparent
+      @include transform(translateX(-10px))
 
-  ul li.active
-    &:before
-      content: ""
-      display: block
-      position: absolute
-      right: -12px
-      top: 33%
-      @include triangle(23px, #ccc, right)
-
-    &:after
-      content: ""
-      display: block
-      position: absolute
-      right: -11px
-      top: 33%
-      @include triangle(22px, #f1f1f1, right)
+      .icon
+        color: #f5f5fa
+        @include transform(translateX(10px))
 
-// Tabs
+    li.active ul
+      @include transform(translateX(0%))
 
-nav.tabs
-  border-bottom: 1px solid #ddd
-  margin: 0 -40px 30px -40px
-  padding: 0 40px 0 24px
+// Secondary navigation
+nav#secondary
+  margin-bottom: -30px
+  margin-top: 20px
 
   ul li
     display: inline
 
   ul li a
-    border: 1px solid transparent
-    color: #444
+    color: #4b4b4d
     display: inline-block
-    font-size: 14px
-    font-weight: 600
-    margin-bottom: -1px
-    margin-top: 20px
-    padding: 12px 16px
-    text-decoration: none
+    font-size: 12px
+    font-weight: 700
+    line-height: 28px
+    padding: 0 16px
+    opacity: .5
+    text-transform: uppercase
 
   ul li a:hover
-    color: #222
+    opacity: 1
 
   ul li.active a
-    border-color: #ddd
-    border-bottom: 1px solid #fff
-    border-radius: 3px 3px 0 0
-    color: $primary-color
+    border-bottom: 3px solid $primary-color
+    cursor: default
+    opacity: 1
+    margin: 0 16px
+    padding: 0
+
+  ul li:first-child a
+    margin-left: 0
+    padding-left: 0
 
+// Tabs
 .tab-content
   display: none
 
   &.active
     display: block
 
-// Notifications
-
-.notification
-  position: relative
-  color: $info-color
-  margin: 20px 0
-  overflow: hidden
-  font-size: 14px
-  padding-left: 32px
-
-  &:before
-    position: absolute
-    left: 0px
-    color: #77caf9
-    display: block
-    font-size: 18px
-    margin-top: 1em
-
-  p
-    color: $info-color
-    font-weight: 600
-    line-height: 18px
-    margin-bottom: 0
-
-  small
-    display: block
-    font-size: 14px
-    font-weight: normal
-
-  ul
-    margin: 0
-
-  li
-    font-weight: normal
-
-  &.notification-error
-    color: $error-color
-
-    p
-      color: $error-color
-
-    &:before
-      color: #e7baba
-
-  &.notification-danger
-    color: $danger-color
-
-    p
-      color: $danger-color
-
-    &:before
-      color: $danger-color
-
 // Permanent notice
 .permanent-notice
   background: #eee
   border-bottom: 1px solid #ddd
   color: #333
-  margin: -30px -40px 30px -40px
+  margin: 0 -40px 30px -40px
   padding: 0 40px
   position: relative
 
@@ -433,13 +331,28 @@ nav.tabs
     border-radius: 2px
     color: #fff
 
+// Main header
+header#header
+  background: #fff
+  border-bottom: 1px solid #eee
+  left: 300px
+  padding: 30px 40px
+  position: fixed
+  right: 0
+  top: 0
+  z-index: 10
+
+#header_actions
+  height: 100%
+  float: right
+  position: absolute
+  right: 20px
+  top: 24px
+
 // Main content
 
 section#main
-  padding: 30px 40px
-  height: 100%
-  overflow: scroll
-  @include flex(1)
+  padding: 30px 40px 30px 340px
 
 // Danger zone
 .danger-zone
@@ -459,30 +372,19 @@ section#main
 // Breadcrumbs
 
 #main_content_header
-  min-height: 50px
-
   .preview-website i
     vertical-align: bottom
 
-  @include media($tablet)
-    .button
-      overflow: hidden
-      height: 32px
-      width: 35px
-
-      &:before
-        margin-right: 200px
-
 .breadcrumbs
   color: #333
+  display: inline-block
   font-size: 24px
-  font-weight: 300
 
   a
     color: #999
 
-    @include media($tablet)
-      display: none
+    &:hover
+      color: #999
 
   .divider
     background: url(asset-path('spina/divider.png'))
@@ -492,19 +394,50 @@ section#main
     margin: 0 20px
     width: 6px
 
-    @include media($tablet)
-      display: none
+// Well
+
+.well
+  background: #fff
+  border: 1px solid #eee
+  border-radius: 3px
+  margin: 24px -20px
+  padding: 20px
+
+  hr.divider
+    clear: both
+    margin: 20px -20px
+
+  .table-container
+    margin: -20px -20px
+
+    .table
+      margin: 0
+
+      tr td:first-child, tr th:first-child
+        padding-left: 20px
+
+      tr td:last-child, tr th:last-child
+        padding-right: 20px
 
 // General styles
 
 h1, h2, h3, h4, h5, h6
-  font-weight: 300
+  font-weight: 400
   margin: 0
 
+  &.page-header
+    border-bottom: 1px solid #eee
+    color: #333
+    margin: 40px 0 20px 0
+    padding-bottom: 8px
+
 h1, h2
   color: #333
   font-size: 24px
 
+h3
+  color: #333
+
 ul
   list-style: none
   margin: 0
@@ -519,12 +452,23 @@ a
   color: $primary-color
   text-decoration: none
 
+  &:hover
+    color: shade($primary-color, 40%)
+
 label
   color: #333
   font-size: 11px
   font-weight: 600
   margin-right: 14px
-  text-transform: uppercase
+
+.divider-container
+  margin: 0 -40px
+
+hr.divider
+  background: #e9e9eb
+  border: none
+  height: 1px
+  margin: 20px 0
 
 .pull-left
   float: left
@@ -539,7 +483,7 @@ label
   bottom: 0px
   opacity: .5
   padding: 20px
-  position: absolute
+  position: fixed
   right: 0px
   @include transition(opacity .2s ease)
 
@@ -548,3 +492,18 @@ label
 
   img
     display: block
+
+.text-danger
+  color: $danger-color
+
+.text-success
+  color: $success-color
+
+.text-muted
+  color: #999
+
+.text-center
+  text-align: center
+
+.text-right
+  text-align: right