spina 0.12.0 → 1.0.0

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

@@ -123,10 +123,26 @@
 
   trix-editor.text-input
     padding-left: 0
+    white-space: initial
 
   #{$all-text-inputs}
     height: 50px
 
+  a.media_picker
+    background: none
+    border: none
+    box-shadow: none
+    outline: none
+    padding-left: 0
+
+    .image
+      border-radius: 3px
+      display: inline-block
+      overflow: hidden
+
+      img
+        display: block
+
 .sidebar-form-images
   margin-top: 25px
 
@@ -140,15 +156,22 @@
   border: 1px solid #e5e5ea
   border-radius: 2px
   display: inline-block
+  height: 100px
   margin-bottom: 10px
   margin-right: 10px
+  overflow: hidden
   position: relative
   width: 100px
 
   > img
     border-radius: 2px
     display: block
-    width: 100%
+    left: 50%
+    max-height: 100%
+    max-width: 100%
+    position: absolute
+    top: 50%
+    transform: translateY(-50%) translateX(-50%)
 
   .sidebar-form-image-overlay
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
@@ -166,6 +189,7 @@
     opacity: 1
 
   &:first-child
+    height: 240px
     width: 320px
 
   &:nth-child(3n + 1)
@@ -317,17 +341,23 @@
 .input-group
   display: flex
 
-  #{$all-text-inputs}, .text-input, .select-dropdown
+  div
+    #{$all-text-inputs}, .text-input, .select-dropdown
+      height: 100%
+
+  & > div, #{$all-text-inputs}, .text-input, .select-dropdown
     flex: 1
 
     &:not(:first-child)
-      border-bottom-left-radius: 0
-      border-top-left-radius: 0
+      &, #{$all-text-inputs}, .text-input, .select-dropdown
+        border-bottom-left-radius: 0
+        border-top-left-radius: 0
 
     &:not(:last-child)
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-      border-right: none
+      &, #{$all-text-inputs}, .text-input, .select-dropdown
+        border-bottom-right-radius: 0
+        border-top-right-radius: 0
+        border-right: none
 
 // Inputs
 
@@ -532,8 +562,12 @@ input.datepicker
   padding: 0
   position: relative
   transition: border .2s ease
+  white-space: nowrap
   @extend .icon, .icon-caret-down
 
+  .field_with_errors
+    display: inline-block
+
   label
     background: #f5f5f5
     border-right: 1px solid #ddd
@@ -615,7 +649,7 @@ input.datepicker
       width: 1px
 
     ul:after
