Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

header messages

Browse Source
This commit is contained in:
codecalm
2018-03-27 20:54:06 +02:00
parent 43ec11c498
commit 8c4be816ee
2 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/_includes/header.html
View File

@@ -9,23 +9,44 @@
<div class="nav-item">
<a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-message-square"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<!--<div class="dropdown d-none d-md-flex">-->
<!--<a class="nav-link icon" data-toggle="dropdown">-->
<!--<i class="fe fe-message-square"></i>-->
<!--</a>-->
<!--<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">-->
<!--Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores-->
<!--delectus dolore dolores maxime nesciunt qui quia totam.-->
<!--</div>-->
<!--</div>-->
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-bell"></i>
<span class="nav-unread"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[1].photo }})"></span>
<div>
<strong>{{ site.data.users[1].name }}</strong> pushed new commit: Fix page load performance issue.
<div class="small text-muted">10 minutes ago</div>
</div>
</a>
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[2].photo }})"></span>
<div>
<strong>{{ site.data.users[2].name }}</strong> started new task: Tabler UI design.
<div class="small text-muted">1 hour ago</div>
</div>
</a>
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[3].photo }})"></span>
<div>
<strong>{{ site.data.users[3].name }}</strong> deployed new version of NodeJS REST Api V3
<div class="small text-muted">2 hours ago</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
</div>
</div>
<div class="dropdown">
@@ -38,39 +59,28 @@
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<span>Profile</span>
<i class="dropdown-icon fe fe-user"></i> Profile
</a>
<a class="dropdown-item" href="#">
<span>Settings</span>
<i class="dropdown-icon fe fe-settings"></i> Settings
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
<span>Inbox</span>
<i class="dropdown-icon fe fe-mail"></i> Inbox
</a>
<a class="dropdown-item" href="#">
<span>Message</span>
<i class="dropdown-icon fe fe-send"></i> Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Need help? </a>
<a class="dropdown-item" href="#">Sign out</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-help-circle"></i> Need help?
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-log-out"></i> Sign out
</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
<div class="dropdown-menu mt-2 text-color" role="menu">
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

4
src/assets/scss/dashboard/_dropdown.scss
View File

@@ -5,7 +5,7 @@
.dropdown-menu {
box-shadow: $dropdown-box-shadow;
min-width: 12rem;
max-width: 100%;
//max-width: 100%;
}
.dropdown-menu-arrow {
@@ -47,7 +47,7 @@
}
.dropdown-icon {
color: $text-muted-dark;
color: $text-muted;
margin-right: .5rem;
margin-left: -.5rem;
width: 1em;