diff --git a/client/apps/edit/components/section_callout/index.coffee b/client/apps/edit/components/section_callout/index.coffee index aa3972f03..9fdf23292 100644 --- a/client/apps/edit/components/section_callout/index.coffee +++ b/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" diff --git a/client/apps/edit/components/section_callout/index.styl b/client/apps/edit/components/section_callout/index.styl index e7b0e6459..b203e6e6f 100644 --- a/client/apps/edit/components/section_callout/index.styl +++ b/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,27 +58,39 @@ 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' @@ -95,26 +98,7 @@ header-bottom = 10px .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,9 +125,12 @@ 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 @@ -151,7 +138,4 @@ header-bottom = 10px margin-right 10px &__right garamond 's-body' - line-height 80px - vertical-align top - &__right, &__left - display inline-block + line-height 1em