New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard: Use full with space on small devices #310

Merged
merged 2 commits into from Jan 9, 2019

Conversation

Projects
None yet
2 participants
@escoand
Copy link
Contributor

escoand commented Jan 8, 2019

Description:

I often use my smartphone for quick actions and always was annoyed of this wasted space.

First after the change, below before:
bildschirmfoto vom 2019-01-08 um 23 20 10

use full space on small devices
I often use my smartphone for quick actions and always was annoyed of this wasted space.
@escoand

This comment has been minimized.

Copy link
Contributor

escoand commented Jan 8, 2019

MAybe we can use an additional hide-on-small-only for the card-image.
Here all three versions:
bildschirmfoto vom 2019-01-08 um 23 34 55

@OttoWinter
Copy link
Owner

OttoWinter left a comment

👍 Looks good, thanks.

I also like the hide-on-small-only thing, want to add that too here?

@escoand

This comment has been minimized.

Copy link
Contributor

escoand commented Jan 9, 2019

Added the hiding.
BTW: Are you planing to have some kind of dynamic content as card-image? Or is this just eye-candy?

@OttoWinter

This comment has been minimized.

Copy link
Owner

OttoWinter commented Jan 9, 2019

@escoand It once was the plan to have some sort of image on there (for example an image of the board, or even user-defined image). But I never got around to that.

I'm already thinking about the next version of the dashboard. My "vision" is to have something like a split-screen layout (like in many Android Apps; android developer speaking here 😀).
On the left side, a list of all nodes to select which one to work on. On the right side the YAML-editor for that config should be front and center with the buttons for Upload/etc over the editor.
No idea how to do it yet with my limited knowledge of that framework but then the image (as well as the ugly modals) would be gone.

@OttoWinter OttoWinter added this to the 1.10.0 milestone Jan 9, 2019

@OttoWinter OttoWinter merged commit cf73d77 into OttoWinter:dev Jan 9, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@OttoWinter OttoWinter changed the title use full space on small devices Dashboard: Use full with space on small devices Jan 9, 2019

@escoand

This comment has been minimized.

Copy link
Contributor

escoand commented Jan 9, 2019

Do you have a screenshot or something like that from a different tool and I will look what I can do.

@OttoWinter

This comment has been minimized.

Copy link
Owner

OttoWinter commented Jan 9, 2019

Kind of like this: https://www.techotopia.com/images/e/e2/Android_studio_master_detail_example_twopane_1.4.png (in android it's called master/detail flow.) First part on left is "master" layout where user selects what detail to view.

On the right, the "detail" shows the actual data. The idea is to have a top bar (or a slim card) with the "UPLOAD", "COMPILE" etc buttons. Below that is a big text area (possibly with the ace text editor in this release) where the user can edit the YAML file directly.

On small screens, this master/detail flow is expanded into two screens (see this)

It's only an idea and I haven't put too much thought into it until now. The idea is that the user has the YAML file constantly in front of them - and that they don't need to switch to another app while using esphome.

OttoWinter added a commit that referenced this pull request Jan 9, 2019

use full space on small devices (#310)
* use full space on small devices

I often use my smartphone for quick actions and always was annoyed of this wasted space.

* hide card-image on small devices

@escoand escoand deleted the escoand:patch-1 branch Jan 9, 2019

@escoand

This comment has been minimized.

Copy link
Contributor

escoand commented Jan 16, 2019

I've to realize once more that my days are not long enough for all the hacking I would like to do. So sadly I've to say I won't be able to code something solid in the near future. Sorry for that...

@OttoWinter

This comment has been minimized.

Copy link
Owner

OttoWinter commented Jan 16, 2019

@escoand No problem :) Thank you for trying it though!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment