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

Updated the style of Timeline to match the rest of the template

pull/556/head^2
Abdullah Almsaeed 2015-02-15 21:30:35 -05:00
parent ba74d2f179
commit 3efb12b93f
4 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
build/less/timeline.less
View File

@ -15,10 +15,9 @@
position: absolute; position: absolute;
top: 0px; top: 0px;
bottom: 0; bottom: 0;
width: 5px; width: 4px;
background: #ddd; background: #ddd;
left: 30px; left: 31px;
border: 1px solid #eee;
margin: 0; margin: 0;
.border-radius(2px); .border-radius(2px);
} }
@ -32,27 +31,28 @@
// The content // The content
> .timeline-item { > .timeline-item {
margin-top: 10px; .box-shadow(@box-boxshadow);
border: 0px solid #dfdfdf; .border-radius(@box-border-radius);
margin-top: 0px;
background: #fff; background: #fff;
color: #555; color: #444;
margin-left: 60px; margin-left: 60px;
margin-right: 15px; margin-right: 15px;
padding: 5px; padding: 0;
position: relative; position: relative;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
// The time and header // The time and header
> .time { > .time {
color: #999; color: #999;
float: right; float: right;
margin: 2px 0 0 0; padding: 10px;
font-size: 12px;
} }
> .timeline-header { > .timeline-header {
margin: 0; margin: 0;
color: #555; color: #555;
border-bottom: 1px solid #f4f4f4; border-bottom: 1px solid @box-border-color;
padding: 5px; padding: 10px;
font-size: 16px; font-size: 16px;
line-height: 1.1; line-height: 1.1;
> a { > a {
@ -73,7 +73,7 @@
padding: 5px; padding: 5px;
display: inline-block; display: inline-block;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
.border-radius(4px); .border-radius(4px);
} }
} }
@ -82,19 +82,17 @@
> .fa, > .fa,
> .glyphicon, > .glyphicon,
> .ion { > .ion {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 30px; width: 30px;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
line-height: 30px; line-height: 30px;
position: absolute; position: absolute;
color: #666; color: #666;
background: #eee; background: @gray;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
left: 18px; left: 18px;
top: 0; top: 0;
} }
} }
} }

25
dist/css/AdminLTE.css vendored
View File

@ -1662,10 +1662,9 @@ a:focus {
position: absolute; position: absolute;
top: 0px; top: 0px;
bottom: 0; bottom: 0;
width: 5px; width: 4px;
background: #ddd; background: #ddd;
left: 30px; left: 31px;
border: 1px solid #eee;
margin: 0; margin: 0;
border-radius: 2px; border-radius: 2px;
} }
@ -1683,26 +1682,28 @@ a:focus {
clear: both; clear: both;
} }
.timeline > li > .timeline-item { .timeline > li > .timeline-item {
margin-top: 10px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
border: 0px solid #dfdfdf; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
border-radius: 3px;
margin-top: 0px;
background: #fff; background: #fff;
color: #555; color: #444;
margin-left: 60px; margin-left: 60px;
margin-right: 15px; margin-right: 15px;
padding: 5px; padding: 0;
position: relative; position: relative;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
} }
.timeline > li > .timeline-item > .time { .timeline > li > .timeline-item > .time {
color: #999; color: #999;
float: right; float: right;
margin: 2px 0 0 0; padding: 10px;
font-size: 12px;
} }
.timeline > li > .timeline-item > .timeline-header { .timeline > li > .timeline-item > .timeline-header {
margin: 0; margin: 0;
color: #555; color: #555;
border-bottom: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4;
padding: 5px; padding: 10px;
font-size: 16px; font-size: 16px;
line-height: 1.1; line-height: 1.1;
} }
@ -1718,20 +1719,18 @@ a:focus {
padding: 5px; padding: 5px;
display: inline-block; display: inline-block;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 4px; border-radius: 4px;
} }
.timeline > li > .fa, .timeline > li > .fa,
.timeline > li > .glyphicon, .timeline > li > .glyphicon,
.timeline > li > .ion { .timeline > li > .ion {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
width: 30px; width: 30px;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
line-height: 30px; line-height: 30px;
position: absolute; position: absolute;
color: #666; color: #666;
background: #eee; background: #d2d6de;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
left: 18px; left: 18px;

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

File diff suppressed because one or more lines are too long

6
pages/UI/timeline.html
View File

@ -534,7 +534,9 @@
<span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span> <span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span>
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3> <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
<div class="timeline-body"> <div class="timeline-body">
<iframe width="300" height="169" src="//www.youtube.com/embed/fLe_qO4AE-M" frameborder="0" allowfullscreen></iframe> <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe>
</div>
</div> </div>
<div class="timeline-footer"> <div class="timeline-footer">
<a href="#" class="btn btn-xs bg-maroon">See comments</a> <a href="#" class="btn btn-xs bg-maroon">See comments</a>
@ -543,7 +545,7 @@
</li> </li>
<!-- END timeline item --> <!-- END timeline item -->
<li> <li>
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o bg-gray"></i>
</li> </li>
</ul> </ul>
</div><!-- /.col --> </div><!-- /.col -->