From 00a073c7fe4eb979d66582dd7426d5d2e98a538d Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 26 Mar 2017 17:56:15 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=A0=B7=E5=BC=8F=E8=A1=A8?= =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4max-width=EF=BC=8C=E5=85=A8=E9=83=A8?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=A7=BB=E5=8A=A8=E8=AE=BE=E5=A4=87=E4=BC=98?= =?UTF-8?q?=E5=85=88=E7=9A=84min-width=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Bootstrap.Admin/Content/admin-responsive.css | 151 ++++++------------- Bootstrap.Admin/Content/admin.css | 62 ++++++-- Bootstrap.Admin/Content/site-responsive.css | 39 ++--- Bootstrap.Admin/Content/site.css | 5 +- Bootstrap.Admin/Scripts/Dicts.js | 2 +- 5 files changed, 112 insertions(+), 147 deletions(-) diff --git a/Bootstrap.Admin/Content/admin-responsive.css b/Bootstrap.Admin/Content/admin-responsive.css index 05b4b3a8..643f16c0 100644 --- a/Bootstrap.Admin/Content/admin-responsive.css +++ b/Bootstrap.Admin/Content/admin-responsive.css @@ -1,107 +1,26 @@ -@media (min-width: 992px) { - .modal-dialog { - width: 900px; +@media (min-width: 375px) { + .hidden-375 { + display: unset; } - .form-group .form-control-url { - width: 87%; - } -} - -@media (max-width: 940px) { - .hidden-tb { - display: none; - } -} - -@media (max-width: 768px) { - .form-group .form-control-url { - width: 100%; - } - - .sidebar { - display: none; - overflow-y: auto; - width: 100%; - z-index: 5; - } - - .sidebar ul li a { - padding-right: 25px; - } - - .main-content { - margin-left: 0; - } - - .main-content.open { - display: none; - } - - .modal-dialog { - width: 540px; - margin: 20px auto; - } - - .icon-body { - margin-right: 0 !important; - } - - .modal-body div.checkbox { - min-width: 190px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .site-footer { - position: relative; - } -} - -@media (max-width: 548px) { - .modal-dialog { - width: 460px; - } -} - -@media (max-width: 480px) { - .modal-dialog { - width: 300px; - } - - input[type="datetime"] { - min-width: inherit; - } - - .bs-bars { - display: none; - } - - .toolbar { - display: inline-block; - } -} - -@media (max-width: 400px) { .toolbar .dropdown-menu a { - border-left: none; - padding: 0 8px; + padding: 0 20px; + border-left: solid 1px #aeb2b7; } .toolbar .dropdown-menu a:first-child { - padding-left: 16px; - } - - .toolbar .dropdown-menu a:last-child { - padding-right: 16px; + border-left: none; } } -@media (max-width: 374px) { - .hidden-400 { +@media (min-width: 568px) { + .toolbar { display: none; } + + .bs-bars { + display: inline-block; + } } @media (min-width: 768px) { @@ -111,21 +30,34 @@ position: absolute; overflow-y: auto; } -} -@media (min-height: 672px) { - .sidebar { - top: 94px; - bottom: 40px; - position: absolute; - overflow-y: auto; + .modal-dialog { + width: unset; } - .site-footer { - position: fixed; - left: 0; - bottom: 0; - right: 0; + .form-group .form-control-url { + width: 85%; + } +} + +@media (min-width: 769px) { + .sidebar { + display: unset; + width: 210px; + } + + .main-content { + margin-left: 210px; + } + + .main-content.open { + display: unset; + } +} + +@media (min-width: 940px) { + .hidden-tb { + display: unset; } } @@ -140,6 +72,15 @@ } } +@media (min-height: 672px) { + .sidebar { + top: 94px; + bottom: 40px; + position: absolute; + overflow-y: auto; + } +} + @media (max-height: 568px) { .modal-body { height: 300px; diff --git a/Bootstrap.Admin/Content/admin.css b/Bootstrap.Admin/Content/admin.css index 94a88d60..7daa5631 100644 --- a/Bootstrap.Admin/Content/admin.css +++ b/Bootstrap.Admin/Content/admin.css @@ -30,6 +30,10 @@ font-weight: 600; } +.hidden-tb, .hidden-375 { + display: none; +} + .clearcache { position: absolute; right: 60px; @@ -61,10 +65,6 @@ vertical-align: middle; } -.form-group .form-control-url { - width: 83%; -} - .modal-dialog .modal-body, .panel-body { padding-bottom: 0; } @@ -81,6 +81,11 @@ margin-left: 4px; } +.modal.in .modal-dialog { + padding: 0 15px; + max-width: 1000px; +} + .modal-header { background-color: #f5f5f5; border-top-left-radius: 6px; @@ -92,6 +97,13 @@ margin-top: 1px; } +.modal-body .checkbox { + min-width: 190px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .modal-footer { clear: both; } @@ -123,10 +135,22 @@ .main-content { padding: 15px 15px 0 15px; - margin-left: 210px; + margin-left: 0; height: auto; + left: 0; + bottom: 40px; + right: 0; + top: 94px; } + .main-content.open { + display: none; + } + + .main-content.closed { + margin-left: 0; + } + .main-content > .panel:last-child .panel-body { padding-bottom: 0; } @@ -135,15 +159,18 @@ text-align: left; } - .main-content.closed { - margin-left: 0; - } - .sidebar { - width: 210px; + display: none; + overflow-y: auto; + width: 100%; + z-index: 5; background: #2a3542; } + .sidebar ul li a { + padding-right: 25px; + } + .sidebar .sub-menu > .sub li { padding-left: 32px; } @@ -266,12 +293,15 @@ ul.sidebar-menu { margin-top: 16px; } +.bs-bars { + display: none; +} + .toolbar { position: relative; margin-top: 10px; margin-bottom: 10px; line-height: 34px; - display: none; } .toolbar .dropdown-menu { @@ -280,14 +310,18 @@ ul.sidebar-menu { } .toolbar .dropdown-menu a { - padding: 0 20px; - border-left: solid 1px #aeb2b7; + border-left: none; + padding: 0 8px; display: table-cell; color: #504d4d; } .toolbar .dropdown-menu a:first-child { - border-left: none; + padding-left: 16px; + } + + .toolbar .dropdown-menu a:last-child { + padding-right: 16px; } .toolbar .dropdown-menu a:hover { diff --git a/Bootstrap.Admin/Content/site-responsive.css b/Bootstrap.Admin/Content/site-responsive.css index 9dcbf6bf..27090689 100644 --- a/Bootstrap.Admin/Content/site-responsive.css +++ b/Bootstrap.Admin/Content/site-responsive.css @@ -1,31 +1,27 @@ -@media (min-width: 375px) { - .sidebar-toggle-box span { - display: inline-block; - } -} - @media (min-width: 568px) { .notify-row { display: inline-block; } } +@media (min-width: 736px) { + .sidebar-toggle-box span { + display: unset; + } +} + @media (min-width: 768px) { - .header { + html, body { + height: 100%; + overflow: hidden; + } + + .header, .site-footer { position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 50; } .main-content { - margin-top: 0; position: fixed; - left: 0; - bottom: 40px; - right: 0; - top: 94px; overflow: auto; } @@ -40,21 +36,12 @@ overflow: hidden; } - .header { + .header, .site-footer { position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 50; } .main-content { - margin-top: 0; position: fixed; - left: 0; - bottom: 40px; - right: 0; - top: 94px; overflow: auto; } } diff --git a/Bootstrap.Admin/Content/site.css b/Bootstrap.Admin/Content/site.css index b28e83ef..c79b7a46 100644 --- a/Bootstrap.Admin/Content/site.css +++ b/Bootstrap.Admin/Content/site.css @@ -35,6 +35,10 @@ a, a:hover, a:focus { height: 94px; background: #fff; border-bottom: 1px solid #f1f2f7; + top: 0; + left: 0; + right: 0; + z-index: 50; } .header a { @@ -157,7 +161,6 @@ a, a:hover, a:focus { color: #fff; padding: 10px 4px; height: 40px; - position: fixed; left: 0; bottom: 0; right: 0; diff --git a/Bootstrap.Admin/Scripts/Dicts.js b/Bootstrap.Admin/Scripts/Dicts.js index 0b880b3b..6245c141 100644 --- a/Bootstrap.Admin/Scripts/Dicts.js +++ b/Bootstrap.Admin/Scripts/Dicts.js @@ -1,5 +1,5 @@ $(function () { - $('#panelResultHeader').html('查询结果(仅 Administrators 角色成员可删除数据)'); + $('#panelResultHeader').html('查询结果(仅 Administrators 角色成员可删除数据)'); var bsa = new BootstrapAdmin({ url: Dicts.url, dataEntity: new DataEntity({