Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Cleaning up media queries and grid usage #71

Merged
merged 2 commits into from
May 20, 2014
Merged

Cleaning up media queries and grid usage #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efd60b8
Updated header structure. Pointed to cart docs
cshold May 20, 2014
ab2acbe
More grid, less generic floats. Media query alignment
cshold May 20, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 2 additions & 12 deletions assets/ajaxify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
42 changes: 22 additions & 20 deletions assets/timber.scss.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -1344,6 +1349,10 @@ a.btn-secondary {
a, img {
display: block;
}

img {
margin: 0 auto;
}
}

// ==============================================================================
Expand Down Expand Up @@ -1385,10 +1394,6 @@ a.btn-secondary {
margin: 0 auto;
text-align: center;
}

@include at-query($min, $medium) {
float: left;
}
}

.site-nav-active {
Expand Down Expand Up @@ -1418,6 +1423,7 @@ a.btn-secondary {

// Search bar in header
.nav-search {
position: relative;
padding: 7px 0;

@include at-query($max, $medium) {
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down
95 changes: 51 additions & 44 deletions layout/theme.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down