Good Boys

components.dog-data.js

import Ember from 'ember';

export default Ember.Component.extend({
  model: null,
}).reopenClass({
  positionalParams: ['model'],
});

components.image-resource.js

import Ember from 'ember';

export default Ember.Component.extend({
  imageUrl: null,
}).reopenClass({
  positionalParams: ['imageUrl'],
});

components.tile-skeleton.btn-hypen.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['drawerInputs'],
});

components.tile-skeleton.js

import Ember from 'ember';

export default Ember.Component.extend({
  localClasses: ['root'],
  imageUrl: null,
  tileUrl: null,
}).reopenClass({
  positionalParams: [],
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Good Boys'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.tileRoot{
  width: 45vw;
  position: relative;
  display: flex;
  flex-direction: row;
}

.tileLink {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% - 50px);
}

.tileCol {
  flex-grow: 1;
}

.tileCol + .tileCol {
  padding: 12px;
}

.tileThumb {
  min-width: 100px;
  max-width: 200px;
}

.imgWrapper {
  height: 0;
  padding-bottom: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.imgWrapper > img {
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: cover;
}

.tileBody {
  min-width: 0;
  padding-top: 10px;
}

.tileControls {
 	max-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.topLine {
  font-size: 14px;
  position: relative;
  display: block;
  line-height: 1.2em;
  max-height: 2.4em;
  overflow: hidden;
}

.topLine:after {
  content: "";
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  z-index: 0;
}

.subtitleLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 13px;
}

.details {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 11px; 
}

.drawerInputs {
  height: 36px;
  width: 36px;
  font-size: 36px;
  text-align: center;
  vertical-align: middle;
  line-height: 36px;
  color: grey;
  font-family: times new roman;
}

templates.application.hbs

<h1>{{appName}}</h1>
<br>
{{#tile-skeleton imageUrl='http://bit.ly/2vMs7qM' tileUrl='https://www.lingscars.com'}}
  {{dog-data class="tileBody tileCol"}}
  {{tile-skeleton/btn-hypen class="tileControls tileCol"}}
{{/tile-skeleton}}

templates.components.dog-data.hbs

<span class="topLine">The title line, which will clamp after two lines and fade into the ether</span>
<a href="#" class="subtitleLine">The subtitle line, which will clamp after one line, into an ellipsis</a>
<div class="details">Details, which will clamp after one line, into an ellipsis</div>

templates.components.image-resource.hbs

<div class="imgWrapper">
	<img src={{imageUrl}} alt="pup" class="tileImage">
</div>

templates.components.tile-skeleton.btn-hypen.hbs

:

templates.components.tile-skeleton.hbs

<div class="tileRoot">
	<a href={{tileUrl}} class="tileLink"></a>
  {{image-resource class="tileThumb tileCol" imageUrl=imageUrl}}
  {{yield}}
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}