Skip to content

Instantly share code, notes, and snippets.

Created July 6, 2016 17:14
Show Gist options
  • Save anonymous/cc6c5cd0612748fed4e5546bd0fe20fc to your computer and use it in GitHub Desktop.
Save anonymous/cc6c5cd0612748fed4e5546bd0fe20fc to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/cadepupume
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
background-color: grey;
}
.asset {
background-color: white;
padding: 10px;
}
.row {
padding-left: 6px;
}
.row div {
display: inline-block;
}
.content, .row div {
vertical-align: top;
}
.thumbnail, .content {
display: inline-block;
}
.thumbnail {
background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
width: 4.5rem;
height: 48px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.content {
width: calc(100% - 5rem);
vertical-align: top;
}
.asset-name, .user-count {
width: calc(100% - 4.5rem);
}
.asset-type, .user-percentage {
width: 4rem;
text-align: right;
}
.asset-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="asset">
<div class="thumbnail"></div>
<div class="content">
<div class="row">
<div class="asset-name">I was left standing in the wilderness downdown </div>
<div class="asset-type">VOD</div>
</div>
<div class="row">
<div class="user-count">1k users</div>
<div class="user-percentage">23.4%</div>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">body {
background-color: grey;
}
.asset {
background-color: white;
padding: 10px;
}
.row {
padding-left: 6px;
}
.row div {
display: inline-block;
}
.content, .row div {
vertical-align: top;
}
.thumbnail, .content {
display: inline-block;
}
.thumbnail {
background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
width: 4.5rem;
height: 48px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.content {
width: calc(100% - 5rem);
vertical-align: top;
}
.asset-name, .user-count {
width: calc(100% - 4.5rem);
}
.asset-type, .user-percentage {
width: 4rem;
text-align: right;
}
.asset-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}</script>
</body>
</html>
body {
background-color: grey;
}
.asset {
background-color: white;
padding: 10px;
}
.row {
padding-left: 6px;
}
.row div {
display: inline-block;
}
.content, .row div {
vertical-align: top;
}
.thumbnail, .content {
display: inline-block;
}
.thumbnail {
background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
width: 4.5rem;
height: 48px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.content {
width: calc(100% - 5rem);
vertical-align: top;
}
.asset-name, .user-count {
width: calc(100% - 4.5rem);
}
.asset-type, .user-percentage {
width: 4rem;
text-align: right;
}
.asset-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment