tenon 1.1.8 → 2.0.0

data/app/views/tenon/styleguides/colors/_helpers.html.haml

@@ -0,0 +1,48 @@
+%section
+  %a.scroll-target{name: 'color__class-helpers'}
+  %h3.color-black Color class helpers
+  %p To ease the styling of on-the-fly color changes in generated layouts.
+
+  .panel.panel--padded
+    %h4 Base
+    %p
+      Available for the following color names:
+    %code
+      = color_spans(%w(primary secondary accent black white grey required error warning success))
+    %code
+      %p= '.color-<color-name>'
+      %p= '.bg-color-<color-name>'
+
+    %h4 Opacity
+    %p Available for the following color names:
+    %code
+      = color_spans(%w(primary secondary accent grey))
+    %code.expandable
+      = expandable_toggle
+      - (1..10).each do |i|
+        %p
+          = ".color-<color-name>-o#{i*10}"
+          = "=> color: rgba(<color-name>, #{(i*0.1).round(1)});"
+      %br/
+      - (1..10).each do |i|
+        %p
+          = ".bg-color-<color-name>-o#{i*10}"
+          = "=> background-color: rgba(<color-name>,#{(i*0.1).round(1)});"
+
+    %h4 Lighten & Darken
+    %p Available for the following color names:
+    %code
+      = color_spans(%w(primary secondary accent grey))
+    %code.expandable
+      = expandable_toggle
+      - (1..5).each do |i|
+        %p= ".color-<color-name>-l#{i} => color: lighten(<color-name>, #{i}0%);"
+      %br/
+      - (1..5).each do |i|
+        %p= ".bg-color-<color-name>-l#{i} => background-color: lighten(<color-name>, #{i}0%);"
+      %br/
+      - (1..5).each do |i|
+        %p= ".color-<color-name>-d#{i} => color: darken(<color-name>, #{i}0%);"
+      %br/
+      - (1..5).each do |i|
+        %p= ".bg-color-<color-name>-d#{i} => background-color: darken(<color-name>, #{i}0%);"

data/app/views/tenon/styleguides/colors/_variables.html.haml

@@ -0,0 +1,31 @@
+%section
+  %a.scroll-target{name: 'color__variables'}
+  %h3.color-black Color variables
+
+  .panel.panel--padded
+    %h4 Names
+    %p
+      These are the 10 base colors that are used throughtout Tenon.
+      You can over-ride any of these to change the look of Tenon.
+
+    %code
+      %span.color-primary Source:
+      app/assets/stylesheets/tenon/variables/base-colors.scss
+
+    %code
+      %span.color-primary Put your changes here:
+      app/assets/stylesheets/client/variables/base-colors.scss
+
+    %h4 Variables
+    %p
+      As much as possible, each element has a custom color variable.
+      This allows you to change one element without affecting others.
+
+    %code
+      %span.color-primary Source:
+      app/assets/stylesheets/tenon/variables/colors-named.scss
+
+
+    %code
+      %span.color-primary Put your changes here:
+      app/assets/stylesheets/client/variables/colors-named.scss

data/app/views/tenon/styleguides/forms/_default.html.haml

