luci-theme-bootstrap: overhaul styles
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(backported from commit 8055acc9be)
This commit is contained in:
Jo-Philipp Wich
parent
9775b6ab24
commit
883834c3dd
6 changed files with 686 additions and 377 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -174,19 +174,23 @@ header h3 a, header .brand {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cbi-value-field, .cbi-dropdown {
|
||||
.cbi-value-field, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input, textarea, select,
|
||||
.cbi-dropdown > ul > li input[type="text"] {
|
||||
.cbi-dropdown > ul > li {
|
||||
font-size: 16px !important;
|
||||
line-height: 28px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
select, input[type="text"], input[type="password"] {
|
||||
.cbi-dropdown > ul > li input[type="text"] {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
select, input[type="text"], input[type="password"],
|
||||
.cbi-dropdown > ul > li input[type="text"] {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
|
|
@ -270,11 +274,12 @@ header h3 a, header .brand {
|
|||
}
|
||||
|
||||
header .pull-right {
|
||||
flex: 1 1 20%;
|
||||
flex: 0 1 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
justify-content: space-around;
|
||||
margin: .2em 5px .2em auto;
|
||||
}
|
||||
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
'use strict';
|
||||
'require ui';
|
||||
'require dom';
|
||||
'require form';
|
||||
'require view';
|
||||
'require request';
|
||||
|
||||
var data = { login: {} };
|
||||
|
||||
return view.extend({
|
||||
load: function() {
|
||||
var m, s, o;
|
||||
|
||||
m = new form.JSONMap(data);
|
||||
s = m.section(form.NamedSection, 'login');
|
||||
|
||||
o = s.option(form.Value, 'username', _('Username'));
|
||||
o.default = L.env.default_login_user;
|
||||
|
||||
o = s.option(form.Value, 'password', _('Password'));
|
||||
o.password = true;
|
||||
o.validate = function(section_id, value) {
|
||||
var msg = document.querySelector('alert-message');
|
||||
|
||||
if (msg && value.length)
|
||||
msg.parentNode.removeChild(msg);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
return m.render();
|
||||
},
|
||||
|
||||
render: function(form) {
|
||||
ui.showModal(_('Authorization Required'), [
|
||||
form,
|
||||
E('hr'),
|
||||
E('div', { 'class': 'alert-message error hidden' }, [
|
||||
_('Invalid username and/or password! Please try again.')
|
||||
]),
|
||||
E('button', {
|
||||
'class': 'btn cbi-button-positive important',
|
||||
'click': ui.createHandlerFn(this, 'handleLogin', form)
|
||||
}, [ _('Login') ])
|
||||
], 'login');
|
||||
|
||||
document.querySelector('[id="widget.cbid.json.login.password"]').focus();
|
||||
|
||||
form.addEventListener('keyup', L.bind(function(form, ev) {
|
||||
if (ev.key === 'Enter' || ev.keyCode === 13)
|
||||
document.querySelector('.cbi-button-positive.important').click();
|
||||
}, this, form));
|
||||
|
||||
return E('div', { 'class': 'spinning' }, _('Loading view…'));
|
||||
},
|
||||
|
||||
handleLoginError: function(err) {
|
||||
document.querySelectorAll('.alert-message.error').forEach(function(msg) {
|
||||
msg.firstChild.data = _('The login request failed with error: %h').format(err.message);
|
||||
msg.classList.remove('hidden');
|
||||
msg.classList.add('flash');
|
||||
});
|
||||
},
|
||||
|
||||
handleLoginReply: function(res) {
|
||||
if (res.status != 403) {
|
||||
ui.hideModal();
|
||||
location.reload();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.alert-message.error').forEach(function(msg) {
|
||||
msg.firstChild.data = _('Invalid username and/or password! Please try again.');
|
||||
msg.classList.remove('hidden');
|
||||
msg.classList.add('flash');
|
||||
});
|
||||
},
|
||||
|
||||
handleLogin: function(form, ev) {
|
||||
var fd = new FormData();
|
||||
|
||||
document.querySelectorAll('.alert-message.error').forEach(function(msg) {
|
||||
msg.classList.add('hidden');
|
||||
msg.classList.remove('flash');
|
||||
});
|
||||
|
||||
dom.callClassMethod(form, 'save');
|
||||
|
||||
fd.append('luci_username', data.login.username != null ? data.login.username : '');
|
||||
fd.append('luci_password', data.login.password != null ? data.login.password : '');
|
||||
|
||||
Object.getPrototypeOf(L).notifySessionExpiry = function() {};
|
||||
|
||||
return request.post(location.href, fd).then(this.handleLoginReply, this.handleLoginError);
|
||||
},
|
||||
|
||||
addFooter: function() {}
|
||||
});
|
||||
|
|
@ -1,20 +1,21 @@
|
|||
<%#
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
Licensed to the public under the Apache License 2.0.
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
|
||||
Copyright 2012 David Menting <david@nut-bolt.nl>
|
||||
Licensed to the public under the Apache License 2.0.
|
||||
-%>
|
||||
|
||||
<% local ver = require "luci.version" %>
|
||||
|
||||
<footer>
|
||||
<span>
|
||||
<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
|
||||
</span>
|
||||
<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
|
||||
</footer>
|
||||
</div>
|
||||
<script type="text/javascript">L.require('menu-bootstrap')</script>
|
||||
</body>
|
||||
<% if not blank_page then %>
|
||||
<% local ver = require "luci.version" %>
|
||||
</div>
|
||||
<footer>
|
||||
<span>
|
||||
<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
|
||||
</span>
|
||||
<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
|
||||
</footer>
|
||||
<script type="text/javascript">L.require('menu-bootstrap')</script>
|
||||
<% end %>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
</head>
|
||||
|
||||
<body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
|
||||
<% if not blank_page then %>
|
||||
<header>
|
||||
<a class="brand" href="/"><%=striptags(boardinfo.hostname or "?")%></a>
|
||||
<ul class="nav" id="topmenu" style="display:none"></ul>
|
||||
|
|
@ -81,3 +82,4 @@
|
|||
</noscript>
|
||||
|
||||
<div id="tabmenu" style="display:none"></div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<%#
|
||||
Copyright 2021 Jo-Philipp Wich <jo@mein.io>
|
||||
Licensed to the public under the Apache License 2.0.
|
||||
-%>
|
||||
|
||||
<%
|
||||
-- tell bootstrap's templates to not render header and footer
|
||||
blank_page = true
|
||||
%>
|
||||
|
||||
<%+header%>
|
||||
|
||||
<div id="view">
|
||||
<div class="spinning"><%:Loading view…%></div>
|
||||
<script type="text/javascript">
|
||||
L.env.default_login_user = <%=luci.http.write_json(duser) %>;
|
||||
|
||||
L.require('ui').then(function(ui) {
|
||||
ui.instantiateView('bootstrap.sysauth');
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<%+footer%>
|
||||
Loading…
Reference in a new issue