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

[#181] position rigt hand side icons in status_bar so the dropups are usable on mobile devices

Browse source
This commit is contained in:
Robin Scholtes 2023-05-09 18:14:15 +12:00
parent ee9ea051d1
commit 793acb54de
2 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/web/stylesheets/components/io/_status-bar.css
View file

@ -14,7 +14,6 @@
font-family: var(--fixed-width-font-family); font-family: var(--fixed-width-font-family);
font-weight: normal; font-weight: normal;
font-size: 8pt; font-size: 8pt;
/*0 5px for desktop*/
margin: 5px 15px; margin: 5px 15px;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -48,7 +47,6 @@
display: inline-block; display: inline-block;
} }
/*@TODO: update this one for mobile*/
/* Dropup content (Hidden by Default) */ /* Dropup content (Hidden by Default) */
.cm-status-bar-select-content { .cm-status-bar-select-content {
display: none; display: none;
@ -57,7 +55,7 @@
right: 0; right: 0;
background-color: #f1f1f1; background-color: #f1f1f1;
min-width: 200px; min-width: 200px;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2); box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
} }
@ -96,11 +94,9 @@
display: block; display: block;
} }
/*@TODO: and update this one for mobile*/
.cm-status-bar-select-scroll { .cm-status-bar-select-scroll {
overflow-y: auto; overflow-y: auto;
max-height: 300px; height: auto;
} }
.chr-enc-value { .chr-enc-value {
@ -113,3 +109,9 @@
} }
/* Right hand side icons */
.rhs {
position: fixed;
right: 15px;
}

4
src/web/utils/statusBar.mjs
View file

@ -45,6 +45,7 @@ class StatusBarPanel {
dom.setAttribute("data-help", `This status bar provides information about data in the ${this.label}. Help topics are available for each of the components by activating help when hovering over them.`); dom.setAttribute("data-help", `This status bar provides information about data in the ${this.label}. Help topics are available for each of the components by activating help when hovering over them.`);
lhs.innerHTML = this.constructLHS(); lhs.innerHTML = this.constructLHS();
rhs.innerHTML = this.constructRHS(); rhs.innerHTML = this.constructRHS();
rhs.classList.add("rhs");
dom.appendChild(lhs); dom.appendChild(lhs);
dom.appendChild(rhs); dom.appendChild(rhs);
@ -288,9 +289,10 @@ class StatusBarPanel {
*/ */
updateSizing(view) { updateSizing(view) {
const viewHeight = view.contentDOM.parentNode.clientHeight; const viewHeight = view.contentDOM.parentNode.clientHeight;
this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach( this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach(
el => { el => {
el.style.maxHeight = (viewHeight - 50) + "px"; el.style.maxHeight = window.innerWidth >= 768 ? (viewHeight - 50) + "px" : '250px';
} }
); );
} }