From cb0532d14155334a638debc727d9e9e61644f3e5 Mon Sep 17 00:00:00 2001 From: YanlanShen Date: Thu, 28 Feb 2019 19:32:08 +0800 Subject: [PATCH] luci-theme-rosy: Fix the display bug in the mobile login interface Signed-off-by: YanlanShen --- .../htdocs/luci-static/rosy/cascade.css | 105 ++++++------------ .../htdocs/luci-static/rosy/js/script.js | 22 ++-- 2 files changed, 46 insertions(+), 81 deletions(-) diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css index 3adc4c36f8..787002cbcc 100644 --- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css +++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css @@ -157,26 +157,6 @@ h6 { color: inherit; } -html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - height: 100%; -} - -body { - font-size: .8rem; - background-color: #eee; - height: auto; -} - -html, -body { - font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", - "Hiragino Sans GB"; - margin: 0; - padding: 0; - background-color: #EBF1F6; -} header { display: none; @@ -593,11 +573,6 @@ footer > a { } /* Main interface right 右主界面 */ -.main-right { - width: 84%; - height: 100%; -} - .main-right .container .alert, .main-right .container .alert-message { margin-top: 1rem; @@ -2036,9 +2011,9 @@ input[name="nslookup"] { } /* fix Main Login 登录界面*/ -body.login { - background: #fff url(./loginBG.png) no-repeat center center; - height: 100%; +.login .main-right { + background: url(./loginBG.png) no-repeat center center / cover; + text-align: center; } .login header { @@ -2054,12 +2029,6 @@ body.login { display: none; } -.login > .main > .main-right { - width: 100%; - text-align: center; - background-color: transparent; -} - .login .brand { display: block; color: #fff; @@ -2073,6 +2042,7 @@ body.login { .login > .main #maincontent { margin-top: 5rem; + padding-bottom: 20px; display: inline-block; background-color: transparent; width: 39%; @@ -2162,32 +2132,28 @@ body.login { position: relative; } -.login > .main .cbi-value-last > .cbi-value-field > div { - content: ''; +.login > .main .cbi-value-last .cbi-value-field > div { height: 24px; width: 24px; + display: inline-block; + background: url(./op-eye.png) no-repeat center center / cover; position: absolute; - top: 9px; + top: 8px; right: 12px; - background: no-repeat center center / cover; } -.login > .main .cbi-value-last > .cbi-value-field .eye { - background-image: url(./op-eye.png); -} - -.login > .main .cbi-value-last > .cbi-value-field .op-eye { +.login > .main .cbi-value-last .cbi-value-field.op-eye > div { background-image: url(./cl-eye.png); } -.login > .main .cbi-input-text { +.login > .main .cbi-value .cbi-input-text { + margin: 0 0 16px; + padding-left: 36px; width: 100%; - height: 42px; - background: #fff no-repeat 12px center; + height: 42px; + border: 1px solid #556270; border-radius: 20px; - padding-left: 42px; - font-size: 18px; - border: none; + background: #fff no-repeat 11px center / 19px; } .login > .main .cbi-value .cbi-input-text { @@ -2216,6 +2182,10 @@ body.login { background-color: #9a4569; } +.login footer { + padding: 0; +} + @media screen and (min-height: 585px) { .login footer { position: absolute; @@ -2275,6 +2245,8 @@ body.login { .logged-in .main-right { float: right; + width: 84%; + height: 100%; } .logged-in .main-right .container { @@ -2637,19 +2609,14 @@ body.login { } @media screen and (max-width: 992px) { + .login .main-right { + background: #354057; + } + .login > .main #maincontent { - margin-top: 2rem; width: 90%; } - .login-info .main { - width: 100%; - } - - .login > .main .container { - width: 100%; - } - .logged-in header { z-index: 2000; top: 0; @@ -2679,7 +2646,7 @@ body.login { height: calc(100% - 3rem); } - .main-left .nav-container { + .logged-in .main-left .nav-container { top: 0; left: 0; width: 50%; @@ -2688,7 +2655,7 @@ body.login { height: 100%; } - .main-left .nav-container .navbar-container { + .logged-in .main-left .nav-container .navbar-container { overflow-y: scroll; } @@ -2696,10 +2663,6 @@ body.login { width: 100%; } - body.login { - background: #354057; - } - [data-page^="command-cfg"] header .container > .brand { display: block; margin-top: -1.75rem; @@ -2885,31 +2848,31 @@ body.login { /* The scroll bar of the navigation bar is compatible with each browser. */ /* Google */ - .main-left .navbar-container::-webkit-scrollbar { + .logged-in .main-left .navbar-container::-webkit-scrollbar { width: 6px; background: transparent; } - .main-left .navbar-container::-webkit-scrollbar-button { + .logged-in .main-left .navbar-container::-webkit-scrollbar-button { display: none; } - .main-left .navbar-container::-webkit-scrollbar-thumb { + .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb { background-color: #ffffff61; border-radius: 10px; } - .main-left .navbar-container::-webkit-scrollbar-thumb { + .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb { background-color: #839dd67a; border-radius: 10px; } - .main-left .navbar-container:hover::-webkit-scrollbar-thumb { + .logged-in .main-left .navbar-container:hover::-webkit-scrollbar-thumb { background-color: #839dd67a; } /* IE */ - .main-left .navbar-container { + .logged-in .main-left .navbar-container { scrollbar-track-color: transparent; scrollbar-face-color: #839dd67a; scrollbar-arrow-color: transparent; @@ -2920,7 +2883,7 @@ body.login { scrollbar-base-color: transparent; } - .main-left .navbar-container:hover { + .logged-in .main-left .navbar-container:hover { scrollbar-face-color: #839dd67a; } } diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js index 73557adc0e..7f5f1ad0b0 100755 --- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js +++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js @@ -205,6 +205,7 @@ } }); + $('.login .main-right').css('min-height', $(win).height()); $(win).resize(function () { if ($(win).width() > 921) { $(".main-left").css("width", ""); @@ -213,7 +214,7 @@ showSide = false; } - $('body.login').height($(win).height()); + $('.login .main-right').css('min-height', $(win).height()); }); /** @@ -262,16 +263,17 @@ $(this).next().css('border-color', $(this).css('background-color')); }); - $('
').appendTo('.login > .main .cbi-value-last > .cbi-value-field'); - $('.login > .main .cbi-value-last > .cbi-value-field .eye').click(function () { - var className = $(this).attr('class'); - if (className.indexOf('op-eye') > (-1)) { - $('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'text'); - $(this).addClass('eye').removeClass('op-eye'); - } else { - $('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'password'); - $(this).addClass('op-eye').removeClass('eye'); + $('
').appendTo('.login > .main .cbi-value-last .cbi-value-field'); + $('.login > .main .cbi-value-last .cbi-value-field > div').click(function(){ + var thisParent = $(this).parent(); + if( thisParent.attr('class').indexOf('op-eye') == (-1) ){ + thisParent.addClass('op-eye'); + $(this).prev().attr('type', 'text'); + }else { + thisParent.removeClass('op-eye'); + $(this).prev().attr('type', 'password'); } + }); })(window, jQuery); -- 2.30.2