@@ -0,0 +1,92 @@
+%section
+  %a.scroll-target{name: 'forms'}
+  %a.scroll-target{name: 'forms__default'}
+  %h3.color-black Form elements
+  %p
+    Form elements are generally confined to a panel div (.panel.panel--padded).
+    Below are samples of all available form elements generated by the
+    Tenon::FormBuilder
+
+  .panel.panel--padded
+    = f.text_field :text, label: 'Text field'
+    %code f.text_field :text, label: 'Text field'
+
+    %hr.hr--dashed
+
+    = f.title_text_field :text, label: 'Title field', placeholder: 'A sample title field'
+    %code f.title_text_field :text, class: 'form-title-field', label: 'Title field', placeholder: 'A sample title field'
+
+    %hr.hr--dashed
+
+    = f.text_field :text, required: true, label: 'Required title text field', placeholder: 'This field is required!'
+    %code f.text_field :text, required: true, label: 'Required title text field', placeholder: 'This field is required!'
+
+    %hr.hr--dashed
+
+    = f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'
+    %code f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'
+
+    %hr.hr--dashed
+
+    = f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'
+    %code f.password_field :text, label: 'Password field', placeholder: 'Minimum 8 characters and no letters or numbers'
+
+    %hr.hr--dashed
+
+    = f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Select'
+    %code f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Select'
+
+    %hr.hr--dashed
+
+    = f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Multiple select', multiple: true
+    %code f.select :text, ['Option 1', 'Option 2', 'Option 3'], label: 'Multiple select', multiple: true
+
+    %hr.hr--dashed
+
+    = f.date_time_picker :text, label: 'Date & Time'
+    %code f.date_time_picker :text, label: 'Date & Time'
+
+    %hr.hr--dashed
+
+    = f.check_box :text, label: 'Use this for a single check box option', explanation: 'This is how a stand alone check box works'
+    %code f.check_box :text, label: 'Use this for a single check box option', explanation: 'This is how a stand alone check box works'
+
+    %hr.hr--dashed
+
+    = input_block 'Select a few check boxes', explanation: 'This is how a group of check boxes works' do
+      = f.inline_check_box :text, label: 'One'
+      = f.inline_check_box :text, label: 'Two'
+      = f.inline_check_box :text, label: 'Three'
+    %code
+      %p input_block 'Select a few check boxes', explanation: 'This is how a group of check boxes works' do
+      %p   f.inline_check_box :text, label: 'One'
+      %p   f.inline_check_box :text, label: 'Two'
+      %p   f.inline_check_box :text, label: 'Three'
+
+    %hr.hr--dashed
+
+    = f.radio_button :text, 'value', label: 'Select this standalone radio button if you have one option', explanation: 'This is how a stand alone radio button works'
+    %code
+      f.radio_button :text, 'value', label: 'Select this standalone radio button if you have one option', explanation: 'This is how a stand alone radio button works'
+
+    %hr.hr--dashed
+
+    = input_block 'This is some radio actions', explanation: 'This explains the group of radio_buttons' do
+      = f.inline_radio_button :text, 'value1', label: 'Option 1'
+      = f.inline_radio_button :text, 'value2', label: 'Option 2'
+      = f.inline_radio_button :text, 'value3', label: 'Option 3'
+    %code
+      %p input_block 'This is some radio actions', explanation: 'This explains this group of radio_buttons' do
+      %p   f.inline_radio_button :text, 'value1', label: 'Option 1'
+      %p   f.inline_radio_button :text, 'value2', label: 'Option 2'
+      %p   f.inline_radio_button :text, 'value3', label: 'Option 3'
+
+    %hr.hr--dashed
+
+    = f.text_area :text, label: 'Text area'
+    %code f.text_area :text, label: 'Text area'
+
+    %hr.hr--dashed
+
+    = f.rich_text :text, label: 'Text area with WYSIWIG'
+    %code f.rich_text :text, label: 'Text area with WYSIWIG'

data/app/views/tenon/styleguides/forms/_html5.html.haml

