diff --git a/instance/index.html b/instance/index.html
index ef0eaf399c3820e1ea5fee33011542da3a4caf63..e67b10643071339f0bfcf58e8ee8a27b34e7c928 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -3,8 +3,9 @@
<head>
<meta charset="UTF-8" />
<title>Lektor App</title>
- <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
- <script src="../style/jquery/jquery-3.5.1.js"></script>
+ <script>
+ window.$ = window.jQuery = require('../style/jquery/jquery-3.5.1.js');
+ </script>
<script src="../style/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
@@ -21,6 +22,18 @@
display: none;
}
</style>
+ <script>
+ $(document).ready(() => {
+ $('#filterInput').on('keyup', () => {
+ var value = $(this).val().toLowerCase();
+ $('#panelLeft *').filter(() => {
+ $(this).toggle(
+ $(this).text().toLowerCase().indexOf(value) > -1
+ );
+ });
+ });
+ });
+ </script>
</head>
<body>
<div id="mainFrame" class="container-fluid">
diff --git a/instance/main.js b/instance/main.js
index 7e317f3b03b5d49bdc46b2142f65418a390f5a95..d1f2ebd46b856a2219bc812d9474d0ac7838ac88 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -88,9 +88,10 @@ function createButtonList(list) {
document.getElementById(
'buttonPanelListLeft'
).innerHTML = `${renderHtmlLeft}${renderHtmlSLeft}
- <h5 class="text-capitalize font-weight-bold text-center p-2 mr-auto ml-auto bd-highlight align-middle"
- style="-webkit-user-select: none; -webkit-app-region: drag;">
- lektor-app admin iterface</h5>
+ <div class="p-1 bd-highlight mb-1 w-75 mr-auto ml-auto">
+ <input id="filterInput" type="text" class="form-control filterInput"
+ placeholder="Filter...">
+ </div>
${renderHtmlRight}`;
}
@@ -99,7 +100,7 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
var karaList = '';
logger.debug(`Web page got reload-db`);
arg.forEach(kara => {
- karaList += `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-info karaCard">
+ karaList += `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 karaCard">
<span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.language}</b></span>
<span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.cat}</b></span>
<span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.type}</b></span>
@@ -120,7 +121,7 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
var karaList = '';
logger.debug(`Web page got reload-queue`);
arg.forEach(kara => {
- karaList += `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-info karaCard">
+ karaList += `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 karaCard">
<span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.language}</b></span>
<span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.cat}</b></span>
<span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.type}</b></span>
diff --git a/style/css/instance.css b/style/css/instance.css
index b7b6a356bb2c5bbfaefbd99cb7009ac6ffabbf01..a7b997213a6a819fcae72d5475c83b41719ab0e6 100644
--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -21,6 +21,32 @@ button {
-webkit-transition: none;
}
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.uneditable-input:focus {
+ outline: none !important;
+ box-shadow: none !important;
+ border-color: transparent !important;
+}
+
+#filterInput {
+ background-color: #2b3e50 !important;
+ color: white;
+}
+
#mainFrame {
height: 100%;
display: flex;
@@ -44,8 +70,10 @@ button {
width: 100%;
margin-left: 0px;
margin-right: 0px;
+ margin-top: 0px !important;
flex-grow: 1;
overflow: hidden;
+ border-top: 0px !important;
padding: 0px !important;
}