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="row nill">
  <div class="itm col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo" ng-repeat="drawItem in drawItems">
      <div class="grip_hang_topp"></div>
      <div class="col grip">
        <h3>{{ drawItem.name }}</h3>
      <a title="{{ drawItem.desc }}" class="fancybox zero" rel="gallery1" href="{{ drawItem.img }}">
      <img src="{{ drawItem.img }}" />
      </a>
          <div class="col coat2 truncate bleww">{{ drawItem.desc }}</div>
      </div>
      <div class="grip_hang_bott"></div>
  </div>
</div>
</div>
</div>

CSS

h3 { font-size: 18px; padding: 0; margin: 0; margin-bottom: 10px; padding-bottom: 10px; text-align: center; border-bottom: solid 1px #000; }

.bleww { background: #e5efff; }

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


/*--...

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: 'Galaxy Storyboard',
            year: '2015',
            img: 'http:\/\/galnova.com\/A15\/storyb_1.jpg',
            program: 'adobe after effects',
            desc: 'Galaxy Supernova intro storyboard',
        },{
            id: 02,
            name: 'Two',
            year: '',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description 2.',
        },{
            id: 03,
            name: 'Three',
            year: '',
            //img: '',
            price: '$17.99',
            altprice: '12 miles',
            desc: 'This is a fake description 3.',
        },{
            id: 04,
            name: 'Four',
            year: '',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 4.',
        },{
            id: 05,
            name: 'Five',
            year: '',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 5.',
        },{
            id: 06,
            name: 'Six',
            year: '',
            //img: '',
            price: '$17.99',
            altprice: '10 miles',
            desc: 'This is a fake description 6.',
        }];
});