@@ -0,0 +1,31 @@
+%section
+  %a.scroll-target{name: 'forms__html5'}
+  %h3.color-black HTML5 fields
+  %p
+    These are HTML5 specific and might not work for every app (i.e. IE). But
+    they are available in Tenon.
+  .panel.panel--padded
+    = f.number_field :number, label: 'Number field', placeholder: 'i.e. 1234'
+    %code
+      %p f.number_field :number, label: 'Number field', placeholder: 'i.e. 1234'
+      %p= link_to 'http://caniuse.com/#feat=input-number', 'http://caniuse.com/#feat=input-number', target: '_'
+
+    = f.email_field :text, label: 'Email field', placeholder: 'placeholder@email.com'
+    %code
+      %p f.email_field :text, label: 'Email field', placeholder: 'placeholder@email.com'
+      %p.font-smallest= link_to 'http://caniuse.com/#feat=input-email-tel-url', 'http://caniuse.com/#feat=input-email-tel-url', target: '_'
+
+    = f.phone_field :text, label: 'Phone field', placeholder: 'i.e. 905 522-7894'
+    %code
+      %p f.phone_field :text, label: 'Phone field', placeholder: 'i.e. 905 522-7894'
+      %p.font-smallest= link_to 'http://caniuse.com/#feat=input-email-tel-url', 'http://caniuse.com/#feat=input-email-tel-url', target: '_'
+
+    = f.url_field :text, label: 'URL field', placeholder: 'i.e. http://factore.ca'
+    %code
+      %p f.url_field :text, label: 'URL field', placeholder: 'i.e. http://factore.ca'
+      %p.font-smallest= link_to 'http://caniuse.com/#feat=input-email-tel-url', 'http://caniuse.com/#feat=input-email-tel-url', target: '_'
+
+    = f.color_field :text, label: 'HTML5 color picker field'
+    %code
+      %p f.color_field :text, label: 'HTML5 color picker field'
+      %p.font-smallest= link_to 'http://caniuse.com/#feat=input-color', 'http://caniuse.com/#feat=input-color', target: '_'

data/app/views/tenon/styleguides/forms/_tenon_content.html.haml

@@ -0,0 +1,15 @@
+%section
+  %a.scroll-target{name: 'forms__tenon'}
+  %h3.color-black Tenon content
+
+  .panel.panel--padded
+    = f.tenon_content :content
+    %code
+      %p f.tenon_content :content
+    %p Requires setup in the model
+    %code
+      class Sample < ApplicationRecord
+      %br/
+      &nbsp;&nbsp;tenon_content :content, i18n: true
+      %br/
+      end

data/app/views/tenon/styleguides/index.html.haml

@@ -0,0 +1,52 @@
+.drawer-pusher
+  .toolbar
+    %ul.breadcrumbs
+      %li.breadcrumbs__item
+        Styleguide
+
+
+  %main#styleguide
+    %section.styleguide-index
+      %h1 Tenon Styleguide
+      %p A general summary and guideline for Tenon styles. Variables and styles you change will be reflected here.
+
+      %nav
+        %ul
+          %li
+            = link_to 'Colors', '#colors'
+            %ul
+              %li= link_to 'Variables', '#color__variables'
+              %li= link_to 'Class helpers', '#color__class-helpers'
+          %li
+            = link_to 'Typography', '#typography'
+            %ul
+              %li= link_to 'Headers', '#typography__headings'
+              %li= link_to 'Paragraph', '#typography__paragraph'
+              %li= link_to 'Small', '#typography__small'
+              %li= link_to 'Blockquote', '#typography__blockquote'
+              %li= link_to 'Unordered lists', '#typography__ulists'
+              %li= link_to 'Ordered lists', '#typography__olists'
+              %li= link_to 'Inline', '#typography__inline'
+              %li= link_to 'Style class helpers', '#typography__styles'
+              %li= link_to 'Variables', '#typography__variables'
+          %li= link_to 'Icons', '#icons'
+          %li
+            = link_to 'Buttons', '#buttons'
+            %ul
+              %li= link_to 'Standard', '#buttons__standard'
+              %li= link_to 'Flat', '#buttons__flat'
+              %li= link_to 'Block', '#buttons__block'
+              %li= link_to 'Floating Action', '#buttons__fab'
+
+          %li
+            = link_to 'Forms', '#forms'
+            %ul
+              %li= link_to 'Default', '#forms__default'
+              %li= link_to 'HTML5', '#forms__html5'
+              -# %li= link_to 'Tenon content', '#forms-tenon'
+
+    = render 'tenon/styleguides/colors'
+    = render 'tenon/styleguides/typography'
+    = render 'tenon/styleguides/buttons'
+    = render 'tenon/styleguides/icons'
+    = render 'tenon/styleguides/forms'

