lady_josephine 0.0.1

data/app/assets/javascripts/lady_josephine/editor.js

@@ -0,0 +1,40 @@
+$(function() {
+  var attributeOptions, element, finalOptions, options, overrides;
+  element = $(".sir_trevor_editor");
+  if (element.length > 0) {
+    attributeOptions = JSON.parse($(element[0]).attr("data-sir-trevor"));
+
+    options = {
+      el: element,
+      localStorage: true,
+      placeholder: element.attr("placeholder"),
+      blockTypes: [
+        'Heading',
+        'Text',
+        'List',
+        'Quote',
+        'ExtendedQuote',
+        'Definition',
+        'Divider',
+        'ExtendedTweet',
+        'FacebookPost',
+        'ExtendedImage',
+        'Audio',
+        'Video',
+        'Html',
+        'Instagram'
+      ]
+    };
+
+    overrides = {
+      uploadUrl: "#{LadyJosephine.mount_path}/images",
+      defaultType: 'text',
+      escapeHTML: true
+    };
+
+    SirTrevor.setDefaults(overrides);
+
+    finalOptions = jQuery.extend(options, attributeOptions);
+    return new SirTrevor.Editor(finalOptions);
+  }
+});

data/app/assets/javascripts/lady_josephine/lady_josephine.js

@@ -0,0 +1,4 @@
+//= require underscore/underscore
+//= require Eventable/eventable
+//= require sir-trevor-js/sir-trevor
+//= require ./editor

data/app/assets/javascripts/lady_josephine/lady_josephine_view.js

@@ -0,0 +1,6 @@
+//= require ./blocks/twitter
+//= require ./blocks/instagram
+//= require ./blocks/facebook
+//= require ./blocks/soundcloud
+//= require ./blocks/vimeo
+//= require ./blocks/youtube

data/app/assets/stylesheets/lady_josephine/content.sass

@@ -0,0 +1,33 @@
+.article-block--image--small
+  .media__img
+    width: 100%
+    margin-bottom: $half-spacing
+    float: none
+
+  .copyright
+    display: block
+    margin-top: $half-spacing
+
+.article-block--text
+  font-style: inherit
+
+.article-block--heading
+  font-size: 30px
+
+.article-block--quote
+  text-indent: -0.41em
+
+  p:last-of-type
+    margin-bottom: 0
+
+.article-block--divider
+  margin-bottom: $base-spacing-unit - 2px
+  margin-bottom: (($base-spacing-unit - 2px) / $base-font-size)*1rem
+
+@media only screen and (min-width: 1024px)
+  .article-block--image--small
+    .media__img.pull--left
+      width: $small-media-width
+      margin-right: $base-spacing
+      float: left
+

data/app/assets/stylesheets/lady_josephine/icons.sass

