Cyberchef: Misc: Mobile UI

[n1474335]

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:

1. Create an entirely separate UI for mobile devices
2. 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.

[d98762625]

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]

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]

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

[Cal-Hagner]

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]

bump