spina 0.11.1 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 046211e519bf447988ae325988cbc82be0be058f
-  data.tar.gz: 540be8a7eed78c94b681008de0bbacc36b6ee827
+  metadata.gz: 7a434cf817128736d599401f7c0fb4f3db07254a
+  data.tar.gz: 1288622640295c335ad5a1d1f51465bf025dc23b
 SHA512:
-  metadata.gz: 32e00372ee066b491faa67c99104caf0c2092a54fa8e88c2db777ef9e4805e104f390d25581e388db01cbe856e591802651941dc6b0eee66f789d0c0283ac14d
-  data.tar.gz: 67fbfb563f796ea36f57c7507c16f7e4dba7d5c9c354645a670ea1a8afb72efc3d894d3423b972e004dd51f9513e712e4232fc6e0bf1ca33076ae5b27438a0ed
+  metadata.gz: c9d358241a468cf561e5cc4563e70bf27ee017b9b9610229d4b25e0801519d8c867f0de30dede42b83466a48728792b863cc5daf296b42582ff981918f53587f
+  data.tar.gz: 3ccf95f39de319bb1d7d072a0b3ef219f1a8a7ac0d6523299564c065e2af7686c8457f786dc585815c27779c9817ca3dfbaf131f46736c161003cb25385147c7

data/README.md