data/app/views/tenon/styleguides/typography/_blockquote.html.haml

@@ -0,0 +1,7 @@
+%section
+  %a.scroll-target{name: 'typography__blockquote'}
+  %h3.color-black Blockquote
+
+  .panel.panel--padded
+    %blockquote The quick brown fox jumps over the lazy dog.
+    %code= "<blockquote>The quick brown fox jumps over the lazy dog.</blockquote>"

data/app/views/tenon/styleguides/typography/_inline.html.haml

@@ -0,0 +1,8 @@
+%section
+  %a.scroll-target{name: 'typography__inline'}
+  %h3.color-black Inline
+
+  .panel.panel--padded
+    - ['em', 'strong', 'a href="#"'].each do |i|
+      %p= "The <#{i}>quick brown fox</#{i}> jumps over the <#{i}>lazy dog.</#{i}>".html_safe
+      %code= "The <#{i}>quick brown fox</#{i}> jumps over the <#{i}>lazy dog.</#{i}>"

data/app/views/tenon/styleguides/typography/_lists.html.haml

@@ -0,0 +1,40 @@
+%section
+  %a.scroll-target{name: 'typography__ulists'}
+  %h3.color-black Unordered lists
+
+  .panel.panel--padded
+    %ul
+      %li List item
+      %li List item
+      %li List item
+    %code
+      %p= "%ul"
+      %p
+          
+        = "%li List item "
+      %p
+          
+        = "%li List item "
+      %p
+          
+        = "%li List item "
+
+%section
+  %a.scroll-target{name: 'typography__olists'}
+  %h3.color-black Ordered lists
+  .panel.panel--padded
+    %ol
+      %li List item
+      %li List item
+      %li List item
+    %code
+      %p= "%ol"
+      %p
+          
+        = "%li List item "
+      %p
+          
+        = "%li List item "
+      %p
+          
+        = "%li List item "

data/app/views/tenon/styleguides/typography/_paragraphs.html.haml

@@ -0,0 +1,17 @@
+%section
+  %a.scroll-target{name: 'typography__paragraph'}
+  %h3.color-black Paragraph
+  %p Includes a mixin, a variable and a class helper.
+
+  .panel.panel--padded
+    %p The quick brown fox jumps over the lazy dog.
+    %code.expandable
+      = expandable_toggle
+      %p= "<p>The quick brown fox jumps over the lazy dog.</p>"
+      %br/
+      %p
+        %span.color-primary Silent class:
+        = "@extend %font-body;"
+      %p
+        %span.color-primary Variables:
+        = "$body-size, $body-line-height"

data/app/views/tenon/styleguides/typography/_small.html.haml

@@ -0,0 +1,18 @@
+%section
+  %a.scroll-target{name: 'typography__small'}
+  %h3.color-black Smaller sizes
+  %p Includes a mixin, a variable and a class helper for each.
+
+  .panel.panel--padded
+    - ['small', 'smaller', 'smallest'].each do |s|
+      %p{class: "font-#{s}"} The quick brown fox jumps over the lazy dog.
+      %code.expandable
+        = expandable_toggle
+        %p= "<p class: 'font-#{s}'>The quick brown fox jumps over the lazy dog.</p>"
+        %br/
+        %p
+          %span.color-primary Silent class:
+          = "@extend %font-#{s};"
+        %p
+          %span.color-primary Variables:
+          = "$#{s}-size, $#{s}-line-height"

data/app/views/tenon/styleguides/typography/_styles.html.haml

@@ -0,0 +1,14 @@
+%section
+  %a.scroll-target{name: 'typography__styles'}
+  %h3.color-black Style class helpers
+  %p Silent class helpers that you can @extend in a Sass file.
+
+  .panel.panel--padded
+    - [3, 4, 7].each do |s|
+      %p{class: "font-n#{s}"} The quick brown fox jumps over the lazy dog.
+      %code
+        = "@extend %font-n#{s};"
+
+      %p{class: "font-i#{s}"} The quick brown fox jumps over the lazy dog.
+      %code
+        = "@extend %font-i#{s};"

