Add box-comment feature

build/less/boxes.less

@@ -285,6 +285,39 @@
   }
 }
 
+//Comment Box
+.box-comments {
+  background: #f7f7f7;
+  .box-comment {
+    .clearfix();
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    &:last-of-type {
+      border-bottom: 0;
+    }
+    &:first-of-type {
+      padding-top: 0;
+    }
+    img {
+      &:extend(.img-sm);
+      float: left;
+    }
+  }
+  .comment-text {
+    margin-left: 40px;
+    color: #555;
+  }
+  .username {
+    color: #444;
+    display: block;
+    font-weight: 600;
+  }
+  .text-muted {
+    font-weight: 400;
+    font-size: 12px;
+  }
+}
+
 //Widgets
 //-----------
 

build/less/miscellaneous.less

@@ -73,6 +73,9 @@
   color: #000;
   background-color: @gray!important;
 }
+.bg-gray-light {
+  background-color: #f7f7f7;
+}
 .bg-black {
   background-color: @black!important;
 }
@@ -317,6 +320,139 @@
   .gradient(@maroon; @maroon; lighten(@maroon, 10%))!important;
   color: #fff;
 }
+
+//Description Block Extension
+.description-block {
+  .description-icon {
+    font-size: 16px;
+  }
+}
+
+//Remove top padding
+.no-pad-top {
+  padding-top: 0;
+}
+
+//Make position static
+.position-static {
+  position: static!important;
+}
+
+//List utility classes
+.list-header {
+  font-size: 15px;
+  padding: 10px 4px;
+  font-weight: bold;
+  color: #666;
+}
+.list-seperator {
+  height: 1px;
+  background: @box-border-color;
+  margin: 15px 0 9px 0;
+}
+.list-link {
+  > a {
+    padding: 4px;
+    color: #777;
+    &:hover {
+      color: #222;
+    }
+  }
+}
+
+//Light font weight
+.font-light {
+  font-weight: 300;
+}
+
+//User block
+.user-block {
+  img {
+    width: 40px;
+    height: 40px;
+    float: left;
+  }
+  .username,
+  .description,
+  .comment {
+    display: block;
+    margin-left: 50px;
+  }
+  .username {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .description {
+    color: #999;
+    font-size: 13px;
+  }
+  &.user-block-sm {
+    img {
+      &:extend(.img-sm);
+    }
+    .username,
+    .description,
+    .comment {
+      margin-left: 40px;
+    }
+    .username {
+      font-size: 14px;
+    }
+  }
+}
+
+//Image sizes
+.img-sm,
+.img-md,
+.img-lg {
+  float: left;
+}
+.img-sm {
+  width: 30px!important;
+  height: 30px!important;
+  + .img-push {
+    margin-left: 40px;
+  }
+}
+.img-md {
+  width: 60px;
+  height: 60px;
+  + .img-push {
+    margin-left: 70px;
+  }
+}
+.img-lg {
+  width: 100px;
+  height: 100px;
+  + .img-push {
+    margin-left: 110px;
+  }
+}
+
+//General attachemnt block
+.attachment-block {
+  border: 1px solid @box-border-color;
+  padding: 5px;
+  margin-bottom: 10px;
+  background: #f7f7f7;
+
+  .attachemnt-img {
+    max-width: 100px;
+    max-height: 100px;
+    height: auto;
+    float: left;
+  }
+  .attachment-pushed {
+    margin-left: 110px;
+  }
+  .attachment-heading {
+    margin: 0;
+  }
+  .attachment-text {
+    color: #555;
+  }
+}
+
 .connectedSortable {
   min-height: 100px;
 }

dist/css/AdminLTE.css

@@ -1799,6 +1799,43 @@ a:focus {
     margin-right: 10px;
   }
 }
