修改BUG：更新IconView ScrollSpy

Bootstrap.Admin/Views/Admin/Menus.cshtml

@@ -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">

Bootstrap.Admin/Views/Shared/AwesomeIcon.cshtml

@@ -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>

Bootstrap.Admin/Views/Shared/IconView.cshtml

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

Bootstrap.Admin/wwwroot/css/admin.css

@@ -77,10 +77,6 @@
     text-overflow: ellipsis;
 }
 
-.modal-footer {
-    clear: both;
-}
-
 .modal-footer .btn {
     padding-left: 22px;
     padding-right: 22px;

Bootstrap.Admin/wwwroot/css/fa.css

@@ -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 {
+        .fa-nav nav a {
-            margin-bottom: 3px;
-        }
-
-            .fa-nav ul li.active a {
-                color: #7a7a7a;
-                border-left: 4px solid #5bc0de;
-                padding-left: 10px;
-            }
-
-            .fa-nav ul li 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;
+        right: 33px;
-        top: 86px;
+        top: 68px;
-        bottom: 100px;
+        bottom: 84px;
     }
 
     .icon-content .modal-body {
         position: absolute;
         left: 0;
         right: 0;
-        top: 46px;
+        top: 51px;
-        bottom: 65px;
+        bottom: 68px;
-        overflow: auto;
         -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;
+        top: 98px;
-        right: 32px;
+        right: 17px;
         width: 140px;
-        bottom: 70px;
+        bottom: 40px;
     }
 
     .fa-icons {
-        margin-right: 160px;
+        margin-right: 120px;
+    }
+
+    .modal-body .fa-icons {
+        margin-right: 148px;
     }
 }

Bootstrap.Admin/wwwroot/js/Menus.js

@@ -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') });
+                });
             }
         }
     });