search

FifthTry / code-block

https://fifthtry.github.io/code-block/
BSD 2-Clause "Simplified" License
1 stars 0 forks source link

Improving UI of rendered component #12

Open gsalunke opened 1 year ago

gsalunke commented 1 year ago

As suggested by @amitu while discussing feedback on rendered component. Below are few UI suggestions can be added as improvements.

Can we improve rendered component UI with adding below features:

  1. Give a full-screen mode icon - and On-Click of it show a dropdown(On-Click of each option it shows rendered component in full screen mode as seen in below screenshots) which has below options:
    • Vertical - left
    • Vertical -right
    • Horizontal - top
    • Horizontal - bottom

Similar way like browsers developer tools show UI like:

  1. Also, while showing rendered component it should bifurcate between input and output. May be a border which starts from input and finishes at output - so that visual UI should visible like where rendered component started and ended. As in large documentation pages, it will help peoples while reading any documentation.
amitu commented 1 year ago

When clicking on full screen icon is should go to full screen mode, default would be vertical mode, output on top 70%, source code at the lower 30%.

amitu commented 1 year ago

Also only keep two modes, vertical and horizontal. In vertical mode output would be top, and in horizontal mode output on the left and source on right.