JADE
.instagram-post-wrapper(ng-controller="MainCtrl" ng-init='toShow = "info"')
.user-information.row
img.user-image(ng-src='{{userImage}}')
a.username(ng-href='http://www.instagram.com/{{user}}' target='_blank')
| {{user}}
.time
| {{time}}
a.image-container.row(ng-href='{{postLink}}' target='_blank')
img.image(src='{{mainImage}}')
.overlay(ng-if='toShow !== "info"')
.confirmation(ng-if='toShow === "accept"')
| This amazing text to accept an image
.confirmation(ng-if='toShow === "reject"')
| Maybe not this time
.caption.row(ng-if='caption !== null')
| {{caption}}
// Remember to change these material icons for actual instagram images
.post-details
.likes.detail
i.material-icons.tool
| thumb_up
| {{likes}}
.comments.detail
i.material-icons.tool
| comment
| {{comments}}
.tags.detail
i.material-icons.tool
| supervisor_account
| {{tags}}
.story-tools
a.moderate(ng-mouseover='toShow = "accept"' ng-mouseleave='toShow = "info"')
| Accept
a.moderate(ng-mouseover='toShow = "reject"' ng-mouseleave='toShow = "info"')
| Reject
SCSS
$white: #FFF;
$black-shadow: rgba(0, 0, 0, 0.5);
$grey-instagram: #D9DADB;
$blue-instagram: #125688;
$light-blue-instagram: #003569;
.instagram-post-wrapper {
background-color: $white;
margin: 20px;
width: 350px;
.row {
align-items: center;
display: flex;
flex-direction: row;
}
a {
cursor: pointer;
text-decoration: none;
}
.user-information {
padding: 10px;
position: relative;
.username {
color: $light-blue-instagram;
margin: 0 5px;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
.time {
color: $grey-instagram;
right: 10px;
position: absolute;
}
}
.user-image {
border-radius: 100%;
height: 30px;
}
.image-container {
position: relative;
.image {
width: 100%;
}
.overlay {
align-items: center;
background-color: $black-shadow;
display: flex;
justify-content: center;
position: absolute;
height: 100%;
width: 100%;
}
.confirmation {
color: $white;
font-size: 20px;
font-weight: 800;
line-height: 25px;
margin: 5px;
text-align: center;
}
}
.caption {
border-bottom: 1px solid $grey-instagram;
margin: 0 25px;
padding: 10px 0;
}
.post-details {
display: flex;
justify-content: space-around;
.detail {
align-items: center;
display: flex;
justify-content: center;
min-width: 100px;
}
.tool {
align-self: center;
cursor: pointer;
filter: grayscale(100%);
height: 30px;
margin: 10px;
width: 30px;
}
}
.story-tools {
align-items: center;
background-color: $blue-instagram;
display: flex;
height: 40px;
justify-content: space-around;
.moderate {
color: $white;
font-weight: 800;
}
}
}
JAVASCRIPT
var app = angular.module('myApp', []);
angular.module('myApp').controller('MainCtrl', [
'$scope',
function ($scope) {
$scope.userImage = "https://scontent-eze1-1.cdninstagram.com/t51.2885-19/s150x150/13597791_261499887553333_1855531912_a.jpg";
$scope.mainImage = "https://scontent-eze1-1.cdninstagram.com/t51.2885-15/e35/17332830_313121895769311_3076507425134608384_n.jpg";
$scope.postLink = "https://www.instagram.com/p/BR532nMjXU4/?taken-by=natgeo&hl=en";
$scope.user = "natgeo";
// This could be done with moments-js fromNow()
$scope.time = "2w";
$scope.caption = "It’s been 10,000 years since the first farmers started reaping wheat. Every year since then harvest time has been a little dance between farmers and their crops, like this one I saw from a small plane flying over fields outside Goodland, Kansas. Like all farm kids I grew up feeling the excitement of harvest, probably something that's embedded in our DNA by now. You’ll note that the two farmers approaching each other were playing a little game of chicken — and that the farmer on top dodged first. Then harvest is over and it’s another year of waiting, same as it has been for 10,000 years."
$scope.likes = 478324;
$scope.comments = 956;
$scope.tags = 0;
}
]);
