Styling for products, categories, brands

varanek27 · Apr 12, 2016 · 3c61a44 · 3c61a44
1 parent aff7f69
commit 3c61a44
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 43 deletions.
diff --git a/app.js b/app.js
@@ -97,7 +97,7 @@ function loadPage(href) {
  })
  break
  // /brand/:id
- case 'brands':
+ case 'brand':
  loader = page.renderHTML({
  brandId: urlParts[1]
  })

diff --git a/pages/brand.js b/pages/brand.js
@@ -17,7 +17,7 @@ PC.pages.brand.renderHTML = function (params) {
 
 function renderSingleBrand(brand) {
  var fields = brand.fields
- return '<div>' +
+ return '<div class="brand">' +
  '<h2>' + fields.companyName+ '</h2>' +
  '<div>' +
  renderImage(fields.logo) +

diff --git a/pages/categories.js b/pages/categories.js
@@ -15,34 +15,33 @@ PC.pages.categories.renderHTML = function (params) {
  content_type: PC.config.categoryContentTypeId
  })
  .then(function (entries) {
- var selectedCategoryId
+ var query = {}
  if(params.selectedCategoryId) {
- selectedCategoryId = params.selectedCategoryId
- } else {
- selectedCategoryId = entries.items[0].sys.id
+ query.categoryId = params.selectedCategoryId
  }
- return PC.pages.products.renderHTML({categoryId: selectedCategoryId})
+ return PC.pages.products.renderHTML(query)
  .then(function (productsHTML) {
  return renderCategoryListPage(entries.items, productsHTML)
  })
  })
 }
 
 function renderCategoryListPage(categories, productsHTML) {
- return '<div>' +
- '<div>' + renderCategoryList(categories) + '</div>' +
+ return '<div class="categories">' +
+ '<ul class="categories-list">' + renderCategoryList(categories) + '</ul>' +
  '<div>' + productsHTML + '</div>' +
  '</div>'
 }
 
 function renderCategoryList(categories) {
- return categories.map(function (category) {
- var fields = category.fields
- return '<div>' +
- '<img src="' + fields.icon.fields.file.url + '" width="15" height="15" alt="' + fields.categoryDescription + '" title="' + fields.categoryDescription + '" />' +
- '<h1><a href="/categories/' + category.sys.id + '" data-nav>' + fields.title + '</a></h1>' +
- '</div>'
- }).join('\n')
+ return '<li><a href="/categories" data-nav>All</a></li>'+
+ categories.map(function (category) {
+ var fields = category.fields
+ return '<li>' +
+ '<img src="' + fields.icon.fields.file.url + '" width="20" height="20" alt="' + fields.categoryDescription + '" title="' + fields.categoryDescription + '" />' +
+ '<a href="/categories/' + category.sys.id + '" data-nav>' + fields.title + '</a>' +
+ '</li>'
+ }).join('\n')
 }
 
 }());
