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">
<script src="https://rawgit.com/desandro/masonry/v2.1.08/jquery.masonry.js"></script>
<div ng-app="app">

  <div ng-controller="portItemController" class="kcontainer">
    <div class="row nill">
      <div class="itm item col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo" ng-repeat="portItem in portItems">
        <div class="grip_hang_topp"></div>
        <div class="col grip">
          <h3>{{ portItem.name }}</h3>
          <a title="{{ portItem.desc }}" class="fancybox zero" rel="gallery1" href="{{ portItem.img }}">
      <img src="{{ portItem.img }}" />
      </a>
          <div class="col coat2 truncate bleww">{{ portItem.desc }}</div>
        </div>
        <div class="grip_hang_bott"></div>
      </div>
    </div>
  </div>
  
  <hr/>
  
    <div ng-controller="othItemController" class="">
    <div class="row nill">
      <div class="itm item col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo" ng-repeat="othItem in othItems">
        <div class="grip_hang_topp"></div>
        <div class="col grip">
          <h3>{{ othItem.name }}</h3>
          <video controls="" name="media">
          <source src="{{ othItem.feed }}" type="video/mp4">
          </video>
          <div class="col coat2 truncate bleww">{{ othItem.desc }}</div>
          <a alt="video link" href="{{ othItem.link }}" target="blank" class="btn...

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 !important;
}

hr { border: solid 2px #000; color: #ddd; }

.b_youtube {
  background: #cd201f;
  color: #fff!important;
}

.grip video { width: 100%; height: 100%; border: 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;
  }
}

/*--...

JavaScript

var portItems = angular.module('portItems', []);
var othItems = angular.module('othItems', []);
var app = angular.module('app', ['portItems', 'othItems']);

portItems.controller('portItemController', function($scope) {
  $scope.portItems = [{
    id: 00,
    name: 'Laurel',
    year: '2018',
    type: 'dpainting',
    img: 'https:\/\/scontent.cdninstagram.com\/vp\/d57b67930605619d9915721c0c7485ca\/5B9FE8A0\/t51.2885-15/s640x640\/sh0.08\/e35\/32039833_2132442723659121_1042097789158293504_n.jpg',
    program: 'Procreate',
    desc: 'Laurel Digital Painting'
  }, {
    id: 01,
    name: 'Galaxy Storyboard',
    year: '2015',
    type: 'mmedia',
    img: 'http:\/\/galnova.com\/A15\/storyb_1.jpg',
    program: 'adobe after effects',
    desc: 'Galaxy Supernova intro storyboard'
  }, {
    id: 02,
    name: 'Sketchage Storyboard',
    year: '2015',
    type: 'mmedia',
    img: 'http:\/\/galnova.com\/A15\/storyb_2.jpg',
    program: 'adobe after effects',
    desc: 'Sketchage intro storyboard.'
  }, {
    id: 03,
    name: 'Knowledge Pass',
    year: '2011',
    type: 'gdesign',
    img: 'http:\/\/galnova.com\/A11\/pass.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 10,
    name: 'Dark V. Moon',
    year: '2018',
    type: 'character',
    img: 'https://scontent-ort2-2.cdninstagram.com/vp/0233a1fc37a1558108aac9ef137296f9/5BBE415A/t51.2885-15/e35/30078872_466018893814056_5663022758980747264_n.jpg',
    program: 'Procreate',
    desc: 'Chalstolce Macabre V. Bruno Moon'
  }, {
    id: 04,
    name: 'Rand Poster 1',
    year: '2013',
    type: 'gdesign',
    img: 'http:\/\/galnova.com\/nu_images\/gd_42.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id: 05,
    name: 'Rand Poster 2',
    year: '2013',
    type: 'gdesign',
    img: 'http:\/\/galnova.com\/nu_images\/gd_43.jpg',
    program: 'adobe illustrator',
    desc: 'Poster design for graduate school'
  }, {
    id:...