Fix Grid Separators borders

Enhance search box design Add font icons Brand page design changes adding more contact information
ahmadajmi · Jun 11, 2015 · bda2bc3 · bda2bc3
1 parent e4d6db0
commit bda2bc3
Show file tree

Hide file tree

Showing 53 changed files with 398 additions and 132 deletions.
diff --git a/README.md b/README.md
@@ -143,6 +143,19 @@ This will be generated as
 
 `removeTrailingSlash` filter is used with category name, because some times we get a category name like `Food/Beverage/Tobacco` and you can see the `/` in the name, this will make a conflict with Angular routes. So `removeTrailingSlash` is used to remove the `/` and add it in the controller to send it as a parameter.
 
+
+#### Icons
+
+Icons generated from [fontello] and could be used as:
+
+``` haml
+%i{class: "demo-icon icon-search"}
+%i{class: "demo-icon icon-globe"}
+%i{class: "demo-icon icon-location"}
+%i{class: "demo-icon icon-mobile"}
+%i{class: "demo-icon icon-mail"}
+```
+
 #### Technology Used
 
 * [HAML]
@@ -161,4 +174,5 @@ This will be generated as
 [SASS]: http://sass-lang.com/
 [Gulp]: http://gulpjs.com/
 [Bower]: http://bower.io/
-[Angular.js]: https://angularjs.org/
+[Angular.js]: https://angularjs.org/
+[fontello]: http://fontello.com/
diff --git a/app/font/fontello.eot b/app/font/fontello.eot
diff --git a/app/font/fontello.svg b/app/font/fontello.svg
diff --git a/app/font/fontello.ttf b/app/font/fontello.ttf
diff --git a/app/font/fontello.woff b/app/font/fontello.woff
diff --git a/app/js/app.js b/app/js/app.js
@@ -66,6 +66,7 @@ angular.module('GS1', [
       'search_button': 'Search',
       'search_page_title': 'Search results for: ',
       'search_page_results_nothing_found': 'Sorry there is no search results for',
+      'category_page_results_nothing_found': 'Sorry there is no products',
       'page_not_found_title': 'Sorry that page was not found',
       'products': 'Products',
       'brands': 'Brands',
@@ -89,6 +90,7 @@ angular.module('GS1', [
       'search_button': 'بحث',
       'search_page_title': 'نتائج البحث عن: ',
       'search_page_results_nothing_found': 'عذرا .... لا يوجد نتائج بحث عن ',
+      'category_page_results_nothing_found': 'عذرا .... لا يوجد منتجات',
       'page_not_found_title': 'عذرا لم يتم العثور على تلك الصفحة',
       'products': 'المنتجات',
       'brands': 'العلامات التجارية',

diff --git a/app/js/brand/brandDirectives.js b/app/js/brand/brandDirectives.js
@@ -0,0 +1,18 @@
+.directive('brandCard', function() {
+  return {
+    replace: true,
+    scope: {
+      item: '=item'
+    },
+    templateUrl: '../partials/brand-card.html'
+  };
+})
+.directive('brandCardRow', function() {
+  return {
+    replace: true,
+    scope: {
+      items: '=items'
+    },
+    templateUrl: 'partials/brand-card-row.html'
+  };
+})
diff --git a/app/js/brand/brandhDirectives.js b/app/js/brand/brandhDirectives.js
diff --git a/app/js/category/categoryDirectives.js b/app/js/category/categoryDirectives.js
@@ -1,9 +1,21 @@
 .directive('categoryCard', function() {
   return {
     replace: true,
+    scope: {
+      item: '=item'
+    },
     templateUrl: '../partials/category-card.html'
   };
 })
+.directive('categoryCardRow', function() {
+  return {
+    replace: true,
+    scope: {
+      items: '=items'
+    },
+    templateUrl: 'partials/category-card-row.html'
+  };
+})
 .directive('categoriesNavigation', function() {
   return {
     replace: true,

diff --git a/app/js/product/productDirectives.js b/app/js/product/productDirectives.js
@@ -1,6 +1,18 @@
 .directive('productCard', function() {
   return {
     replace: true,
+    scope: {
+      item: '=item'
+    },
     templateUrl: '../partials/product-card.html'
   };
+})
+.directive('productCardRow', function() {
+  return {
+    replace: true,
+    scope: {
+      items: '=items'
+    },
+    templateUrl: 'partials/product-card-row.html'
+  };
 })
diff --git a/app/partials/404.haml b/app/partials/404.haml
@@ -1,3 +1,3 @@
-.row{ng-show:"done"}
+.row
   .column.large-12
     %h4 {{ 'page_not_found_title' | translate }}
diff --git a/app/partials/brand-card-row.haml b/app/partials/brand-card-row.haml
@@ -0,0 +1,8 @@
+%div
+  .card-row{ng-repeat: "item in items", ng-show: "$index % 3 == 0"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index]}"}
+      %brand-card{item: "items[$index]"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index + 1]}"}
+      %brand-card{item: "items[$index + 1]"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index + 2]}"}
+      %brand-card{item: "items[$index + 2]"}
diff --git a/app/partials/brand-card.haml b/app/partials/brand-card.haml
@@ -1,7 +1,7 @@
-%div
-  %a{ng-href: "#/brands/{{brand.name}}", class: "block"}
+%div{ng-show: "item"}
+  %a{ng-href: "#/brands/{{item.name}}", class: "block"}
     .flex-embed.flex-embed--4by3
-      %img.product-card-img.flex-embed__object{ng-src: "{{ brand.logo }}"}
+      %img.card-img.flex-embed__object{ng-src: "{{ item.logo }}"}
 
-  %a{ng-href: "#/brands/{{brand.name}}", class: "block text-center grey"}
-    {{ brand.name }}
+  %a{ng-href: "#/brands/{{item.name}}", class: "block text-center grey"}
+    {{ item.name }}
diff --git a/app/partials/brand.haml b/app/partials/brand.haml
@@ -2,21 +2,40 @@
 
   %loading-status{loading: "loading", status: "status"}
 
-  .border-bottom{ng-show:"done"}
-    .row
-      .large-8.column.column--center.text-center
-        .row
-          .small-4.medium-4.large-4.column.column--center.text-center
-            .flex-embed.flex-embed--16by9
-              %img.flex-embed__object{ng-src: "{{ brand.logo }}"}
-
-        %h4
-          {{ brand.name }}
-
-        %p.text-center
+  .row{ng-show:"done"}
+    .large-8.column.column--center.text-center
+      .row
+        .small-4.medium-4.large-4.column.column--center.text-center
+          %img.brand-logo{ng-src: "{{ brand.logo }}"}
+
+      %h3.brand-name
+        {{ brand.name }}
+
+      .text-center
+        %p.brand-info
           {{ brand.description }}
 
+        %ul.brand-contact-info
+          %li{class: "margin-{{opposite_float}}-one"}
+            %i{class: "demo-icon icon-location padding-{{opposite_float}}-half"}
+            Cairo - Egypt
+
+          %li{class: "margin-{{opposite_float}}-one"}
+            %i{class: "demo-icon icon-globe padding-{{opposite_float}}-half"}
+            www.pepsico.com.eg
+
+          %li{class: "margin-{{opposite_float}}-one"}
+            %i{class: "demo-icon icon-mail padding-{{opposite_float}}-half"}
+            [email protected]
+
+          %li{class: "margin-{{opposite_float}}-one"}
+            %i{class: "demo-icon icon-mobile padding-{{opposite_float}}-half"}
+            %bdi
+              012 4440 9991
+
+          .hide
+            {{ brand.contact_info }}
+
   .row{ng-show:"done"}
     .grid-container.clearfix
-      .small-12.large-4.medium-6.column.product-card{ng-repeat: "product in products"}
-        %product-card
+      %product-card-row{items: "products"}
diff --git a/app/partials/category-card-row.haml b/app/partials/category-card-row.haml
@@ -0,0 +1,8 @@
+%div
+  .card-row{ng-repeat: "item in items", ng-show: "$index % 3 == 0"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index]}"}
+      %category-card{item: "items[$index]"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index + 1]}"}
+      %category-card{item: "items[$index + 1]"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index + 2]}"}
+      %category-card{item: "items[$index + 2]"}
diff --git a/app/partials/category-card.haml b/app/partials/category-card.haml
@@ -1,3 +1,3 @@
-%div
+%div{ng-show: "item"}
   %a{ng-href: "#/category/{{category.name}}", class: "block text-center grey"}
     {{ category.name }}
diff --git a/app/partials/category.haml b/app/partials/category.haml
@@ -6,7 +6,14 @@
     .column.large-12
       %h4.border-bottom.padding-bottom-one {{ category }}
 
-  .row{ng-show:"done"}
-    .grid-container.clearfix
-      .small-12.large-4.medium-6.column.product-card{ng-repeat: "product in products"}
-        %product-card
+  -# Show products results if something is found
+  %div{ng-show:"done && products.length > 0"}
+    .row
+      .grid-container.clearfix
+        %product-card-row{items: "products"}
+
+  -# Show callback message if there no products
+  %div{ng-show:"done && products.length == 0"}
+    .row
+      .column.large-12
+        %h5 {{ 'category_page_results_nothing_found' | translate }} {{ query }}
diff --git a/app/partials/product-card-row.haml b/app/partials/product-card-row.haml
@@ -0,0 +1,13 @@
+-# Why $index % 3 == 0
+-# This will output 3 columns in every row
+-# if for example we have only 4 products, first row will have 3,
+-# the second row will have 1, but we want to add more empty 2 columns so the layout border could be done
+
+%div
+  .card-row{ng-repeat: "item in items", ng-show: "$index % 3 == 0"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index]}"}
+      %product-card{item: "items[$index]"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index + 1]}"}
+      %product-card{item: "items[$index + 1]"}
+    .small-12.large-4.medium-6.column.card{ng-class: "{'card-empty': !items[$index + 2]}"}
+      %product-card{item: "items[$index + 2]"}
diff --git a/app/partials/product-card.haml b/app/partials/product-card.haml
@@ -1,14 +1,14 @@
-%div
-  %a{ng-href: "#/product/{{product.gtin}}", class: "block"}
+%div{ng-show: "item"}
+  %a{ng-href: "#/product/{{item.gtin}}", class: "block"}
     .flex-embed.flex-embed--4by3
