Misc: Mobile UI #181

n1474335 · 2017-08-18T15:24:26Z

Summary

The current UI isn't very good on mobile devices. We should start thinking about how we can improve it.

Possible solutions

There are two paths we could go down:

Create an entirely separate UI for mobile devices
Make modifications to the current UI so that it adjusts better to fit smaller screens

I'm keen to hear people's opinions on which route they think is best. There are definitely pros and cons to each one. If we create an entirely new UI, it will break a lot of the code in src/web/ which is currently tightly coupled to the existing DOM. However, modifying the current UI to work better on mobile could result in messy code if it isn't done well. This could be a good time to start building index.html in a more modular fashion so that the code becomes easier to maintain.

If anyone wants to mock up some designs for what a mobile UI could look like, please go ahead. The focus should be on simplicity.

The text was updated successfully, but these errors were encountered:

d98762625 · 2018-04-06T13:05:36Z

I'd vote for a responsive UI using a flex-grid or similar. I do not back my frontend skills enough to take this on though.

Cal-Hagner · 2019-12-04T21:18:33Z

I support one responsive UI. The main issue when designing for smaller mobiles (i.e. iPhones, such as the SE, in portrait mode) is that the space is very limited. As I see it, there are four main* elements to the CyberChef page, defined as:

Operations Bar
Recipe List
Input
Output
*There are additionally auxiliary elements, such as the options, support, and download buttons.

Cramming the 4 main elements into one screen is difficult. The commonsense solution would seem to be to separate them out into pairs of two - however, recipe theoretically needs to be seen with both operations and with output (for making a recipe and then stepping through it purposes). Therefore, I would propose a design with a fixed bar at the top showing options and support, a fixed bar on the bottom showing download and latest release, and then a 4-row stacked column, stacked in the following order:

Operations

Recipe

Output

Input

I'm not an amazingly talented developer, but I'm competent, I'm willing, and I've got free time. If y'all can think of any conflicts, I'd be glad to hear what you think of the proposed design. I'll send up a visual template of the design I'm proposing this weekend. No guarantees on speed with this, but seeing as the issue has been untouched for ~2 years, I don't foresee that being a problem.

d98762625 · 2019-12-18T15:19:21Z

@Cal-Hagner I'd maybe change the order of Output and Input.
Would be interested in seeing a visual template!

Cal-Hagner · 2019-12-24T01:59:36Z

Notes:

There is a third possible screen configuration --> Recipe & Output (for walkthroughs of recipes
The addition of a scroll-bar to recipe will need to be handled (should be minor changes from current configuration
Overflow-y of both recipe and operations will need to be handled
Options and support will remain fixed at top of page, & download and build info at bottom
-- Build info shortened to “Last build: _ days ago – v_”
Options page will also need proper resizing

Notice: As I begin to work from my fork of CyberChef, I may need some assistance with figuring out how to view my edits in my fork in the GitHub page at https://cal-hagner.github.io/CyberChef. I'm familiar with front-end, it's just GitHub I don't understand. 🙃

Happy holidays!

evandrix · 2020-10-01T00:58:14Z

bump

…ptions [FEATURE] Allow for status checks to non-HTTPS content Fixed gchq#181

valdelaseras · 2023-04-16T12:45:39Z

Heya CC,

I've been working a little on this and so far I've landed on the following mobile UI layout:

A few choices I made and why:

I'm thinking to set the breakpoint for this UI to 768px, then use the current UI as is from that point. As soon as is usable, I think the UI should jump to the current UI
I'd like to make operations a dropdown
Disable resizing of columns and maximise output on this view ( hence the relevant icons have been removed on this mobile UI )
magic tool and stale-indicator appear to the left of the icon row if applicable.
The notice in the top banner would not be displayed on mobile
I removed the text for Options, About / Support in the top banner to save space. I think the icons alone are straightforward enough

Please do share your thoughts!

…appropriate places when the UI is solid )

… an if statement checking the breakpoint

…ly revert some things once the mobile UI is solid, then patch up desktop view to its original state

…t more space for mobile usability

valdelaseras · 2023-05-09T10:16:20Z

to complete the cut off commit message above: "add 'add favourite' capability for mobile UI

valdelaseras · 2023-05-09T10:32:42Z

On mobile, I found that scrolling through the operations and the drag and drop of an operation to the favourites category was very finicky.

I have added outlined star icons to the start of the operation row
a user may press it to add it to the favourites list
the star icon then fills in to indicate it is a favourited operation
the favourites category dropdown opens as per current behaviour after adding a favourite ( I think it may be nicer if it wouldn't )
note that the icon is not a toggle, removing a favourite op must still happen the same way as per current behaviour ( through the modal )

valdelaseras · 2023-05-09T10:54:42Z

I also added the capability to maximise recipe, input and output panes on mobile UI:

Maxed panes

Recipe

user may edit ingredients here as normal
double tap to delete one ingredient
change order by pressing on an ingredient with a delay of 200ms: there is some visual feedback when the ingredient is grabbed and the order can be changed as normal

All of the above can also be done outside of the maximised pane, but the pane is just rather small and it's not comfortable to do so ( hence the maximised pane view )

Input

for more comfortable UX

Output

to comfortably view the output

On desktop, everything remains as normal. Only the output pane is able to be maximised.

…ically scale based on #controls height, which makes adjustWidth() redundant. Controls is now 50px height on mobile ( 70 was just a lot of wasted space that can be better spend )

valdelaseras · 2023-05-10T03:36:55Z

I have updated the controls component to 50px tall on mobile. 70px ( previous ) was taking up a lot of space that can be used more efficiently.
Please note the chef icon has been removed on mobile view.
Please note the 'Auto bake' text has been shortened to just 'Auto' ( as the controls component is already in the context of 'baking' ) to save space and reduce resizing complexity.
On desktop the controls height is 70px as per usual. The icon is also visible as normal.

Just a quick demo for the smallest possible screen before the layout would jump into mobile UI mode:

This would be a width of 768px.

Everything looks normal ( albeit cramped, but that is expected ) and all buttons etc. can be pressed, no weird overflows. Optionally, we could decide to set the breakpoint higher of course.

…rflows under any situation

…anner. No need for the controls at this point while scrolling the ops

…et op description errors

… Nighwatch to be able to run

…ors when not available

…'favourite' class on init as well

…the ops-lists in Operations every time a new operation is added or removed, only rerender favCat and handle the updating of the individual operations 'favourite' classes and icons

…o be re-rendered ( such as Favourites, but can be used for any Category in the future if needed ), additional refactoring to make previously mentioned functionality work

… ), fix popover issues ( popovers properly disappear ), eslint cleanup fixes

valdelaseras · 2023-08-16T11:16:05Z

PR opened here :)

…e searchbox border nicely

… 40), as per the current width implementations on init

n1474335 added feature help wanted labels Aug 18, 2017

ssmbct-netops mentioned this issue Mar 10, 2021

[Snyk] Security upgrade xmldom from 0.1.27 to 0.5.0 ssmbct-netops/CyberChef#23

Open

SaFiSec mentioned this issue Mar 11, 2021

[Snyk] Security upgrade xmldom from 0.1.27 to 0.5.0 SaFiSec/CyberChef#19

Open

BRAVO68WEB pushed a commit to BRAVO68WEB/CyberChef that referenced this issue May 29, 2022

✨ Re: gchq#181 Option to ignore SSL in ping route

e755783

BRAVO68WEB pushed a commit to BRAVO68WEB/CyberChef that referenced this issue May 29, 2022

✨ Re: gchq#181 Adds option to ignore SSL in ping

f343af3

BRAVO68WEB pushed a commit to BRAVO68WEB/CyberChef that referenced this issue May 29, 2022

🔀 Merge pull request gchq#182 from Lissy93/FEATURE/ssl-status-check-o…

e3b364f

…ptions [FEATURE] Allow for status checks to non-HTTPS content Fixed gchq#181

This was referenced Sep 26, 2022

[Snyk] Fix for 38 vulnerabilities ssmbct-netops/CyberChef#40

Open

[Snyk] Fix for 38 vulnerabilities ssmbct-netops/CyberChef#41

Open

[Snyk] Fix for 38 vulnerabilities ssmbct-netops/CyberChef#42

Open

This was referenced Oct 6, 2022

[Snyk] Fix for 35 vulnerabilities SaFiSec/CyberChef#32

Open

[Snyk] Fix for 35 vulnerabilities SaFiSec/CyberChef#33

Open

snyk-bot mentioned this issue Oct 8, 2022

[Snyk] Fix for 38 vulnerabilities ssmbct-netops/CyberChef#43

Open

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] update pane-controls display

3102adc

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] add justify-content: space-between to the banner

daf2c68

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] update some css to shorthand

32d8ce7

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] comment out edit-favourites for now

