Summary List

by Bhesh Gurung

HTML

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.0.0/ng-tags-input.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body ng-app="sajhasite">
    <div class="summary-list-container" ng-controller="DiscussionSummariesCtrl">        
        <div class="summary-container" ng-repeat="summary in discussionSummaries">
            <div class="author-info-container">
                <div class="timestamp">
                    started Aug 31 '15 at 2:00PM
                </div>
                <div class="profile-image-container">
                    <span class='fa fa-3x fa-user'></span>
                </div>
                <div class="username-container">random guy</div>
            </div>
           <div style="overflow:hidden;">               
               <div>
                  <a class="discussion-link" href="#">{{summary.title}}</a>
                  <ul class="tag-list">
                     <li class="tag-item" ng-repeat="tag in summary.tags">
                         {{ tag }}
                     </li>
                  </ul>
               </div>
               <div class="stats-container">
                   <div title="views" class="stat-container stat-container-default">
                        <div class="stat-icon stat-icon-default">
                            <span class='fa fa-lg fa-eye'></span>    
                        </div>
                        <div class="stat-text stat-text-default">0</div>        
                    </div>
                    <div title="likes" class="stat-container stat-container-like">
                        <div class="stat-icon stat-icon-like">
                            <span class='fa fa-lg fa-thumbs-o-up'></span>    
                       ...

CSS

* {
    font-family: FontAwesome; 
    font-size: 14px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 400; 
    line-height: 20px;
}


body {
    background-color: #fff;
}

.summary-list-container {    
    width: 650px;
    margin: 0 auto;
    padding: 5px;
}

.summary-container 
{
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

a.discussion-link:link,
a.discussion-link:visited,
a.discussion-link:hover,
a.discussion-link:focus,
a.discussion-link:active {
    color: #084B8A;
    text-decoration: none;
    font-weight: bold;
    outline: 0;
    font-size: 18px;
}

a.discussion-link:hover {
    color: #8A0808;
}

.tag-list {
    display: block;
    padding: 0;
    list-style-type: none;
}

.tag-item {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 2px;
    color: #585858;
    background-color: blue;
    border: 1px solid #ACACAC;
    border-radius: 3px;
background: transparent -webkit-linear-gradient(#F0F9FF 0px, #CBEBFF 47%, #A1DBFF 100%) repeat scroll 0% 0%;
background: transparent -moz-linear-gradient(#F0F9FF 0px, #CBEBFF 47%, #A1DBFF 100%) repeat scroll 0% 0%;
background: transparent -o-linear-gradient(#F0F9FF 0px, #CBEBFF 47%, #A1DBFF 100%) repeat scroll 0% 0%;
background: transparent linear-gradient(#F0F9FF 0px, #CBEBFF 47%, #A1DBFF 100%) repeat scroll 0% 0%;
}

.author-info-container {
    width: 200px; 
    float: right;
}

.timestamp {
    color: #666; 
    margin: 5px 0;
} 

.profile-image-container {
    width: 50px; 
    height: 50px; 
    background-color: #045FB4; 
    color: #fff; 
    float: left; 
    text-align: center; 
    line-height: 65px;
}

.username-container {
    margin-left: 55px; 
    color: #045FB4; 
    font-weight: 600;
}

.stats-container {
    margin-left: 5px;
}

.stat-text-default {
    color: #2E9AFE;
}

.stat-icon-default {
    color: #2E9AFE;
}

.stat-text-like {        
    color: #04B404;
}

.stat-icon-like {
    color:...

JavaScript

angular.module('discussions', [])
    .controller('DiscussionSummariesCtrl', ['$scope', function($scope) {
     	$scope.discussionSummaries = [
            {
            	title: "How to handle Idle team members in Sprint",                
                tags: ["team", "sprint"]
            }, {
            	title: "How to handle Idle team members in Sprint",
                tags: ["team", "sprint"]
            }, {
            	title: "How to handle Idle team members in Sprint",
                tags: ["team", "sprint"]
            }
        ];
    }]);

angular.module('sajhasite', ['discussions'])