Angular WIP

by Keith Jeter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<!-- <div ng-app="app">
<div ng-controller="drawItemController">
<div class="itm" ng-repeat="drawItem in drawItems">
<div class="imag"></div>
<h2>{{ drawItems.name }}</h2>
<div class="hf">Buy it: {{ drawItem.price }}</div>
<div class="hff">Earn it: {{ drawItem.altprice }}</div>
<div class="desc"><div>{{ drawItem.desc }}</div></div>
<div class="prog"><div>{{ drawItem.progress }}</div></div>
</div>
</div>
</div> -->

<div ng-app="app">
<div ng-controller="drawItemController">
<div class="itm" ng-repeat="drawItem in drawItems">

<div class="col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo">
		<div class="grip_hang_topp"></div>
		<div class="col grip">
		  <h2>{{ drawItems.name }}</h2>
		<a title="{{ drawItem.desc }}" class="fancybox zero" rel="gallery1" href="---image link---">
		<img src="---thumbnail link---" />
		</a>
        <div class="col coat2 truncate">{{ drawItem.desc }}</div>
		</div>
		  
		<div class="grip_hang_bott"></div>
</div>

</div>
</div>
</div>

CSS

h2 { padding: 0; margin: 0; margin-bottom: 10px; padding-bottom: 10px; text-align: center; border-bottom: solid 1px #000; }

.itm { 
    border: solid 4px #000;
    border-radius: 15px;
    margin: 10px;
    padding: 10px;
    min-width: 150px;
}

.itm div { width: 100%; }
.itm .hf, .itm .hff { cursor: pointer; text-align: center; padding-bottom: 10px; padding-top: 10px; margin-bottom: 10px; float: left; width: 50%; }

.itm .hf { background-color: #ddd; }
.itm .hff { background-color: #ccc; }

.itm .desc { background: #eee; border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 10px; margin-top: 0px; overflow: hidden; }
.itm .desc div { padding: 0 10px 10px 10px; }

.itm .prog { min-height: 20px; background: #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding-top: 10px; overflow: hidden; }
.itm .prog div { text-align: center; color: #fff; }

.imag { background: #777; min-width: 150px!important; height: 200px!important; margin: auto; }

/* -- */

 .nill { padding: 0; margin: 0; }
 
i {
  margin-right: 3px;
}

.second {
  margin-left: 10px;
}

.floated {
  font-size: 11px;
}

@media only screen and (max-width: 480px) {
  .ui.card > .content > .header:not(.ui),
  .ui.cards>.card>.content>.header:not(.ui) {
    font-weight: normal;
    font-size: 1em;
  }
  .ui.card > .content,
  .ui.cards > .card > .content {
    padding: .5em;
  }
}


/*-- --*/
.col-6,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  padding: 8px;
}

h1 {
 ...

JavaScript

var drawItems = angular.module('drawItems', []);
var illItems = angular.module('illItems', []);
var app = angular.module('app', ['drawItems', 'illItems']);

drawItems.controller('drawItemController', function ($scope) {
    $scope.drawItems = [{
            //id: 01,
            name: 'One',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 1.',
        },{
            id: 02,
            name: 'Two',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 2.',
        },{
            id: 03,
            name: 'Three',
            //img: '',
            price: '$17.99',
            altprice: '12 miles',
            desc: 'This is a fake description 3.',
        },{
            id: 04,
            name: 'Four',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 4.',
        }];
});