From 85aad942eba4a61be8c743fd97eef9865ff41dc4 Mon Sep 17 00:00:00 2001 From: Argo-MacBookPro Date: Fri, 3 Aug 2018 23:58:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9BUG=EF=BC=9A=E6=9B=B4?= =?UTF-8?q?=E6=96=B0IconView=20ScrollSpy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Bootstrap.Admin/Views/Admin/Menus.cshtml | 2 +- .../Views/Shared/AwesomeIcon.cshtml | 2 + Bootstrap.Admin/Views/Shared/IconView.cshtml | 56 ++++++------- Bootstrap.Admin/wwwroot/css/admin.css | 10 +-- Bootstrap.Admin/wwwroot/css/fa.css | 81 ++++++++++--------- Bootstrap.Admin/wwwroot/js/Menus.js | 3 + 6 files changed, 81 insertions(+), 73 deletions(-) diff --git a/Bootstrap.Admin/Views/Admin/Menus.cshtml b/Bootstrap.Admin/Views/Admin/Menus.cshtml index 273e29ac..2f2b41a2 100644 --- a/Bootstrap.Admin/Views/Admin/Menus.cshtml +++ b/Bootstrap.Admin/Views/Admin/Menus.cshtml @@ -190,7 +190,7 @@ -
+
正在加载图标...请稍等
diff --git a/Bootstrap.Admin/Views/Shared/AwesomeIcon.cshtml b/Bootstrap.Admin/Views/Shared/AwesomeIcon.cshtml index 4751442a..38c90e87 100644 --- a/Bootstrap.Admin/Views/Shared/AwesomeIcon.cshtml +++ b/Bootstrap.Admin/Views/Shared/AwesomeIcon.cshtml @@ -1,4 +1,5 @@ 
+

最新的4.7版，新增了41个图标

@@ -1080,4 +1081,5 @@
Example of wheelchair-alt
+
\ No newline at end of file diff --git a/Bootstrap.Admin/Views/Shared/IconView.cshtml b/Bootstrap.Admin/Views/Shared/IconView.cshtml index b9688887..7089e701 100644 --- a/Bootstrap.Admin/Views/Shared/IconView.cshtml +++ b/Bootstrap.Admin/Views/Shared/IconView.cshtml @@ -1,27 +1,29 @@ - -@await Html.PartialAsync("AwesomeIcon") -
-

图标分类

- -
- \ No newline at end of file +
+ @await Html.PartialAsync("AwesomeIcon") +
+

图标分类

+ +
+
\ No newline at end of file diff --git a/Bootstrap.Admin/wwwroot/css/admin.css b/Bootstrap.Admin/wwwroot/css/admin.css index bcbfa021..d5023af5 100644 --- a/Bootstrap.Admin/wwwroot/css/admin.css +++ b/Bootstrap.Admin/wwwroot/css/admin.css @@ -77,15 +77,11 @@ text-overflow: ellipsis; } -.modal-footer { - clear: both; +.modal-footer .btn { + padding-left: 22px; + padding-right: 22px; } - .modal-footer .btn { - padding-left: 22px; - padding-right: 22px; - } - .has-error input { background-repeat: no-repeat; background-image: url('../images/error.png'); diff --git a/Bootstrap.Admin/wwwroot/css/fa.css b/Bootstrap.Admin/wwwroot/css/fa.css index 25bd0d6b..db0f4361 100644 --- a/Bootstrap.Admin/wwwroot/css/fa.css +++ b/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,38 +36,40 @@ 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 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.active a { + .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 ul li a { + .fa-nav nav a:hover { color: #999797; - border-left: 4px solid #d3d7dd; + border-left: 4px solid #d9534f; padding-left: 10px; - padding-top: 3px; - padding-bottom: 3px; - display: block; } - .fa-nav ul li a:hover { - color: #999797; - border-left: 4px solid #d9534f; - padding-left: 10px; - } - .form-group .input-group .input-group-append .btn i { color: #187c9a; width: 22px; @@ -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; } } diff --git a/Bootstrap.Admin/wwwroot/js/Menus.js b/Bootstrap.Admin/wwwroot/js/Menus.js index b8cfc6e6..b172a6a1 100644 --- a/Bootstrap.Admin/wwwroot/js/Menus.js +++ b/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') }); + }); } } });