Mirror/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2024-11-02 14:11:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI for searching for input tabs

Browse Source
This commit is contained in:
j433866 2019-05-10 13:48:03 +01:00
parent 2c02900edf
commit e34d521dcc
2 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/web/html/index.html
View File

@ -769,24 +769,27 @@
</div>
<div class="modal-body" id="input-tab-body">
<h6>Load Status</h6>
<div class="checkbox .input-find-option">
<label for="input-show-pending">
<input type="checkbox" id="input-show-pending" checked="">
Pending
</label>
</div>
<div class="checkbox .input-find-option">
<label for="input-show-loading">
<input type="checkbox" id="input-show-loading" checked="">
Loading
</label>
</div>
<div class="checkbox .input-find-option">
<label for="input-show-loaded">
<input type="checkbox" id="input-show-loaded" checked="">
Loaded
</label>
</div>
<ul id="input-find-options">
<li class="checkbox .input-find-option">
<label for="input-show-pending">
<input type="checkbox" id="input-show-pending" checked="">
Pending
</label>
</li>
<li class="checkbox .input-find-option">
<label for="input-show-loading">
<input type="checkbox" id="input-show-loading" checked="">
Loading
</label>
</li>
<li class="checkbox .input-find-option">
<label for="input-show-loaded">
<input type="checkbox" id="input-show-loaded" checked="">
Loaded
</label>
</li>
</ul>
<br>
<div class="form-group .input-find-option">
<label for="input-filename-filter" class="bmd-label-floating">Filename</label>
<input type="text" class="form-control" id="input-filename-filter">

30
src/web/stylesheets/layout/_io.css
View File

@ -296,9 +296,26 @@
fill: var(--primary-font-colour);
}
#input-find-options {
list-style: none;
width: 100%;
}
#input-find-options li {
display: flex;
flex-direction: row;
float: left;
padding: 10px;
width: auto;
text-align: center;
vertical-align: middle;
}
#input-search-results {
list-style: none;
width: fit-content;
width: 75%;
min-width: 200px;
margin-left: auto;
margin-right: auto;
}
@ -309,12 +326,17 @@
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
transition: 0.25s ease all;
width: 100%;
background: var(--secondary-background-colour);
color: var(--op-list-operation-font-colour);
background-color: var(--op-list-operation-bg-colour);
border-bottom: 2px solid var(--op-list-operation-border-colour);
}
#input-search-results li:first-of-type {
border-top: 2px solid var(--op-list-operation-border-colour);
}
#input-search-results li:hover {
cursor: pointer;
background: var(--primary-background-colour);
filter: brightness(98%);
}