+.box-comments {
+  background: #f7f7f7;
+}
+.box-comments .box-comment {
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+.box-comments .box-comment:before,
+.box-comments .box-comment:after {
+  content: " ";
+  display: table;
+}
+.box-comments .box-comment:after {
+  clear: both;
+}
+.box-comments .box-comment:last-of-type {
+  border-bottom: 0;
+}
+.box-comments .box-comment:first-of-type {
+  padding-top: 0;
+}
+.box-comments .box-comment img {
+  float: left;
+}
+.box-comments .comment-text {
+  margin-left: 40px;
+  color: #555;
+}
+.box-comments .username {
+  color: #444;
+  display: block;
+  font-weight: 600;
+}
+.box-comments .text-muted {
+  font-weight: 400;
+  font-size: 12px;
+}
 /* Widget: TODO LIST */
 .todo-list {
   margin: 0;
@@ -4100,6 +4137,9 @@ table.text-center th {
   color: #000;
   background-color: #d2d6de !important;
 }
+.bg-gray-light {
+  background-color: #f7f7f7;
+}
 .bg-black {
   background-color: #111111 !important;
 }
@@ -4402,6 +4442,114 @@ table.text-center th {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e73f7c', endColorstr='#d81b60', GradientType=0) !important;
   color: #fff;
 }
+.description-block .description-icon {
+  font-size: 16px;
+}
+.no-pad-top {
+  padding-top: 0;
+}
+.position-static {
+  position: static!important;
+}
+.list-header {
+  font-size: 15px;
+  padding: 10px 4px;
+  font-weight: bold;
+  color: #666;
+}
+.list-seperator {
+  height: 1px;
+  background: #f4f4f4;
+  margin: 15px 0 9px 0;
+}
+.list-link > a {
+  padding: 4px;
+  color: #777;
+}
+.list-link > a:hover {
+  color: #222;
+}
+.font-light {
+  font-weight: 300;
+}
+.user-block img {
+  width: 40px;
+  height: 40px;
+  float: left;
+}
+.user-block .username,
+.user-block .description,
+.user-block .comment {
+  display: block;
+  margin-left: 50px;
+}
+.user-block .username {
+  font-size: 16px;
+  font-weight: 600;
+}
+.user-block .description {
+  color: #999;
+  font-size: 13px;
+}
+.user-block.user-block-sm .username,
+.user-block.user-block-sm .description,
+.user-block.user-block-sm .comment {
+  margin-left: 40px;
+}
+.user-block.user-block-sm .username {
+  font-size: 14px;
+}
+.img-sm,
+.img-md,
+.img-lg,
+.box-comments .box-comment img,
+.user-block.user-block-sm img {
+  float: left;
+}
+.img-sm,
+.box-comments .box-comment img,
+.user-block.user-block-sm img {
+  width: 30px!important;
+  height: 30px!important;
+}
+.img-sm + .img-push {
+  margin-left: 40px;
+}
+.img-md {
+  width: 60px;
+  height: 60px;
+}
+.img-md + .img-push {
+  margin-left: 70px;
+}
+.img-lg {
+  width: 100px;
+  height: 100px;
+}
+.img-lg + .img-push {
+  margin-left: 110px;
+}
+.attachment-block {
+  border: 1px solid #f4f4f4;
+  padding: 5px;
+  margin-bottom: 10px;
+  background: #f7f7f7;
+}
+.attachment-block .attachemnt-img {
+  max-width: 100px;
+  max-height: 100px;
+  height: auto;
+  float: left;
+}
+.attachment-block .attachment-pushed {
+  margin-left: 110px;
+}
+.attachment-block .attachment-heading {
+  margin: 0;
+}
+.attachment-block .attachment-text {
+  color: #555;
+}
 .connectedSortable {
   min-height: 100px;
 }

pages/widgets.html

@@ -1129,7 +1129,150 @@
                   </div><!-- /.row -->
                 </div>
               </div><!-- /.widget-user -->
-            </div><!-- /.col -->            
+            </div><!-- /.col -->
+          </div><!-- /.row -->
+
+          <div class="row">
+            <div class="col-md-6">
+              <!-- Box Comment -->
+              <div class="box box-widget">
+                <div class='box-header with-border'>
+                  <div class='user-block'>
+                    <img class='img-circle' src='../dist/img/user1-128x128.jpg' alt='user image'/>
+                    <span class='username'><a href="#">Jonathan Burke Jr.</a></span>
+                    <span class='description'>Shared publicly - 7:30 PM Today</span>
+                  </div><!-- /.user-block -->
+                  <div class='box-tools'>
+                    <button class='btn btn-box-tool' data-toggle='tooltip' title='Mark as read'><i class='fa fa-circle-o'></i></button>
+                    <button class='btn btn-box-tool' data-widget='collapse'><i class='fa fa-minus'></i></button>
+                    <button class='btn btn-box-tool' data-widget='remove'><i class='fa fa-times'></i></button>
+                  </div><!-- /.box-tools -->
+                </div><!-- /.box-header -->
+                <div class='box-body'>
+                  <img class="img-responsive pad" src="../dist/img/photo2.png" alt="Photo"/>
+                  <p>I took this photo this morning. What do you guys think?</p>
+                  <button class='btn btn-default btn-xs'><i class='fa fa-share'></i> Share</button>
+                  <button class='btn btn-default btn-xs'><i class='fa fa-thumbs-o-up'></i> Like</button>
+                  <span class='pull-right text-muted'>127 likes - 3 comments</span>
+                </div><!-- /.box-body -->
+                <div class='box-footer box-comments'>
+                  <div class='box-comment'>
+                    <!-- User image -->
+                    <img class='img-circle img-sm' src='../dist/img/user3-128x128.jpg' alt='user image'/>
+                    <div class='comment-text'>
+                      <span class="username">
+                        Maria Gonzales
+                        <span class='text-muted pull-right'>8:03 PM Today</span>
+                      </span><!-- /.username -->
+                      It is a long established fact that a reader will be distracted
+                      by the readable content of a page when looking at its layout.
+                    </div><!-- /.comment-text -->
+                  </div><!-- /.box-comment -->                  
+                  <div class='box-comment'>
+                    <!-- User image -->
+                    <img class='img-circle img-sm' src='../dist/img/user4-128x128.jpg' alt='user image'/>
+                    <div class='comment-text'>
+                      <span class="username">
+                        Luna Stark
+                        <span class='text-muted pull-right'>8:03 PM Today</span>
+                      </span><!-- /.username -->
+                      It is a long established fact that a reader will be distracted
+                      by the readable content of a page when looking at its layout.
+                    </div><!-- /.comment-text -->
+                  </div><!-- /.box-comment -->
+                </div><!-- /.box-footer -->
+                <div class="box-footer">
+                  <form action="#" method="post">
+                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text" />
+                    <!-- .img-push is used to add margin to elements next to floating images -->
+                    <div class="img-push">
+                      <input type="text" class="form-control input-sm" placeholder="Press enter to post comment" />
+                    </div>
+                  </form>
+                </div><!-- /.box-footer -->
+              </div><!-- /.box -->
+            </div><!-- /.col -->
+            <div class="col-md-6">
+              <!-- Box Comment -->
+              <div class="box box-widget">
+                <div class='box-header with-border'>
+                  <div class='user-block'>
+                    <img class='img-circle' src='../dist/img/user1-128x128.jpg' alt='user image'/>
+                    <span class='username'><a href="#">Jonathan Burke Jr.</a></span>
+                    <span class='description'>Shared publicly - 7:30 PM Today</span>
+                  </div><!-- /.user-block -->
+                  <div class='box-tools'>
+                    <button class='btn btn-box-tool' data-toggle='tooltip' title='Mark as read'><i class='fa fa-circle-o'></i></button>
+                    <button class='btn btn-box-tool' data-widget='collapse'><i class='fa fa-minus'></i></button>
+                    <button class='btn btn-box-tool' data-widget='remove'><i class='fa fa-times'></i></button>
+                  </div><!-- /.box-tools -->
+                </div><!-- /.box-header -->
+                <div class='box-body'>
+                  <!-- post text -->
+                  <p>Far far away, behind the word mountains, far from the
+                    countries Vokalia and Consonantia, there live the blind
+                    texts. Separated they live in Bookmarksgrove right at</p>
+                  <p>the coast of the Semantics, a large language ocean.
+                    A small river named Duden flows by their place and supplies
+                    it with the necessary regelialia. It is a paradisematic
+                    country, in which roasted parts of sentences fly into
+                    your mouth.</p>
+
+                  <!-- Attachment -->
+                  <div class="attachment-block clearfix">
+                    <img class="attachemnt-img" src="../dist/img/photo1.png" alt="attachement image"/>
+                    <div class="attachment-pushed">
+                      <h4 class="attachment-heading"><a href="http://www.lipsum.com/">Lorem ipsum text generator</a></h4>
+                      <div class="attachment-text">
+                        Description about the attachment can be placed here.
+                        Lorem Ipsum is simply dummy text of the printing and typesetting industry... <a href="#">more</a>
+                      </div><!-- /.attachment-text -->
+                    </div><!-- /.attachment-pushed -->
+                  </div><!-- /.attachment-block -->
+
+                  <!-- Social sharing buttons -->
+                  <button class='btn btn-default btn-xs'><i class='fa fa-share'></i> Share</button>
+                  <button class='btn btn-default btn-xs'><i class='fa fa-thumbs-o-up'></i> Like</button>
+                  <span class='pull-right text-muted'>45 likes - 2 comments</span>
+                </div><!-- /.box-body -->
+                <div class='box-footer box-comments'>
+                  <div class='box-comment'>
+                    <!-- User image -->
+                    <img class='img-circle img-sm' src='../dist/img/user3-128x128.jpg' alt='user image'/>
+                    <div class='comment-text'>
+                      <span class="username">
+                        Maria Gonzales
+                        <span class='text-muted pull-right'>8:03 PM Today</span>
+                      </span><!-- /.username -->
+                      It is a long established fact that a reader will be distracted
+                      by the readable content of a page when looking at its layout.
+                    </div><!-- /.comment-text -->
+                  </div><!-- /.box-comment -->
+                  <div class='box-comment'>
+                    <!-- User image -->
+                    <img class='img-circle img-sm' src='../dist/img/user5-128x128.jpg' alt='user image'/>
+                    <div class='comment-text'>
+                      <span class="username">
+                        Nora Havisham
+                        <span class='text-muted pull-right'>8:03 PM Today</span>
+                      </span><!-- /.username -->
+                      The point of using Lorem Ipsum is that it has a more-or-less
+                      normal distribution of letters, as opposed to using
+                      'Content here, content here', making it look like readable English.
+                    </div><!-- /.comment-text -->
+                  </div><!-- /.box-comment -->
+                </div><!-- /.box-footer -->
+                <div class="box-footer">
+                  <form action="#" method="post">
+                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text" />
+                    <!-- .img-push is used to add margin to elements next to floating images -->
+                    <div class="img-push">
+                      <input type="text" class="form-control input-sm" placeholder="Press enter to post comment" />
+                    </div>
+                  </form>
+                </div><!-- /.box-footer -->
+              </div><!-- /.box -->
+            </div><!-- /.col -->
           </div><!-- /.row -->
 
         </section><!-- /.content -->