Geekwise Day 5 Assetts

product-list-controller.js

$scope.displayType = 'grid';

$scope.toggleDisplay = function() {
    $scope.displayType = ($scope.displayType === 'grid') ? 'list' : 'grid'
}

product-list.css

* {
	box-sizing: border-box;
}

body {
    overflow-y: scroll;
}

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

.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;
}

.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;
}

/* ----------GRID DISPLAY---------- */
.grid .product-box {
    float: left;
    padding: 5px;
    min-height: 250px;
    max-height: 250px;
    height: 250px;
    min-width: 200px;
}

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

.grid .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;
}

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

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

.grid .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;
}

.grid .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;
}

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

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

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

.grid .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); */
}

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

.grid .show-base:hover h2,
.grid .show-base:hover p,
.grid .show-base:hover a.info {
    opacity: 1;
}

.grid .show-base:hover p {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.grid .show-base:hover a.info {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

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

/* ----------LIST DISPLAY---------- */
.list .product-box {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.list .product-box .title {
    display: none;
}

.list .product-box img {
    float: left;
    margin-right: 10px;
}

.list .product-box .mask p {
    display: inline;
}

.list .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 class="row">

    <div class="filters col-sm-3">
        <!-- Loop over filters -->
        <div class="filter-block" ng-repeat="filter in filters">
            <!-- Filter name -->
            <div class='filter' ng-bind="filter.name"></div>
            <!-- Loop over filter properties -->
            <div class="property" ng-repeat="property in filter.properties">
                <!-- Property name -->
                <span ng-bind="property.name"></span>
                <!-- Toggle selected property -->
                <input type='checkbox' ng-model="property.selected" />
            </div>
        </div>
    </div>

    <div class="col-sm-9">

        <div class="row form-group">
            <div class="input-group">
                <input type="text" class="form-control" ng-model="productSearch.title">
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default">search</button>
                </span>
            </div>
            <p class="help-block" ng-show="productSearch.title.length">Showing results for <strong ng-bind="productSearch.title"></strong></p>
        </div>

        <div class="row">
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-default" ng-click="toggleDisplay()">
                    <i class="glyphicon glyphicon-th-large"></i>
                </button>
                <button type="button" class="btn btn-default" ng-click="toggleDisplay()">
                    <li class="glyphicon glyphicon-th-list"></li>
                </button>
            </div>
        </div>

        <div class="row products" ng-class="displayType">
            <!-- loop over products -->
            <div class="product-box" ng-repeat="product in products | filter:productSearch">
                <!-- Product title -->
                <div class='title' ng-bind="product.title"></div>
                <div class='show-base'>
                    <!-- product thumbnail -->
                    <img ng-src="{{product.thumbnail}}" alt="{{product.title}}"/>

                    <div class="mask">
                        <!-- Product title -->
                        <h2 ng-bind="product.title"></h2>
                        <!-- Conditional old class -->
                        <p ng-class="{old:product.isSpecial}" ng-bind="product.price"></p>
                        <!-- Conditionally show special price -->
                        <p ng-show="product.isSpecial" ng-bind="product.specialPrice"></p>

                        <div class="description" ng-bind="product.description">
                            <!-- Product description -->
                        </div>
                        <div>
                            <a ui-sref="product({id: product.guid})" class="more">Details</a>
                            <a href="#" class="tocart">To Cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>