@@ -0,0 +1,175 @@
+// Icon Font: icons
+//
+// .icon--2x        - Double size. Used a lot in the 'help'/'warum?' links (see 'complex-links')
+// .icon--giant     - Truly huge
+//
+// Styleguide Icons
+
+@font-face
+  font-family: "lady-josephine-icons"
+  src: asset_url("lady_josephine/icons/icons.eot")
+  src: asset_url("lady_josephine/icons/icons.eot?#iefix") format("embedded-opentype"), asset_url("lady_josephine/icons/icons.woff") format("woff"), asset_url("lady_josephine/icons/icons.ttf") format("truetype"), asset_url("lady_josephine/icons/icons.svg#icons") format("svg")
+  font-weight: normal
+  font-style: normal
+
+@media screen and (-webkit-min-device-pixel-ratio:0)
+  @font-face
+    font-family: "lady-josephine-icons"
+    src: asset_url("lady_josephine/icons/icons.svg#icons") format("svg")
+
+[data-icon]:before
+  content: attr(data-icon)
+
+.st-block__ui [class^="icon--"],
+.st-icon
+  display: inline-block
+  font-family: "lady-josephine-icons"
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  line-height: inherit
+  vertical-align: middle
+  text-decoration: inherit
+  text-rendering: optimizeLegibility
+  text-transform: none
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  font-smoothing: antialiased
+
+.icon--2x
+  font-size: 2em
+  line-height: 12px // magic number, results in no side effects from 2em font-size on surrounding text
+  vertical-align: middle
+  position: relative
+  bottom: .1rem
+
+
+.st-block__ui,
+.st-block-controls
+  .icon--arrow-down:before
+    content: "\f100"
+  .icon--arrow-left:before
+    content: "\f101"
+  .icon--arrow-right:before
+    content: "\f102"
+  .icon--arrow-up:before
+    content: "\f103"
+  .icon--audio:before
+    content: "\f104"
+  .icon--basket:before
+    content: "\f105"
+  .icon--clock:before
+    content: "\f106"
+  .icon--cloud:before
+    content: "\f107"
+  .icon--cog:before
+    content: "\f108"
+  .icon--comment:before
+    content: "\f109"
+  .icon--compress:before
+    content: "\f10a"
+  .icon--close:before,
+  .icon--cross:before
+    content: "\f10b"
+  .icon--definition:before
+    content: "\f10c"
+  .icon--divider:before
+    content: "\f10d"
+  .icon--dropdown:before
+    content: "\f10e"
+  .icon--dropup:before
+    content: "\f10f"
+  .icon--text:before,
+  .icon--edit:before
+    content: "\f110"
+  .icon--email:before
+    content: "\f111"
+  .icon--exclamation-circle:before
+    content: "\f112"
+  .icon--exclamation-triangle:before
+    content: "\f113"
+  .icon--expand:before
+    content: "\f114"
+  .icon--facebook:before
+    content: "\f115"
+  .icon--facebook-outline:before
+    content: "\f116"
+  .icon--facebook-square:before
+    content: "\f117"
+  .icon--fast:before
+    content: "\f118"
+  .icon--gift:before
+    content: "\f119"
+  .icon--google-plus:before
+    content: "\f11a"
+  .icon--heading:before
+    content: "\f11b"
+  .icon--heart:before
+    content: "\f11c"
+  .icon--home:before
+    content: "\f11d"
+  .icon--image:before
+    content: "\f11e"
+  .icon--inbox:before
+    content: "\f11f"
+  .icon--infographic:before
+    content: "\f120"
+  .icon--instagram-outline:before
+    content: "\f121"
+  .icon--list:before
+    content: "\f122"
+  .icon--menu:before
+    content: "\f123"
+  .icon--mobile:before
+    content: "\f124"
+  .icon--paypal:before
+    content: "\f125"
+  .icon--note:before,
+  .icon--pencil:before
+    content: "\f126"
+  .icon--play:before
+    content: "\f127"
+  .icon--plus:before
+    content: "\f128"
+  .icon--print:before
+    content: "\f129"
+  .icon--question-circle:before
+    content: "\f12a"
+  .icon--quote:before
+    content: "\f12b"
+  .icon--quote-extended:before
+    content: "\f12c"
+  .icon--refresh:before
+    content: "\f12d"
+  .icon--reply:before
+    content: "\f12e"
+  .icon--search:before
+    content: "\f12f"
+  .icon--secure:before
+    content: "\f130"
+  .icon--sign-in:before
+    content: "\f131"
+  .icon--sign-out:before
+    content: "\f132"
+  .icon--sitemap:before
+    content: "\f133"
+  .icon--stripe:before
+    content: "\f134"
+  .icon--tick:before,
+  .icon--tick-outline:before
+    content: "\f135"
+  .icon--times-circle:before
+    content: "\f136"
+  .icon--tool:before
+    content: "\f137"
+  .icon--bin:before,
+  .icon--trash:before
+    content: "\f138"
+  .icon--twitter:before
+    content: "\f139"
+  .icon--twitter-outline:before
+    content: "\f13a"
+  .icon--twitter-square:before
+    content: "\f13b"
+  .icon--video:before
+    content: "\f13c"

data/app/assets/stylesheets/lady_josephine/lady_josephine.sass

@@ -0,0 +1,6 @@
+// @import "bootstrap"
+@import "vars"
+@import "sir-trevor-js/sir-trevor"
+@import "icons"
+@import "content"
+@import "sir_trevor"

data/app/assets/stylesheets/lady_josephine/sir_trevor.sass

