Merge social widgets feature

build/less/AdminLTE.less

@@ -45,6 +45,7 @@
 @import "users-list.less";
 @import "carousel.less";
 @import "modal.less";
+@import "social-widgets.less";
 
 //PAGES
 //------

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;
 }

build/less/social-widgets.less

@@ -0,0 +1,78 @@
+/*
+ * Component: Social Widgets
+ * -------------------------
+ */
+//General widget style
+.box-widget {
+  border: none;
+  position: relative;
+}
+
+//User Widget Style 1
+.widget-user {
+  //User name container
+  .widget-user-header {
+    padding: 20px;
+    height: 120px;
+    .border-top-radius(@box-border-radius);
+  }
+  //User name
+  .widget-user-username {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 25px;
+    font-weight: 300;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+  }
+  //User single line description
+  .widget-user-desc {
+    margin-top: 0;
+  }
+  //User image container
+  .widget-user-image {
+    position: absolute;
+    top: 65px;
+    left: 50%;
+    margin-left: -45px;
+    > img {
+      width: 90px;
+      height: auto;
+      border: 3px solid #fff;
+    }
+  }
+  .box-footer {
+    padding-top: 30px;
+  }
+}
+
+//User Widget Style 2
+.widget-user-2 {
+  //User name container
+  .widget-user-header {
+    padding: 20px;
+    .border-top-radius(@box-border-radius);
+  }
+  //User name
+  .widget-user-username {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 25px;
+    font-weight: 300;
+  }
+  //User single line description
+  .widget-user-desc {
+    margin-top: 0;
+  }
+  .widget-user-username,
+  .widget-user-desc {
+    margin-left: 75px;
+  }
+  //User image container
+  .widget-user-image {
+    > img {
+      width: 65px;
+      height: auto;
+      float: left;
+    }
+  }
+}

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;
@@ -2909,6 +2946,67 @@ table.text-center th {
 .modal-danger .modal-footer {
   border-color: #c23321;
 }
+/*
+ * Component: Social Widgets
+ * -------------------------
+ */
+.box-widget {
+  border: none;
+  position: relative;
+}
+.widget-user .widget-user-header {
+  padding: 20px;
+  height: 120px;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.widget-user .widget-user-username {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 25px;
+  font-weight: 300;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+.widget-user .widget-user-desc {
+  margin-top: 0;
+}
+.widget-user .widget-user-image {
+  position: absolute;
+  top: 65px;
+  left: 50%;
+  margin-left: -45px;
+}
+.widget-user .widget-user-image > img {
+  width: 90px;
+  height: auto;
+  border: 3px solid #fff;
+}
+.widget-user .box-footer {
+  padding-top: 30px;
+}
+.widget-user-2 .widget-user-header {
+  padding: 20px;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.widget-user-2 .widget-user-username {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 25px;
+  font-weight: 300;
+}
+.widget-user-2 .widget-user-desc {
+  margin-top: 0;
+}
+.widget-user-2 .widget-user-username,
+.widget-user-2 .widget-user-desc {
+  margin-left: 75px;
+}
+.widget-user-2 .widget-user-image > img {
+  width: 65px;
+  height: auto;
+  float: left;
+}
 /*
  * Page: Mailbox
  * -------------
@@ -4039,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;
 }
@@ -4341,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

@@ -1036,6 +1036,245 @@
             </div><!-- /.col -->
           </div><!-- /.row -->
 
+          <h2 class="page-header">Social Widgets</h2>
+
+          <div class="row">
+            <div class="col-md-4">
+              <!-- Widget: user widget style 1 -->
+              <div class="box box-widget widget-user-2">
+                <!-- Add the bg color to the header using any of the bg-* classes -->
+                <div class="widget-user-header bg-yellow">
+                  <div class="widget-user-image">
+                    <img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar"/>
+                  </div><!-- /.widget-user-image -->
+                  <h3 class="widget-user-username">Nadia Carmichael</h3>
+                  <h5 class="widget-user-desc">Lead Developer</h5>
+                </div>
+                <div class="box-footer no-padding">
+                  <ul class="nav nav-stacked">
+                    <li><a href="#">Projects <span class="pull-right badge bg-blue">31</span></a></li>
+                    <li><a href="#">Tasks <span class="pull-right badge bg-aqua">5</span></a></li>
+                    <li><a href="#">Completed Projects <span class="pull-right badge bg-green">12</span></a></li>
+                    <li><a href="#">Followers <span class="pull-right badge bg-red">842</span></a></li>
+                  </ul>
+                </div>
+              </div><!-- /.widget-user -->
+            </div><!-- /.col -->
+            <div class="col-md-4">
+              <!-- Widget: user widget style 1 -->
+              <div class="box box-widget widget-user">
+                <!-- Add the bg color to the header using any of the bg-* classes -->
+                <div class="widget-user-header bg-aqua-active">
+                  <h3 class="widget-user-username">Alexander Pierce</h3>
+                  <h5 class="widget-user-desc">Founder & CEO</h5>
+                </div>
+                <div class="widget-user-image">
+                  <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar"/>
+                </div>
+                <div class="box-footer">
+                  <div class="row">
+                    <div class="col-sm-4 border-right">
+                      <div class="description-block">
+                        <h5 class="description-header">3,200</h5>
+                        <span class="description-text">SALES</span>
+                      </div><!-- /.description-block -->
+                    </div><!-- /.col -->
+                    <div class="col-sm-4 border-right">
+                      <div class="description-block">
+                        <h5 class="description-header">13,000</h5>
+                        <span class="description-text">FOLLOWERS</span>
+                      </div><!-- /.description-block -->
+                    </div><!-- /.col -->
+                    <div class="col-sm-4">
+                      <div class="description-block">
+                        <h5 class="description-header">35</h5>
+                        <span class="description-text">PRODUCTS</span>
+                      </div><!-- /.description-block -->
+                    </div><!-- /.col -->
+                  </div><!-- /.row -->
+                </div>
+              </div><!-- /.widget-user -->
+            </div><!-- /.col -->
+            <div class="col-md-4">
+              <!-- Widget: user widget style 1 -->
+              <div class="box box-widget widget-user">
+                <!-- Add the bg color to the header using any of the bg-* classes -->
+                <div class="widget-user-header bg-black" style="background: url('../dist/img/photo1.png') center center;">
+                  <h3 class="widget-user-username">Elizabeth Pierce</h3>
+                  <h5 class="widget-user-desc">Web Designer</h5>
+                </div>
+                <div class="widget-user-image">
+                  <img class="img-circle" src="../dist/img/user3-128x128.jpg" alt="User Avatar"/>
+                </div>
+                <div class="box-footer">
+                  <div class="row">
+                    <div class="col-sm-4 border-right">
+                      <div class="description-block">
+                        <h5 class="description-header">3,200</h5>
+                        <span class="description-text">SALES</span>
+                      </div><!-- /.description-block -->
+                    </div><!-- /.col -->
+                    <div class="col-sm-4 border-right">
+                      <div class="description-block">
+                        <h5 class="description-header">13,000</h5>
+                        <span class="description-text">FOLLOWERS</span>
+                      </div><!-- /.description-block -->
+                    </div><!-- /.col -->
+                    <div class="col-sm-4">
+                      <div class="description-block">
+                        <h5 class="description-header">35</h5>
+                        <span class="description-text">PRODUCTS</span>
+                      </div><!-- /.description-block -->
+                    </div><!-- /.col -->
+                  </div><!-- /.row -->
+                </div>
+              </div><!-- /.widget-user -->
+            </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 -->
       </div><!-- /.content-wrapper -->