spina 0.10.0 → 0.11.0

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

@@ -0,0 +1,79 @@
+textarea.wysihtml5
+  font-size: 14px
+  height: 225px
+  padding-top: 50px
+  padding-right: 125px
+  resize: none
+
+  &:focus
+    border: 1px solid $primary-color
+
+.wysihtml5-container
+  overflow: hidden
+  position: relative
+
+  .toolbar
+    border-bottom: 1px solid #e9e9e9
+    top: 1px
+    left: 1px
+    line-height: 40px
+    position: absolute
+    width: 100%
+
+    a.command
+      border-right: 1px solid #e9e9e9
+      color: #999
+      display: block
+      float: left
+      height: 40px
+      text-align: center
+      width: 40px
+
+    a.command i
+      vertical-align: middle
+
+    a.command i:before
+      line-height: 40px
+
+    a.wysihtml5-command-active, a.command:hover
+      color: #333
+
+    .command-bold, .command-italic, .command-insert-unordered-list, .command-link, .action-change-view
+      font-size: 12px
+      line-height: 43px
+
+    .command.action-change-view
+      border: none
+      float: right
+
+    .choose-text-type
+      border-left: 1px solid #e9e9e9
+      display: none
+      height: 183px
+      padding-top: 6px
+      position: absolute
+      right: 0
+      top: 40px
+      width: 115px
+
+      a
+        color: #999
+        display: block
+        line-height: 40px
+        padding: 0 16px
+
+      a:hover
+        color: #333
+
+      ul li a
+        color: #999
+        line-height: 30px
+        text-align: left
+
+        &.wysihtml5-command-active
+          color: $primary-color
+
+        &.wysihtml5-command-active:hover
+          background: none
+          color: $primary-color
+          cursor: default

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

@@ -1,6 +1,5 @@
 @import normalize.css
 @import bourbon
-@import mixins
 @import spina/admin_editing
 
 // Customize below

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

@@ -0,0 +1,14 @@
+h1, h2, h3
+  font-weight: 600
+
+img
+  border-radius: 3px
+  display: block
+  height: auto
+  margin: 13px 0
+  max-height: 100px
+  max-width: 100px
+  width: auto
+
+img:first-child
+  margin-top: 0

data/app/assets/stylesheets/spina.sass

@@ -0,0 +1,564 @@
+// Frameworks
+@import bourbon
+@import neat
+
+// Configuration
+@import spina/configuration
+
+// Normalizing
+@import spina/normalize
+
+// Icons
+@import spina/ics_spina
+@import spina/fonts
+
+// Animations
+@import spina/animate
+@import spina/custom_animations
+
+// Elements
+@import spina/forms
+@import spina/tables
+@import spina/buttons
+@import spina/labels
+@import spina/modal
+@import spina/sortable_lists
+@import spina/gallery
+@import spina/login
+@import spina/cards
+@import spina/trix
+@import spina/wizard
+@import spina/notifications
+
+// Plugins
+@import spina/morris
+@import spina/wysihtml5
+@import spina/farbtastic
+
+html
+  box-sizing: border-box
+  min-height: 100%
+
+*, *:before, *:after
+  box-sizing: inherit
+
+html, body
+  height: 100%
+  font-family: $font-family
+  -webkit-font-smoothing: antialiased
+
+body
+  background: #f5f5fa
+  min-width: 1024px
+
+// Primary navigation
+nav#primary
+  height: 100%
+  overflow: hidden
+  position: fixed
+  width: 300px
+  z-index: 5
+  @include linear-gradient(#3b3f74, #7a76ad)
+
+  & > ul
+    height: 100%
+    padding-top: 12px
+    position: relative
+    width: 100%
+
+  ul li
+    display: block
+
+  ul li.bottom
+    bottom: 10px
+    position: absolute
+
+  ul li a
+    color: #f5f5fa
+    display: block
+    font-size: 15px
+    font-weight: 600
+    line-height: 54px
+    opacity: .5
+    outline: none
+    padding: 0 20px
+    position: relative
+
+    &:hover
+      opacity: 1
+
+    .icon
+      font-size: 26px
+      margin-left: 5px
+      margin-right: 11px
+
+    .icon-caret-right
+      font-size: 18px
+      position: absolute
+      right: 10px
+
+    .icon-home
+      font-size: 32px
+      margin-left: 2px
+      margin-right: 8px
+
+  ul li.active > a
+    opacity: 1
+
+  ul li ul
+    bottom: 0
+    left: 80px
+    padding-top: 20px
+    position: absolute
+    top: 0
+    width: calc(100% - 80px)
+    z-index: 1
+    @include linear-gradient(#3b3f74, #7a76ad)
+    @include transform(translateX(100%))
+
+    li a
+      line-height: 40px
+
+  ul li ul li a.back-to-main-menu
+    font-size: 13px
+    font-weight: 700
+    opacity: .25
+    text-transform: uppercase
+
+    .icon
+      font-size: 16px
+      margin: -2px 0 0 -2px
+
+    &:hover
+      opacity: .5
+
+  ul li ul li
+    position: relative
+
+  ul li ul li[data-badge]:after
+    background: rgba(255, 255, 255, .4)
+    border-radius: 9px
+    color: #3b3f74
+    content: attr(data-badge)
+    display: block
+    font-size: 12px
+    font-weight: 600
+    height: 18px
+    line-height: 18px
+    min-width: 24px
+    padding: 0 8px
+    position: absolute
+    right: 20px
+    text-align: center
+    top: 50%
+    vertical-align: middle
+    z-index: 1
+    @include transform(translateY(-50%))
+
+  ul li ul li[data-badge] a
+    z-index: 2
+
+  ul li ul li.active[data-badge], ul li ul li:hover[data-badge]
+    &:after
+      background: rgba(255, 255, 255, .9)
+
+  &.animated > ul
+    @include transition(background .3s ease)
+
+    & > li > a
+      @include transition(all .3s ease)
+
+      .icon
+        @include transition(all .3s ease)
+
+    li.active ul
+      @include transition(all .3s ease)
+
+  &.transformed > ul
+    background: rgba(0, 0, 0, .4)
+
+    & > li > a
+      color: transparent
+      @include transform(translateX(-10px))
+
+      .icon
+        color: #f5f5fa
+        @include transform(translateX(10px))
+
+    li.active ul
+      @include transform(translateX(0%))
+
+// Secondary navigation
+nav#secondary
+  margin-bottom: -30px
+  margin-top: 20px
+
+  ul li
+    display: inline
+
+  ul li a
+    color: #4b4b4d
+    display: inline-block
+    font-size: 12px
+    font-weight: 700
+    line-height: 34px
+    opacity: .5
+    outline: none
+    padding: 0 16px
+    position: relative
+    text-transform: uppercase
+
+    &:after
+      background-color: $primary-color
+      bottom: 0px
+      content: " "
+      height: 3px
+      left: 0px
+      opacity: 0
+      position: absolute
+      width: 100%
+      @include transform(scale(0))
+
+  ul li a:hover
+    opacity: 1
+
+  ul li.active a
+    cursor: default
+    opacity: 1
+    margin: 0 16px
+    padding: 0
+
+    &:after
+      opacity: 1
+      @include transform(scale(1))
+      @include transition(all .2s ease)
+      @include transition-delay(.05s)
+
+  ul li:first-child a
+    margin-left: 0
+    padding-left: 0
+
+// Tabs
+.tab-content
+  display: none
+
+  &.active
+    display: block
+
+// Permanent notice
+.permanent-notice
+  background: #eee
+  border-bottom: 1px solid #ddd
+  color: #333
+  margin: 0 -40px 30px -40px
+  padding: 0 40px
+  position: relative
+
+  i.icon
+    font-size: 16px
+    left: 14px
+    opacity: .25
+    position: absolute
+    top: 12px
+
+  p
+    font-size: 13px
+    font-weight: 600
+    line-height: 18px
+    margin: 0
+    padding: 12px 0
+
+    small
+      display: block
+      font-size: 12px
+      font-weight: 400
+
+  &.permanent-notice-info
+    background: #eef6fe
+    border-color: #def
+    color: #12659b
+
+    p
+      color: inherit
+
+// Filters
+
+.filters
+  margin: 20px 0
+
+// Datepicker
+
+.ui-datepicker
+  background: #fff
+  border: none
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
+  width: 250px
+
+.ui-datepicker-header
+  border: none
+  font-weight: 300
+
+  a.ui-datepicker-prev, a.ui-datepicker-next
+    background: none
+    border: none
+    color: transparent
+    cursor: pointer
+    display: block
+    height: 36px
+    opacity: .6
+    padding: 8px 0
+    position: absolute
+    right: 0
+    top: 0
+    width: 36px
+
+  a.ui-datepicker-prev
+    left: 0
+
+  a.ui-datepicker-prev:hover, a.ui-datepicker-next:hover
+    opacity: 1
+
+  a.ui-datepicker-prev span
+    background: url(asset-path('spina/arrow-left.png')) no-repeat center
+    background-size: 10px 13px
+    display: block
+
+  a.ui-datepicker-next span
+    background: url(asset-path('spina/arrow-right.png')) no-repeat center
+    background-size: 10px 13px
+    display: block
+
+  .ui-datepicker-title
+    line-height: 42px
+    text-align: center
+
+.ui-datepicker-calendar
+  width: 100%
+
+  tr td:first-child, tr th:first-child
+    padding-left: 0px
+
+  tr td:last-child, tr th:last-child
+    padding-right: 0px
+
+  thead th
+    color: #444
+    font-weight: 600
+
+  tbody tr, thead tr
+    border: none
+
+  tbody tr td
+    background: none
+
+  tbody tr td a
+    display: block
+    line-height: 28px
+    text-align: center
+    padding: 2px 4px
+    width: 32px
+
+  tbody tr td a.ui-state-default
+    background: none
+    border: none
+    color: #777
+    font-weight: 600
+
+  tr:hover
+    background: none
+
+  tbody tr td a:hover
+    color: #000
+
+  tbody tr td a.ui-state-highlight
+    background: #eee
+    border-radius: 2px
+
+  tbody tr td a.ui-state-active
+    background: #444
+    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
+  float: right
+  position: absolute
+  right: 20px
+  top: 24px
+
+// Main content
+
+section#main
+  padding: 30px 40px 30px 340px
+
+// Danger zone
+.danger-zone
+  background: url(asset-path('spina/danger-zone-ribbon.png')) repeat-x #fcfcfc
+  margin: 60px -40px 0 -40px
+  padding: 26px 40px
+
+  h2
+    color: #777
+    font-size: 16px
+    font-weight: 600
+
+    &:before
+      margin-right: 6px
+      vertical-align: middle
+
+// Breadcrumbs
+
+#main_content_header
+  .preview-website i
+    vertical-align: bottom
+
+.breadcrumbs
+  color: #333
+  display: inline-block
+  font-size: 24px
+
+  .button
+    margin-left: 12px
+    vertical-align: middle
+
+  a
+    color: #999
+
+    &:hover
+      color: #999
+
+  .divider
+    background: url(asset-path('spina/divider.png'))
+    color: #999
+    display: inline-block
+    height: 17px
+    margin: 0 20px
+    width: 6px
+
+// 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: 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
+  padding: 0
+
+p
+  color: #333
+  font-size: 14px
+  line-height: 18px
+
+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
+
+.divider-container
+  margin: 0 -40px
+
+hr.divider
+  background: #e9e9eb
+  border: none
+  height: 1px
+  margin: 20px 0
+
+.pull-left
+  float: left
+
+.pull-right
+  float: right
+
+.clearfix
+  @include clearfix()
+
+.spina-logo
+  bottom: 0px
+  opacity: .5
+  padding: 20px
+  position: fixed
+  right: 0px
+  @include transition(opacity .2s ease)
+
+  &:hover
+    opacity: 1
+
+  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
+
+// Turbolinks
+.turbolinks-progress-bar
+  background-color: $primary-color

data/app/controllers/concerns/spina/frontend.rb

@@ -0,0 +1,59 @@
+module Spina
+  module Frontend
+    extend ActiveSupport::Concern
+
+    included do
+      before_action :set_locale
+      before_action :rewrite_page, only: [:show]
+    end
+
+    def show
+      if should_skip_to_first_child?
+        redirect_to first_live_child.try(:materialized_path) and return
+      elsif page.link_url.present?
+        redirect_to page.link_url and return
+      end
+
+      render_with_template(page)
+    end
+
+    private
+
+      def set_locale
+        I18n.locale = params[:locale] || I18n.default_locale
+      end
+
+      def rewrite_page
+        if page.nil? && rule = RewriteRule.find_by(old_path: "/" + params[:id])
+          redirect_to rule.new_path, status: :moved_permanently
+        end
+      end
+
+      def page_by_locale(locale)
+        Page.with_translations(locale).find_by!(materialized_path: spina_request_path)
+      end
+
+      def page
+        current_page = page_by_locale(I18n.locale) || page_by_locale(I18n.default_locale)
+        @page ||= (action_name == 'homepage') ? Page.find_by!(name: 'homepage') : current_page
+      end
+
+      def spina_request_path
+        segments = ['/', params[:locale], params[:id]].compact
+        File.join(*segments)
+      end
+
+      def should_skip_to_first_child?
+        page.skip_to_first_child && first_live_child
+      end
+
+      def first_live_child
+        page.children.sorted.live.first
+      end
+
+      def render_with_template(page)
+        render layout: "#{current_theme.name.parameterize.underscore}/#{page.layout_template || 'application'}", template: "#{current_theme.name.parameterize.underscore}/pages/#{page.view_template || 'show'}"
+      end
+
+  end
+end