@@ -0,0 +1,619 @@
+html
+  box-sizing: border-box
+*, *:before, *:after
+  box-sizing: inherit
+
+.hidden
+  display: none !important
+
+[class^=btn--]
+  cursor: pointer
+
+.st-block
+  margin-right: $control-width
+
+
+label
+  .st-icon
+    font-size: 41px
+    vertical-align: middle
+    margin-right: $quarter-spacing
+
+.st-outer
+  margin-bottom: $double-spacing * 4
+
+.st-outer--is-reordering
+  .st-block.st-drag-over,
+  .st-block.st-drag-over:last-child,
+  .st-block
+
+    &::after
+      display: block
+      content: "Drop block here"
+      padding: .7em 0
+      height: $base-spacing
+      color: $c-highlight
+      background: $c-white
+      font-size: x-small
+      font-family: inherit
+      text-align: center
+
+.st-text-block,
+.st-text-block:active,
+.st-text-block:focus,
+.st-block [contenteditable="true"],
+.st-block [contenteditable="true"]:active,
+.st-block [contenteditable="true"]:focus,
+.st-block input[type="text"],
+.st-block input[type="text"]:active,
+.st-block input[type="text"]:focus,
+.st-block textarea,
+.st-block textarea:hover,
+.st-block textarea:active
+  border: 1px solid $c-smoke
+
+// blocks: @extends all the typographic styles used in the articles
+
+.st-text-block
+  @extend .article-block--text
+  min-height: $text-line-height
+
+
+.st-block--heading
+  @extend .article-block--heading
+
+.st-block--quote,
+.st-block--extended-quote
+  @extend .article-block--quote
+
+.st-block--divider
+  @extend .article-block--divider
+
+.st-block
+  &.bodywidth,
+  &.fullwidth
+    .media__img
+      width: 100%
+
+  .media__img
+    width: $small-media-width
+
+  aside
+    font-size: x-small
+    font-style: italic
+    line-height: 1.2
+    margin-bottom: 0
+    padding-bottom: 0
+    padding-top: 8px
+    text-align: right
+    word-break: break-all
+
+.st-block-is-note
+  margin-left: -1px
+  padding-left: 0
+
+.st-block.st-block-is-note .st-block__inner
+  top: 0
+
+.st-block__ui,
+.st-block__ui-delete-controls,
+.st-block__control-ui
+  position: absolute
+  bottom: 0
+  right: 0
+  opacity: 0
+
+.st-block__control-ui
+  right: auto
+  left: 0
+
+.st-active-block
+  .st-block__ui,
+  .st-block__control-ui
+    margin-bottom: 0
+    margin-right:  0
+    opacity: 1
+    z-index: 1
+
+.st-block__inner
+  position: relative
+  padding: 0
+
+.st-block--with-errors,
+.st-block--delete-active
+  &.st-block input[type="text"],
+  .st-text-block,
+  &.st-block textarea
+    background: mix($c-negative, $c-white, 20%)
+    border: 1px solid $c-negative
+
+.st-block--delete-active
+  .st-block__ui-delete-controls
+    opacity: 1
+    z-index: 2
+
+.st-block-controls
+  display: none
+  padding: $half-spacing 0 0
+  margin: $base-spacing 0
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: stretch
+  text-align: center
+
+.st-block-controls--active
+  display: flex
+
+.st-block-control
+  @extend .btn
+  flex: 1 1 auto
+  transition: background-color $transition-duration $easeOutExpo, color $transition-duration $easeOutExpo
+  font-size: 14px
+  margin: 0 2px 2px 0
+  padding: $half-spacing
+  background: $c-smoke
+  color: $c-text
+  line-height: 1
+
+  &:hover,
+  &:focus
+    background-color: $c-highlight
+    color: $c-white
+
+  .st-icon
+    display: block
+    margin: 0 auto .2em
+    font-size: 4em
+
+.st-block-controls__top
+  display: none
+
+  &::before
+    display: none
+
+.st-spinner
+  // !important because there’s inline css screwing this
+  position: absolute!important
+  left: 50%
+  top: 50%
+  z-index: 2
+
+.st-block__ui
+  // left: 101%
+  right: -$control-width
+  // right: auto
+  bottom: auto
+  top: 0
+  width: $control-width - 2rem
+  background-color: $c-smoke
+
+.st-format-bar
+  position: absolute
+  margin: -3em 0 0
+  opacity: 0
+  visibility: hidden
+  z-index: 10
+  padding: .5em .9em
+  border-radius: 1px
+  background-color: $c-text
+
+  &::before
+    content: ''
+    display: block
+    position: absolute
+    left: 50%
+    top: 2.7em
+    width: 0
+    height: 0
+    border: .625em solid transparent
+    border-top-color: $c-text
+    border-bottom: 0
+    margin-left: -.625em
+
+.st-format-bar--is-ready
+  visibility: visible
+  opacity: 1
+
+.st-block__inputs
+  padding: 1.6em 0 1em
+  border-radius: .2em
+  border-top: .125em solid transparent
+
+  .st-drag-over &
+    border-top-color: $c-gray-medium
+
+.st-block
+  padding: 0
+  position: relative
+  margin-bottom: $half-spacing
+
+  .st-block__inputs
+    padding-bottom: 0
+    background-color: transparent
+
+    input[type='text']
+      padding: $base-spacing $half-spacing!important
+      width: 100%!important
+      border-color: $c-white!important
+
+  .st-block__paste-input
+    text-align: center
+    width: 80%
+    display: block
+    margin: 0.4em auto 0
+
+.st-html-block
+  border: 1px solid $c-smoke
+  background-color: $c-smoke
+  width: 100%
+  padding: $half-spacing
+  margin: 0 0 2px
+
+.st-block input[type="text"],
+.st-text-block,
+.st-block textarea
+  width: 100%
+  padding: $half-spacing
+  margin: 0 0 2px
+  border: 1px solid $c-smoke
+  background-color: $c-smoke
+  font-size: inherit
+
+  &:active,
+  &:focus
+    padding: $half-spacing
+    border: 1px solid $c-gray-medium!important
+    outline: none
+
+.st-definition
+  dt
+    padding-left: 0
+    padding-right: 0
+    font-weight: bold
+    font-style: normal
+
+  dd
+    padding: $half-spacing
+    font-weight: normal
+    font-style: normal
+
+.st-block.st-block-is-note .st-block__inner
+  margin: 0
+
+// annotations
+.st-block-is-note
+  &::before
+    float: none
+    position: absolute
+    left: -50px
+    top: 0
+
+  .st-block__inner
+    background-color: transparent
+    margin: 0
+    padding: 0
+
+  .st-text-block
+    background-color: $c-smoke
+
+.st-format-btn
+  min-width: $base-spacing * 1.7
+  min-height: $base-spacing * 1.7
+  padding: 0 .6em 0 0
+  margin: 0 .6em 0 0
+  border: 0
+  border-right: 1px solid $c-dark-grey
+  background: transparent
+  color: $c-white
+  vertical-align: middle
+
+  &:last-child
+    border-right: none
+    padding-right: 0
+    margin-right: 0
+
+.st-format-btn--Italic
+  font-style: italic
+
+.st-format-btn--Unlink
+  text-decoration: line-through
+
+.st-format-btn:hover,
+.st-format-btn:focus,
+.st-format-btn--is-active
+  color: $c-highlight
+
+.st-input-label
+  @extend .hidden
+
+.st-block__upload-container
+  margin: .4em 0 0
+  text-align: center
+  position: relative
+
+  input[type="file"]
+    position: absolute
+    left: 0
+    width: 100%
+    height: 100%
+    padding: 7px 0
+    z-index: 50
+    opacity: 0
+    cursor: pointer
+    text-align: center
+
+.st-upload-btn
+  position: relative
+  padding: .35em 1em
+  border-radius: 0
+  border: 0
+  background: #42474B
+  font-size: 1.125em
+  cursor: pointer
+  color: $c-white
+  z-index: 10
+
+  .st-block__upload-container:hover &,
+  .st-block__upload-container:focus &
+    color: $c-white
+    background: $c-highlight
+
+.st-block__dropzone
+  .st-icon
+    display: block
+    margin: 0 auto 0.2em
+    font-size: 4em
+    color: #42474B
+    text-align: center
+
+  p
+    text-align: center
+    color: #42474B
+    font-size: 1.2em
+    margin: 0
+
+    span
+      font-weight: 700
+
+.st-block__editor--with-sixteen-by-nine-media,
+.st-block__editor--with-square-media
+  padding-top: 100%
+  height: 0
+  position: relative
+  width: 100%
+
+  video,
+  iframe
+    position: absolute
+    height: 100%
+    width: 100%
+    left: 0
+    top: 0
+
+.st-block__editor--with-sixteen-by-nine-media
+  padding-top: 56.25%
+
+.st-block__editor
+  img
+    display: block
+    width: 100%
+    height: auto
+
+//  errors next to failed block
+.st-block__messages
+  display: none
+  position: relative
+  max-width: 100%
+  top: 0
+  left: 0
+  padding: $half-spacing $base-spacing
+  color: $c-negative
+  background: $c-smoke
+  text-align: center
+
+  span
+    display: block
+
+.st-block__messages--is-visible
+  display: block
+
+.st-msg--error
+  color: $c-white
+
+// errors listed at top of form
+.st-errors
+  margin-bottom: $base-spacing
+  padding: $base-spacing
+  color: $c-negative
+  background-color: $c-smoke
+
+  ul,
+  p
+    margin: 0
+
+  li
+    margin-bottom: 0!important
+
+.st-block--with-errors
+  .st-block__messages
+    border: 2px solid $c-negative
+
+.with-st-controls
+  &:after,
+  &:before
+    display: none
+
+.st-icon--add
+  &::after
+    display: none
+
+.st--block-limit-reached
+  .st-block--with-plus
+    &::after
+      display: none
+
+.st-box-info,
+.st-autoload-info
+  position: relative
+  padding: 14px 46px 0 14px
+  margin-bottom: $text-line-height
+  font-weight: 200
+  text-transform: uppercase
+  font-size: 14px
+  line-height: 1.5
+  color: $st-autosave-color
+  border: 1px solid
+
+.st-box-discard-button,
+.st-autoload-discard-button
+  color: inherit
+  display: inline-block
+  border: 1px solid
+  padding: 5px 14px 0 14px
+  margin-bottom: 15px
+  margin-top: 10px
+  font-size: 14px
+
+.st-box-close-button,
+.st-autoload-close-button
+  display: inline-block
+  position: absolute
+  right: 0
+  top: 0
+  width: $text-line-height
+  height: $text-line-height
+  color: inherit
+  border-left: 1px solid
+  border-bottom: 1px solid
+  text-align: center
+  font-size: 24px
+
+  [class^='icon--']
+    vertical-align: top
+
+
+// buttons
+
+.btn
+  padding: $half-spacing
+  transition: color $transition-duration $easeOutExpo, border-color $transition-duration $easeOutExpo
+
+  &:active
+    box-shadow: none
+
+[class^='btn--']
+  @extend .btn
+
+.btn--editor-panel,
+.btn--editor-panel--delete
+  display: block
+  margin-bottom: -1px
+  padding-left: $half-spacing
+  color: $c-text
+  border-radius: 0
+  text-align: left
+  border-bottom: 1px solid $c-light-grey
+
+  [class^='icon--']
+    margin-right: $half-spacing
+    min-width: 1em
+    font-size: 1.4em
+
+  &:not(.btn--with-rocker)
+    &:hover,
+    &:active
+      z-index: 10
+      color: $c-white
+      background-color: $c-highlight
+      border-bottom-color: $c-highlight
+
+.st-block__ui-delete-controls
+  display: flex
+  flex-wrap: wrap
+  align-items: flex-start
+  left: 0
+  top: 0
+  background-color: $c-negative
+  cursor: default
+  line-height: 1
+
+  [class^='btn']
+    flex: 50%
+    padding: $half-spacing 0
+    border-radius: 0
+    border: 0
+    text-align: center
+    color: mix($c-white, $c-negative, 60%)
+
+    &:hover, &:focus
+      background-color: none
+      color: $c-white
+
+  [class^='icon--']
+    display: block
+    margin: 0 auto .2em
+    font-size: 4rem
+
+.st-block__delete-label
+  flex: 1 0 auto
+  order: 1
+  margin: $base-spacing 0
+  // color: $c-white
+  cursor: default
+  text-align: center
+  border: 2px solid #d70014
+
+.btn--with-rocker
+  padding: 0 $half-spacing 0 0
+
+  &:hover,
+  &:focus
+    background: transparent
+    color: $c-text
+    cursor: default
+
+.btn--rocker
+  display: inline-block
+  padding: 0
+  margin-right: 0.9em
+  border: 0
+
+  &:hover,
+  &:active
+    background: transparent
+    border-color: transparent
+
+  [class^='icon--']
+    margin: 0
+    line-height: 1
+
+  .btn__label
+    @extend .hidden
+
+.btn--rocker__up,
+.btn--rocker__down
+  display: block
+  padding: 0 2px
+  height: 1.5em
+  margin-bottom: 1px
+  margin-right: .2em
+  color: $c-white
+  background: $c-gray-medium
+  text-align: center
+  border: none
+  line-height: 1.5
+  transition: background-color $transition-duration $easeOutExpo
+  border-radius: 0
+
+  &:hover,
+  &:focus
+    background: $c-highlight
+    color: $c-white
+
+.btn--rocker__down
+  margin-bottom: 0
+
+*[data-placeholder]:empty:not(:focus):not([data-hide-placeholder])::before
+  color: #b2b2b1
+  font-style: normal
+  content: attr(data-placeholder)