@@ -2,14 +2,14 @@
 
 [Visit the website](http://www.spinacms.com)
 
-[![Codeship Status for denkGroot/Spina](https://img.shields.io/codeship/e13debf0-e6af-0132-8abf-32d84f3372de.svg)](https://codeship.com/projects/82322)
+[![CircleCI](https://img.shields.io/circleci/project/github/denkGroot/Spina.svg)](https://circleci.com/gh/denkGroot/Spina)
 [![Code Climate](https://codeclimate.com/github/denkGroot/Spina/badges/gpa.svg)](https://codeclimate.com/github/denkGroot/Spina)
 [![Test Coverage](https://codeclimate.com/github/denkGroot/Spina/badges/coverage.svg)](https://codeclimate.com/github/denkGroot/Spina/coverage)
 [![Slack](https://slack-spinacms.herokuapp.com/badge.svg)](https://slack-spinacms.herokuapp.com)
 
 # Getting Started
 
-Spina is a CMS built upon the Rails framework. This guide is designed for developers with experience using Ruby on Rails.
+Spina is a CMS for Rails 5.1. This guide is designed for developers with experience using Ruby on Rails.
 
 To start using Spina CMS add the following line to your Gemfile:
 
@@ -23,7 +23,14 @@ Make sure you run the installer to get started.
 
 The installer will help you setup your first user.
 
-Then start `rails s` and access your admin panel at `/admin`.
+Then start `rails s` and access Spina at `/admin`.
+
+## Upgrading from 0.11 to 0.12
+
+Just run the new migrations.
+
+    rails spina:install:migrations
+    rails db:migrate
 
 ## Upgrading from 0.10 to 0.11
 
@@ -67,7 +74,7 @@ Spina.configure do |config| # NEW
 
 The installer generates a few initializers that contain necessary configuration for Spina.
 
-In the initializers folder there's a new folder named `themes`. Inside you will find a configuration file named `default.rb`. This file contains all of your theme-specific settings. You can define multiple Page parts, Layout parts, View templates and Custom pages.
+In the initializers folder there's a new folder named `themes`. Inside you will find a configuration file named `default.rb`. This file contains all of your theme-specific settings. You can define multiple Page parts, View templates and Custom pages.
 
 ## Page parts
 
@@ -77,8 +84,8 @@ A page in Spina has many Page parts. By default these page parts can be one of t
 - `Spina::Text`
 - `Spina::Photo`
 - `Spina::PhotoCollection`
-- `Spina::Color`
 - `Spina::Structure`
+- `Spina::Option`
 
 These are the building blocks of your view templates. You can have an unlimited number of page parts in a page. We prefer to keep the number of parts to a minimum so that managing your pages won't become too complex.
 
@@ -174,19 +181,41 @@ Finally, let's go to `views/default/pages/show.html.erb` and add the following:
 
 We have successfully added another textbox! Restart your server and load up the admin section again. You should see another text box below the content box.
 
-## Layout parts
-
-Sometimes you need editable content that's not specific to a view template but to your theme as a whole. You can use the following parts in your layout.
-
-- `Spina::Line`
-- `Spina::Color`
-
 ## View templates
 
 Each theme typically has a few different view templates which make up your website. By default Spina generates a *homepage* and *show* template.
 
 The views for these templates are stored in `app/views/default/pages`.
 
+## Navigations
+
+Usually managing a single list of pages is enough for most use cases. Sometimes however, you need a little more flexibility. This is where navigations come in. You can create multiple navigations which are basically different collections of your pages. You can choose to include all or just a few of your pages. You can also edit the order of pages per navigation.
+
+You define navigations in your theme's config file:
+
+```ruby
+::Spina::Theme.register do |theme|
+  # ...
+
+  theme.navigations = [{
+    name: 'main',
+    label: 'Main navigation',
+    auto_add_pages: true
+  }, {
+    name: 'mobile',
+    label: 'Mobile'  
+  }]
+
+  # ...
+end
+```
+
+`auto_add_pages` ensures that each page that you create automatically gets added to this navigation.
+
+Besides navigations there's always a single overview of all pages. Your sitemap and friendly URLs are generated based on this overview.
+
+Creating navigations is optional.
+
 ## Custom pages
 
 You can define custom pages for your theme that will be generated when bootstrapping your website. You can define whether or not they're deletable. By default Spina creates a custom page named Homepage which is not deletable.

data/Rakefile

@@ -34,6 +34,7 @@ Rake::TestTask.new(:test) do |t|
   t.libs << 'test'
   t.pattern = 'test/**/*_test.rb'
   t.verbose = false
+  t.warning = false
 end
 
 

data/app/assets/fonts/spina/ics_spina.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
-2017-2-7: Created with FontForge (http://fontforge.org)
+2017-5-23: Created with FontForge (http://fontforge.org)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20161116 at Tue Feb  7 16:25:08 2017
+Created by FontForge 20170104 at Tue May 23 10:47:30 2017
  By Bram Jetten
 Copyright (c) 2017, Bram Jetten
 </metadata>
@@ -22,7 +22,7 @@ Copyright (c) 2017, Bram Jetten
     bbox="-18.2861 -64.0879 530.286 448"
     underline-thickness="25.6"
     underline-position="-51.2"
-    unicode-range="U+0020-F137"
+    unicode-range="U+0020-F138"
   />
     <missing-glyph />
     <glyph glyph-name="space" unicode=" " horiz-adv-x="200" 
@@ -157,6 +157,8 @@ c-1.14323 -4.47591 -2.00033 -8.28548 -2.57129 -11.4287c-0.571615 -3.14258 -1.286
 c-11.5241 -51.7142 -18.9053 -85.5713 -22.1436 -101.571c-0.380859 -1.71484 -1.61882 -7.23893 -3.71387 -16.5723s-4 -17.9046 -5.71484 -25.7139c-1.71419 -7.80924 -3.23796 -15.7617 -4.57129 -23.8574c-1.33333 -8.09505 -1.90462 -13.5713 -1.71387 -16.4287
 l0.285156 -5.14258c3.23828 -0.761719 20.8574 -3.71419 52.8574 -8.85742c-0.571615 -8.38086 -2.09538 -17.8092 -4.57129 -28.2852c-2.09505 0 -5.19043 -0.142904 -9.28613 -0.428711c-4.09505 -0.285807 -7.1901 -0.428711 -9.28516 -0.428711
 c-5.52409 0 -13.8099 0.952474 -24.8574 2.85742s-19.238 2.85742 -24.5713 2.85742c-26.2858 0.380859 -45.9049 0.571289 -58.8574 0.571289c-9.71419 0 -23.333 -0.857096 -40.8564 -2.57129c-17.5241 -1.71484 -29.0482 -2.7627 -34.5723 -3.14355z" />
+    <glyph glyph-name="uniF138" unicode="&#xf138;" 
+d="M352 192v64c0 52.9922 -43.0078 96 -96 96s-96 -43.0078 -96 -96v-64h192zM64 192h32v64c0 88.3203 71.6797 160 160 160s160 -71.6797 160 -160v-64h32v-224h-384v224z" />
     <glyph glyph-name="uniF123" unicode="&#xf123;" 
 d="M448 352c35.29 0 64 -28.71 64 -64v-192c0 -35.29 -28.71 -64 -64 -64h-384c-35.29 0 -64 28.71 -64 64v192c0 35.29 28.71 64 64 64h384zM256 160.002c2.63574 0 5.27441 0.652344 7.66211 1.9541l175.996 95.998c7.75781 4.22949 10.6162 13.9502 6.38379 21.708
 c-4.23047 7.75586 -13.9521 10.6162 -21.708 6.38379l-168.334 -91.8203l-168.336 91.8184c-7.75781 4.23242 -17.4756 1.37207 -21.708 -6.38379c-4.23047 -7.75781 -1.37402 -17.4766 6.38379 -21.708l175.996 -95.998c2.38965 -1.2998 5.02832 -1.95215 7.66406 -1.95215

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

@@ -0,0 +1,3 @@
+<svg id="lock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="currentcolor">
+  <path d="M22 16 L22 12 A6 6 0 0 0 10 12 L10 16 z M4 16 L6 16 L6 12 A10 10 0 0 1 26 12 L26 16 L28 16 L28 30 L4 30 z"></path>
+</svg>

data/app/assets/icons/spina/preview/ics_spina-preview.html

@@ -195,6 +195,7 @@
 .icon-large-check:before,
 .icon-link:before,
 .icon-list-ul:before,
+.icon-lock:before,
 .icon-mail:before,
 .icon-mail-outline:before,
 .icon-media-library:before,
@@ -265,6 +266,7 @@
 .icon-large-check:before { content: "\f120"; }
 .icon-link:before { content: "\f121"; }
 .icon-list-ul:before { content: "\f122"; }
+.icon-lock:before { content: "\f138"; }
 .icon-mail:before { content: "\f123"; }
 .icon-mail-outline:before { content: "\f124"; }
 .icon-media-library:before { content: "\f125"; }
@@ -301,7 +303,7 @@
   <body class="characters-off">
     <div id="page" class="container">
       <header>
-        <h1>ics_spina contains 56 glyphs:</h1>
+        <h1>ics_spina contains 57 glyphs:</h1>
         <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
       </header>
 
@@ -761,6 +763,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-lock" class="icon-lock"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-lock" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf138;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span>

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

@@ -12,16 +12,11 @@
 #= require spina/jquery.ui
 #= require spina/jquery.nestable
 #= require spina/jquery.customfileinput
-#= require spina/jquery.farbtastic
 #= require jquery-fileupload/basic
 
 # Misc plugins
 
 #= require spina/sortable
-#= require spina/raphael
-#= require spina/morris
-#= require spina/wysihtml5_parser_rules
-#= require spina/wysihtml5
 #= require spina/trix
 
 # Own code
@@ -113,25 +108,6 @@ ready = ->
   # Image upload
   $('.new_photo').uploadPhoto()
 
-  # Colorpicker
-  $('.colorpicker').each ->
-    colorpicker = $(this).find('.colorpicker-container')
-    field = $(this).find('input')
-
-    $.farbtastic colorpicker, (color) ->
-      field.val(color)
-      field.css('color', color)
-
-  $('.colorpicker input').focus ->
-    container = $(this).parent()
-    colorpicker = container.find('.colorpicker-container')
-    $.farbtastic(colorpicker).setColor($(this).val())
-    container.find('.farbtastic').show()
-
-  $('.colorpicker input').blur ->
-    container = $(this).parent()
-    container.find('.farbtastic').hide()
-
   # Document upload
   $('.new_document').uploadDocument()
 
@@ -147,6 +123,8 @@ ready = ->
 
   # Datepicker
   if $('.datepicker').length > 0
-    $('.datepicker').datepicker()
+    $('.datepicker').datepicker
+      dateFormat: "dd-mm-yy"
+      firstDay: 1
 
 $(document).on 'turbolinks:load', ready

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

@@ -1,3 +1,10 @@
+ready = ->
+  if $('nav#primary ul li ul li.active').length > 0
+    $('nav#primary > ul > li').removeClass('active')
+    $('nav#primary ul li ul li.active').parents('li').addClass('active')
+
+$(document).on 'turbolinks:load', ready
+
 $(document).on 'click', 'nav#primary a.back-to-main-menu', (e) ->
   $('nav#primary').addClass('animated')
   $('nav#primary').removeClass('transformed')

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

@@ -30,20 +30,8 @@ show_page_parts = (page_parts) ->
   for page_part in page_parts
     $('.horizontal-form-group.page-part[data-name=' + page_part + ']').show()
 
-# Dynamically add and remove fields in a nested form
-$(document).on 'click', 'form .add_structure_item_fields', (event) ->
-  time = new Date().getTime()
-  regexp = new RegExp($(this).data('id'), 'g')
-  $(this).before($(this).data('fields').replace(regexp, time))
-  event.preventDefault()
-
-$(document).on 'click', 'form .remove_fields', (event) ->
-  $(this).prev('input[type=hidden]').val('1')
-  $(this).closest('fieldset').slideUp()
-  event.preventDefault()
-
 # Dynamically add and remove structures
-$(document).on 'click', 'form .add_structure', (event) ->
+$(document).on 'click', 'form .add_structure_item_fields', (event) ->
   $structureForm = $(this).parents('.structure-form')
 
   time = new Date().getTime()

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

@@ -30,8 +30,9 @@ Trix.config.blockAttributes = $.extend Trix.config.blockAttributes, {
 
 class Spina.TrixAttachment
   @photoSelect: (e) ->
+    console.log 'hi'
     editor_id = $(this).closest('trix-toolbar').data('trix-editor-id')
-    $.get("<%= Spina::Engine.routes.url_helpers.wysihtml5_select_admin_photos_path('') %>/#{editor_id}")
+    $.get("<%= Spina::Engine.routes.url_helpers.trix_select_admin_photos_path('') %>/#{editor_id}")
 
   @photoInsert: (e, url) ->
     length = this.editor.getDocument().toString().length

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

@@ -4,10 +4,6 @@
 // Normalizing
 @import spina/normalize
 
-// Mixins
-@import bourbon
-@import neat
-
 // Fonts
 @import fonts
 

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

@@ -15,7 +15,7 @@ button, input[type="submit"], input[type="button"]
   outline: none
   padding: 8px 16px
   text-decoration: none
-  @include transition(all .3s ease)
+  transition: all .3s ease
 
   &:hover
     background: shade(#efefef, 5%)
@@ -26,7 +26,7 @@ button, input[type="submit"], input[type="button"]
 
   &:active, &.button-active, &.button-shaded, &.button-shaded:active
     background: shade(#efefef, 10%)
-    @include transform(scale(0.95))
+    transform: scale(0.95)
 
   &:focus
     outline: none
@@ -123,14 +123,14 @@ button, input[type="submit"], input[type="button"]
     background: #999 !important
 
   &.button-saving:before
+    animation: rotate 3.0s linear infinite
     display: inline-block
-    @include animation(rotate 3.0s linear infinite)
 
-@include keyframes(rotate)
+@keyframes rotate
   from
-    @include transform(rotate(0deg))
+    transform: rotate(0deg)
   to
-    @include transform(rotate(360deg))
+    transform: rotate(360deg)
 
 .pull-right .button
   margin: 0 0 4px 4px
@@ -213,11 +213,11 @@ button, input[type="submit"], input[type="button"]
     z-index: 999
 
     &.animated
+      animation-duration: .3s
       display: block
-      @include animation-duration(.3s)
 
     &.no-animation
-      @include animation(none)
+      animation: none
 
   ul:before, .sliding-dropdown:before
     content: ""

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

@@ -4,6 +4,7 @@ $danger-color: #da3939
 $info-color: #17577c
 $error-color: #6a1515
 $alert-color: orange
+$warning-color: orange
 
 $asset-pipeline: true
 $font-family: "Proxima Nova", "Helvetica Neue", "Helvetica", sans-serif
@@ -12,4 +13,7 @@ $gutter: 5em
 
 $desktop: min-width 768px 8
 $tablet: max-width 768px 8
-$mobile: max-width 480px 4
+$mobile: max-width 480px 4
+
+$all-text-inputs: 'input[type="color"]', 'input[type="date"]', 'input[type="datetime"]', 'input[type="datetime-local"]', 'input[type="email"]', 'input[type="month"]', 'input[type="number"]', 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', 'input[type="week"]', 'input:not([type])', 'textarea'
+$all-text-inputs-focus: 'input[type="color"]:focus', 'input[type="date"]:focus', 'input[type="datetime"]:focus', 'input[type="datetime-local"]:focus', 'input[type="email"]:focus', 'input[type="month"]:focus', 'input[type="number"]:focus', 'input[type="password"]:focus', 'input[type="search"]:focus', 'input[type="tel"]:focus', 'input[type="text"]:focus', 'input[type="time"]:focus', 'input[type="url"]:focus', 'input[type="week"]:focus', 'input:not([type]):focus', 'textarea:focus'

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

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

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

@@ -1,6 +1,10 @@
 // Icons
 
-@include font-face("ics_spina", "spina/ics_spina", $asset-pipeline: true, $file-formats: eot woff ttf svg)
+@font-face
+  font-family: "ics_spina"
+  font-style: normal
+  font-weight: normal
+  src: url(asset-path('spina/ics_spina.woff')) format('woff')
 
 .icon
   display: inline-block