search

LePa-YU / Visualizer

A web based tool to represent the AIR model of LePa project
Creative Commons Zero v1.0 Universal
0 stars 0 forks source link

Reallocate screen real estate to align with aspect-ratio of desktop screens #3

Open mbaljko opened 2 years ago

mbaljko commented 2 years ago

Develop new layout. The current layout: it has the appearance of: (1) a 3-column layout (e.g., middle column holds content, L/R columns contain negative space) and (2) a vertical sidebar expander. Desired: Make use of a horizontal layout. The main container that holds the pyviz visualization needs to have landscape aspect ratio and should occupy full width of the available real-estate in the browser container. Use expand/collapse (horizontal) widget to present UI instead of vertical sidebar.

These changes will not play well with the mobile experience - another issue will be added to deal with this

ElmiraOn commented 2 years ago

Hi @mbaljko,

Thank you for the feedback. I implemented the horizontal layout where the pyvis visualization occupies 100% of the width. As for height, a quick search on google found that the landscape ratio is 16:9 and that translates to 1080 for screens, so I set the height to this value (we can absolutely change this ). as for the options (views, interactivity, etc), we have two options:

  1. make the current sidebar collapsible
  2. use an expander (which is horizontal) to contain elements

I changed the code to use expander which will be displayed when the user selects file/ demo and you can view the changes in the development version of the app.

either option when expanded will push the pyvis visualization since this is a component and the user has to close it to have a better view or scroll down(I'm looking to see if there it would be possible to close the expander if the user clicks somewhere on the screen outside of expander)

P.S. When I checked the changes on my phone everything seemed to be quite responsive for now

biltzerpos commented 2 years ago

That was quick! :) When I click on Options and select view2, I do not get that second view however. Also, the first view does not fit very well on my screen, I wonder if there is a way to know the size of the browser window and adjust accordingly.

ElmiraOn commented 2 years ago

that's because I'm using the second view to look for a way for collapsible nodes so I commented it out. in my next push I'll move them to the next view :). as for the width I'll look to see if it would be possible to make it more responsive.

ElmiraOn commented 2 years ago

an update on responsiveness, I added a container to the screen where the elements of the visualizer + menu are added to improve the responsiveness of the webpage. At the moment I don't think there is any way to get the specific width of the browser using streamlit. we might look for other libraries that might assist with find the width of the browsers