Tea Only Order Editor

by paulftw

HTML

<div id=outer ng-app ng-controller='MenuCtrl'>

<ul class=sidemenu>
    <li ng-class='{active: active=="green"}'
            ng-click='activate("green")'>
        <div class='icon icon-greentea'></div>
        <span>Green</span></li>
    <li ng-class='{active: active=="black"}'
            ng-click='activate("black")'>
        <div class='icon icon-blacktea'></div>
        <span>Black</span></li>
    <li ng-class='{active: active=="puerh"}'
            ng-click='activate("puerh")'>
        <div class='icon icon-puerh'></div>
        <span>Pu-erh</span></li>
</ul>
<div class=catview>
    <h1 class=cattitle>{{ names[active] }}</h1>
    <p class=catdescription>{{ descriptions[active] }}</p>
    <div class=teawidget ng-repeat='tea in teas[active]'>
        <div class=spacer5px>
            <div class=imageholder>
                <img ng-src="{{tea.img}}" style='{{ tea.imgstyle}}' />
            </div>
            <div class=title>{{ tea.title }}</div>
            <button class='btn-buy'
                    ng-click='additem(active, tea)'>Add</button>
        </div>
    </div>
</div>
    
<div class=shoppingcart>
    <h1>Your Order</h1>
    <div ng-repeat="item in items" class='cartitem'>
        <span ng-show='item == null' class=indexplaceholder>{{ $index+1 }}.</span>
        <span ng-show='item'>{{ item.tea.title }}</span>
    </div>
</div>

    
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#outer {
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    background-image: linear-gradient(#434343, #333333);
}

.catview {
  color: #bbb;
  float: left;
  margin-left: 86px;
  padding: 4px 8px;
}
.cattitle {
    margin: 0;
    padding: 0;
}

.catdescription {
    margin: 0;
    padding-bottom: 6px;
}

.teawidget {
    position: relative;
    margin: 0 20px 20px 0;
    width: 156px;
    height: 210px;
    float: left;
    background-image: -webkit-linear-gradient(#f8f8f8, #e4e4e4);
    background-image: -moz-linear-gradient(#f8f8f8, #e4e4e4);
    background-image: linear-gradient(#f8f8f8, #e4e4e4);
    border: 1px solid #ccc;
    border-radius: 5px;
}

.spacer5px {
    padding: 5px;
}

.imageholder {
    background-color: #aaaaaa;
    height: 146px;
    width: 146px;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: 5px;
}

.teawidget .title {
    float: left;
}

.teawidget .btn-buy {
    float: right;
    background-image: linear-gradient(#a4d746, #709431);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.3) 0px 2px 6px, inset 0 -2px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid #4d6520;
    border-bottom-color: #40551b;
    color: #fff;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
    padding: 4px 5px;
    font-size: 10px;
}

.shoppingcart {
    color: #ccc;
    float: right;
    width: 100px;
}

.cartitem {
    border: 2px dashed #666;
    height: 24px;
    margin: 5px;
}

.indexplaceholder {
    color: rgba(0, 0, 0, 0.2);
}

.sidemenu {
    position: absolute;
    top: 0;
    bottom: 1px;
    left: 0;
    margin: 0;
    width: 85px;
    background-image: -webkit-linear-gradient(right, #232323 0%, #383838 90%, #353535 100%);
    background-image: -moz-linear-gradient(right, #232323 0%, #383838 90%, #353535 100%);
    background-image: linear-gradient(right, #232323 0%, #383838 90%, #353535 100%);
  ...

JavaScript

function MenuCtrl($scope) {
    $scope.active='green';
    console.log('run tea ', $scope.active);
    $scope.activate = function(cat) {
        console.log('activate ', cat);
        $scope.active = cat;
    }
    
    $scope.items = [null, null, null, null, null, null, null];
    $scope.additem = function(cat, item) {
        var i = 0;
        while (i < $scope.items.length && $scope.items[i] != null) {
            i++;
        }
        if (i >= $scope.items.length) {
            // TODO error animation
            return;
        }
        $scope.items[i] = {
            tea: item,
            category: cat
        };
    }
    
    $scope.names = {
        'green': 'Green Tea',
        'black': 'Black Tea',
        'puerh': 'Pu-erh Tea'
    };
    $scope.descriptions = {
        'green': 'Low caffeine tea with incredible health benefits',
        'black': 'Classic drink with strong flavor',
        'puerh': 'Favorite variety of many tea gourmets'
    };
    
    $scope.teas = {};
    $scope.teas['green'] = [
        {
            title: 'Longjing',
            description: 'Most famous variety of pan-fried green tea',
            img: 'http://www.wanlingteahouse.com.au/shopimages/products/extras/tea_green/tea_green_longjing_121_2012_dry_700x700.jpg',
            imgstyle: 'margin: -180px'
        },
        {
            title: 'Sencha',
            description: 'Traditional Japanese recipe',
            img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Sencha_Japanischer_Gr%C3%BCner_Tee.jpg/320px-Sencha_Japanischer_Gr%C3%BCner_Tee.jpg',
            imgstyle: 'margin: -40px -86px'
        },
       
        
        
    ];
}