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

修复BUG：超小屏时Glyphicon两列不对齐

This commit is contained in:
Argo-Lenovo 2016-11-21 00:33:07 +08:00
parent abfe7039b6
commit 37bf8042cb
8 changed files with 73 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Bootstrap.Admin/Content/css/admin-responsive.css
View File

@ -35,10 +35,6 @@
margin: 20px auto;
}
.fb-timeliner {
display: none;
}
.icon-body {
margin-right: 0 !important;
}

7
Bootstrap.Admin/Content/css/fa.css
View File

@ -1,4 +1,9 @@
.modal-body #fa-top {
body {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
.modal-body #fa-top {
float: left;
margin-top: -15px;
}

8
Bootstrap.Admin/Content/css/fa.responsive.css
View File

@ -1,4 +1,10 @@
@media (max-width: 360px) {
@media (max-width: 768px) {
.fb-timeliner {
display: none;
}
}
@media (max-width: 360px) {
.icon-content .modal-footer span {
display: none;
}

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

@ -123,7 +123,8 @@
}
});
$iconList.find('ul li').addClass('col-md-3 col-sm-4 col-sm-6');
$iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
$iconList.find('div').addClass('col-xs-6');
$iconList.on('click', 'div.fa-hover a, ul li', function () {
$pickIcon.attr('class', $(this).find('i, span:first').attr('class'));
return false;

9
Bootstrap.Admin/Scripts/icon.js
View File

@ -1,12 +1,13 @@
$(function () {
$('.fontawesome-icon-list a').click(function () {
var $iconList = $('#iconTab').find('div.fontawesome-icon-list');
$iconList.on('click', 'a', function () {
window.console.log($(this).children('i').attr('class'));
return false;
});
$('.fontawesome-icon-list ul li').click(function () {
$iconList.on('click', 'ul li', function () {
window.console.log($(this).children('span:first').attr('class'));
});
$('.fontawesome-icon-list ul li').addClass('col-md-3 col-sm-4');
$iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
$iconList.find('div').addClass('col-xs-6');
});

20
Bootstrap.Admin/Views/Admin/FAIcon.cshtml
View File

@ -4,24 +4,14 @@
}
@section css {
<link href="~/Content/css/fa.css" rel="stylesheet" />
<link href="~/Content/css/fa.responsive.css" rel="stylesheet" />
<link href="~/Content/css/font-awesome.css" rel="stylesheet" />
}
@section javascript {
<script src="~/Scripts/icon.js"></script>
}
<section class="container">
<section>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
<li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
<div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
</div>
</div>
</div>
</section>
</section>
<div class="panel-body" data-spy="scroll" data-target=".fb-timeliner">
@Html.Partial("IconView")
</div>
</section>

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

@ -115,6 +115,19 @@
}
@section customModal {
@Html.Partial("RoleConfig")
@Html.Partial("IconView")
<div id="dialogIcon" class="modal-content icon-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
</div>
<div class="modal-body" data-spy="scroll" data-target=".fb-timeliner">
@Html.Partial("IconView")
</div>
<div class="modal-footer">
<span>被选择的图标：</span><i id="pickIcon"></i>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
</div>
</div>
@Html.Partial("MenuTree", Model.Navigations.Union(Model.Menus))
}

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

@ -1,49 +1,36 @@
<div id="dialogIcon" class="modal-content icon-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
</div>
<div class="modal-body" data-spy="scroll" data-target=".fb-timeliner">
<i id="fa-top"></i>
<div class="icon-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
<li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
</ul>
<div id="iconTab" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
<div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
</div>
</div>
<div class="fb-timeliner">
<h2 class="recent-highlight">图标分类</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>
</div>
<i id="fa-bottom"></i>
</div>
<div class="modal-footer">
<span>被选择的图标：</span><i id="pickIcon"></i>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
<i id="fa-top"></i>
<div class="icon-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
<li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
</ul>
<div id="iconTab" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
<div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
</div>
</div>
<div class="fb-timeliner">
<h2 class="recent-highlight">图标分类</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>
</div>
<i id="fa-bottom"></i>