tenon 1.1.8 → 2.0.0

data/app/views/tenon/tenon_content/piece_types/form/_image.html.haml

@@ -1,49 +1,57 @@
-= f.hidden_field :image_id, class: 'asset-id-field'
-= f.hidden_field :position
-= f.hidden_field :size
-= f.hidden_field :stretch_to_fill
-.image{ class: f.object.stretch_to_fill? ? 'stretch' : '' }
+.tn-tc-fields__image-container{ class: f.object.stretch_to_fill? ? 'tn-tc-fields__image-container--stretch' : '', data: { asset_thumbnail: true } }
+  = f.hidden_field :image_id, data: { asset_id_field: true }
+  = f.hidden_field :position
+  = f.hidden_field :size
+  = f.hidden_field :stretch_to_fill
+
   - if f.object.image
     = backend_piece_image_tag(f.object)
   - else
-    = link_to(new_item_asset_path, class: 'add-image', data: { 'modal-remote' => true, 'modal-title' => t('tenon.tenon_content.select_image'), 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment' }) do
-      %span= t('tenon.tenon_content.add_image')
+    = link_to(new_item_asset_path, class: 'tn-tc-fields__add-image', data: { 'modal-remote' => true, 'modal-title' => "Select Image", 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment' }) do
+      %span Add Image
 
-  = f.super_text_area :caption, class: 'caption', placeholder: t('tenon.tenon_content.enter_caption_here'), style: ("display: none;" unless f.object.show_caption)
+  = f.super_text_area :caption, class: 'tn-tc-fields__caption', placeholder: 'Enter caption here...', data: { image_caption: true }, style: ("display: none;" unless f.object.show_caption)
   = f.hidden_field :show_caption
 
   .medium-editor-toolbar-form-anchor.link-form{ style: 'position: absolute; z-index: 10;' }
-    = link_to new_item_asset_path(hide_upload: true), 'title' => t('tenon.tenon_content.link_to_an_asset'), 'data-modal-remote' => 'true', 'data-modal-handler' => 'Tenon.features.tenonContent.ImageAssetLink', 'data-modal-title' => t('tenon.tenon_content.link_to_an_asset'), 'data-tooltip' => true do
-      %i.fa.fa-file-pdf-o
-    = f.super_text_field :link_url, placeholder: t('tenon.tenon_content.paste_or_type_a_link'), style: 'display; inline; width: 316px;';
-    = link_to '', '#', class: 'medium-editor-cancel', title: t('tenon.tenon_content.cancel'), data: { tooltip: true }
+    = f.super_text_field :link_url, placeholder: 'Paste or type a link', style: 'display; inline; width: 316px;';
+
+    = link_to '#', class: 'medium-editor-submit medium-editor-toolbar__action', title: 'Cancel', data: {  tooltip: true  } do
+      %i.material-icon.material-icon--smaller-on-min check_circle
+
+    = link_to '#', class: 'medium-editor-cancel medium-editor-toolbar__action', title: 'Cancel', data: {  tooltip: true  } do
+      %i.material-icon.material-icon--smaller-on-min cancel
+
+    = link_to new_item_asset_path(hide_upload: true), class: 'medium-editor-toolbar__action', 'title' => 'Link to an Asset', 'data-modal-remote' => 'true', 'data-modal-handler' => 'Tenon.features.tenonContent.ImageAssetLink', 'data-modal-title' => 'Link to Asset', 'data-tooltip' => true do
+      %i.material-icon.material-icon--smaller-on-min photo
+
 
-  .medium-editor-toolbar.medium-toolbar-arrow-under.medium-editor-toolbar-active.image-controls{ style: "display: none; margin-top: -65px;" }
+  .medium-editor-toolbar.medium-editor-toolbar-active.image-controls{ style: "display: none; margin-top: -65px;" }
     %ul.medium-editor-toolbar-actions.clearfix
       %li
-        %button{ title: t('tenon.assets.crop'), class: 'asset-crop medium-editor-action medium-editor-button-first', data: { 'tooltip' => true, 'post-crop-handler' => 'Tenon.features.tenonContent.PostCropHandler', 'asset-id' => f.object.image_id } }
-          %i.fa.fa-crop
+        %button{ title: 'Crop', class: 'asset-crop medium-editor-toolbar__action medium-editor-button-first', data: { 'tooltip' => true, 'post-crop-handler' => 'Tenon.features.tenonContent.PostCropHandler', 'asset-id' => f.object.image_id, 'base-assets-path' => assets_path } }
+          %i.material-icon.material-icon--smaller-on-min crop
       %li
-        %button{ title: t('tenon.tenon_content.grow'), class: 'grow-image medium-editor-action', data: { 'column-resize-operation' => 'increase', 'tooltip' => true } }
-          %i.fa.fa-plus
+        %button{ title: 'Grow', class: 'grow-image medium-editor-toolbar__action', data: { 'column-resize-operation' => 'increase', 'tooltip' => true } }
+          %i.material-icon.material-icon--smaller-on-min add
       %li
-        %button{ title: t('tenon.tenon_content.shrink'), class: 'shrink-image medium-editor-action', data: { 'column-resize-operation' => 'decrease', 'tooltip' => true } }
-          %i.fa.fa-minus
+        %button{ title: 'Shrink', class: 'shrink-image medium-editor-toolbar__action', data: { 'column-resize-operation' => 'decrease', 'tooltip' => true } }
+          %i.material-icon.material-icon--smaller-on-min remove
       %li
-        %button{ title: t('tenon.tenon_content.toggle_caption'), class: 'medium-editor-action toggle-caption', data: { tooltip: true } }
-          %i.fa.fa-comment
+        %button{ title: 'Toggle Caption', class: 'medium-editor-toolbar__action toggle-caption', data: { tooltip: true } }
+          %i.material-icon.material-icon--smaller-on-min comment
       %li
-        %button{ title: t('tenon.tenon_content.swap_sides'), class: 'swap-sides medium-editor-action', data: { tooltip: true } }
-          %i.fa.fa-exchange
+        %button{ title: 'Swap Sides', class: 'swap-sides medium-editor-toolbar__action', data: { tooltip: true } }
+          %i.material-icon.material-icon--smaller-on-min compare_arrows
       %li
-        %button{ title: t('tenon.tenon_content.stretch_to_fill'), class: "stretch-to-fill medium-editor-action #{f.object.stretch_to_fill? ? 'medium-editor-button-active' : ''}", data: { tooltip: true } }
-          %i.fa.fa-arrows-alt
+        %button{ title: 'Stretch to Fill', class: "stretch-to-fill medium-editor-toolbar__action #{ f.object.stretch_to_fill? ? 'medium-editor-button-active' : '' }", data: { tooltip: true } }
+          %i.material-icon.material-icon--smaller-on-min aspect_ratio
       %li
-        %button.add-link.medium-editor-action{title: t('tenon.tenon_content.add_link'), class: ('medium-editor-button-active' unless f.object.link_url.blank?), data: { tooltip: true } }
-          %i.fa.fa-link
+        %button.add-link.medium-editor-toolbar__action{ title: 'Add Link', class: ('medium-editor-button-active' unless f.object.link_url.blank?), data: { tooltip: true } }
+          %i.material-icon.material-icon--smaller-on-min link
       %li
-        %button{ href: new_item_asset_path, title: t('tenon.tenon_content.replace_image'), class: 'replace-image medium-editor-action medium-editor-button-last', data: { 'modal-remote' => 'true', 'modal-title' => t('tenon.tenon_content.select_image'), 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment', 'tooltip' => true } }
-          %i.fa.fa-picture-o
+        %button{ href: new_item_asset_path, title: 'Replace Image', class: 'replace-image medium-editor-toolbar__action  medium-editor-button-last', data: { 'modal-remote' => 'true', 'modal-title' => "Select Image", 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment', 'tooltip' => true } }
+          %i.material-icon.material-icon--smaller-on-min photo_library
 
     .medium-editor-toolbar-form-anchor
 

data/app/views/tenon/tenon_content/row_types/display/_four_column_image.html.haml

@@ -1,5 +1,5 @@
-.tn-tc-row.four-column-image
+.tn-tc__row.four-column-image
   - row.pieces.each do |piece|
-    .tn-tc-piece.tn-tc-asset-field.three{class: cycle('', '', '', 'omega')}
-      = render "tenon/tenon_content/piece_types/display/image", piece: piece
-  .spacer
+    .tn-tc-piece.tn-tc-asset-field.three{ class: cycle('', '', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/display/image', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_four_column_image_and_text.html.haml

@@ -1,10 +1,10 @@
-.tn-tc-row.four-column-image-and-text.stacked-image-and-text
+.tn-tc__row.four-column-image-and-text.stacked-image-and-text
   -[[0,1], [2,3], [4,5], [6,7]].each do |positions|
     .three{class: cycle('', '', '', 'omega')}
-      - row.pieces.select { |p| positions.include?(p.position) }.each do |piece|
+      - row.pieces.select{ |p| positions.include?(p.position) }.each do |piece|
         - if piece.piece_type == 'Image'
           .tn-tc-piece.tn-tc-asset-field
-            = render "tenon/tenon_content/piece_types/display/image", piece: piece
+            = render 'tenon/tenon_content/piece_types/display/image', piece: piece
         - else
           .tn-tc-piece
             = render 'tenon/tenon_content/piece_types/display/text', piece: piece

data/app/views/tenon/tenon_content/row_types/display/_four_column_text.html.haml

@@ -1,5 +1,5 @@
-.tn-tc-row.four-column-text.multi-text
+.tn-tc__row.four-column-text.multi-text
   - row.pieces.each do |piece|
-    .tn-tc-piece.three{class: cycle('', '', '', 'omega')}
-      = render "tenon/tenon_content/piece_types/display/text", piece: piece
-  .spacer
+    .tn-tc-piece.three{ class: cycle('', '', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/display/text', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_full_width_embedded_content.html.haml

@@ -1,4 +1,4 @@
-.tn-tc-row.full-width-embedded-content
+.tn-tc__row.full-width-embedded-content
   .tn-tc-piece.twelve
-    = render "tenon/tenon_content/piece_types/display/embedded_content", piece: row.pieces.first
-  .spacer
+    = render 'tenon/tenon_content/piece_types/display/embedded_content', piece: row.pieces.first
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_full_width_image.html.haml

@@ -1,4 +1,4 @@
-.tn-tc-row.full-width-image
+.tn-tc__row.full-width-image
   .tn-tc-piece.twelve.tn-tc-asset-field
-    = render "tenon/tenon_content/piece_types/display/image", piece: row.pieces.first
-  .spacer
+    = render 'tenon/tenon_content/piece_types/display/image', piece: row.pieces.first
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_full_width_text.html.haml

@@ -1,4 +1,4 @@
-.tn-tc-row.full-width-text
+.tn-tc__row.full-width-text
   .tn-tc-piece.twelve
-    = render "tenon/tenon_content/piece_types/display/text", piece: row.pieces.first
-  .spacer
+    = render 'tenon/tenon_content/piece_types/display/text', piece: row.pieces.first
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_left_image_right_text.html.haml

@@ -1,9 +1,9 @@
-.tn-tc-row.left-image-right-text.image-and-text
+.tn-tc__row.left-image-right-text.image-and-text
   - row.pieces.each do |piece|
-    - if piece.piece_type == "Image"
-      .tn-tc-piece.tn-tc-asset-field{:class => piece.size}
-        = render "tenon/tenon_content/piece_types/display/image", piece: piece
-    - elsif piece.piece_type == "Text"
-      .tn-tc-piece.omega{:class => piece.size}
-        = render "tenon/tenon_content/piece_types/display/text", piece: piece
-  .spacer
+    - if piece.piece_type == 'Image'
+      .tn-tc-piece.tn-tc-asset-field{ :class => piece.size }
+        = render 'tenon/tenon_content/piece_types/display/image', piece: piece
+    - elsif piece.piece_type == 'Text'
+      .tn-tc-piece.omega{ :class => piece.size }
+        = render 'tenon/tenon_content/piece_types/display/text', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_left_text_right_image.html.haml

@@ -1,9 +1,9 @@
-.tn-tc-row.left-text-right-image.image-and-text
+.tn-tc__row.left-text-right-image.image-and-text
   - row.pieces.each do |piece|
-    - if piece.piece_type == "Text"
-      .tn-tc-piece{class: piece.size}
-        = render "tenon/tenon_content/piece_types/display/text", piece: piece
+    - if piece.piece_type == 'Text'
+      .tn-tc-piece{ class: piece.size }
+        = render 'tenon/tenon_content/piece_types/display/text', piece: piece
     - if piece.piece_type == "Image"
-      .tn-tc-piece.tn-tc-asset-field.omega{class: piece.size}
-        = render "tenon/tenon_content/piece_types/display/image", piece: piece
-  .spacer
+      .tn-tc-piece.tn-tc-asset-field.omega{ class: piece.size }
+        = render 'tenon/tenon_content/piece_types/display/image', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_left_wrapped_image_with_text.html.haml

@@ -1,9 +1,9 @@
-.tn-tc-row.left-wrapped-image-with-text.wrapped-image-with-text
+.tn-tc__row.left-wrapped-image-with-text.wrapped-image-with-text
   .twelve
     - row.pieces.each do |piece|
-      - if piece.piece_type == "Image"
-        .tn-tc-wrapped-image.left.omega{class: piece.size}
-          = render "tenon/tenon_content/piece_types/display/image", piece: piece
+      - if piece.piece_type == 'Image'
+        .tn-tc__wrapped-image.left.omega{ class: piece.size }
+          = render 'tenon/tenon_content/piece_types/display/image', piece: piece
       - if piece.piece_type == "Text"
-        = render "tenon/tenon_content/piece_types/display/text", piece: piece
-  .spacer
+        = render 'tenon/tenon_content/piece_types/display/text', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_right_wrapped_image_with_text.html.haml

@@ -1,9 +1,9 @@
-.tn-tc-row.right-wrapped-image-with-text.wrapped-image-with-text
+.tn-tc__row.right-wrapped-image-with-text.wrapped-image-with-text
   .twelve
     - row.pieces.each do |piece|
-      - if piece.piece_type == "Image"
-        .tn-tc-wrapped-image.right.omega{class: piece.size}
-          = render "tenon/tenon_content/piece_types/display/image", piece: piece
-      - if piece.piece_type == "Text"
-        = render "tenon/tenon_content/piece_types/display/text", piece: piece
-  .spacer
+      - if piece.piece_type == 'Image'
+        .tn-tc__wrapped-image.right.omega{ class: piece.size }
+          = render 'tenon/tenon_content/piece_types/display/image', piece: piece
+      - if piece.piece_type == 'Text'
+        = render 'tenon/tenon_content/piece_types/display/text', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_six_column_image.html.haml

@@ -1,8 +1,8 @@
-.tn-tc-row.six-column-image
+.tn-tc__row.six-column-image
   - [ [0, 1], [2, 3], [4, 5] ].each_with_index do |columns, i|
-    .tn-tc-piece.four{class: i == 2 ? 'omega' : ''}
+    .tn-tc-piece.four{ class: i == 2 ? 'omega' : '' }
       - columns.each do |position|
-        .tn-tc-piece.tn-tc-asset-field.six{class: cycle('', 'omega')}
-          - row.pieces.select { |p| p.position == position }.each do |piece|
+        .tn-tc-piece.tn-tc-asset-field.six{ class: cycle('', 'omega') }
+          - row.pieces.select{ |p| p.position == position }.each do |piece|
             = render 'tenon/tenon_content/piece_types/display/image', piece: piece
   .spacer

data/app/views/tenon/tenon_content/row_types/display/_six_column_image_and_text.html.haml

@@ -1,12 +1,12 @@
-.tn-tc-row.six-column-image-and-text.stacked-image-and-text
+.tn-tc__row.six-column-image-and-text.stacked-image-and-text
   - [ [ [0,1], [2,3] ], [ [4,5], [6,7] ], [ [8,9], [10,11] ] ].each_with_index do |columns, i|
-    .four{class: i == 2 ? 'omega' : ''}
+    .four{ class: i == 2 ? 'omega' : '' }
       - columns.each do |positions|
-        .six{class: cycle('', 'omega')}
-          - row.pieces.select { |p| positions.include?(p.position) }.each do |piece|
+        .six{ class: cycle('', 'omega') }
+          - row.pieces.select{ |p| positions.include?(p.position) }.each do |piece|
             - if piece.piece_type == 'Image'
               .tn-tc-piece.tn-tc-asset-field
-                = render "tenon/tenon_content/piece_types/display/image", piece: piece
+                = render 'tenon/tenon_content/piece_types/display/image', piece: piece
             - else
               .tn-tc-piece
                 = render 'tenon/tenon_content/piece_types/display/text', piece: piece

data/app/views/tenon/tenon_content/row_types/display/_three_column_image.html.haml

@@ -1,5 +1,5 @@
-.tn-tc-row.three-column-image
+.tn-tc__row.three-column-image
   - row.pieces.each do |piece|
-    .tn-tc-piece.tn-tc-asset-field.four{class: cycle('', '', 'omega')}
-      = render "tenon/tenon_content/piece_types/display/image", piece: piece
-  .spacer
+    .tn-tc-piece.tn-tc-asset-field.four{ class: cycle('', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/display/image', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_three_column_image_and_text.html.haml

@@ -1,10 +1,10 @@
-.tn-tc-row.three-column-image-and-text.stacked-image-and-text
+.tn-tc__row.three-column-image-and-text.stacked-image-and-text
   -[[0,1], [2,3], [4,5]].each do |positions|
-    .four{class: cycle('', '', 'omega')}
-      - row.pieces.select { |p| positions.include?(p.position) }.each do |piece|
+    .four{ class: cycle('', '', 'omega') }
+      - row.pieces.select{ |p| positions.include?(p.position) }.each do |piece|
         - if piece.piece_type == 'Image'
           .tn-tc-piece.tn-tc-asset-field
-            = render "tenon/tenon_content/piece_types/display/image", piece: piece
+            = render 'tenon/tenon_content/piece_types/display/image', piece: piece
         - else
           .tn-tc-piece
             = render 'tenon/tenon_content/piece_types/display/text', piece: piece

data/app/views/tenon/tenon_content/row_types/display/_three_column_text.html.haml

@@ -1,5 +1,5 @@
-.tn-tc-row.three-column-text.multi-text
+.tn-tc__row.three-column-text.multi-text
   - row.pieces.each do |piece|
-    .tn-tc-piece.four{class: cycle('', '', 'omega')}
-      = render "tenon/tenon_content/piece_types/display/text", piece: piece
-  .spacer
+    .tn-tc-piece.four{ class: cycle('', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/display/text', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_two_column_image.html.haml

@@ -1,5 +1,5 @@
-.tn-tc-row.two-column-image
+.tn-tc__row.two-column-image
   - row.pieces.each do |piece|
     .tn-tc-piece.tn-tc-asset-field{ class: [piece.size, cycle('', 'omega')] }
-      = render "tenon/tenon_content/piece_types/display/image", piece: piece
-  .spacer
+      = render 'tenon/tenon_content/piece_types/display/image', piece: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/display/_two_column_image_and_text.html.haml

@@ -1,10 +1,10 @@
-.tn-tc-row.two-column-image-and-text.stacked-image-and-text
+.tn-tc__row.two-column-image-and-text.stacked-image-and-text
   -[[0,1], [2,3]].each do |positions|
-    .six{class: cycle('', 'omega')}
-      - row.pieces.select { |p| positions.include?(p.position) }.each do |piece|
+    .six{ class: cycle('', 'omega') }
+      - row.pieces.select{ |p| positions.include?(p.position) }.each do |piece|
         - if piece.piece_type == 'Image'
           .tn-tc-piece.tn-tc-asset-field
-            = render "tenon/tenon_content/piece_types/display/image", piece: piece
+            = render 'tenon/tenon_content/piece_types/display/image', piece: piece
         - else
           .tn-tc-piece
             = render 'tenon/tenon_content/piece_types/display/text', piece: piece

data/app/views/tenon/tenon_content/row_types/display/_two_column_text.html.haml

@@ -1,5 +1,5 @@
-.tn-tc-row.two-column-text
+.tn-tc__row.two-column-text
   - row.pieces.each do |piece|
-    .tn-tc-piece.six{class: cycle('', 'omega')}
-      = render "tenon/tenon_content/piece_types/display/text", piece: piece
+    .tn-tc-piece.six{ class: cycle('', 'omega') }
+      = render 'tenon/tenon_content/piece_types/display/text', piece: piece
   .spacer

data/app/views/tenon/tenon_content/row_types/display/_two_column_with_background_image.html.haml

@@ -1,6 +1,6 @@
-.tn-tc-row.two-column-with-background-image.tn-tc-background-image{style: "background-image: url(#{row.pieces.first.image.url})"}
+.tn-tc__row.two-column-with-background-image.tn-tc-background-image{style: "background-image: url(#{row.pieces.first.image.url})"}
   .tn-tc-background-content
     - row.pieces[1..-1].each do |piece|
-      .tn-tc-piece.six{class: cycle('', 'omega')}
-        = render "tenon/tenon_content/piece_types/display/text", piece: piece
+      .tn-tc-piece.six{ class: cycle('', 'omega') }
+        = render 'tenon/tenon_content/piece_types/display/text', piece: piece
   .spacer

data/app/views/tenon/tenon_content/row_types/form/_four_column_image.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.tn-tc-asset-field.three{ class: cycle('', '', '', 'omega') }
-      = render "tenon/tenon_content/piece_types/form/image", f: piece, position: piece.object.position
+    .tn-tc-piece.tn-tc-asset-field.inner3{ class: cycle('', '', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/form/image', f: piece, position: piece.object.position
   .spacer

data/app/views/tenon/tenon_content/row_types/form/_four_column_image_and_text.html.haml

@@ -2,12 +2,12 @@
   = f.hidden_field :row_type
   = f.hidden_field :list_order
   -[[0,1], [2,3], [4,5], [6,7]].each do |positions|
-    .three{class: cycle('', '', '', 'omega')}
-      = f.fields_for :pieces, f.object.pieces.select { |p| positions.include?(p.position) } do |piece|
+    .inner3{ class: cycle('', '', '', 'omega') }
+      = f.fields_for :pieces, f.object.pieces.select{ |p| positions.include?(p.position) } do |piece|
         = piece.hidden_field :piece_type
         - if piece.object.piece_type == 'Image'
           .tn-tc-piece.tn-tc-asset-field
-            = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'half'
+            = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'half'
         - else
           .tn-tc-piece
             = render 'tenon/tenon_content/piece_types/form/text', f: piece

data/app/views/tenon/tenon_content/row_types/form/_four_column_text.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.three{class: cycle('', '', '', 'omega')}
-      = render "tenon/tenon_content/piece_types/form/text", f: piece, position: piece.object.position
-  .spacer
+    .tn-tc-piece.inner3{ class: cycle('', '', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/form/text', f: piece, position: piece.object.position
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_full_width_embedded_content.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.twelve
-      = render "tenon/tenon_content/piece_types/form/embedded_content", f: piece, position: 0
-  .spacer
+    .tn-tc-piece.inner12
+      = render 'tenon/tenon_content/piece_types/form/embedded_content', f: piece, position: 0
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_full_width_image.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.tn-tc-asset-field.twelve
-      = render "tenon/tenon_content/piece_types/form/image", f: piece, position: 0, style: 'full'
-  .spacer
+    .tn-tc-piece.tn-tc-asset-field.inner12
+      = render 'tenon/tenon_content/piece_types/form/image', f: piece, position: 0, style: 'full'
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_full_width_text.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.twelve
-      = render "tenon/tenon_content/piece_types/form/text", f: piece, position: 0
-  .spacer
+    .tn-tc-piece.inner12
+      = render 'tenon/tenon_content/piece_types/form/text', f: piece, position: 0
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_left_image_right_text.html.haml

@@ -1,12 +1,13 @@
-.tn-tc-left-image-right-text.tn-tc-image-and-text
+.tn-tc-fields.tn-tc-fields--left-image-right-text.tn-tc-fields--image-and-text
   = f.hidden_field :row_type
   = f.hidden_field :list_order
   = f.fields_for :pieces do |piece|
     = piece.hidden_field :piece_type
-    - if piece.object.piece_type == "Image"
-      .tn-tc-piece.tn-tc-asset-field{:class => piece.object.size}
-        = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'half'
-    - elsif piece.object.piece_type == "Text"
-      .tn-tc-piece.omega{:class => piece.object.size}
-        = render "tenon/tenon_content/piece_types/form/text", f: piece
-  .spacer
+    - if piece.object.piece_type == 'Image'
+      .tn-tc-fields__asset{ class: "inner#{piece.object.size}" }
+        .tn-tc-asset-field
+          = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'half'
+    - elsif piece.object.piece_type == 'Text'
+      .omega{ class: "inner#{piece.object.size}" }
+        = render 'tenon/tenon_content/piece_types/form/text', f: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_left_text_right_image.html.haml

@@ -3,10 +3,10 @@
   = f.hidden_field :list_order
   = f.fields_for :pieces do |piece|
     = piece.hidden_field :piece_type
-    - if piece.object.piece_type == "Text"
-      .tn-tc-piece{class: piece.object.size}
-        = render "tenon/tenon_content/piece_types/form/text", f: piece
-    - if piece.object.piece_type == "Image"
-      .tn-tc-piece.tn-tc-asset-field.omega{class: piece.object.size}
-        = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'half'
+    - if piece.object.piece_type == 'Text'
+      .tn-tc-piece{ class: "inner#{piece.object.size}" }
+        = render 'tenon/tenon_content/piece_types/form/text', f: piece
+    - if piece.object.piece_type == 'Image'
+      .tn-tc-piece.tn-tc-asset-field.omega{class: "inner#{piece.object.size}"}
+        = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'half'
   .spacer

data/app/views/tenon/tenon_content/row_types/form/_left_wrapped_image_with_text.html.haml

@@ -1,12 +1,12 @@
-.tn-tc-left-wrapped-image-with-text.tn-tc-wrapped-image-with-text
+.tn-tc-left-wrapped-image-with-text.tn-tc__wrapped-image-with-text
   = f.hidden_field :row_type
   = f.hidden_field :list_order
   .twelve
     = f.fields_for :pieces do |piece|
       = piece.hidden_field :piece_type
-      - if piece.object.piece_type == "Image"
-        .wrapped-image.left.tn-tc-asset-field.omega.tn-tc-piece{class: piece.object.size}
-          = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'wrap'
-      - if piece.object.piece_type == "Text"
-        = render "tenon/tenon_content/piece_types/form/text", f: piece
-  .spacer
+      - if piece.object.piece_type == 'Image'
+        .wrapped-image.left.tn-tc-asset-field.omega.tn-tc-piece{ class: "inner#{piece.object.size}" }
+          = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'wrap'
+      - if piece.object.piece_type == 'Text'
+        = render 'tenon/tenon_content/piece_types/form/text', f: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_right_wrapped_image_with_text.html.haml

@@ -1,12 +1,12 @@
-.tn-tc-right-wrapped-image-with-text.tn-tc-wrapped-image-with-text
+.tn-tc-right-wrapped-image-with-text.tn-tc__wrapped-image-with-text
   = f.hidden_field :row_type
   = f.hidden_field :list_order
   .twelve
     = f.fields_for :pieces do |piece|
       = piece.hidden_field :piece_type
-      - if piece.object.piece_type == "Image"
-        .wrapped-image.right.tn-tc-asset-field.omega.tn-tc-piece{class: piece.object.size}
-          = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'wrap'
-      - if piece.object.piece_type == "Text"
-        = render "tenon/tenon_content/piece_types/form/text", f: piece
-  .spacer
+      - if piece.object.piece_type == 'Image'
+        .wrapped-image.right.tn-tc-asset-field.omega.tn-tc-piece{ class: "inner#{piece.object.size}" }
+          = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'wrap'
+      - if piece.object.piece_type == 'Text'
+        = render 'tenon/tenon_content/piece_types/form/text', f: piece
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_six_column_image.html.haml

@@ -2,9 +2,9 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   - [ [0, 1], [2, 3], [4, 5] ].each_with_index do |columns, i|
-    .four{class: i == 2 ? 'omega' : ''}
+    .inner4{ class: i == 2 ? 'omega' : '' }
       - columns.each do |position|
-        .tn-tc-piece.tn-tc-asset-field.six{class: cycle('', 'omega')}
+        .tn-tc-piece.tn-tc-asset-field.inner6{ class: cycle('', 'omega') }
           = f.fields_for :pieces, f.object.pieces.select{ |p| p.position == position } do |piece|
             = render 'tenon/tenon_content/piece_types/form/image', f: piece, position: piece.object.position
   .spacer

data/app/views/tenon/tenon_content/row_types/form/_six_column_image_and_text.html.haml

@@ -2,10 +2,10 @@
   = f.hidden_field :row_type
   = f.hidden_field :list_order
   - [ [ [0,1], [2,3] ], [ [4,5], [6,7] ], [ [8,9], [10,11] ] ].each_with_index do |columns, i|
-    .four{class: i == 2 ? 'omega' : ''}
+    .inner4{ class: i == 2 ? 'omega' : '' }
       - columns.each do |positions|
-        .six{class: cycle('', 'omega')}
-          = f.fields_for :pieces, f.object.pieces.select { |p| positions.include?(p.position) } do |piece|
+        .inner6{ class: cycle('', 'omega') }
+          = f.fields_for :pieces, f.object.pieces.select{ |p| positions.include?(p.position) } do |piece|
             = piece.hidden_field :piece_type
             - if piece.object.piece_type == 'Image'
               .tn-tc-piece.tn-tc-asset-field

data/app/views/tenon/tenon_content/row_types/form/_three_column_image.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.tn-tc-asset-field.four{ class: cycle('', '', 'omega') }
-      = render "tenon/tenon_content/piece_types/form/image", f: piece, position: piece.object.position
+    .tn-tc-piece.tn-tc-asset-field.inner4{ class: cycle('', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/form/image', f: piece, position: piece.object.position
   .spacer

data/app/views/tenon/tenon_content/row_types/form/_three_column_image_and_text.html.haml

@@ -2,12 +2,12 @@
   = f.hidden_field :row_type
   = f.hidden_field :list_order
   -[[0,1], [2,3], [4,5]].each do |positions|
-    .four{class: cycle('', '', 'omega')}
-      = f.fields_for :pieces, f.object.pieces.select { |p| positions.include?(p.position) } do |piece|
+    .inner4{ class: cycle('', '', 'omega') }
+      = f.fields_for :pieces, f.object.pieces.select{ |p| positions.include?(p.position) } do |piece|
         = piece.hidden_field :piece_type
         - if piece.object.piece_type == 'Image'
           .tn-tc-piece.tn-tc-asset-field
-            = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'half'
+            = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'half'
         - else
           .tn-tc-piece
             = render 'tenon/tenon_content/piece_types/form/text', f: piece

data/app/views/tenon/tenon_content/row_types/form/_three_column_text.html.haml

@@ -2,6 +2,6 @@
   = f.hidden_field :list_order
   = f.hidden_field :row_type
   = f.fields_for :pieces do |piece|
-    .tn-tc-piece.four{class: cycle('', '', 'omega')}
-      = render "tenon/tenon_content/piece_types/form/text", f: piece, position: piece.object.position
-  .spacer
+    .tn-tc-piece.inner4{ class: cycle('', '', 'omega') }
+      = render 'tenon/tenon_content/piece_types/form/text', f: piece, position: piece.object.position
+  .spacer

data/app/views/tenon/tenon_content/row_types/form/_two_column_image.html.haml

@@ -3,6 +3,6 @@
   = f.hidden_field :list_order
   = f.fields_for :pieces do |piece|
     = piece.hidden_field :piece_type
-    .tn-tc-piece.tn-tc-asset-field{ class: [piece.object.size, cycle('', 'omega')] }
-      = render "tenon/tenon_content/piece_types/form/image", f: piece, style: 'half'
+    .tn-tc-piece.tn-tc-asset-field{ class: ["inner#{piece.object.size}", cycle('', 'omega')] }
+      = render 'tenon/tenon_content/piece_types/form/image', f: piece, style: 'half'
   .spacer