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

Created UI\timeline.html

Browse Source
pull/4889/head
Daniel 2 years ago
parent d58cbca9e8
commit 0efd8a22c3
4 changed files with 332 additions and 1 deletions
Show Stats Download Patch File Download Diff File

162
src/pages/UI/timeline.html
Unescape View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Timeline Elements"
})
</head>
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "forms",
"page": "general",
"path": "../.."
})
<!-- Main content -->
<main class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h3>Timeline</h3>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Timeline</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<!-- Timelime example -->
<div class="row">
<div class="col-md-12">
<!-- The time line -->
<div class="timeline">
<!-- timeline time label -->
<div class="time-label">
<span class="text-bg-danger">10 Feb. 2023</span>
</div>
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="fa-solid fa-envelope text-bg-primary"></i>
<div class="timeline-item">
<span class="time"><i class="fa-solid fa-clock"></i> 12:05</span>
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
<div class="timeline-body">
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
weebly ning heekya handango imeem plugg dopplr jibjab, movity
jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
quora plaxo ideeli hulu weebly balihoo...
</div>
<div class="timeline-footer">
<a class="btn btn-primary btn-sm">Read more</a>
<a class="btn btn-danger btn-sm">Delete</a>
</div>
</div>
</div>
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="fa-solid fa-user text-bg-success"></i>
<div class="timeline-item">
<span class="time"><i class="fa-solid fa-clock"></i> 5 mins ago</span>
<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
</div>
</div>
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="fa-solid fa-comments text-bg-warning"></i>
<div class="timeline-item">
<span class="time"><i class="fa-solid fa-clock"></i> 27 mins ago</span>
<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
<div class="timeline-body">
Take me to your leader!
Switzerland is small and neutral!
We are more like Germany, ambitious and misunderstood!
</div>
<div class="timeline-footer">
<a class="btn btn-warning btn-sm">View comment</a>
</div>
</div>
</div>
<!-- END timeline item -->
<!-- timeline time label -->
<div class="time-label">
<span class="text-bg-success">3 Jan. 2023</span>
</div>
<!-- /.timeline-label -->
<!-- timeline item -->
<div>
<i class="fa-solid fa-camera text-bg-info"></i>
<div class="timeline-item">
<span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
<div class="timeline-body">
<img src="../../assets/img/user1-128x128.jpg" alt="...">
<img src="../../assets/img/user3-128x128.jpg" alt="...">
<img src="../../assets/img/user4-128x128.jpg" alt="...">
<img src="../../assets/img/user5-128x128.jpg" alt="...">
</div>
</div>
</div>
<!-- END timeline item -->
<!-- timeline item -->
<div>
<i class="fa-solid fa-video text-bg-primary"></i>
<div class="timeline-item">
<span class="time"><i class="fa-solid fa-clock"></i> 5 days ago</span>
<h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
<div class="timeline-body">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tMWkeBIohBs" allowfullscreen></iframe>
</div>
</div>
<div class="timeline-footer">
<a href="#" class="btn btn-sm text-bg-warning">See comments</a>
</div>
</div>
</div>
<!-- END timeline item -->
<div>
<i class="fa-solid fa-clock text-bg-secondary"></i>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</main>
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
</body>
</html>

17
src/partials/dashboard/_sidenav.html
Unescape View File

@ -95,6 +95,23 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="nav-item @@if (context.mainPage === 'ui-elements') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'ui-elements') {active}">
<i class="nav-icon fa-solid fa-tree"></i>
<p>
UI Elements
<i class="end fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/UI/timeline.html" class="nav-link @@if (context.page === 'timeline') {active}">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}"> <li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'forms') {active}"> <a href="javascript:;" class="nav-link @@if (context.mainPage === 'forms') {active}">
<i class="nav-icon fa-solid fa-circle"></i> <i class="nav-icon fa-solid fa-circle"></i>

151
src/scss/_timeline.scss
Unescape View File

@ -0,0 +1,151 @@
//
// Component: Timeline
//
.timeline {
position: relative;
padding: 0;
margin: 0 0 45px;
// The line
&::before {
@include border-radius($border-radius);
position: absolute;
top: 0;
bottom: 0;
left: 31px;
width: 4px;
margin: 0;
content: "";
background-color: $gray-300;
}
// Element
> div {
&::before,
&::after {
display: table;
content: "";
}
position: relative;
margin-right: 10px;
margin-bottom: 15px;
// The content
> .timeline-item {
@include box-shadow($lte-card-shadow);
@include border-radius($border-radius);
position: relative;
padding: 0;
margin-top: 0;
margin-right: 15px;
margin-left: 60px;
color: $gray-700;
background-color: $white;
// The time and header
> .time {
float: right;
padding: 10px;
font-size: 12px;
color: #999;
}
// Header
> .timeline-header {
padding: 10px;
margin: 0;
font-size: 16px;
line-height: 1.1;
color: $gray-700;
border-bottom: 1px solid $card-border-color;
// Link in header
> a {
font-weight: 600;
}
}
// Item body and footer
> .timeline-body,
> .timeline-footer {
padding: 10px;
}
> .timeline-body {
> img {
margin: 10px;
}
> dl,
ol,
ul {
margin: 0;
}
}
}
/* stylelint-disable selector-class-pattern */
// The icons at line
> i,
> svg,
> img,
> object,
> iframe {
position: absolute;
top: 0;
left: 18px;
width: 30px;
height: 30px;
font-size: 16px;
line-height: 30px;
text-align: center;
background-color: $gray-500;
border-radius: 50%; // stylelint-disable-line property-disallowed-list
}
> .svg-inline--fa {
padding: 7px;
}
/* stylelint-enable selector-class-pattern */
}
// Time label
> .time-label {
> span {
@include border-radius(4px);
display: inline-block;
padding: 5px;
font-weight: 600;
background-color: $white;
}
}
}
.timeline-inverse {
> div {
> .timeline-item {
@include box-shadow(none);
background-color: $gray-100;
border: 1px solid $gray-300;
> .timeline-header {
border-bottom-color: $gray-300;
}
}
}
}
// @include dark-mode () {
// .timeline {
// &::before {
// background-color: $gray-600;
// }
// > div > .timeline-item {
// color: $white;
// background-color: $dark;
// border-color: $gray-600;
// > .timeline-header {
// color: $gray-400;
// border-color: $gray-600;
// }
// > .time {
// color: $gray-400;
// }
// }
// }
// }

3
src/scss/parts/_extra-components.scss
Unescape View File

@ -4,6 +4,7 @@
@import "../small-box"; @import "../small-box";
@import "../info-box"; @import "../info-box";
@import "../direct-chat"; @import "../timeline";
@import "../products"; @import "../products";
@import "../direct-chat";
@import "../users-list"; @import "../users-list";

Write Preview
Loading…
Cancel
Save