e998324

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] set up mobile UI, unsorted CSS blocks ( will move them to …

3608d4a

…appropriate places when the UI is solid )

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] add generic default as per the norm

8ca5cfa

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] add this.breakpoint and move some user layout choices into…

683c323

… an if statement checking the breakpoint

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] update breakpoint to 768, add a TODO

a1d8946

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] update breakpoint for .desktop-only

ab996c3

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] update template for mobile UI. I will incorporate / probab…

3e76bc5

…ly revert some things once the mobile UI is solid, then patch up desktop view to its original state

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Apr 16, 2023

[gchq#181] clean up some inconstencies in alignments, add a little bi…

5d25276

…t more space for mobile usability

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 9, 2023

[gchq#181] add

5362f9f

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] decrease size of controls for mobile UI

222bb62

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] add splitter column minimal widths to prevent unwanted ove…

fefb98e

…rflows under any situation

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] reduce title-height from 48 to 40

a27de41

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] set mobile ops-dropdown to fill all space except ops and b…

d774a50

…anner. No need for the controls at this point while scrolling the ops

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] add breakpoint check in HTMLOperation so desktop doesn't g…

997f26e

…et op description errors

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] update README, run / fix lint

a7a76ec

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 10, 2023

[gchq#181] cleanup to prep draft PR for PR

9fbef2c

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 11, 2023

[gchq#181] update Chrome driver to 113 ( latest stable ) in order for…

0bb3a43

… Nighwatch to be able to run

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 11, 2023

[gchq#181] bump nightwatch version

6259e4b

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 11, 2023

[gchq#181] check if localStorage has favourites at all to prevent err…

41d511a

…ors when not available

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 23, 2023

[gchq#181] update function name

4e67556

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 23, 2023

[gchq#181] update some function names and documentation

3a10e4a

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 23, 2023

[gchq#181] add a note for later refactoring

0aab3bd

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 23, 2023

[gchq#181] update function names and make the linter happy

2fe5cdc

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 23, 2023

[gchq#181] move isFavourite check up in toStubHtml to be able to add …

51aa931

…'favourite' class on init as well

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue May 23, 2023

[gchq#181] a few classname and selector updates

1e5190c

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Aug 14, 2023

[gchq#181] fix some event issues ( dragging and dropping, mobile taps…

5e6327a

… ), fix popover issues ( popovers properly disappear ), eslint cleanup fixes

valdelaseras mentioned this issue Aug 16, 2023

181 responsive UI #1615

Open

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Feb 3, 2024

[gchq#181] returns banner height to original 30 pixels

cf59bd3

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Feb 3, 2024

[gchq#181] adds 1px to position of #operations-dropdown to display th…

a7bb81a

…e searchbox border nicely

valdelaseras added a commit to valdelaseras/CyberChef that referenced this issue Feb 3, 2024

[gchq#181] set initial Recipe and IO widths to 30 and 50 (from 40 and…

fd15e76

… 40), as per the current width implementations on init

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Misc: Mobile UI #181

Misc: Mobile UI #181

n1474335 commented Aug 18, 2017

d98762625 commented Apr 6, 2018

Cal-Hagner commented Dec 4, 2019

d98762625 commented Dec 18, 2019

Cal-Hagner commented Dec 24, 2019

evandrix commented Oct 1, 2020

valdelaseras commented Apr 16, 2023 •

edited

Loading

valdelaseras commented May 9, 2023

valdelaseras commented May 9, 2023 •

edited

Loading

valdelaseras commented May 9, 2023

valdelaseras commented May 10, 2023

valdelaseras commented Aug 16, 2023

Misc: Mobile UI #181

Misc: Mobile UI #181

Comments

n1474335 commented Aug 18, 2017

Summary

Possible solutions

d98762625 commented Apr 6, 2018

Cal-Hagner commented Dec 4, 2019

d98762625 commented Dec 18, 2019

Cal-Hagner commented Dec 24, 2019

evandrix commented Oct 1, 2020

valdelaseras commented Apr 16, 2023 • edited Loading

valdelaseras commented May 9, 2023

valdelaseras commented May 9, 2023 • edited Loading

valdelaseras commented May 9, 2023

Maxed panes

Recipe

Input

Output

valdelaseras commented May 10, 2023

valdelaseras commented Aug 16, 2023

valdelaseras commented Apr 16, 2023 •

edited

Loading

valdelaseras commented May 9, 2023 •

edited

Loading