Add activity tab to profile

Gruntfile.js

@@ -102,7 +102,7 @@ module.exports = function (grunt) {
         files: [{
           expand: true,
           cwd: 'build/img/',
-          src: ['**/*.{png,jpg,gif,svg}'],
+          src: ['**/*.{png,jpg,gif,svg,jpeg}'],
           dest: 'dist/img/'
         }]
       }

build/less/miscellaneous.less

@@ -12,6 +12,12 @@
 .margin-bottom {
   margin-bottom: 20px;
 }
+.margin-bottom-none {
+  margin-bottom: 0;
+}
+.margin-r-5 {
+  margin-right: 5px;
+}
 // Display inline
 .inline {
   display: inline;
@@ -234,6 +240,13 @@
     color: darken(@gray, 40%);
   }
 }
+.link-black {
+  color: #666;
+  &:hover,
+    &:focus {
+    color: #999;
+  }
+}
 
 // Hide elements by display none only
 .hide {
@@ -265,6 +278,16 @@
   padding: 0;
 }
 
+.list-group-unbordered {
+  > .list-group-item {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0; 
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 // Remove border radius
 .flat {
   .border-radius(0)!important;
@@ -274,8 +297,9 @@
   &, &.table td, &.table th {
     font-weight: 700;
   }
-
-
+}
+.text-sm {
+  font-size: 12px;
 }
 
 // _fix for sparkline tooltip
@@ -374,6 +398,7 @@
 
 //User block
 .user-block {
+  .clearfix();
   img {
     width: 40px;
     height: 40px;
@@ -435,7 +460,15 @@
     margin-left: 110px;
   }
 }
-
+// Image bordered
+.img-bordered {
+  border: 3px solid @gray;
+  padding: 3px;
+}
+.img-bordered-sm {
+  border: 2px solid @gray;
+  padding: 2px;
+}
 //General attachemnt block
 .attachment-block {
   border: 1px solid @box-border-color;

build/less/profile.less

@@ -5,12 +5,25 @@
 
 .profile-user-img {
   margin: 0 auto;
-    width: 100px;
-}
-.box-profile {
-  text-align: center;
+  width: 100px;
+  padding: 3px;
+  border: 3px solid @gray;
 }
 .profile-username {
-  font-size: 18px;
+  font-size: 21px;
   margin-top: 5px;
+}
+.post {
+  border-bottom: 1px solid @gray;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  color: #666;
+  &:last-of-type {
+    border-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  .user-block {
+    margin-bottom: 15px;
+  }
 }

dist/css/AdminLTE.css

@@ -3265,14 +3265,27 @@ table.text-center th {
 .profile-user-img {
   margin: 0 auto;
   width: 100px;
-}
-.box-profile {
-  text-align: center;
+  padding: 3px;
+  border: 3px solid #d2d6de;
 }
 .profile-username {
-  font-size: 18px;
+  font-size: 21px;
   margin-top: 5px;
 }
+.post {
+  border-bottom: 1px solid #d2d6de;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  color: #666;
+}
+.post:last-of-type {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.post .user-block {
+  margin-bottom: 15px;
+}
 /*
  * Social Buttons for Bootstrap
  *
@@ -4076,6 +4089,12 @@ table.text-center th {
 .margin-bottom {
   margin-bottom: 20px;
 }
+.margin-bottom-none {
+  margin-bottom: 0;
+}
+.margin-r-5 {
+  margin-right: 5px;
+}
 .inline {
   display: inline;
 }
@@ -4346,6 +4365,13 @@ table.text-center th {
 .link-muted:focus {
   color: #606c84;
 }
+.link-black {
+  color: #666;
+}
+.link-black:hover,
+.link-black:focus {
+  color: #999;
+}
 .hide {
   display: none !important;
 }
@@ -4370,6 +4396,13 @@ table.text-center th {
   margin: 0;
   padding: 0;
 }
+.list-group-unbordered > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
 .flat {
   border-radius: 0 !important;
 }
@@ -4378,6 +4411,9 @@ table.text-center th {
 .text-bold.table th {
   font-weight: 700;
 }
+.text-sm {
+  font-size: 12px;
+}
 .jqstooltip {
   padding: 5px!important;
   width: auto!important;
@@ -4503,6 +4539,14 @@ table.text-center th {
 .font-light {
   font-weight: 300;
 }
+.user-block:before,
+.user-block:after {
+  content: " ";
+  display: table;
+}
+.user-block:after {
+  clear: both;
+}
 .user-block img {
   width: 40px;
   height: 40px;
@@ -4560,6 +4604,14 @@ table.text-center th {
 .img-lg + .img-push {
   margin-left: 110px;
 }
+.img-bordered {
+  border: 3px solid #d2d6de;
+  padding: 3px;
+}
+.img-bordered-sm {
+  border: 2px solid #d2d6de;
+  padding: 2px;
+}
 .attachment-block {
   border: 1px solid #f4f4f4;
   padding: 5px;

pages/UI/icons.html

@@ -515,7 +515,7 @@
                 </ul>
                 <div class="tab-content">
                   <!-- Font Awesome Icons -->
-                  <div class="tab-pane active" id="fa-icons" >
+                  <div class="tab-pane active" id="fa-icons">
                     <section id="new">
                       <h4 class="page-header">66 New Icons in 4.4</h4>
                       <div class="row fontawesome-icon-list">

pages/examples/profile.html

@@ -399,7 +399,7 @@
                 <i class="fa fa-folder"></i> <span>Examples</span>
                 <i class="fa fa-angle-left pull-right"></i>
               </a>
-              <ul class="treeview-menu">               
+              <ul class="treeview-menu">
                 <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
                 <li class="active"><a href="profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
                 <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
@@ -466,48 +466,57 @@
               <!-- Profile Image -->
               <div class="box box-primary">
                 <div class="box-body box-profile">
-                  <img class="profile-user-img img-responsive img-circle" src="../../dist/img/user4-128x128.jpg" alt="User profile picture"/>
-                  <h3 class="profile-username">Nina Mcintire</h3>
-                  <a href="#" class="btn btn-primary btn-block btn-flat margin-bottom">BASIC Membership</a>
-                  <div class="clearfix">
-                    <a href="#" class="btn btn-default btn-xs pull-left" data-toggle="tooltip" data-title="Settings"><i class="fa fa-gear"></i></a>
-                    <a href="#" class="btn btn-default btn-xs pull-right" data-toggle="tooltip" data-title="Logout"><i class="fa fa-sign-out"></i></a>
-                  </div>
+                  <img class="profile-user-img img-responsive img-circle" src="../../dist/img/user4-128x128.jpg" alt="User profile picture">
+                  <h3 class="profile-username text-center">Nina Mcintire</h3>
+                  <p class="text-muted text-center">Software Engineer</p>
+
+                  <ul class="list-group list-group-unbordered">
+                    <li class="list-group-item">
+                      <b>Followers</b> <a class="pull-right">1,322</a>
+                    </li>
+                    <li class="list-group-item">
+                      <b>Following</b> <a class="pull-right">543</a>
+                    </li>
+                    <li class="list-group-item">
+                      <b>Friends</b> <a class="pull-right">13,287</a>
+                    </li>
+                  </ul>
+
+                  <a href="#" class="btn btn-primary btn-block"><b>Follow</b></a>
                 </div><!-- /.box-body -->
               </div><!-- /.box -->
 
               <!-- About Me Box -->
               <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                   <h3 class="box-title">About Me</h3>
                 </div><!-- /.box-header -->
-                <div class="box-body no-padding">
-                  <table class="table">
-                    <tr>
-                      <th style="width: 80px">Education</th>
-                      <td>B.S. in Computer Science from the University of Tennessee at Knoxville</td>
-                    </tr>
-                    <tr>
-                      <th>Experience</th>
-                      <td>
-                        7 years programming in PHP, JS, CSS and HTML
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>Skills</th>
-                      <td>
-                        <span class="label label-danger">UI Design</span>
-                        <span class="label label-success">Coding</span>
-                        <span class="label label-info">Javascript</span>
-                        <span class="label label-warning">PHP</span>
-                        <span class="label label-primary">Node.js</span>
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>Notes</th>
-                      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</td>
-                    </tr>
-                  </table>
+                <div class="box-body">
+                  <strong><i class="fa fa-book margin-r-5"></i>  Education</strong>
+                  <p class="text-muted">
+                    B.S. in Computer Science from the University of Tennessee at Knoxville
+                  </p>
+
+                  <hr>
+
+                  <strong><i class="fa fa-map-marker margin-r-5"></i> Location</strong>
+                  <p class="text-muted">Malibu, California</p>
+
+                  <hr>
+
+                  <strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
+                  <p>
+                    <span class="label label-danger">UI Design</span>
+                    <span class="label label-success">Coding</span>
+                    <span class="label label-info">Javascript</span>
+                    <span class="label label-warning">PHP</span>
+                    <span class="label label-primary">Node.js</span>
+                  </p>
+
+                  <hr>
+
+                  <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                 </div><!-- /.box-body -->
               </div><!-- /.box -->
             </div><!-- /.col -->
@@ -515,11 +524,108 @@
               <div class="nav-tabs-custom">
                 <ul class="nav nav-tabs">
                   <li class="active"><a href="#activity" data-toggle="tab">Activity</a></li>
+                  <li><a href="#timeline" data-toggle="tab">Timeline</a></li>
                   <li><a href="#settings" data-toggle="tab">Settings</a></li>
                 </ul>
                 <div class="tab-content">
                   <div class="active tab-pane" id="activity">
-                    <!-- The time line -->
+                    <!-- Post -->
+                    <div class="post">
+                      <div class='user-block'>
+                        <img class='img-circle img-bordered-sm' src='../../dist/img/user1-128x128.jpg' alt='user image'>
+                        <span class='username'>
+                          <a href="#">Jonathan Burke Jr.</a>
+                          <a href='#' class='pull-right btn-box-tool'><i class='fa fa-times'></i></a>
+                        </span>
+                        <span class='description'>Shared publicly - 7:30 PM today</span>
+                      </div><!-- /.user-block -->
+                      <p>
+                        Lorem ipsum represents a long-held tradition for designers,
+                        typographers and the like. Some people hate it and argue for
+                        its demise, but others ignore the hate as they create awesome
+                        tools to help create filler text for everyone from bacon lovers
+                        to Charlie Sheen fans.
+                      </p>
+                      <ul class="list-inline">
+                        <li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
+                        <li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a></li>
+                        <li class="pull-right"><a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments (5)</a></li>
+                      </ul>
+
+                      <input class="form-control input-sm" type="text" placeholder="Type a comment">
+                    </div><!-- /.post -->
+
+                    <!-- Post -->
+                    <div class="post clearfix">
+                      <div class='user-block'>
+                        <img class='img-circle img-bordered-sm' src='../../dist/img/user7-128x128.jpg' alt='user image'>
+                        <span class='username'>
+                          <a href="#">Sarah Ross</a>
+                          <a href='#' class='pull-right btn-box-tool'><i class='fa fa-times'></i></a>
+                        </span>
+                        <span class='description'>Sent you a message - 3 days ago</span>
+                      </div><!-- /.user-block -->
+                      <p>
+                        Lorem ipsum represents a long-held tradition for designers,
+                        typographers and the like. Some people hate it and argue for
+                        its demise, but others ignore the hate as they create awesome
+                        tools to help create filler text for everyone from bacon lovers
+                        to Charlie Sheen fans.
+                      </p>
+
+                      <form class='form-horizontal'>
+                        <div class='form-group margin-bottom-none'>
+                          <div class='col-sm-9'>
+                            <input class="form-control input-sm" placeholder="Response">
+                          </div>                          
+                          <div class='col-sm-3'>
+                            <button class='btn btn-danger pull-right btn-block btn-sm'>Send</button>
+                          </div>                          
+                        </div>                        
+                      </form>
+                    </div><!-- /.post -->
+
+                    <!-- Post -->
+                    <div class="post">
+                      <div class='user-block'>
+                        <img class='img-circle img-bordered-sm' src='../../dist/img/user6-128x128.jpg' alt='user image'>
+                        <span class='username'>
+                          <a href="#">Adam Jones</a>
+                          <a href='#' class='pull-right btn-box-tool'><i class='fa fa-times'></i></a>
+                        </span>
+                        <span class='description'>Posted 5 photos - 5 days ago</span>
+                      </div><!-- /.user-block -->
+                      <div class='row margin-bottom'>
+                        <div class='col-sm-6'>
+                          <img class='img-responsive' src='../../dist/img/photo1.png' alt='Photo'>
+                        </div><!-- /.col -->
+                        <div class='col-sm-6'>
+                          <div class='row'>
+                            <div class='col-sm-6'>
+                              <img class='img-responsive' src='../../dist/img/photo2.png' alt='Photo'>
+                              <br>
+                              <img class='img-responsive' src='../../dist/img/photo3.jpg' alt='Photo'>
+                            </div><!-- /.col -->
+                            <div class='col-sm-6'>
+                              <img class='img-responsive' src='../../dist/img/photo4.jpg' alt='Photo'>
+                              <br>
+                              <img class='img-responsive' src='../../dist/img/photo1.png' alt='Photo'>
+                            </div><!-- /.col -->
+                          </div><!-- /.row -->
+                        </div><!-- /.col -->
+                      </div><!-- /.row -->
+
+                      <ul class="list-inline">
+                        <li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
+                        <li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a></li>
+                        <li class="pull-right"><a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments (5)</a></li>
+                      </ul>
+
+                      <input class="form-control input-sm" type="text" placeholder="Type a comment">
+                    </div><!-- /.post -->
+                  </div><!-- /.tab-pane -->
+                  <div class="tab-pane" id="timeline">
+                    <!-- The timeline -->
                     <ul class="timeline timeline-inverse">
                       <!-- timeline time label -->
                       <li class="time-label">

pages/mailbox/compose.html

@@ -583,7 +583,7 @@
               <div class="form-group">
                 <label class="control-sidebar-subheading">
                   Expose author name in posts
-                  <input type="checkbox" class="pull-right" checked />
+                  <input type="checkbox" class="pull-right" checked>
                 </label>
                 <p>
                   Allow the user to show his name in blog posts

pages/widgets.html

@@ -1046,7 +1046,7 @@
                 <!-- 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"/>
+                    <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>
@@ -1070,7 +1070,7 @@
                   <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"/>
+                  <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar">
                 </div>
                 <div class="box-footer">
                   <div class="row">
@@ -1105,7 +1105,7 @@
                   <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"/>
+                  <img class="img-circle" src="../dist/img/user3-128x128.jpg" alt="User Avatar">
                 </div>
                 <div class="box-footer">
                   <div class="row">
@@ -1139,7 +1139,7 @@
               <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'/>
+                    <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 -->
@@ -1150,7 +1150,7 @@
                   </div><!-- /.box-tools -->
                 </div><!-- /.box-header -->
                 <div class='box-body'>
-                  <img class="img-responsive pad" src="../dist/img/photo2.png" alt="Photo"/>
+                  <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>
@@ -1159,7 +1159,7 @@
                 <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'/>
+                    <img class='img-circle img-sm' src='../dist/img/user3-128x128.jpg' alt='user image'>
                     <div class='comment-text'>
                       <span class="username">
                         Maria Gonzales
@@ -1171,7 +1171,7 @@
                   </div><!-- /.box-comment -->                  
                   <div class='box-comment'>
                     <!-- User image -->
-                    <img class='img-circle img-sm' src='../dist/img/user4-128x128.jpg' alt='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
@@ -1184,10 +1184,10 @@
                 </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 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" />
+                      <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
                     </div>
                   </form>
                 </div><!-- /.box-footer -->
@@ -1198,7 +1198,7 @@
               <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'/>
+                    <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 -->
@@ -1221,7 +1221,7 @@
 
                   <!-- Attachment -->
                   <div class="attachment-block clearfix">
-                    <img class="attachemnt-img" src="../dist/img/photo1.png" alt="attachement image"/>
+                    <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">
@@ -1239,7 +1239,7 @@
                 <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'/>
+                    <img class='img-circle img-sm' src='../dist/img/user3-128x128.jpg' alt='user image'>
                     <div class='comment-text'>
                       <span class="username">
                         Maria Gonzales
@@ -1251,7 +1251,7 @@
                   </div><!-- /.box-comment -->
                   <div class='box-comment'>
                     <!-- User image -->
-                    <img class='img-circle img-sm' src='../dist/img/user5-128x128.jpg' alt='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
@@ -1265,10 +1265,10 @@
                 </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 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" />
+                      <input type="text" class="form-control input-sm" placeholder="Press enter to post comment">
                     </div>
                   </form>
                 </div><!-- /.box-footer -->