Merge pull request #829 from eessex/update-callouts

@kanaabe => Callouts in new styles

client/apps/edit/components/section_callout/index.coffee

@@ -190,18 +190,17 @@ module.exports = React.createClass
       )
       (if @state.text or @state.article or @state.articleModel
         div { className: "esc-callout-container #{@getCalloutType()} hidden-image-#{@state.hide_image}" },
-          div { className: 'esc-callout-left'},
+          p {className: 'esc-read-article'}, "Related Article"
+          div { className: 'esc-callout'},
             img {
               src: (
                 if @state.thumbnail_url or @state.articleModel
-                  crop(@getThumbnail(), { width: 300, height: 200, quality: 95 })
+                  crop(@getThumbnail(), { width: 120, height:80, quality: 95 })
                 else
                   ''
               )
             }
-          div { className: 'esc-callout-right' },
             p { className: 'esc-title' }, @state.text or @state.articleModel?.get('thumbnail_title') or ''
-            p { className: 'esc-read-article' }, 'Read Full Article'
       else if @state.top_stories
         div { className: 'esc-top-stories' },
             div { className: 'esc-top-stories__headline'}, "Top Stories on Artsy"

client/apps/edit/components/section_callout/index.styl

@@ -3,17 +3,8 @@
 header-bottom = 10px
 
 .edit-section-callout-container
-  border-top 1px solid gray-lighter-color
-  border-bottom 1px solid gray-lighter-color
   width 100%
 
-.edit-section-container[data-type=callout]
-  float right
-  width 418px
-  left 170px
-  margin-left -170px
-  z-index 4
-
 .esc-controls-container
   fill-container()
   background black
@@ -67,54 +58,47 @@ header-bottom = 10px
   span
     margin-top 18px
 
-.esc-callout-container
-  display inline-flex
-  p
-    vertical-align middle
-
 .esc-callout-container.is-pull-quote
-  width 100%
-  .esc-callout-left, .esc-read-article
+  width 750px
+  margin-left -85px
+  .esc-read-article
     display none
   p
     text-align center
+    font-size 37px
+    line-height 1.2em
 
 .esc-callout-container.is-article
-  .esc-callout-left
-    display inline-block
+  .esc-callout
+    border 1px solid gray-lighter-color
+    display flex
+    align-items center
+    padding 15px
+    margin-top 10px
+    width 100%
   p
     text-align left
+  img
+    width 120px
+    margin-right 20px
 
 .esc-callout-container.is-article.hidden-image-true
-  .esc-callout-left
+  img
     display none
+  .esc-callout
+    border none
+    padding 0
+    margin-bottom 10px
+    p
+      font-size 25px
 
 .esc-read-article
   avant-garde 'body'
   margin-top 15px
 
 .esc-title
   garamond()
-  font-size 25px
-
-.esc-callout-left, .esc-callout-right
-  display inline-block
-  vertical-align middle
-
-.esc-callout-left
-  overflow hidden
-  margin auto
-  margin-right 20px
-  max-width 180px
-  img
-    width 100%
-    vertical-align middle
-    padding 10px 0 10px 0
-
-.esc-callout-right
-  max-width 300px
-  padding 20px 0 20px 0
-  text-align center
+  font-size 20px
 
 .esc-autocomplete-input
   color black
@@ -141,17 +125,17 @@ header-bottom = 10px
   &__headline
     avant-garde 'body'
     padding 20px 0px
+    border-bottom 1px solid gray-lighter-color
   &__container
-    padding-top 10px
+    padding 10px 0
     border-bottom 1px solid gray-lighter-color
+    display flex
+    align-items center
   &__left
     width 80px
     height 80px
     background-color gray-lighter-color
     margin-right 10px
   &__right
     garamond 's-body'
-    line-height 80px
-    vertical-align top
-  &__right, &__left
-    display inline-block
+    line-height 1em