data/app/views/tenon/styleguides/typography/_variables.html.haml

@@ -0,0 +1,43 @@
+%section
+  %a.scroll-target{name: 'typography__variables'}
+  %h3.color-black Typography variables & mixins
+
+  .panel.panel--padded
+    %h4 Fonts
+    %p
+      There is one font defined for Tenon. There is a second variable defined
+      (with the same font), but it is not used anywhere. Each header can be
+      defined independantly as well.
+    %code
+      %p
+        %span.color-primary Source:
+        app/assets/stylesheets/tenon/variables/font-family.scss
+
+      %p
+        %span.color-primary Put your changes here:
+        app/assets/stylesheets/client/variables/font-family.scss
+
+    %h4 Variables
+    %p
+      Line height and font size are defined for each available size. These can
+      also be used with the font mixin (see below).
+    %code
+      %p
+        %span.color-primary Source:
+        app/assets/stylesheets/tenon/variables/font-size.scss
+      %p
+        %span.color-primary Put your changes here:
+        app/assets/stylesheets/client/variables/font-size.scss
+
+    %h4 Font size mixins
+    %code.expandable
+      = expandable_toggle
+      %p
+        %span.color-primary Source:
+        app/assets/stylesheets/tenon/mixins/font-size.scss
+      %br
+      %p.color-primary Sample usage:
+      %p @include font($body-size, $body-line-height);
+      %p @include font($h3-size, $h3-line-height);
+      %p @include font-size($h1-size);
+      %p @include font-size($smallest-size);

data/app/views/tenon/tenon_content/_display.html.haml

@@ -1,6 +1,6 @@
 .tn-tc-holder{ data: { 'record-type' => object.class.to_s, 'record-id' => object.id, 'field' => field } }
-  .tenon-content{ id: "#{field}-tenon-content" }
+  .tn-tc__rows{id: "#{field}-tenon-content"}
     - object.send("#{field}_tenon_content_rows").decorate.each do |row|
-      .tn-tc-row
+      .tn-tc__row
         .tn-tc-fields= render row.partial, row: row
       .spacer

data/app/views/tenon/tenon_content/_embed_modal.html.haml

@@ -1,10 +1,10 @@
 /- Shared Embed Code Modal Body
 .edit-embed-code
   .modal-body
-    %label{ for: 'embed_code' }= t('tenon.tenon_content.paste_your_embed_code_here')
+    %label{for: 'embed_code'} Paste your embed code here
     %p.explanation
-      = t('tenon.tenon_content.note_in_order_to_get_your_embed_to_work')
+      Note: In order to get your embed to work with various screen sizes, you may want to get a code from
       = link_to 'http://embedresponsively.com/', 'http://embedresponsively.com/', target: '_'
     = text_area_tag 'embed_code'
 
-  .modal-footer= link_to t('tenon.tenon_content.update'), '#', class: 'btn btn-comp update-embed-code'
+  .modal-footer= link_to 'Update', '#', class: 'btn btn-comp update-embed-code'

data/app/views/tenon/tenon_content/_fields.html.haml