-      background: linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
+      background: linear-gradient(#ddd, rgba(255, 255, 255, 0))
       bottom: -40px
       top: auto
 
@@ -710,9 +744,14 @@ input.datepicker
   line-height: 52px
 
   .customfile
+    background: rgba(0, 0, 0, .015)
+    border: 1px dashed rgba(0, 0, 0, .1)
+    border-radius: 10px
     cursor: pointer
     height: 100%
+    margin: 20px 0
     overflow: hidden
+    padding-left: 20px
     position: relative
     text-align: left
     width: 100%
@@ -733,8 +772,12 @@ input.datepicker
       @extend .icon, .icon-refresh:before
       display: none
       font-size: 36px
+      height: 50px
+      width: 36px
 
   .customfile.loading
+    padding: 7px 20px
+
     &:before
       display: none
 
@@ -763,6 +806,34 @@ input.datepicker
   .customfile-button
     display: none
 
+.document-select
+  ul
+    margin: -20px -20px 20px -20px
+
+  .item
+    border-top: 1px solid #efefef
+    cursor: pointer
+    line-height: 1
+    margin: 0
+    position: relative
+    width: 100%
+
+    label
+      display: block
+      font-size: 0.875rem
+      margin: 0
+      padding: 20px
+
+    input[type="checkbox"],
+    input[type="radio"]
+      left: 0
+      opacity: 0
+      position: absolute
+      top: 0
+
+      &:checked + label
+        background: #f5f5fa
+
 .media_picker
   background: #f9f9f9
   border: 1px solid #d5d5d5
@@ -784,18 +855,6 @@ input.datepicker
   &:active .button
     background: shade(#efefef, 10%)
 
-  &:before
-    background: rgba(255, 255, 255, .5)
-    content: ""
-    height: 100%
-    left: 0
-    opacity: 0
-    position: absolute
-    text-align: center
-    top: 0
-    transition: opacity .2s ease
-    width: 100%
-
   .placeholder
     color: #666
     font-size: 13px

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

@@ -19,6 +19,7 @@
     margin: 8px
     overflow: hidden
     position: relative
+    transition: transform .3s ease
     width: 150px
     z-index: 3
 
@@ -86,7 +87,10 @@
         word-break: break-word
         z-index: 3
 
-    &:hover
+    &.ui-draggable:not(.ui-draggable-disabled):hover
+      cursor: move
+
+    &.ui-draggable-disabled:hover, &:not(.ui-draggable):hover
       .overlay
         background: rgba(0, 0, 0, 0.5)
 
@@ -97,6 +101,12 @@
         .photo-name
           transform: translateY(0%)
 
+    &.dropping:not(.media-folder)
+      transform: scale(0.8)
+
+    &.dropped:not(.media-folder)
+      transform: scale(0)
+
     form
       height: 100%
 
@@ -231,7 +241,7 @@
   &:hover .customfile:before
     color: #333
 
-  &:hover .new_photo label
+  &:hover .new_photo label, &:hover .new_image label
     color: #333
 
   .customfile-feedback
@@ -253,7 +263,7 @@
   .customfile-button
     display: none
 
-  .new_photo label
+  .new_photo label, .new_image label
     color: #999
     font-size: 13px
     font-weight: 600
@@ -264,3 +274,81 @@
     text-transform: lowercase
     transition: color .2s ease
     width: 100%
+
+// Media folders
+
+.item.media-folder
+  align-items: center
+  background: #e5e5f0
+  border: 1px solid #d5d4e6
+  display: flex
+  flex-direction: column
+  justify-content: center
+  line-height: 20px
+
+  &:hover, &.dropping
+    .media-folder-thumbnail
+      transform: rotate(-4deg)
+    .media-folder-thumbnail:after
+      transform: translateY(-10px) translateX(30px)
+    .media-folder-shadow:before
+      transform: rotate(12deg)
+    .media-folder-shadow:after
+      transform: rotate(6deg)
+
+.media-folder-thumbnail
+  height: 70px
+  position: relative
+  transform-origin: center bottom
+  transition: transform .4s ease
+  width: 70px
+
+  &[data-badge]:after
+    background: #6b699f
+    border: 3px solid #e5e5f0
+    border-radius: 12px
+    color: #fff
+    content: attr(data-badge)
+    display: block
+    font-size: 10px
+    font-weight: bold
+    height: 24px
+    line-height: 18px
+    position: absolute
+    right: -8px
+    text-align: center
+    transition: transform .4s ease
+    top: -8px
+    width: 24px
+    z-index: 1
+
+  .media-folder-shadow:before, .media-folder-shadow:after
+    background: rgba(107, 105, 159, .25)
+    border-radius: 5px
+    content: " "
+    display: block
+    height: 70px
+    left: 0px
+    position: absolute
+    transform-origin: center bottom
+    transition: transform .4s ease
+    top: 0px
+    width: 70px
+    z-index: 0
+
+  .media-folder-shadow:after
+    background: rgba(107, 105, 159, .5)
+
+  img
+    border-radius: 5px
+    position: relative
+    width: 100%
+
+.media-folder-name
+  color: #4d4f81
+  font-size: 14px
+  font-weight: 600
+  height: 16px
+  line-height: 16px
+  margin-top: 6px
+  text-align: center

data/app/assets/stylesheets/spina/_ics_spina.scss

@@ -27,6 +27,7 @@
 .icon-document:before { content: "\f116"; }
 .icon-dots:before { content: "\f117"; }
 .icon-exclamation:before { content: "\f118"; }
+.icon-export:before { content: "\f139"; }
 .icon-eye:before { content: "\f119"; }
 .icon-filter:before { content: "\f11a"; }
 .icon-home:before { content: "\f11b"; }

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

@@ -32,6 +32,10 @@ table.table
   thead tr, tbody tr
     border-bottom: 1px solid #eee
 
+  table
+    tr
+      border-bottom: none
+
   tbody tr:last-child
     border: none
 

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

@@ -4,14 +4,17 @@ trix-toolbar
   .button-group
     margin-right: 10px
 
-  .button.active
+  .button.trix-active
     background: $primary-color
     color: #fff
 
-  .link_url_fields input
+  .trix-dialog__link-fields
+    clear: both
+    
+  .trix-dialog__link-fields input
     margin-top: 6px
 
-  .link_url_fields .button-group input
+  .trix-dialog__link-fields .button-group input
     margin-top: 10px
 
 trix-editor
@@ -90,7 +93,7 @@ trix-editor
     max-width: 200px
     overflow: hidden
 
-    figcaption, .remove
+    figcaption, .attachment__remove
       display: none
 
     img

data/app/assets/stylesheets/spina_front_end.sass

@@ -0,0 +1,19 @@
+// Configuration
+@import spina/configuration
+
+.spina-link
+  display: block
+  position: fixed
+  bottom: 1rem
+  right: 1rem
+  z-index: 9999
+  color: white
+  background-color: $primary-color
+  padding: 0.5rem 1rem
+  border-radius: 20px
+  text-decoration: none
+  transition: background-color .25s
+  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2)
+
+  &:hover
+    background-color: $primary-color-dark

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

@@ -3,15 +3,17 @@ module Spina
     extend ActiveSupport::Concern
 
     included do
+      rescue_from ActiveRecord::RecordNotFound, with: :redirect_or_render_404
+      
       before_action :set_locale
-      before_action :rewrite_page, only: [:show]
+      before_action :set_current_page
     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
+        redirect_to Current.page.link_url and return
       end
 
       render_with_template(page)
@@ -23,19 +25,22 @@ module Spina
         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
+      def set_current_page
+        Current.page = page
       end
 
       def page_by_locale(locale)
-        Page.with_translations(locale).find_by!(materialized_path: spina_request_path)
+        I18n.with_locale(locale) do
+          Page.i18n.find_by!(materialized_path: spina_request_path)
+        end
       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
+        @page = if action_name == 'homepage'
+          Page.find_by!(name: 'homepage')
+        else 
+          page_by_locale(I18n.locale) || page_by_locale(I18n.default_locale)
+        end
       end
 
       def spina_request_path
@@ -44,15 +49,27 @@ module Spina
       end
 
       def should_skip_to_first_child?
-        page.skip_to_first_child && first_live_child
+        Current.page.skip_to_first_child && first_live_child
       end
 
       def first_live_child
-        page.children.sorted.live.first
+        Current.page.children.sorted.live.first
+      end
+
+      def redirect_or_render_404
+        if rule = RewriteRule.find_by(old_path: spina_request_path)
+          redirect_to rule.new_path, status: :moved_permanently
+        else
+          render_404
+        end
+      end
+
+      def render_404
+        render file: "#{Rails.root}/public/404.html", status: 404
       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'}"
+        render layout: "#{current_theme.name.parameterize.underscore}/#{page.layout_template || 'application'}", template: "#{current_theme.name.parameterize.underscore}/pages/#{Current.page.view_template || 'show'}"
       end
 
   end