orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改BUG：更新IconView ScrollSpy

This commit is contained in:
Argo-MacBookPro 2018-08-03 23:58:03 +08:00
parent cafa4076db
commit 85aad942eb
6 changed files with 81 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Bootstrap.Admin/Views/Admin/Menus.cshtml
View File

@ -190,7 +190,7 @@
<h5 class="modal-title" id="myIconModalLabel">请选择图标</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body" data-spy="scroll" data-target=".fa-nav">
<div class="modal-body">
<div class="loadIconView"><i class="fa fa-spinner fa-pulse"></i><span>正在加载图标...请稍等</span></div>
</div>
<div class="modal-footer">

2
Bootstrap.Admin/Views/Shared/AwesomeIcon.cshtml
View File

@ -1,4 +1,5 @@
<div class="fa-icons">
<section id="fa-top" class="fa-target"></section>
<section id="new">
<h2 class="page-header">最新的4.7版，新增了41个图标</h2>
<div class="row fontawesome-icon-list">
@ -1080,4 +1081,5 @@
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/wheelchair-alt"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> <span class="sr-only">Example of </span>wheelchair-alt</a></div>
</div>
</section>
<section id="fa-bottom" class="fa-target"></section>
</div>

52
Bootstrap.Admin/Views/Shared/IconView.cshtml
View File

@ -1,27 +1,29 @@
<i id="fa-top" class="fa-target"></i>
@await Html.PartialAsync("AwesomeIcon")
<div class="fa-nav">
<div data-spy="scroll" data-target=".fa-nav" class="iconview">
@await Html.PartialAsync("AwesomeIcon")
<div class="fa-nav">
<h2>图标分类</h2>
<ul class="nav navbar">
<li><a href="#new">新图标</a></li>
<li><a href="#web-application">Web 图标</a></li>
<li><a href="#accessibility">辅助图标</a></li>
<li><a href="#hand">手形图标</a></li>
<li><a href="#transportation">交通运输图标</a></li>
<li><a href="#gender">性别图标</a></li>
<li><a href="#file-type">文件类型图标</a></li>
<li><a href="#spinner">微调控制项图标</a></li>
<li><a href="#form-control">格式控制图标</a></li>
<li><a href="#payment">支付图标</a></li>
<li><a href="#chart">图表图标</a></li>
<li><a href="#currency">货币图标</a></li>
<li><a href="#text-editor">文本编辑图标</a></li>
<li><a href="#directional">方向图标</a></li>
<li><a href="#video-player">影像播放器图标</a></li>
<li><a href="#brand">品牌图标</a></li>
<li><a href="#medical">医疗图标</a></li>
<li><a href="#fa-top">返回顶部</a></li>
<li><a href="#fa-bottom">返回底部</a></li>
</ul>
<nav class="nav">
<a class="nav-link" href="#fa-top">返回顶部</a>
<a class="nav-link" href="#fa-bottom">返回底部</a>
<a class="nav-link" href="#new">新图标</a>
<a class="nav-link" href="#web-application">Web 图标</a>
<a class="nav-link" href="#accessibility">辅助图标</a>
<a class="nav-link" href="#hand">手形图标</a>
<a class="nav-link" href="#transportation">交通运输图标</a>
<a class="nav-link" href="#gender">性别图标</a>
<a class="nav-link" href="#file-type">文件类型图标</a>
<a class="nav-link" href="#spinner">微调控制项图标</a>
<a class="nav-link" href="#form-control">格式控制图标</a>
<a class="nav-link" href="#payment">支付图标</a>
<a class="nav-link" href="#chart">图表图标</a>
<a class="nav-link" href="#currency">货币图标</a>
<a class="nav-link" href="#text-editor">文本编辑图标</a>
<a class="nav-link" href="#directional">方向图标</a>
<a class="nav-link" href="#video-player">影像播放器图标</a>
<a class="nav-link" href="#brand">品牌图标</a>
<a class="nav-link" href="#medical">医疗图标</a>
<a class="nav-link" href="#fa-top">返回顶部</a>
<a class="nav-link" href="#fa-bottom">返回底部</a>
</nav>
</div>
</div>
<i id="fa-bottom" class="fa-target"></i>

8
Bootstrap.Admin/wwwroot/css/admin.css
View File

@ -77,14 +77,10 @@
text-overflow: ellipsis;
}
.modal-footer {
clear: both;
}
.modal-footer .btn {
.modal-footer .btn {
padding-left: 22px;
padding-right: 22px;
}
}
.has-error input {
background-repeat: no-repeat;

77
Bootstrap.Admin/wwwroot/css/fa.css
View File

@ -11,6 +11,17 @@
display: block;
}
.modal-body .iconview {
height: calc(100%);
}
.iconview {
overflow-y: auto;
overflow-x: hidden;
position: relative;
padding-right: 15px;
}
.fa-nav {
display: none;
}
@ -25,33 +36,35 @@
font-weight: 300;
}
.fa-nav ul {
.fa-nav nav {
top: 44px;
bottom: 0;
position: absolute;
overflow-y: auto;
}
.fa-nav ul li {
margin-bottom: 3px;
}
.fa-nav ul li.active a {
color: #7a7a7a;
border-left: 4px solid #5bc0de;
padding-left: 10px;
}
.fa-nav ul li a {
.fa-nav nav a {
color: #999797;
border-left: 4px solid #d3d7dd;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
display: block;
margin-top: 1px;
}
.fa-nav ul li a:hover {
.fa-nav nav a:last-child {
margin-bottom: 5px;
}
.fa-nav nav a.active {
color: #7a7a7a;
border-left: 4px solid #5bc0de;
padding-left: 10px;
}
.fa-nav nav a:hover {
color: #999797;
border-left: 4px solid #d9534f;
padding-left: 10px;
@ -79,24 +92,24 @@
}
.icon-content .fa-nav {
right: 46px;
top: 86px;
bottom: 100px;
right: 33px;
top: 68px;
bottom: 84px;
}
.icon-content .modal-body {
position: absolute;
left: 0;
right: 0;
top: 46px;
bottom: 65px;
overflow: auto;
top: 51px;
bottom: 68px;
-webkit-overflow-scrolling: touch;
padding: 0 0 0 15px;
}
.icon-content .modal-body .loadIconView {
text-align: center;
font-size: 16px;
font-size: 1rem;
}
.icon-content .modal-body .loadIconView span {
@ -138,18 +151,6 @@
margin-bottom: 20px;
}
.modal .modal-dialog .icon-content {
position: static;
}
.modal .modal-dialog .icon-content .modal-body {
position: static;
}
.modal .modal-dialog .icon-content .modal-footer {
position: static;
}
.fontawesome-icon-list .fa-hover a {
overflow: hidden;
text-overflow: ellipsis;
@ -255,13 +256,17 @@
.fa-nav {
display: block;
position: fixed;
top: 130px;
right: 32px;
top: 98px;
right: 17px;
width: 140px;
bottom: 70px;
bottom: 40px;
}
.fa-icons {
margin-right: 160px;
margin-right: 120px;
}
.modal-body .fa-icons {
margin-right: 148px;
}
}

3
Bootstrap.Admin/wwwroot/js/Menus.js
View File

@ -253,6 +253,9 @@
});
$iconList.find('ul li').addClass('col-xl-2 col-md-3 col-sm-4 col-6');
$iconList.find('div').addClass('col-xl-2 col-6');
$('[data-spy="scroll"]').each(function () {
$(this).scrollspy({ target: $(this).attr('data-target') });
});
}
}
});