@@ -1,39 +1,25 @@
-.tn-tc{ class: field }
-  %label
-    - if defined?(lang)
-      = field.gsub("_#{lang}", '').to_s.titleize
-      (#{lang_title})
-    - else
-      = field.to_s.titleize
+.tn-tc{class: field}
+  .input-block
+    %label.input-block__explanation
+      - if defined?(lang)
+        = field.gsub("_#{lang}", '').to_s.titleize
+        (#{lang_title})
+      - else
+        = field.to_s.titleize
 
-  .explanation
-    = t('tenon.tenon_content.select_rows_from_the_library')
-    = t('tenon.tenon_content.you_can_format_your_text')
+    .tn-tc__wrap
+      .tn-tc__rows
+        = f.fields_for "#{field}_tenon_content_rows" do |row|
+          - if row.object
+            = render "tenon/tenon_content/row", f: row, row_partial: row.object.decorate.form_partial, field: field, title: row.object.row_type.titleize
 
-  .tn-tc-main-actions
-    = link_to '#', class: 'tn-tc-pop-out btn btn-primary' do
-      = fa_icon('eye')
-      %span= t('tenon.tenon_content.edit_in_preview_mode')
+      %div{style: 'display: none'}
+        .modal{ data: { tn_tc_library: true } }
+          .modal__content
+            %ul.tn-tc-library__list
+              - Tenon::TenonContent::RowTypes::LIBRARY_ROW_TYPES.each do |title, row_type|
+                %li.tn-tc-library__item= row_link(title, row_type, field, f)
 
-    = link_to '#', class: 'tn-tc-add-content btn btn-primary initial-row', data: { modal_target: ".tenon-library", modal_closest: '.tn-tc', modal_clone: 'true', modal_title: t('tenon.tenon_content.add_content'), modal_handler: 'Tenon.features.tenonContent.Library' } do
-      = fa_icon('plus-circle')
-      %span= t('tenon.tenon_content.add_content')
-
-  .tn-tc-wrap
-    .tn-tc-sizes
-      %h2= t('tenon.tenon_content.preview_mode')
-      %p= t('tenon.tenon_content.use_preview_mode_to_see')
-      = tenon_content_sizes
-      = link_to t('tenon.tenon_content.done'), '#', class: 'tn-tc-pop-out-close btn btn-comp'
-    .tenon-content
-      = f.fields_for "#{field}_tenon_content_rows" do |row|
-        - if row.object
-          = render "tenon/tenon_content/row", f: row, row_partial: row.object.decorate.form_partial, field: field, title: row.object.row_type.titleize
-
-    .tenon-library-holder
-      .tenon-library
-        %ul
-          - Tenon::TenonContent::RowTypes::LIBRARY_ROW_TYPES.each do |title, row_type|
-            %li= row_link(title, row_type, field, f)
-        .spacer
 
+    %p
+      = link_to 'Add Content', '#', class: 'action-text initial-row', data: { modal_target: '[data-tn-tc-library]', modal_closest: '.tn-tc', modal_clone: 'true', modal_title: 'Add Content', modal_handler: 'TenonContentLibrary', tn_tc_add_content: true }, title: 'Add Content'

data/app/views/tenon/tenon_content/_row.html.haml

@@ -1,19 +1,20 @@
-.tn-tc-row{ :style => ("display: none;" if f.object._destroy) }
+.tn-tc-row{ :style => ('display: none;' if f.object._destroy) }
   = f.hidden_field :item_method, value: field
-  .tn-tc-topbar
-    .actions
-      %i.fa.fa-arrows.drag-anchor
+  .tn-tc-row__top-bar
+    .tn-tc-row__action.tn-tc-row__action--left
+      %i.material-icon.tn-tc-row__drag-anchor{ data: { drag_anchor: true } }
+        reorder
 
-      = link_to '#', class: 'tn-tc-open-library above', data: { modal_target: ".tenon-library", modal_closest: '.tn-tc', modal_title: t('tenon.tenon_content.insert_content'), modal_handler: 'Tenon.features.tenonContent.Library', modal_clone: 'true', tooltip: '' }, title: t('tenon.tenon_content.insert_content') do
-        %i.fa.fa-fw.fa-plus-circle
+    .tn-tc-row__action--right
+      = link_to_remove_association f, { 'data-confirm' => 'Are you sure?', 'data-wrapper-class' => 'tn-tc-row' } do
+        %i.material-icon.delete delete
+
+    .tn-tc-row__action--right
+      = link_to '#', class: 'above', data: { modal_target: ".tn-tc-library", modal_closest: '.tn-tc', modal_title: "Insert Content", modal_handler: 'TenonContentLibrary', modal_clone: 'true', tooltip: '', tn_tc_insert: 'before' }, title: 'Insert Content' do
+        %i.material-icon playlist_add
 
-      = link_to_remove_association(fa_icon('trash-o'), f, { 'data-confirm' => t('tenon.common.are_you_sure'), 'data-wrapper-class' => 'tn-tc-row' })
 
-    .spacer
 
-  .tn-tc-fields= render row_partial, f: f
+    .spacer
 
-  .tn-tc-bottombar
-    .actions
-      = link_to '#', class: 'tn-tc-open-library below', data: { modal_target: ".tenon-library", modal_closest: '.tn-tc', modal_title: t('tenon.tenon_content.insert_content'), modal_handler: 'Tenon.features.tenonContent.Library', modal_clone: 'true', modal_closest: '.tn-tc', tooltip: '' }, title: t('tenon.tenon_content.insert_content') do
-        %i.fa.fa-fw.fa-plus-circle
+  .tn-tc-row__fields= render row_partial, f: f

data/app/views/tenon/tenon_content/{_builder.html.haml → _tenon_content.html.haml}

@@ -3,8 +3,8 @@
     .i18n-frame
       .i18n.en.active= render 'tenon/tenon_content/fields', field: field, f: f
       - Tenon.config.languages.each do |title, lang|
-        .i18n{ class: lang }= render 'tenon/tenon_content/fields', field: "#{field}_#{lang}", lang: lang, lang_title: title, f: f
+        .i18n{class: lang}= render 'tenon/tenon_content/fields', field: "#{field}_#{lang}", lang: lang, lang_title: title, f: f
 - else
   = render 'tenon/tenon_content/fields', field: field, f: f
 
-= render 'tenon/tenon_content/embed_modal'
+= render 'tenon/tenon_content/embed_modal'

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

@@ -2,20 +2,20 @@
 = f.hidden_field :position
 = f.hidden_field :size
 = f.hidden_field :stretch_to_fill
-.image{ class: 'stretch' }
+.image{class: 'stretch'}
   - 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: 'add-image', data: {'modal-remote' => true, 'modal-title' => 'Select Image', 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment'}) do
+      %span Add Image
 
-  .medium-editor-toolbar.medium-toolbar-arrow-under.medium-editor-toolbar-active.image-controls{ style: 'display: none; margin-top: -65px;' }
+  .medium-editor-toolbar.medium-toolbar-arrow-under.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 } }
+        %button{title: '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
       %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 } }
+        %button{href: new_item_asset_path, title: 'Replace Image', class: 'replace-image medium-editor-action  medium-editor-button-last', data: {'modal-remote' => 'true', 'modal-title' => "Select Image", 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment', 'tooltip' => true}}
           %i.fa.fa-picture-o
 
     .medium-editor-toolbar-form-anchor

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

@@ -1,7 +1,8 @@
 .embedded-content
-  = link_to t('tenon.tenon_content.edit_embed_code'), '#', class: 'open-embed-modal', 'data-modal-target' => '.edit-embed-code', 'data-modal-title' => t('tenon.tenon_content.edit_embed_code'), 'data-modal-clone' => 'true', 'data-modal-handler' => 'Tenon.features.tenonContent.EmbeddedContentModalHandler'
+  = link_to 'Edit Embed Code', '#', class: 'open-embed-modal', 'data-modal-target' => '.edit-embed-code', 'data-modal-title' => 'Edit Embed Code', 'data-modal-clone' => 'true', 'data-modal-handler' => 'Tenon.features.tenonContent.EmbeddedContentModalHandler'
   .embed= raw f.object.try(:embed_code)
 
+
 = f.hidden_field :embed_code, class: 'embed-code-field'
 = f.hidden_field :position
 = f.hidden_field :size