Geekwise Academy Day 2 Assetts

product-filters.json

[
	{ "id": 1, "name": "Color", "properties": [
		{ "id": 0, "name": "Blue", "selected": false },
		{ "id": 1, "name": "Red", "selected": false },
		{ "id": 2, "name": "Green", "selected": false }
	] },
	{ "id": 2, "name": "Gender", "properties": [
		{ "id": 3, "name": "Female", "selected": false },
		{ "id": 4, "name": "Male", "selected": false },
		{ "id": 5, "name": "Unisex", "selected": false }
	] }
]

product-list.css

* {
	box-sizing: border-box;
}

img{ max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { letter-spacing: 0.05em; font-weight: 400; }
h1{text-align:center;}

.filters {
	float: left;
	width: 25%;
}

.filters .filter-block {
	width: 95%;
	border: 1px solid #eee;
	margin-bottom: 15px;
}

.filters .filter-block:hover {
	border-color: hsl(64, 58%, 46%);
}

.filters .filter-block .filter {
	background-color: white;
	padding: 5px;
	border-bottom: 1px solid #eee;
}

.filters .filter-block:hover .filter {
	background-color: hsl(64, 58%, 46%);
	color: white;
}

.filters .filter-block .property {
	padding: 5px;
	cursor: pointer;
}

.filters .filter-block .property:hover {
	background-color: hsl(64, 58%, 86%);
}

.filters .filter-block .property span {
	width: 80%;
	display: inline-block;
	overflow: hidden;
}

.filters .filter-block .property input[type='checkbox'] {
	float: right;
}

.products {
	float: left;
	width: 74%;
	padding-left: 1%;
	border-left: 1px dashed #ddd;
}

.more:link, .more:visited {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.show-base a.more,
.show-base a.tocart {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	background: #000;
	color: #fff;
	text-transform: uppercase;
	border-radius: 5px;
	box-shadow: 0 0 1px #000;
	position: relative;
}

.show-base a.tocart {
	background-color: #070;
}

.show-base a.more:hover,
.show-base a.tocart:hover {
	box-shadow: 0 0 5px #fff;
	background-color: #222;
}

.show-base a.tocart:hover {
	background-color: #292;
}

.product-box {
	margin-bottom: 20px;
}

.product-box .mask .old {
	font-size: 0.8em;
	padding: 0;
	margin: 0;
	line-height: 0.8em;
	color: red;
	text-decoration: line-through;
}
.product-box .mask .old + p {
	line-height: 0.5em;
}

@media (min-width: 950px) {
	.product-box {
		float: left;
		padding: 5px;
		min-height: 250px;
		max-height: 250px;
		height: 250px;
		min-width: 200px;
	}

	.product-box .description {
		display: none;
	}

	.show-base {
		width: 100%;
		height: 100%;
		float: left;
		border: 1px solid rgba(0,0,0,0.04);
		overflow: hidden;
		position: relative;
		text-align: center;
		cursor: default;
		background: #fff;
		display: block;
		border-radius: 4px;
	}

	.show-base .mask {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0
	}

	.show-base p{
		font-size: 28px;
	}

	.show-base .mask {
		opacity: 0;
		background-image: url(http://subtlepatterns.com/patterns/gplaypattern.png);
		background-color: rgba(255,255,255, 0.5);
		-webkit-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}

	.show-base h2 {
		color: #000;
		margin-top: 5%;
		padding: 0 5px;
		opacity: 0;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.show-base p {
		opacity: 0;
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

	.show-base a.info{
		opacity: 0;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.show-base img {
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.show-base:hover img {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		filter: gray;
		-webkit-filter: grayscale(100%);
		/*  -webkit-transform: scale(1.5);
			transform: scale(1.5); */
	}

	.show-base:hover .mask {
		opacity: 1;

	}
	.show-base:hover h2,
	.show-base:hover p,
	.show-base:hover a.info {
		opacity: 1;
	}
	.show-base:hover p {
		-webkit-transition-delay: 0.1s;
		transition-delay: 0.1s;
	}
	.show-base:hover a.info {
		-webkit-transition-delay: 0.2s;
		transition-delay: 0.2s;
	}

	.product-box:hover .show-base {
		border-color: hsl(64, 58%, 46%);
	}
	.product-box:hover .title {
		opacity: 0.3;
	}
}

@media (max-width: 950px) {
	.filters {
		width: 30%;
	}
	.products {
		width: 70%;
	}
	.product-box {
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}
	.product-box .title {
		display: none;
	}
	.product-box img {
		float: left;
		margin-right: 10px;
	}
	.product-box .mask p {
		display: inline;
	}
	.product-box .description {
		margin-bottom: 20px;
	}
}

@media (max-width: 590px) {
	.filters {
		width: 40%;
	}
	.products {
		width: 60%;
	}
	.product-box {
		text-align: center;
	}
	.product-box .title {
		display: none;
	}
	.product-box img {
		margin-right: 10px;
		float: none;
	}
	.product-box .mask p {
		display: inline;
	}
}

product-list.html

<div>
	<div class="filters">
	  <!-- Loop over filters -->
		<div class="filter-block">
		  <!-- Filter name -->
			<div class='filter'></div>
			<!-- Loop over filter properties -->
			<div class="property">
			  <!-- Property name -->
				<span></span>
				<!-- Toggle selected property -->
				<input type='checkbox' />
			</div>
		</div>
	</div>
	<div class="products">
	  <!-- loop over products -->
		<div class="product-box">
		  <!-- Product title -->
			<div class='title'></div>
			<div class='show-base'>
			  <!-- product thumbnail -->
				<img ng-src="" alt="" />
				<div class="mask">
				  <!-- Product title -->
					<h2></h2>
					<!-- Conditional old class -->
					<p></p>
					<!-- Conditionally show special price -->
					<p></p>
					<div class="description">
						<!-- Product description -->
					</div>
					<div>
						<a href="#" class="more">Details</a>
						<a href="#" class="tocart">To Cart</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

products.json

[
	{
		"id": 0,
		"guid": "138ff4fd-ba1c-480b-9ef5-7fc32ea62c8f",
		"isFeatured": true,
		"isActive": true,
		"isSpecial": true,
		"price": "$1,366.15",
		"specialPrice": "$545.24",
		"picture": "http://placehold.it/300x250",
		"thumbnail": "http://placehold.it/180x180",
		"inventory": 26,
		"color": "blue",
		"gender": "male",
		"title": "Product 1",
		"manufacturer": "BUZZWORKS",
		"description": "Minim aliquip ullamco deserunt elit amet ad velit voluptate amet cupidatat. Ad laboris in magna dolor eu. Dolor et voluptate ut tempor exercitation. Deserunt ipsum nulla occaecat proident ut voluptate nisi voluptate. Anim incididunt do aliqua tempor do Lorem ea non fugiat sit non laborum.\r\n",
		"dateCreated": "2014-03-30T08:19:52 +07:00",
		"dateUpdated": "2014-02-05T17:45:47 +08:00",
		"tags": [
			"exercitation",
			"Lorem",
			"amet",
			"elit",
			"deserunt",
			"et",
			"veniam"
		]
	},
	{
		"id": 1,
		"guid": "bd91d124-e846-4fcc-81a3-c1e9a7144042",
		"isFeatured": true,
		"isActive": true,
		"isSpecial": true,
		"price": "$3,371.12",
		"specialPrice": "$653.94",
		"picture": "http://placehold.it/300x250",
		"thumbnail": "http://placehold.it/180x180",
		"inventory": 40,
		"color": "green",
		"gender": "male",
		"title": "Product 2",
		"manufacturer": "BOSTONIC",
		"description": "Nulla id nostrud est velit qui eiusmod proident veniam esse ad qui. Sit nostrud velit ut velit sit incididunt tempor laborum aliqua velit. Aute laborum ex aliquip irure nostrud proident enim.\r\n",
		"dateCreated": "2014-01-21T21:12:34 +08:00",
		"dateUpdated": "2014-05-15T03:21:21 +07:00",
		"tags": [
			"fugiat",
			"do",
			"reprehenderit",
			"id",
			"cillum",
			"aute",
			"do"
		]
	},
	{
		"id": 2,
		"guid": "750d29da-019d-4a94-a320-34954d74d811",
		"isFeatured": false,
		"isActive": true,
		"isSpecial": false,
		"price": "$1,521.79",
		"specialPrice": "$479.08",
		"picture": "http://placehold.it/300x250",
		"thumbnail": "http://placehold.it/180x180",
		"inventory": 25,
		"color": "blue",
		"gender": "male",
		"title": "Product 3",
		"manufacturer": "PROWASTE",
		"description": "Non magna dolore Lorem aute ex voluptate. Ut nulla Lorem ex quis laborum enim. Id commodo aute nulla eu. Aliqua incididunt fugiat pariatur consectetur minim voluptate occaecat anim consectetur sint enim elit dolore. Aute elit sint ipsum laboris.\r\n",
		"dateCreated": "2013-10-30T19:25:45 +07:00",
		"dateUpdated": "2014-04-14T17:16:32 +07:00",
		"tags": [
			"est",
			"consequat",
			"anim",
			"ullamco",
			"minim",
			"esse",
			"tempor"
		]
	},
	{
		"id": 3,
		"guid": "133e0248-410c-4e25-93ae-2f2e292c2dda",
		"isFeatured": false,
		"isActive": true,
		"isSpecial": false,
		"price": "$1,645.65",
		"specialPrice": "$778.24",
		"picture": "http://placehold.it/300x250",
		"thumbnail": "http://placehold.it/180x180",
		"inventory": 28,
		"color": "green",
		"gender": "male",
		"title": "Product 4",
		"manufacturer": "ZEAM",
		"description": "Commodo do nulla fugiat consequat consectetur do sint minim quis anim anim ex quis. Et excepteur amet sint eiusmod enim dolor. Reprehenderit in tempor tempor sint ullamco consequat duis officia sunt ut. Consequat nulla cupidatat sit ipsum cillum ullamco ex officia eiusmod esse pariatur. Ad mollit eiusmod tempor deserunt sunt exercitation fugiat. Nostrud laborum aliqua ex ullamco elit. Ipsum nisi qui commodo sunt reprehenderit.\r\n",
		"dateCreated": "2013-02-08T18:40:35 +08:00",
		"dateUpdated": "2014-03-24T18:39:25 +07:00",
		"tags": [
			"do",
			"labore",
			"sit",
			"id",
			"ipsum",
			"id",
			"nisi"
		]
	},
	{
		"id": 4,
		"guid": "602a134e-84fb-4771-98b9-ba6af8efbf6e",
		"isFeatured": false,
		"isActive": false,
		"isSpecial": false,
		"price": "$2,869.93",
		"specialPrice": "$855.51",
		"picture": "http://placehold.it/300x250",
		"thumbnail": "http://placehold.it/180x180",
		"inventory": 30,
		"color": "red",
		"gender": "male",
		"title": "Product 5",
		"manufacturer": "PHOLIO",
		"description": "Ipsum pariatur sunt pariatur nulla adipisicing dolor irure anim dolor cillum. Qui elit ex aute sint. Tempor laborum ut amet Lorem excepteur nisi nostrud aute veniam ex consequat exercitation do id. Consectetur dolor eiusmod ullamco labore esse. Lorem excepteur pariatur cupidatat est reprehenderit velit dolore aute enim excepteur sint laborum irure. Cillum fugiat cupidatat anim aute mollit cupidatat nulla excepteur veniam ipsum nisi enim. Laborum labore aliquip eiusmod minim sint anim velit esse deserunt.\r\n",
		"dateCreated": "2013-04-25T12:15:04 +07:00",
		"dateUpdated": "2014-04-29T06:43:40 +07:00",
		"tags": [
			"eu",
			"occaecat",
			"cupidatat",
			"Lorem",
			"do",
			"non",
			"non"
		]
	}
]