-      %img.product-card-img.flex-embed__object{ng-src: "{{ product.photos.value[0] }}"}
+      %img.card-img.flex-embed__object{ng-src: "{{ item.photos.value[0] }}"}
 
-  %a{ng-href: "#/brands/{{product.brand.value}}", class: "block text-center product-card-brand grey"}
-    {{ product.brand.value }}
+  %a{ng-href: "#/brands/{{item.brand.value}}", class: "block text-center grey"}
+    {{ item.brand.value }}
 
-  %a{ng-href: "#/product/{{product.gtin}}", class: "block grey"}
-    %h4.product-card-title.text-center.truncate
-      {{ product.productname.value }}
+  %h4.card-title.text-center.truncate
+    %a{ng-href: "#/product/{{item.gtin}}", class: "block"}
+      {{ item.productname.value }}
 
   .grey.text-center
-    GTIN {{ product.gtin }}
+    GTIN {{ item.gtin }}
diff --git a/app/partials/product.haml b/app/partials/product.haml
@@ -66,7 +66,6 @@
     -# `product.gtin != productGTIN` is to exclude the current product to be shown as a related product
     .row
       .grid-container.clearfix
-        .small-12.large-4.medium-6.column.product-card{ng-repeat: "product in related_products", ng-show: "product.gtin != productGTIN"}
-          %product-card
+        %product-card-row{items: "related_products"}
 
   %script{type: "application/ld+json", id: "jsonld", ng-controller: "JsonLDController"}
diff --git a/app/partials/products-list.haml b/app/partials/products-list.haml
@@ -4,5 +4,5 @@
 
   .row{ng-show:"!loading"}
     .grid-container.clearfix
-      .small-12.large-4.medium-6.column.product-card{ng-repeat: "product in products"}
-        %product-card
+
+      %product-card-row{items: "products"}
diff --git a/app/partials/search-form.haml b/app/partials/search-form.haml
@@ -1,8 +1,8 @@
 %div{ng-controller: "SearchController"}
 
-  %form{name: "SearchForm", ng-submit: "doSearch(query)", novalidate: "true"}
+  %form{name: "SearchForm", ng-submit: "doSearch(query)", novalidate: "true", class: "search-form"}
 
-    %input{type: "text", ng-model: "query", required: "true", placeholder: "", class: "input-field"}
+    %input{type: "text", placeholder: "{{'search_button' | translate}}", ng-model: "query", required: "true", class: "input-field search-input"}
 
     %button{type: "submit", class: "button button-small button-primary", ng-disabled: "SearchForm.$invalid"}
-      {{ 'search_button' | translate }}
+      %i{class: "demo-icon icon-search"}
diff --git a/app/partials/search.haml b/app/partials/search.haml
@@ -10,38 +10,31 @@
 %div{ng-show:"done && search_results_length > 0"}
 
   -# Show products search results if we found some of them
-  .border-bottom{ng-show:"done && products.length > 0"}
-    .row
-      .column.large-12
-        %h6.border-bottom.padding-bottom-one {{ 'products' | translate }}
+  .row{ng-show:"done && products.length > 0"}
+    .column.large-12
+      %h5.border-bottom.padding-bottom-one {{ 'products' | translate }}
 
     .row
       .grid-container.clearfix
-        .small-12.large-4.medium-6.column.product-card{ng-repeat: "product in products"}
-          %product-card
+        %product-card-row{items: "products"}
 
   -# Show brands search results if we found some of them
-  .border-bottom{ng-show:"done && brands.length > 0"}
-    .row
-      .column.large-12
-        %h6.border-bottom.padding-bottom-one {{ 'brands' | translate }}
+  .row{ng-show:"done && brands.length > 0"}
+    .column.large-12
+      %h5.border-bottom.padding-bottom-one {{ 'brands' | translate }}
 
     .row
       .grid-container.clearfix
-        .small-12.large-4.medium-6.column.product-card{ng-repeat: "brand in brands"}
-          %brand-card
+        %brand-card-row{items: "brands"}
 
   -# Show categories search results if we found some of them
-  .border-bottom{ng-show:"done && categories.length > 0"}
-    .row
-      .column.large-12
-        %h6.border-bottom.padding-bottom-one {{ 'categories' | translate }}
+  .row{ng-show:"done && categories.length > 0"}
+    .column.large-12
+      %h5.border-bottom.padding-bottom-one {{ 'categories' | translate }}
 
     .row
       .grid-container.clearfix
-        .small-12.large-4.medium-6.column.product-card{ng-repeat: "category in categories"}
-          %category-card
-
+        %category-card-row{items: "categories"}
 
 -# Show callback message if there no search results is found
 %div{ng-show:"done && search_results_length == 0"}