mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-09 07:45:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[#181] resolve operations-dropdown behaviour: search-result are at the top if applicable, categories below. clearing search value will display categories

Browse source
This commit is contained in:
Robin Scholtes 2023-04-20 14:59:22 +12:00
parent 4faaae3151
commit 7ae22ff16b
7 changed files with 36 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/web/stylesheets/components/operations/_categories.css
View file

@ -1,3 +1,8 @@
/**
* Operations - Categories list
*/
.category-title {
display: flex;
justify-content: space-between;
@ -33,17 +38,6 @@
border: none;
}
#categories {
position: absolute;
top: 40px; /* the height of the input[type="search"] with pos relative */
width: 100%;
height: auto;
max-height: 60vh;
overflow: scroll;
border-bottom: 1px solid var(--primary-border-colour);
z-index: 20; /* to dropdown on top of all the other elements */
}
#categories a {
color: var(--category-list-font-colour);
cursor: pointer;

22
src/web/stylesheets/components/operations/_operations.css
View file

@ -1,14 +1,34 @@
/**
* Operations component styles
*
* For consistency sake I'm using an ID, but the custom wrapper / dropdown component
* can ( should ) be made into a reusable, generic component
*/
.operations-wrapper {
#operations-wrapper {
position: relative;
}
#operations-dropdown {
position: absolute;
top: 40px; /* the height of the input[type="search"] with pos relative */
width: 100%;
height: auto;
max-height: 60vh;
overflow: auto;
z-index: 20; /* to dropdown on top of all the other elements */
border-bottom: 1px solid var(--primary-border-colour);
}
#reset-operations.hidden,
#search-results.hidden,
#categories.hidden {
z-index: -10;
display: none;
}
@media only screen and ( min-width: 768px ){
#operations-dropdown {
border-bottom: none;
}
}

13
src/web/stylesheets/components/operations/_search.css
View file

@ -1,5 +1,5 @@
/**
* Operations - Search component and search-results list
* Operations - Search component
*/
#search {
@ -9,14 +9,3 @@
linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}
#search-results {
position: absolute;
top: 40px; /* the height of the input[type="search"] with pos relative */
width: 100%;
height: auto;
max-height: 60vh;
overflow: scroll;
border-bottom: 1px solid var(--primary-border-colour);
z-index: 20; /* to dropdown on top of all the other elements */
}