anecdote 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c884b86f1d709427bf66253b503e0812b5dc88b3
-  data.tar.gz: 734b908e56d7606efdc4d027eaa8244bc370827c
+  metadata.gz: a3c1b64aa52e7844c6b8ced36221191516e58b7b
+  data.tar.gz: 79e5419ea9e7453264cca5044a46c1182cef6ba1
 SHA512:
-  metadata.gz: da62a648b78d571511617e88ab808db80e8d34c079ca19e5e04c602313e1b1db5e13e6b3f4861f24c4fe646991aceb28f4b0e74ab2bf850bb3c47802dd135007
-  data.tar.gz: c32fa7939aabdd9af057d387e98f1ef1fd10b9b73ae4cce5d8d685d8dc2ff0de2a928d5a277dd38ec7f5e1269cf84c1c444bd9294399560f9806187681d50cb5
+  metadata.gz: 0d8db1d67b338ba5ff8e745c43de0011040f5ca85889fe011c50b706cf807cf70478f7f161c37d6dd3caeb4de3abbe2f0250bca4a0fe1a9b5392ab4b004c8d9b
+  data.tar.gz: 0f0b94abadbb77eb4752e61381f87e974dd55658109a7b68cacdba36bf8847784a2be0e29e5d1b9f05938e4137f0356a6ca5b2da243e1b0c5d656768c8be649c

data/app/assets/stylesheets/anecdote/_wysicontent.css.scss

@@ -162,6 +162,67 @@
   .anecdote-caption-ajkd3b {
     @include remify( padding-top, 0.5 );
   }
+
+  // sidebar captions (only when flexbox is supported)
+  @include respond(min, tablet) {
+
+    .flexbox &.v-sidebar-caption {
+      > .inner {
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-flex-wrap: nowrap;
+        -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+        -webkit-justify-content: flex-start;
+        -ms-flex-pack: start;
+        justify-content: flex-start;
+        -webkit-align-content: stretch;
+        -ms-flex-line-pack: stretch;
+        align-content: stretch;
+        > .anecdote-intrinsic-embed-n42ha1 {
+          -webkit-order: 10;
+          -ms-flex-order: 10;
+          order: 10;
+          -webkit-flex: 1 1 auto;
+          -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+          -webkit-align-self: flex-start;
+          -ms-flex-item-align: start;
+          align-self: flex-start;
+        }
+        > .anecdote-caption-ajkd3b {
+          -webkit-order: 20;
+          -ms-flex-order: 20;
+          order: 20;
+          padding-top: 0;
+          @include remify( padding-left, 1 );
+          -webkit-flex: 0 0 230px;
+          -ms-flex: 0 0 230px;
+          flex: 0 0 230px;
+          -webkit-flex: 0 0 10.5rem;
+          -ms-flex: 0 0 10.5rem;
+          flex: 0 0 10.5rem;
+          -webkit-align-self: auto;
+          -ms-flex-item-align: auto;
+          align-self: auto;
+        }
+      }
+    }
+    .flexbox &.v-sidebar-caption.v-sidebar-caption-left {
+      > .inner > .anecdote-caption-ajkd3b {
+        -webkit-order: 1;
+        -ms-flex-order: 1;
+        order: 1;
+        @include remify( padding-right, 1 );
+        padding-left: 0;
+      }
+    }
+  }
+
 }
 
 /*---------------------------------------------------

data/lib/anecdote/version.rb

@@ -1,3 +1,3 @@
 module Anecdote
-  VERSION = "0.1.6"
+  VERSION = "0.1.7"
 end

data/lib/anecdote.rb

@@ -32,6 +32,10 @@ module Anecdote
         when 'shadow' then 'v-border-shadow'
         when 'line' then 'v-border-line'
         end
+        klasses << 'v-sidebar-caption' if [true, 'true', 'yes', 'left', 'right', 'first', 'last'].include?(settings[:sidebar_caption])
+        klasses << 'v-sidebar-caption v-sidebar-caption-left' if ['left', 'first'].include?(settings[:sidebar_caption])
+        klasses << 'v-sidebar-caption v-sidebar-caption-right' if ['right', 'last'].include?(settings[:sidebar_caption])
+
         contents = []
         contents << view_context.content_tag((settings[:href].present? ? :a : :div), (settings[:href].present? ? { href: settings[:href], title: settings[:href_title] } : {}).merge({ class: 'anecdote-intrinsic-embed-n42ha1' })) do
           if settings[:assets_path]

data/test/dummy/app/assets/stylesheets/application.css.scss

@@ -121,6 +121,14 @@ $remify-baseline: 20;
   }
   .anecdote-module-3ba83n & {
     @mixin anecdote-caption-ajkd3b-mood-icon( $tmp-color, $tmp-svg-paths ) {
+      @include scope-variation( '.v-sidebar-caption' ) {
+        .flexbox & {
+          > .inner {
+            padding-left: 0;
+            @include remify( text-indent, 1.1 );
+          }
+        }
+      }
       > .inner {
         @include remify( padding-left, 1.15 );
         position: relative;

data/test/dummy/app/views/pages/article.markdown

@@ -2,14 +2,16 @@
 
 {{ graphic: href=//baymard.com + href-title=$Clicking this image will take you to Baymard.com!$ + assets-path=category-specific-sorting-01-rei-mock-up.jpg + size=full-width + caption=$This is the 3rd in a series of 9 articles based on research findings from our e-commerce [product list usability](http://baymard.com/research/ecommerce-product-lists study).$ }}
 
-We considered naming this article "the sort type all users want but zero sites offer" because category-specific sorting really is one of those rare instances where an obvious feature has somehow been **completely overlooked** by the e-commerce community. After all, it really shouldn't come as a surprise that users would like to sort a list of TVs by "Screen size" or a collection of hard drives by "Storage capacity".
+We considered naming this article "the sort type all users want but zero sites offer" because category-specific sorting really is one of those rare instances where an obvious feature has somehow been **completely overlooked** by the e-commerce community.
+
+{{ graphic: size=big + dimensions=1280x720 + embed-code=$<iframe src="https://www.youtube.com/embed/ZCBE8ocOkAQ" frameborder="0" allowfullscreen></iframe>$ + mood=positive + sidebar-caption=true + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
+
+After all, it really shouldn't come as a surprise that users would like to sort a list of TVs by "Screen size" or a collection of hard drives by "Storage capacity".
 
 {{ pull-quote: size=big + text=$By "category-specific sort types" we mean any sorting options that are only available in one or a few select categories$ }}
 
 During our research study on product list usability the test subjects repeatedly sought out these kinds of category-specific sort types – however, to no avail since seemingly **zero sites** offer them. Even after [benchmarking](http://baymard.com/ecommerce-product-lists/benchmark/site-reviews) the product lists of 50 major e-commerce sites we have yet to find a site that truly offer category-specific sorting.
 
-{{ graphic: dimensions=1280x720 + embed-code=$<iframe src="https://www.youtube.com/embed/ZCBE8ocOkAQ" frameborder="0" allowfullscreen></iframe>$ + mood=positive + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
-
 {{% gallery: size=big + scale-by=relative-width-bottom-alignment %}}
   {{ graphic: assets-path=category-specific-sorting-02-bestbuy.jpg + mood=positive + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
   {{ graphic: assets-path=category-specific-sorting-08-faceted-sorting.jpg + mood=negative + caption=$An example of how things can go really wrong.$ }}