Merge pull request #169 from Shopify/collection-description

Collection description under title
Shopify · Aug 5, 2014 · 49e4f53 · 49e4f53
2 parents d94b8bd + ff741a6
commit 49e4f53
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
@@ -875,7 +875,7 @@ hr {
 
 /*================ Section Headers ================*/
 .section-header {
-  margin-bottom: $gutter/2;
+  margin-bottom: $gutter/1.5;
 }
 
 @include at-query ($min, $large) {
@@ -884,6 +884,10 @@ hr {
     width: 100%;
   }
 
+  .section-header--title {
+    margin-bottom: $gutter/2.5;
+  }
+
   .section-header--left {
     display: table-cell;
     vertical-align: middle;
@@ -899,7 +903,7 @@ hr {
     display: table-cell;
     vertical-align: middle;
     text-align: right;
-    width: 325px;
+    width: 335px;
 
     @include at-query ($max, $medium) {
       margin-bottom: $gutter;
@@ -908,9 +912,6 @@ hr {
 }
 
 .section-header--right {
-  @include at-query ($max, $medium) {
-    margin-top: -0.4em; // don't exceed h1 margin-bottom
-  }
 
   .form-horizontal,
   .collection-view {
@@ -997,6 +998,10 @@ hr {
   }
 }
 
+.rte-header {
+  margin-bottom: 0;
+}
+
 /*============================================================================
   #Links and Buttons
 ==============================================================================*/

diff --git a/snippets/collection-sidebar.liquid b/snippets/collection-sidebar.liquid
@@ -9,15 +9,6 @@
 
 {% endcomment %}
 
-{% comment %}
-  Show the description for the current collection
-{% endcomment %}
-{% if collection.description.size > 0 %}
-  <div class="rte">
-    {{ collection.description }}
-  </div>
-{% endif %}
-
 {% comment %}
   Product types in the current collection
     - List all of the shop's types with collections.all.all_types

diff --git a/templates/collection.liquid b/templates/collection.liquid
@@ -17,15 +17,32 @@
 
   <div class="grid-item large--three-quarters">
 
+    {% comment %}
+      Different markup if a collection description exists
+    {% endcomment %}
+    {% if collection.description != blank %}
+      <header class="section-header">
+        <h1 class="section-header--title">{{ collection.title }}</h1>
+        <div class="rte rte--header">
+          {{ collection.description }}
+        </div>
+      </header>
+      <hr>
+      <div class="section-header">
+        <div class="section-header--right">
+          {% include 'collection-sorting' %}
+          {% include 'collection-views' %}
+        </div>
+      </div>
+    {% else %}
     <header class="section-header">
-      <h1 class="section-header--left">{{ collection.title }}</h1>
+      <h1 class="section-header--title section-header--left">{{ collection.title }}</h1>
       <div class="section-header--right">
-
         {% include 'collection-sorting' %}
         {% include 'collection-views' %}
-
       </div>
     </header>
+    {% endif %}
 
     {% comment %}
       Use class grid-uniform to have evenly sized columns clear