gistfile1.txt

<div class="se-well" ng-class="{'yesThread' : thread.isApproved === 'yes', 'noThread' : thread.isApproved === 'no', 'naThread' : thread.isApproved === 'N/A' && thread.UI_Thread_Toggle === true, 'activeThread' : thread.UI_Thread_Toggle === true}">
<!-- ng-click="" -->
  <div ng-click="getThreadDeatils(thread.threadId)" class="threads" ng-class="">
      <span class="se-well__thread__isApproved">
        <span ng-show="thread.threadType === 'approval'">
          <span ng-switch on="thread.isApproved">
            <span ng-switch-when="yes">
              <i class="mdi-navigation-check"></i>
            </span>
            <span ng-switch-when="no">
              <i class="mdi-action-close"></i>
            </span>
            <span ng-switch-default>
              <i class="mdi-navigation-more-horiz"></i>
            </span>
          </span>
        </span>
      </span>

    <span class="se-well__thread__topic_count">
      <span class="se-well__thread__topic">{{ thread.threadTopic }}</span>
      <span class="se-well__thread__count">({{ thread.commentCount }})</span>
    </span>

    <span class="se-well__thread__approval" ng-hide="thread.UI_Thread_Toggle === false || thread.threadType === 'info'" >
      <button ng-disabled="thread.isApproved != 'N/A'"  ng-click="threadApproval(thread, 'yes')" class="btn btn-success">Approve</button>
      <button ng-disabled="thread.isApproved != 'N/A'"  ng-click="threadApproval(thread,'no')" class="btn btn-danger">Reject</button>
    </span>
    <span class="se-well__thread__stage text-primary" ng-hide="thread.UI_Thread_Toggle === true"><small>{{ thread.stage }}</small></span>
  </div>


<!--     <span class="se-well__thread__descr">{{ thread.threadDescription | limitTo : 80 }}</span>
 -->
  <!-- stage x
  <div class="panel-thread-holder"><span class="panel-thread-label">{{ thread.stage }}</span></div>
  ->


  <!-- /stage -->

  <div ng-hide="thread.UI_Thread_Toggle === false" class="se-well__thread__comments">
      <div class="panel-body">
          <span class="thread__comments_header">
              <small class="thread__comments_header_desc">{{ thread.threadDescription}}</small>
              <span class="pull-right" style="display:inline-block;">
                <button ng-disabled="thread.isApproved != 'N/A'" ng-click="parentCommentFormShow  = !parentCommentFormShow" class="btn btn-default btn-xs"><i class="mdi mdi-content-add"></i>New Comment</button>
              </span>
              <div ng-include="'newComment.html'"></div>
          </span>
      <!-- Parent comment starts -->
      <div  ng-repeat="parentComment in thread.comments">

           <div class="comment">
                <span class="comment__user_image">
                  <img gravatar-src="'{{ parentComment.userEmail }}'" gravatar-size="40">
                </span>
                <span class="comment__user_name_time_reply">
                  <span class="comment__user_name">{{ parentComment.userName }} </span>
                  <br>
                  <span class="comment__time">
                    <span am-time-ago="parentComment.created_at"></span>
                    <a ng-disabled="thread.isApproved != 'N/A'" ng-click="parentChildCommentFormShow = !parentChildCommentFormShow" href="javascript:void(0)" class="comment__reply">Reply</a>
                  </span>
                </span>
                <span class="comment__text">
                {{ parentComment.comment }}
                </span>

                 <!-- Add Child Comments Form -->
                 <div class="row" style="padding-left:75px;">
                     <div class="col-md-12">
                     <br>
                         <form  style="background-color:#f1f1f1;padding:15px;" ng-hide="parentChildCommentFormShow">
                           <div class="form-group">
                             <label for="childComment" class="control-label">Add Reply</label>
                             <div class="form-control-wrapper">
                               <textarea id="childComment" autofocus ng-model="childCommentObject.comment" placeholder="Add a new comment." class="form-control" rows="2"></textarea>
                               <span class="material-input"></span>
                             </div>
                             <span class="help-block"></span>
                             <button ng-click="postChildComment(parentComment.commentId,thread.threadId,childCommentObject)" class="btn btn-success btn-xs">Post Comment</button>
                           </div>
                         </form>
                     </div>
                </div>
                 <!--  / Add Child Comments Form -->


                  <div ng-repeat="childcomment in parentComment.children[0]" class="child_comment_parent">
                      <div class="comment child_comment">
                                <span class="comment__user_image">
                                  <img gravatar-src="'{{ childcomment.userEmail }}'" gravatar-size="40">
                                </span>
                                <span class="comment__user_name_time_reply">
                                  <span class="comment__user_name">{{ childcomment.userName }} </span>
                                  <br>
                                  <span class="comment__time">
                                    <span am-time-ago="childcomment.created_at"></span>
                                    <!-- <a ng-click="parentChildCommentFormShow = !parentChildCommentFormShow" href="javascript:void(0)" class="comment__reply">Reply</a> -->
                                  </span>
                                </span>
                                <span class="comment__text">
                                {{ childcomment.comment }}
                                </span>
                      </div>
                  </div> <!-- Child Comment End -->
          </div>
  </div>
