修改BUG：重构Header布局使用flex
This commit is contained in:
Argo-MacBookPro
parent
871e3f8381
commit
ac7997960d
|
|
@ -1,114 +1,108 @@
|
||||||
@model Bootstrap.Admin.Models.HeaderBarModel
|
@model Bootstrap.Admin.Models.HeaderBarModel
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="bg">
|
<div class="bg"></div>
|
||||||
</div>
|
<div class="d-flex align-items-center">
|
||||||
<a id="navbar" href="#" class="sidebar-toggle-box">
|
<a id="navbar" href="#" class="sidebar-toggle-box">
|
||||||
<i class="fa fa-bars"></i>
|
<i class="fa fa-bars"></i>
|
||||||
<span id="websiteTitle">@Model.Title</span>
|
<span id="websiteTitle">@Model.Title</span>
|
||||||
</a>
|
|
||||||
@if (User.IsInRole("Administrators"))
|
|
||||||
{
|
|
||||||
<ul class="notify-row">
|
|
||||||
<!-- tasks start -->
|
|
||||||
<li class="dropdown">
|
|
||||||
<a data-toggle="dropdown" href="#">
|
|
||||||
<i class="fa fa-tasks"></i>
|
|
||||||
<span id="msgHeaderTaskBadge" class="badge badge-pill bg-success"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu tasks-bar">
|
|
||||||
<li class="notify-arrow notify-arrow-green"></li>
|
|
||||||
<li id="msgHeaderTaskContent">
|
|
||||||
<p>您有 <span id="msgHeaderTask">0</span> 个未完成的任务</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="~/Admin/Tasks">查看所有任务</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- tasks end -->
|
|
||||||
<!-- message dropdown start-->
|
|
||||||
<li class="dropdown">
|
|
||||||
<a data-toggle="dropdown" href="#">
|
|
||||||
<i class="fa fa-envelope"></i>
|
|
||||||
<span id="msgHeaderMsgBadge" class="badge badge-pill bg-important"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu inbox">
|
|
||||||
<li class="notify-arrow notify-arrow-red"></li>
|
|
||||||
<li id="msgHeaderMsgContent">
|
|
||||||
<p>您有 <span id="msgHeaderMsg">0</span> 个未读的消息</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="~/Admin/Messages">查看所有消息</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- message dropdown end -->
|
|
||||||
<!-- users dropdown start-->
|
|
||||||
<li class="dropdown">
|
|
||||||
<a data-toggle="dropdown" href="#">
|
|
||||||
<i class="fa fa-user-plus"></i>
|
|
||||||
<span id="msgHeaderUserBadge" class="badge badge-pill bg-user"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu users">
|
|
||||||
<li class="notify-arrow notify-arrow-user"></li>
|
|
||||||
<li id="msgHeaderUserContent">
|
|
||||||
<p>您有 <span id="msgHeaderUser">0</span> 条新用户通知</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="~/Admin/Notifications">查看所有通知</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- users dropdown end -->
|
|
||||||
<!-- apps dropdown start-->
|
|
||||||
<li class="dropdown">
|
|
||||||
<a data-toggle="dropdown" href="#">
|
|
||||||
<i class="fa fa-bug"></i>
|
|
||||||
<span id="msgHeaderAppBadge" class="badge badge-pill bg-warning"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu notification">
|
|
||||||
<li class="notify-arrow notify-arrow-yellow"></li>
|
|
||||||
<li id="msgHeaderAppContent">
|
|
||||||
<p>您有 <span id="msgHeaderApp">0</span> 条程序异常通知</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="~/Admin/Exceptions">查看所有异常</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- apps dropdown end -->
|
|
||||||
<!-- db dropdown start-->
|
|
||||||
<li class="dropdown">
|
|
||||||
<a data-toggle="dropdown" href="#">
|
|
||||||
<i class="fa fa-database"></i>
|
|
||||||
<span id="msgHeaderDbBadge" class="badge badge-pill bg-db"></span>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu dbs">
|
|
||||||
<li class="notify-arrow notify-arrow-db"></li>
|
|
||||||
<li id="msgHeaderDbContent">
|
|
||||||
<p>您有 <span id="msgHeaderDb">0</span> 条数据库异常通知</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="~/Admin/Exceptions">查看所有异常</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<!-- db dropdown end -->
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
<div class="dropdown">
|
|
||||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
|
||||||
<img id="headerIcon" alt="" src="@Url.Content(Model.Icon)">
|
|
||||||
<span id="userDisplayName" data-userName="@Model.UserName" class="username">@Model.DisplayName</span>
|
|
||||||
<b class="caret"></b>
|
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu dropdown-menu-right">
|
@if (User.IsInRole("Administrators"))
|
||||||
<li></li>
|
{
|
||||||
<li><a href="~/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a></li>
|
<div class="nav">
|
||||||
<li><a href="~/Admin/Index"><i class="fa fa-cog"></i>设置</a></li>
|
<!-- tasks start -->
|
||||||
<li><a href="~/Admin/Notifications"><i class="fa fa-bell"></i>通知<span id="logoutNoti" class="badge badge-pill"></span></a></li>
|
<div class="dropdown">
|
||||||
<li><a href="~/Account/Logout"><i class="fa fa-key"></i>注销</a></li>
|
<a data-toggle="dropdown" class="shadow-primary" href="#">
|
||||||
</ul>
|
<i class="fa fa-tasks"></i>
|
||||||
|
<span id="msgHeaderTaskBadge" class="badge badge-pill badge-primary"></span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-arrow arrow-primary"></div>
|
||||||
|
<div id="msgHeaderTaskContent" class="dropdown-header bg-primary">您有 <span id="msgHeaderTask">0</span> 个未完成的任务</div>
|
||||||
|
<div class="dropdown-footer">
|
||||||
|
<a href="~/Admin/Tasks">查看所有任务</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- tasks end -->
|
||||||
|
<!-- message dropdown start-->
|
||||||
|
<div class="dropdown">
|
||||||
|
<a data-toggle="dropdown" class="shadow-info" href="#">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
<span id="msgHeaderMsgBadge" class="badge badge-pill badge-info"></span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-arrow arrow-info"></div>
|
||||||
|
<div id="msgHeaderMsgContent" class="dropdown-header bg-info">您有 <span id="msgHeaderMsg">0</span> 个未读的消息</div>
|
||||||
|
<div class="dropdown-footer">
|
||||||
|
<a href="~/Admin/Messages">查看所有消息</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- message dropdown end -->
|
||||||
|
<!-- users dropdown start-->
|
||||||
|
<div class="dropdown">
|
||||||
|
<a data-toggle="dropdown" class="shadow-success" href="#">
|
||||||
|
<i class="fa fa-user-plus"></i>
|
||||||
|
<span id="msgHeaderUserBadge" class="badge badge-pill badge-success"></span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-arrow arrow-success"></div>
|
||||||
|
<div id="msgHeaderUserContent" class="dropdown-header bg-success">您有 <span id="msgHeaderUser">0</span> 条新用户通知</div>
|
||||||
|
<div class="dropdown-footer">
|
||||||
|
<a href="~/Admin/Notifications">查看所有通知</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- users dropdown end -->
|
||||||
|
<!-- apps dropdown start-->
|
||||||
|
<div class="dropdown">
|
||||||
|
<a data-toggle="dropdown" class="shadow-warning" href="#">
|
||||||
|
<i class="fa fa-bug"></i>
|
||||||
|
<span id="msgHeaderAppBadge" class="badge badge-pill badge-warning"></span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-arrow arrow-warning"></div>
|
||||||
|
<div id="msgHeaderAppContent" class="dropdown-header bg-warning">您有 <span id="msgHeaderApp">0</span> 条程序异常通知</div>
|
||||||
|
<div class="dropdown-footer">
|
||||||
|
<a href="~/Admin/Exceptions">查看所有异常</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- apps dropdown end -->
|
||||||
|
<!-- db dropdown start-->
|
||||||
|
<div class="dropdown">
|
||||||
|
<a data-toggle="dropdown" class="shadow-danger" href="#">
|
||||||
|
<i class="fa fa-database"></i>
|
||||||
|
<span id="msgHeaderDbBadge" class="badge badge-pill badge-danger"></span>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<div class="dropdown-arrow arrow-danger"></div>
|
||||||
|
<div id="msgHeaderDbContent" class="dropdown-header bg-danger">您有 <span id="msgHeaderDb">0</span> 条数据库异常通知</div>
|
||||||
|
<div class="dropdown-footer">
|
||||||
|
<a href="~/Admin/Exceptions">查看所有异常</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- db dropdown end -->
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="dropdown userinfo">
|
||||||
|
<a data-toggle="dropdown" class="dropdown-toggle shadow-default" href="#">
|
||||||
|
<img id="headerIcon" alt="" src="@Url.Content(Model.Icon)">
|
||||||
|
<span id="userDisplayName" data-userName="@Model.UserName" class="username">@Model.DisplayName</span>
|
||||||
|
<b class="caret"></b>
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
|
<div class="dropdown-item">
|
||||||
|
<a href="~/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a>
|
||||||
|
<a href="~/Admin/Index"><i class="fa fa-cog"></i>设置</a>
|
||||||
|
<a href="~/Admin/Notifications"><i class="fa fa-bell"></i>通知<span id="logoutNoti" class="badge badge-pill badge-success"></span></a>
|
||||||
|
</div>
|
||||||
|
<div class="dropdown-item">
|
||||||
|
<a href="~/Account/Logout"><i class="fa fa-key"></i>注销</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav aria-label="breadcrumb">
|
<nav aria-label="breadcrumb">
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1031;
|
z-index: 1031;
|
||||||
top: 22px;
|
top: 20px;
|
||||||
right: 17px;
|
right: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@media (min-width: 568px) {
|
@media (min-width: 568px) {
|
||||||
.notify-row {
|
.sidebar-toggle-box span {
|
||||||
display: inline-block;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cache-item :nth-child(2) {
|
.cache-item :nth-child(2) {
|
||||||
|
|
@ -15,22 +15,25 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 736px) {
|
|
||||||
.sidebar-toggle-box span {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle-box {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header .nav {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.header, .site-footer {
|
.header, .site-footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
|
||||||
|
|
@ -19,19 +19,26 @@ a, a:hover, a:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu a {
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
|
transition: all .25s linear;
|
||||||
padding: 0;
|
padding: 6px 20px;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu a {
|
.dropdown-menu .divider {
|
||||||
transition: all .25s linear;
|
margin: 1px 0;
|
||||||
padding: 6px 20px;
|
}
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu .divider {
|
/*Title*/
|
||||||
margin: 1px 0;
|
.sidebar-toggle-box {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #333;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle-box span {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
|
@ -50,113 +57,137 @@ a, a:hover, a:focus {
|
||||||
margin: 0 -15px;
|
margin: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > .dropdown {
|
.header .nav {
|
||||||
margin-top: 7px;
|
display: none;
|
||||||
float: right;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > .dropdown > a {
|
.header .nav .dropdown {
|
||||||
border: 1px solid #eee;
|
margin-right: 6px;
|
||||||
border-radius: 4px;
|
|
||||||
padding: 6px;
|
|
||||||
background: none;
|
|
||||||
margin-right: 0;
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
color: #777;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > .dropdown > a:hover, .header > .dropdown.show > a, .notify-row > li > a:hover {
|
.header [data-toggle="dropdown"] {
|
||||||
border: 1px solid #337ab7;
|
border: 1px solid #eee;
|
||||||
color: #333;
|
border-radius: 4px;
|
||||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
padding: 6px 12px;
|
||||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
color: #777;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > .dropdown > a span {
|
.header [data-toggle="dropdown"]:hover {
|
||||||
display: inline-block;
|
color: #333;
|
||||||
min-width: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown > a img {
|
|
||||||
height: 29px;
|
|
||||||
width: 29px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu {
|
|
||||||
width: 268px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li {
|
.header .badge {
|
||||||
text-align: center;
|
position: absolute;
|
||||||
width: 33.3%;
|
right: -6px;
|
||||||
float: left;
|
top: -14px;
|
||||||
}
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li:first-child {
|
.header .dropdown-item.active, .header .dropdown-item:active {
|
||||||
border-color: transparent transparent #e8e8e8;
|
color: #fff;
|
||||||
border-bottom-color: #e8e8e8;
|
text-decoration: none;
|
||||||
border-top-color: #e8e8e8;
|
background-color: transparent;
|
||||||
border-style: solid;
|
}
|
||||||
border-width: 0 7px 7px;
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: -8px;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li:last-child {
|
.nav .dropdown-menu {
|
||||||
width: 100%;
|
width: 235px;
|
||||||
}
|
border: none;
|
||||||
|
margin-left: -74px;
|
||||||
.header > .dropdown .dropdown-menu li:last-child a {
|
margin-top: 12px;
|
||||||
color: #ca3a39;
|
|
||||||
border-radius: 0 0 0.15rem 0.15rem;
|
|
||||||
background: #a9d96c;
|
|
||||||
background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li:last-child a:hover {
|
|
||||||
color: #d20100;
|
|
||||||
background: #6d9046;
|
|
||||||
background-image: linear-gradient(to bottom, #a9d96c 0%, #6d9046 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li a {
|
|
||||||
color: #777;
|
|
||||||
padding: 15px 10px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li a:hover {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li a i {
|
|
||||||
font-size: 1.7rem;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > .dropdown .dropdown-menu li a .badge {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 4px;
|
|
||||||
background: #5cb85c;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Title*/
|
|
||||||
.sidebar-toggle-box {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: #333;
|
|
||||||
float: left;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toggle-box span, .notify-row {
|
.nav .dropdown-arrow {
|
||||||
display: none;
|
border-style: solid;
|
||||||
|
border-width: 0 9px 9px;
|
||||||
|
position: absolute;
|
||||||
|
left: 85px;
|
||||||
|
top: -9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .dropdown-header {
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .dropdown-footer {
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .dropdown-item {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #EBEBEB;
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .dropdown-item:hover {
|
||||||
|
background-color: #93c9e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav .dropdown-item > :nth-child(2) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .dropdown-item .small {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo img {
|
||||||
|
height: 29px;
|
||||||
|
width: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .dropdown-toggle {
|
||||||
|
display: block;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .dropdown-item {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 270px;
|
||||||
|
padding: 0;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .dropdown-item a {
|
||||||
|
text-align: center;
|
||||||
|
color: #777;
|
||||||
|
padding: 15px 10px;
|
||||||
|
width: 33.333%;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .dropdown-item a i {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .dropdown-item:last-child {
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .dropdown-item:last-child a {
|
||||||
|
color: #ca3a39;
|
||||||
|
border-radius: 0 0 0.15rem 0.15rem;
|
||||||
|
background: #a9d96c;
|
||||||
|
background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userinfo .badge {
|
||||||
|
left: 234px;
|
||||||
|
right: auto;
|
||||||
|
top: 6px;
|
||||||
|
}
|
||||||
/*end title*/
|
/*end title*/
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
|
|
@ -187,230 +218,15 @@ a, a:hover, a:focus {
|
||||||
.go-top i {
|
.go-top i {
|
||||||
color: #2A3542;
|
color: #2A3542;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*notify bar*/
|
/*notify bar*/
|
||||||
.notify-row {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding-left: 20px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .bg-success, .notify-row .dropdown-menu.tasks-bar li p {
|
|
||||||
background: #a9d86e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .bg-important, .notify-row .dropdown-menu.inbox li p {
|
|
||||||
background: #ff6c60;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .bg-user, .notify-row .dropdown-menu.users li p {
|
|
||||||
background: #5cb85c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .bg-warning, .notify-row .dropdown-menu.notification li p {
|
|
||||||
background: #FCB322;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .bg-db, .notify-row .dropdown-menu.dbs li p {
|
|
||||||
background: #d03633;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row > li {
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row > li > a {
|
|
||||||
color: #666666;
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
border: 1px solid #f0f0f8;
|
|
||||||
padding: 2px 6px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .badge {
|
|
||||||
position: absolute;
|
|
||||||
top: -14px;
|
|
||||||
left: 24px;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu {
|
|
||||||
width: 235px;
|
|
||||||
border: none;
|
|
||||||
margin-left: -74px;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .notify-arrow {
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0 9px 9px;
|
|
||||||
height: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
left: 80px;
|
|
||||||
top: -18px;
|
|
||||||
transition: all 0.25s ease 0s;
|
|
||||||
width: 0;
|
|
||||||
z-index: 10;
|
|
||||||
margin-top: 10px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .notify-arrow.notify-arrow-green {
|
|
||||||
border-color: transparent transparent #a9d86e;
|
|
||||||
border-bottom-color: #a9d86e;
|
|
||||||
border-top-color: #a9d86e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .notify-arrow.notify-arrow-yellow {
|
|
||||||
border-color: transparent transparent #FCB322;
|
|
||||||
border-bottom-color: #FCB322;
|
|
||||||
border-top-color: #FCB322;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .notify-arrow.notify-arrow-red {
|
|
||||||
border-color: transparent transparent #ff6c60;
|
|
||||||
border-bottom-color: #ff6c60;
|
|
||||||
border-top-color: #ff6c60;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .notify-arrow.notify-arrow-db {
|
|
||||||
border-color: transparent transparent #d03633;
|
|
||||||
border-bottom-color: #d03633;
|
|
||||||
border-top-color: #d03633;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .notify-arrow.notify-arrow-user {
|
|
||||||
border-color: transparent transparent #5cb85c;
|
|
||||||
border-bottom-color: #5cb85c;
|
|
||||||
border-top-color: #5cb85c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu li:last-child a {
|
|
||||||
border-bottom: 0;
|
|
||||||
padding-left: 12px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu li a {
|
|
||||||
border-bottom: 1px solid #EBEBEB;
|
|
||||||
list-style: none;
|
|
||||||
padding: 12px 6px;
|
|
||||||
display: block;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu li:not(:last-child) a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #4b9fd0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu p {
|
|
||||||
color: #fff;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .content {
|
|
||||||
position: absolute;
|
|
||||||
left: 36px;
|
|
||||||
right: 44px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .label {
|
|
||||||
width: 20px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu .small {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: bold;
|
|
||||||
float: right;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.tasks-bar .desc {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: normal;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.tasks-bar .percent {
|
|
||||||
display: inline-block;
|
|
||||||
float: right;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.tasks-bar .progress {
|
|
||||||
margin-top: 4px;
|
|
||||||
height: 10px;
|
|
||||||
margin-right: 34px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.inbox .photo img {
|
|
||||||
border-radius: 2px 2px 2px 2px;
|
|
||||||
float: left;
|
|
||||||
height: 42px;
|
|
||||||
margin-right: 4px;
|
|
||||||
width: 42px;
|
|
||||||
border: solid 1px #EBEBEB;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.inbox .subject {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.inbox .subject .from {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.inbox .subject .time {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: bold;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.inbox .message {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
position: absolute;
|
|
||||||
right: 6px;
|
|
||||||
left: 56px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
/*end*/
|
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
position: absolute;
|
|
||||||
top: 60px;
|
|
||||||
left: 15px;
|
|
||||||
right: 15px;
|
|
||||||
border: solid 1px #ddd;
|
border: solid 1px #ddd;
|
||||||
border-width: 1px 0 0 0;
|
border-width: 1px 0 0 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
padding: 7.5px 10px;
|
padding: 8px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb i {
|
.breadcrumb i {
|
||||||
|
|
|
||||||
|
|
@ -136,3 +136,65 @@ input.pending {
|
||||||
.close:focus {
|
.close:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-primary {
|
||||||
|
border-color: transparent transparent #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-success {
|
||||||
|
border-color: transparent transparent #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-info {
|
||||||
|
border-color: transparent transparent #17a2b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-warning {
|
||||||
|
border-color: transparent transparent #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-danger {
|
||||||
|
border-color: transparent transparent #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-primary:hover {
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 123, 255, 0.5);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 123, 255, 0.5);
|
||||||
|
border-color: #007bff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-success:hover {
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(40, 167, 69, 0.5);
|
||||||
|
border-color: #28a745 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-info:hover {
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(23, 162, 184, 0.5);
|
||||||
|
border-color: #17a2b8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-warning:hover {
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 193, 7, 0.5);
|
||||||
|
border-color: #ffc107 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-danger:hover {
|
||||||
|
border: 1px solid #dc3545 !important;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 53, 69, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.show .shadow-default, .shadow-default:hover {
|
||||||
|
border: 1px solid #337ab7 !important;
|
||||||
|
color: #333;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -49,8 +49,8 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
$.extend({
|
$.extend({
|
||||||
pullNotification: function () {
|
pullNotification: function (nav) {
|
||||||
if ($('.notify-row').length == 0) return;
|
if (nav.length == 0) return;
|
||||||
|
|
||||||
var uri = "ws://" + window.location.host + $.formatUrl("WS");
|
var uri = "ws://" + window.location.host + $.formatUrl("WS");
|
||||||
var socket = new WebSocket(uri);
|
var socket = new WebSocket(uri);
|
||||||
|
|
@ -68,23 +68,26 @@
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
if (result.length > 0) $.reloadWidget();
|
if (result.length > 0) nav.reloadWidget();
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
|
});
|
||||||
|
$.fn.extend({
|
||||||
reloadWidget: function () {
|
reloadWidget: function () {
|
||||||
if ($('.notify-row').length == 0) return;
|
if (this.length === 0) return this;
|
||||||
|
var that = this;
|
||||||
$.bc({
|
$.bc({
|
||||||
url: Notifications.url,
|
url: Notifications.url,
|
||||||
swal: false,
|
swal: false,
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
callback: function (result) {
|
callback: function (result) {
|
||||||
$('#logoutNoti').text(result.NewUsersCount);
|
$('#logoutNoti').text(result.NewUsersCount);
|
||||||
$('.notify-row').resetWidget();
|
that.resetWidget();
|
||||||
// tasks
|
// tasks
|
||||||
// new users
|
// new users
|
||||||
$('#msgHeaderTask').text(result.TasksCount);
|
$('#msgHeaderTask').text(result.TasksCount);
|
||||||
$('#msgHeaderTaskBadge').text(result.TasksCount);
|
$('#msgHeaderTaskBadge').text(result.TasksCount);
|
||||||
var htmlUserTemplate = '<li><a href="../Admin/Tasks?id={3}"><span class="desc">{0}-{2}</span><span class="percent">{1}%</span></span><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="{1}" aria-valuemin="0" aria-valuemax="100" style="width: {1}%"><span class="sr-only">{1}% 完成</span></div></div></a></li>';
|
var htmlUserTemplate = '<a class="dropdown-item" href="../Admin/Tasks?id={3}"><span class="desc">{0}-{2}</span><span class="percent">{1}%</span></span><div class="progress progress-striped"><div class="progress-bar" role="progressbar" aria-valuenow="{1}" aria-valuemin="0" aria-valuemax="100" style="width: {1}%"><span class="sr-only">{1}% 完成</span></div></div></a>';
|
||||||
var html = result.Tasks.map(function (u) {
|
var html = result.Tasks.map(function (u) {
|
||||||
return $.format(htmlUserTemplate, u.TaskName, u.TaskProgress, u.AssignDisplayName, u.Id);
|
return $.format(htmlUserTemplate, u.TaskName, u.TaskProgress, u.AssignDisplayName, u.Id);
|
||||||
}).join('');
|
}).join('');
|
||||||
|
|
@ -102,7 +105,7 @@
|
||||||
// apps
|
// apps
|
||||||
$('#msgHeaderApp').text(result.AppExceptionsCount);
|
$('#msgHeaderApp').text(result.AppExceptionsCount);
|
||||||
$('#msgHeaderAppBadge').text(result.AppExceptionsCount);
|
$('#msgHeaderAppBadge').text(result.AppExceptionsCount);
|
||||||
htmlUserTemplate = '<li><a href="../Admin/Exceptions"><span class="label label-warning"><i class="fa fa-bug"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a></li>';
|
htmlUserTemplate = '<a class="dropdown-item" href="../Admin/Exceptions"><span class="label label-warning"><i class="fa fa-bug"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a>';
|
||||||
html = result.Apps.map(function (u) {
|
html = result.Apps.map(function (u) {
|
||||||
return $.format(htmlUserTemplate, u.ExceptionType, u.Message, u.Period);
|
return $.format(htmlUserTemplate, u.ExceptionType, u.Message, u.Period);
|
||||||
}).join('');
|
}).join('');
|
||||||
|
|
@ -111,7 +114,7 @@
|
||||||
// dbs
|
// dbs
|
||||||
$('#msgHeaderDb').text(result.DbExceptionsCount);
|
$('#msgHeaderDb').text(result.DbExceptionsCount);
|
||||||
$('#msgHeaderDbBadge').text(result.DbExceptionsCount);
|
$('#msgHeaderDbBadge').text(result.DbExceptionsCount);
|
||||||
htmlUserTemplate = '<li><a href="../Admin/Exceptions"><span class="label label-danger"><i class="fa fa-bolt"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a></li>';
|
htmlUserTemplate = '<a class="dropdown-item" href="../Admin/Exceptions"><span class="label label-danger"><i class="fa fa-bolt"></i></span><div title="{1}" class="content">{0}</div><span class="small italic">{2}</span></a>';
|
||||||
html = result.Dbs.map(function (u) {
|
html = result.Dbs.map(function (u) {
|
||||||
return $.format(htmlUserTemplate, u.ErrorPage, u.Message, u.Period);
|
return $.format(htmlUserTemplate, u.ErrorPage, u.Message, u.Period);
|
||||||
}).join('');
|
}).join('');
|
||||||
|
|
@ -127,6 +130,7 @@
|
||||||
$(html).insertAfter($('#msgHeaderMsgContent'));
|
$(html).insertAfter($('#msgHeaderMsgContent'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
return this;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
@ -200,6 +204,5 @@ $(function () {
|
||||||
$('[data-toggle="dropdown"].dropdown-select').dropdown('select');
|
$('[data-toggle="dropdown"].dropdown-select').dropdown('select');
|
||||||
|
|
||||||
// load widget data
|
// load widget data
|
||||||
$.reloadWidget();
|
$.pullNotification($('.header .nav').reloadWidget());
|
||||||
$.pullNotification();
|
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue