github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Add activity tab to profile

pull/640/head
Abdullah Almsaeed 2015-08-16 15:51:13 -04:00
parent ac99249af7
commit 1555830bc6
11 changed files with 272 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -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/'
}]
}

39
build/less/miscellaneous.less
View File

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

21
build/less/profile.less
View File

@ -6,11 +6,24 @@
.profile-user-img {
margin: 0 auto;
width: 100px;
}
.box-profile {
text-align: center;
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;
}
}

60
dist/css/AdminLTE.css vendored
View File

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

2
dist/css/AdminLTE.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/img/photo3.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
dist/img/photo4.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

2
pages/UI/icons.html
View File

@ -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">

168
pages/examples/profile.html
View File

@ -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>
<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>
</td>
</tr>
<tr>
<th>Notes</th>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</td>
</tr>
</table>
</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">

2
pages/mailbox/compose.html
View File

@ -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

30
pages/widgets.html
View File

@ -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 -->