Merge pull request Shopify#71 from Shopify/minor-refinements

Cleaning up media queries and grid usage
cimocimocimo · May 20, 2014 · 4ec8143 · 4ec8143
2 parents 58b6dd2 + a0e3c6f
commit 4ec8143
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 76 deletions.
diff --git a/assets/ajaxify.js b/assets/ajaxify.js
@@ -15,22 +15,12 @@
  *    - snippet/ajax-cart-template.liquid
 */
 
-
 /*
- * Plugin Notes
- *
- * In order to update the cart count on your page when adding a product,
- * warp the number in a span and pass it's selector into the 'cartCountSelector' option.
+ * Plugin Documentation
  *
- * Similarly to the cart count, you can add a selector for
- * 'cartCostSelector' to update the total price when an item is added.
- *
- * If using the drawer method, pass a selector into the 'toggleCartButton' option
- * to toggle the cart open and closed. Leave this out if you'd like the link to
- * take the user to the /cart page.
+ * View the complete documentation at http://shopify.com/timber
 */
 
-
 // JQUERY API (c) Copyright 2009-2014 Shopify Inc. Author: Caroline Schnapp. All Rights Reserved.
 // Includes slight modifications to addItemFromForm.
 

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
@@ -1318,21 +1318,26 @@ a.btn-secondary {
 // ==============================================================================
 .site-header {
   padding: $gutter 0;
+
+  @include at-query($min, $large) {
+    .grid {
+      display: table;
+
+      & > .grid-item {
+        float: none;
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+  }
 }
 
 .header-logo {
   text-align: center;
-  margin-bottom: 0;
+  margin: 0 auto $gutter/2;
 
-  @include at-query($min, $medium) {
-    float: left;
-  }
-
-  @include at-query($max, $medium) {
-    img {
-      margin: 0 auto;
-      margin-bottom: 0.5em;
-    }
+  @include at-query($min, $large) {
+    margin-bottom: 0;
   }
 
   a,
@@ -1344,6 +1349,10 @@ a.btn-secondary {
   a, img {
     display: block;
   }
+
+  img {
+    margin: 0 auto;
+  }
 }
 
 // ==============================================================================
@@ -1385,10 +1394,6 @@ a.btn-secondary {
     margin: 0 auto;
     text-align: center;
   }
-
-  @include at-query($min, $medium) {
-    float: left;
-  }
 }
 
 .site-nav-active {
@@ -1418,6 +1423,7 @@ a.btn-secondary {
 
 // Search bar in header
 .nav-search {
+  position: relative;
   padding: 7px 0;
 
   @include at-query($max, $medium) {
@@ -1426,18 +1432,14 @@ a.btn-secondary {
     text-align: center;
   }
 
-  @include at-query($min, $medium) {
-    float: right;
-  }
-
   .input-group,
   .input-group-field {
     margin-bottom: 0;
   }
 }
 
 .search-bar {
-  max-width: 300px;
+  max-width: 100%;
 
   @include at-query($max, $medium) {
     margin: 0 auto;
@@ -1454,7 +1456,7 @@ a.btn-secondary {
   text-align: center;
   padding: $gutter 0;
 
-  @include at-query($min, $medium) {
+  @include at-query($min, $large) {
     padding: $gutter*2 0;
     text-align: left;
   }

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -66,61 +66,68 @@
   <header class="site-header" role="banner">
     <div class="wrapper">
 
-      {% comment %}
-        Use the uploaded logo from theme settings if enabled
-      {% endcomment %}
-      <h1 class="header-logo">
-        {% if settings.use_logo %}
-          <a href="/">
-            {{ 'logo.png' | asset_url | img_tag: shop.name }}
-          </a>
-        {% else %}
-          <a href="/">{{ shop.name }}</a>
-        {% endif %}
-      </h1>
-
-      <div class="text-center large-right large--text-right">
-        {% comment %}
-          You cart/checkout link should at least show the number of items in it.
-          Below shows the item count followed by item(s) and the total cart price.
-
-          Ajaxify Cart Notes:
-            - #cartToggle toggles cart visibility (drawer or modal)
-            - #cartCount updates the total number of items in the cart
-            - #cartCost updates the total cost of the cart
-            - Documentation:  http://shopify.com/timber#ajax-cart
-        {% endcomment %}
-        <p>
+      <div class="grid">
+        <div class="grid-item large--one-half">
+          {% comment %}
+            Use the uploaded logo from theme settings if enabled
+          {% endcomment %}
+          <h1 class="header-logo large--left">
+            {% if settings.use_logo %}
+              <a href="/">
+                {{ 'logo.png' | asset_url | img_tag: shop.name }}
+              </a>
+            {% else %}
+              <a href="/">{{ shop.name }}</a>
+            {% endif %}
+          </h1>
+        </div>
+        <div class="grid-item large--one-half text-center large--text-right">
+          {% comment %}
+            You cart/checkout link should at least show the number of items in it.
+            Below shows the item count followed by item(s) and the total cart price.
+
+            Ajaxify Cart Notes:
+              - #cartToggle toggles cart visibility (drawer or modal)
+              - #cartCount updates the total number of items in the cart
+              - #cartCost updates the total cost of the cart
+              - Documentation:  http://shopify.com/timber#ajax-cart
+          {% endcomment %}
           <a href="/cart" id="cartToggle">
             Cart (<span id="cartCount">{{ cart.item_count }}</span> {{ cart.item_count | pluralize: 'item', 'items' }} <span id="cartCost">{{ cart.total_price | money }}</span>)
           </a>
-        </p>
-
-        {% comment %}
-          If customer accounts are enabled, provide login and create account links
-        {% endcomment %}
-        {% if shop.customer_accounts_enabled %}
-        <p>
-          {% if customer %}
-            Logged in as <a href="/account">{{ customer.first_name }}</a> &middot; {{ 'Log out' | customer_logout_link }}
-          {% else %}
-            {{ 'Log in' | customer_login_link }}
-            {% if shop.customer_accounts_optional %}
-            or {{ 'Create an account' | customer_register_link }}
+
+          {% comment %}
+            If customer accounts are enabled, provide login and create account links
+          {% endcomment %}
+          {% if shop.customer_accounts_enabled %}
+          <p>
+            {% if customer %}
+              Logged in as <a href="/account">{{ customer.first_name }}</a> &middot; {{ 'Log out' | customer_logout_link }}
+            {% else %}
+              {{ 'Log in' | customer_login_link }}
+              {% if shop.customer_accounts_optional %}
+              or {{ 'Create an account' | customer_register_link }}
+              {% endif %}
             {% endif %}
+          </p>
           {% endif %}
-        </p>
-        {% endif %}
+        </div>
       </div>
 
     </div>
   </header>
 
   <nav class="nav-bar" role="navigation">
     <div class="wrapper">
-      {% include 'site-nav' %}
-      <div class="nav-search">
-        {% include 'search-bar' %}
+      <div class="grid">
+        <div class="grid-item large--two-thirds">
+          {% include 'site-nav' %}
+        </div>
+        <div class="grid-item large--one-third">
+          <div class="nav-search">
+            {% include 'search-bar' %}
+          </div>
+        </div>
       </div>
     </div>
   </nav>
@@ -164,7 +171,7 @@
       moneyFormat: {{ shop.money_format | json }}, // Your shop money format, defined in liquid.
       disableAjaxCart: false, // If for some reason you want to disable the cart, set to true. Default is false.
       enableQtySelectors: true, // Enable the quantity selectors on your templates, even if disableAjaxCart is false. Default is true.
-      prependDrawerTo: 'body' // The element selector where the cart is prepended. This is used for the drawer and flip methods. Default is $('body').
+      prependDrawerTo: 'body' // The element selector where the cart is prepended. This is used for the drawer and flip methods. Default is 'body'.
     });
   });
   </script>