</div>

<style type="text/css">

.se-well{
    min-height: 20px;
    /*padding: 15px 30px;*/
    padding: 0px;
    margin-bottom: 0px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    color: #222;
    font-size: 1.1em;
    letter-spacing: 1.5px;
    cursor: pointer;
  }

  .yesThread
  {
    background: #F5FFFA;
  }
  .noThread
  {
    background: #FFE8E1;
  }
  .naThread
  {
    background: #fafafa;
  }
  .activeThread
  {
    margin: 0px -20px 0px -20px;
  }
.threads
{
  padding: 15px 30px;
}
.se-well__thread__isApproved
{
  /*float: left;
  font-size: 2em;
  margin-top: -4px;
  margin-left: -25px;
  margin-right: 10px;
*/}
.se-well__thread__topic_count
{
  min-width: 400px;
  display: inline-block;
}
.se-well__thread__topic{
  font-weight: 400;
  display: inline-block;
}
.se-well__thread__count{
  color: #aaa;
  margin-left: 5px;
  width: 50px;
  display: inline-block;
}
.se-well__thread__approval
{
  float: right;
}
.se-well__thread__stage
{
  float: right;
  font-size: 0.9em;
  margin: -15px -25px;
}

/*.se-well__thread__comments
{
  display: block;
}*/
.thread__comments_header
{
  margin:0px 50px 20px 50px;
  display: block;
}
.thread__comments_header_desc
{
  display: inline-block;
}
  .comment{
    /*margin-left: 15px;*/
    padding: 15px 10px 10px 0px;
    border-left: 4px solid #64D2ED;
    margin-bottom: 0px;
    /*border-top: 1px solid #eee;*/
    /*border-bottom: 1px dotted #ccc;*/
    background: #fefefe;
    /*border-top: 1px dashed #ccc;*/
    /*border-bottom: 1px dashed #ccc;*/
    /*box-shadow: -5px -0px 0 0 #64D2ED;*/
 /* -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; */   
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset;

  }
  .child_comment
  {
    background: #fff;
    border-left: 4px solid #5BC254;
    box-shadow: inner 0 0 5px #888;
    margin-left: 75px;
  }
  .child_comment_parent:last-child {
    margin-bottom: 10px;
  }

  .comment__user_image{
    display: inline-block;
    margin-left: 10px;
    margin-right: 20px;
  }
  .comment__user_image img
  {
    border-radius: 40px;
    height: 40px;
    width: 40px;
    vertical-align: super;
  }
  .comment__user_name_time_reply
  {
    display: inline-block;
    font-size: 0.8em;
    vertical-align: top;
  }
  .comment__user_name
  {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 1.2em;
  }
  .comment__reply
  {
    display: inline-block;
    font-weight: bold;
  }

  .comment__text
  {
    display: block;
    margin-left: 75px;
    /*margin-top: 20px;*/
    margin-bottom: 0px;
    text-align: justify;
  }
 

  </style>






  <!-- Add New Comments Form -->
  <script type="text/ng-template"  id="newComment.html">
    <div class="row">
        <div class="col-md-12">
        <form class="" ng-hide="parentCommentFormShow">
          <div class="form-group">
            <label for="newComment" class="control-label">Add Comment</label>
            <div class="form-control-wrapper">
              <textarea id="newComment" autofocus ng-model="parentCommentObject.comment" placeholder="Add a new comment." class="form-control" rows="2"></textarea>
              <span class="material-input"></span>
            </div>
            <span class="help-block"></span>
            <button ng-click="postComment($index,parentCommentObject,thread.threadId,thread.threadTopic)" class="btn btn-info btn-xs">Post Comment</button>
          </div>
        </form>
        </div>
    </div>
  </script>
  <!-- / Add New Comments Form -->