diff --git a/pages/product.js b/pages/product.js
@@ -18,29 +18,33 @@ PC.pages.product.renderHTML = function (params) {
 
 function renderSingleProduct(product) {
  var fields = product.fields
- return '<div>' +
- '<div>' +
+ return '<div class="product">' +
+ '<div class="product-image">' +
+ renderImage(fields.image[0]) +
+ '</div>' +
+ '<div class="product-header">' +
  '<h2>' + fields.productName + '</h2>' +
  ' by ' +
- '<a href="/brands/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>' +
- '</div>' +
- '<div>' +
- renderImage(fields.image[0]) +
+ '<a href="/brand/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>' +
  '</div>' +
- '<p>' +
- fields.categories.map(function (category) {
- return category.fields.title
- }).join(', ') +
+ '<p class="product-categories">' +
+  fields.categories.map(function (category) {
+  return category.fields.title
+  }).join(', ') +
  '</p>' +
  '<p>' + marked(fields.productDescription) + '</p>' +
+ '<p>Size/Type/Color: ' + fields.sizetypecolor+ '</p>' +
+ '<p>' + fields.quantity + ' in stock</p>' +
  '<p>' + fields.price + ' &euro;</p>' +
- '<p>Tags: ' + fields.tags.join(', ')+ '</p>' +
+ '<p>SKU: ' + fields.sku + '</p>' +
+ '<p>More details: <a href="'+fields.website+'">' + fields.website + '</a></p>' +
+ '<p class="product-tags"><span>Tags:</span> ' + fields.tags.join(', ')+ '</p>' +
  '</div>'
 }
 
 function renderImage(image) {
  if(image && image.fields.file) {
- return '<img src="' + image.fields.file.url + '" width="150" height="150" />'
+ return '<img src="' + image.fields.file.url + '" width="300" height="300" />'
  } else {
  return ''
  }

diff --git a/pages/products.js b/pages/products.js
@@ -27,34 +27,45 @@ PC.pages.products.renderHTML = function (params) {
 }
 
 function renderProducts(products) {
- return '' +
- '<h1>Products</h1>' +
- products.map(renderSingleProduct).join('\n')
+ return '<h1>Products</h1>' +
+ '<div class="products">' +
+ products.map(renderSingleProduct).join('\n') +
+ '</div>'
 }
 
 function renderSingleProduct(product) {
  var fields = product.fields
- return '<div>' +
- '<div>' +
+ return '<div class="product-in-list">' +
+ '<div class="product-image">' +
  renderImage(fields.image[0], fields.slug) +
  '</div>' +
- '<div>' +
- '<h2>' +
- '<a href="/product/' + fields.slug + '" data-nav>' +
- fields.productName +
- '</a>'+
- '</h2>' +
- ' by ' +
- '<a href="/brands/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>'
+ '<div class="product-details">' +
+ renderProductDetails(fields) +
  '</div>' +
- '<p>' +
+ '</div>'
+}
+
+function renderProductDetails(fields) {
+ return renderProductHeader(fields) +
+ '<p class="product-categories">' +
  fields.categories.map(function (category) {
  return category.fields.title
  }).join(', ') +
  '</p>' +
  '<p>' + PC.utils.truncate(marked(fields.productDescription), 100) + '</p>' +
  '<p>' + fields.price + ' &euro;</p>' +
- '<p>Tags: ' + fields.tags.join(', ')+ '</p>' +
+ '<p class="product-tags"><span>Tags:</span> ' + fields.tags.join(', ')+ '</p>'
+}
+
+function renderProductHeader(fields) {
+ return '<div class="product-header">' +
+ '<h2>' +
+ '<a href="/product/' + fields.slug + '" data-nav>' +
+ fields.productName +
+ '</a>'+
+ '</h2>' +
+ ' by ' +
+ '<a href="/brand/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>' +
  '</div>'
 }
 

diff --git a/styles.css b/styles.css
@@ -125,3 +125,66 @@ a {
  background: linear-gradient(0deg, #3C80CF 0%, #5B9FEF 100%) no-repeat;
  color: white;
 }
+
+.products {
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+}
+
+.product-in-list {
+ display: flex;
+ margin-bottom: 60px;
+}
+
+.product-image a {
+ border-bottom: none;
+}
+
+.product-header h2 {
+ display: inline;
+}
+
+.product-header h2 a {
+ border-bottom: none;
+}
+
+.product-details > * {
+ margin-bottom: 10px;
+}
+
+.product-categories {
+ font-weight: bold;
+}
+
+.product-tags span {
+ font-weight: bold;
+}
+
+.product {
+ display: flex;
+ flex-direction: column;
+}
+
+.product > *, .brand > * {
+ margin-bottom: 15px;
+}
+
+.categories {
+ display: flex;
+}
+
+.categories-list {
+ list-style: none;
+ width: 20%;
+}
+
+.categories-list li {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.categories-list img {
+ margin-right: 5px;
+}