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] decrease size of controls for mobile UI

Browse source
This commit is contained in:
Robin Scholtes 2023-05-10 13:15:01 +12:00
parent 5362f9fda4
commit 222bb624ae
8 changed files with 52 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/web/App.mjs
View file

@ -877,7 +877,7 @@ class App {
setDesktopUI(minimise){
$("[data-toggle=tooltip]").tooltip("enable");
this.setDesktopSplitter(minimise);
this.adjustComponentSizes();
// this.adjustComponentSizes();
this.populateOperationsList();
this.manager.recipe.clearAllSelectedClasses();
}
@ -896,16 +896,14 @@ class App {
/**
* Due to variable available heights on mobile devices ( due to the
* address bar etc. ), we need to calculate the available space and
* set some heights programmatically.
* set some heights programmatically based on the full view height,
* minus fixed height elements.
*
* The numbers 40, 70 and 90 refer to divs with fixed heights,
* that is: #banner, #operations and #controls. -2 is accounting for
* some borders.
* Be mindful to update these accordingly in the stylesheets
* ( themes/_structure ) if you want to make changes.
* Be mindful to update these fixed numbers accordingly in the stylesheets
* ( themes/_structure ) if you make changes to those elements' height.
*/
assignAvailableHeight( isMobile ){
const remainingSpace = window.innerHeight - (40+70+90-2); // banner, operations, controls height
const remainingSpace = window.innerHeight - (40+50+90-2); // banner, controls height, operations, accounting for some borders
// equally divide among recipe, input and output
["recipe", "input", "output"].forEach(( div ) => {

1
src/web/TODO.md
View file

@ -13,5 +13,6 @@
### Misc:
- Gruntfile revert dev config
- Update README instructions per Mobile UI
- delete this file when done :)

34
src/web/html/index.html
View file

@ -244,21 +244,25 @@
<ul id="rec-list" class="list-area no-select"></ul>
<div id="controls" class="no-select">
<div id="controls-content">
<button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
Step
</button>
<button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
<img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
<span>Bake!</span>
</button>
<div class="form-group" style="display: contents;">
<div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
<label id="auto-bake-label">
<input type="checkbox" checked="checked" id="auto-bake">
<br>Auto Bake
</label>
<div class="col-3">
<button type="button" class="btn btn-block btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
Step
</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
<!-- <img aria-hidden="true" class="desktop-only" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>-->
<span>Bake!</span>
</button>
</div>
<div class="col-3">
<div class="form-group" style="display: contents;">
<div class="checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
<label id="auto-bake-label">
<input type="checkbox" checked="checked" id="auto-bake">
<small>Auto</small>
</label>
</div>
</div>
</div>
</div>

25
src/web/stylesheets/components/_controls.css
View file

@ -8,7 +8,6 @@
#controls {
width: 100%;
padding: 10px 0;
border-top: 1px solid var(--primary-border-colour);
background-color: var(--secondary-background-colour);
overflow: hidden;
@ -16,18 +15,19 @@
#controls-content {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 10px 0;
}
#auto-bake-label {
display: inline-block;
width: 100px;
/*display: inline-block;*/
/*width: 100px;*/
padding: 0;
margin: 0;
text-align: center;
font-size: initial;
/*text-align: center;*/
color: var(--primary-font-colour);
font-size: 14px;
/*font-size: 14px;*/
cursor: pointer;
}
@ -39,19 +39,28 @@
#auto-bake-label .checkbox-decorator {
position: relative;
margin: 0;
padding: 0;
}
/* bake button */
#bake {
box-shadow: none;
}
/* bake and step buttons */
#controls .btn {
border-radius: 30px;
margin: 0;
font-size: initial;
line-height: 0;
height: 30px;
}
.top-zindex {
z-index: 200;
#controls-content .form-group {
text-align: center;
}

2
src/web/stylesheets/components/_operation.css
View file

@ -40,7 +40,7 @@
margin: 0 10px 0 0;
padding: 0;
color: var(--category-list-font-colour);
opacity: .5;
opacity: .35;
cursor: pointer;
}

5
src/web/stylesheets/components/io/_io.css
View file

@ -198,3 +198,8 @@ label[for="output-text"] {
#output .cm-panels {
border-color: var(--primary-border-colour);
}
/* maximise pane and lay on top of everything ( mobile UI )*/
.top-zindex {
z-index: 200;
}

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

@ -115,3 +115,4 @@
right: 15px;
}

5
src/web/stylesheets/themes/_structure.css
View file

@ -1,7 +1,7 @@
:root {
/* Fixed heights */
--banner-height: 40px;
--controls-height: 70px;
--controls-height: 50px;
/*initial mobile height*/
--operations-height: 90px;
}
@ -10,8 +10,7 @@
* A note:
*
* Heights of #recipe, #input and #output are set programmatically
* in App.js > divideAvailableSpace(), please see the docs for that
* function for more information.
* in App.js
*/