mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-07 06:57:12 -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-weight: normal;
font-size: 8pt;
/*0 5px for desktop*/
margin: 5px 15px;
display: flex;
flex-flow: row nowrap;
@ -48,7 +47,6 @@
display: inline-block;
}
/*@TODO: update this one for mobile*/
/* Dropup content (Hidden by Default) */
.cm-status-bar-select-content {
display: none;
@ -57,7 +55,7 @@
right: 0;
background-color: #f1f1f1;
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;
}
@ -96,11 +94,9 @@
display: block;
}
/*@TODO: and update this one for mobile*/
.cm-status-bar-select-scroll {
overflow-y: auto;
max-height: 300px;
height: auto;
}
.chr-enc-value {
@ -113,3 +109,9 @@
}
/* Right hand side icons */
.rhs {
position: fixed;
right: 15px;
}

6
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.`);
lhs.innerHTML = this.constructLHS();
rhs.innerHTML = this.constructRHS();
rhs.classList.add("rhs");
dom.appendChild(lhs);
dom.appendChild(rhs);
@ -288,9 +289,10 @@ class StatusBarPanel {
*/
updateSizing(view) {
const viewHeight = view.contentDOM.parentNode.clientHeight;
this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach(
el => {
el.style.maxHeight = (viewHeight - 50) + "px";
el.style.maxHeight = window.innerWidth >= 768 ? (viewHeight - 50) + "px" : '250px';
}
);
}
@ -474,7 +476,7 @@ function makePanel(opts) {
sbPanel.updateSelection(update.state, update.selectionSet);
sbPanel.updateTiming();
sbPanel.monitorHTMLOutput();
if (update.geometryChanged) {
if ( update.geometryChanged) {
sbPanel.updateSizing(update.view);
}
if (update.docChanged) {