Simple Stylish script to fix some UI issues

Phuturist · March 2016

The current implementation of flow management has it's limitations. Although better flow management is on the backlog of Athom which will eventually bring improvements like scrolling, searching and flow categories this may take some time as it's quite a big change and does not have priority for the moment.

As the number of my flows have grown longer then my screenheight, the only way for me to edit the flows at the bottom of the list was to zoom out my browser to like 75%. Like probably everyone on this forum I like making my life easier (why else would you want home automation) so I decided to create a very small Stylish script which enables a scrollbar in the flow list. The script also contains some code to condense the list so the number of items in the viewport increases but this is of course optional. You should set the height of the flow list to the height of your viewport (which depends on your screen resolution). Hopefully this is helpful to some.

For firmware lower than 0.8.35

#flows-dialog {
    height: 900px; /* set the height of your browser here (depending on your screen resolution) */
    overflow-y: auto;
    overflow-x: hidden;
}

/* edits below here are optional and intended to condense */
/* the list with flows making more flows visible in the viewport */
#flows-dialog li span.label {
    height: 26px;
}
#flows-dialog li span.label span.enabled {
    width: 10px;
    height: 10px;
    top: 5px;
}
#flows-dialog li span.label span.enabled:before {
    line-height: 10px;
    font-size: 10px;
    width: 10px;
}
#flows-dialog li span.label span.name {
    font-size: 13px;
    line-height: 26px;
    height: 26px;
}

/* edits below here are optional and make the flow cards align */
/* to the top so they are still editbale when there are a lot of cards in a column */
#editor>.column>.items {
    justify-content: flex-start;
}

For firmware 0.8.35

#flows-dialog-inner {
    height: 800px;  /* set the height of your browser here (depending on your screen resolution) */
}

aloft · March 2016

Hero of the day! I had to zoom out to 25 % to see all my flows (many flows, small screen), which didn't increase the readability, so I had to zoom out, guess a bit which one, select and then zoom in again.

This helps a lot while waiting for the better flow management, which I can understand is not high on the priority list ( stability first).

Thanks!

PeterGroeneweg · March 2016

@Phuturist, where do you implement this piece of css? How do you reach this file?

Phuturist · March 2016

You need a browser plugin called Stylish where you can add styles that overwite or add to the styles of the website you are viewing.

https://en.wikipedia.org/wiki/Stylish

MartijnDeRhoter · March 2016

Had to reset my Homey (tip: don't implement an infinite loop in your app until you're sure what's going on) so my flows need to be rebuilt. But I had to zoom to 27% to see everything before the reset, so I'm absolutely going to implement this. Excellent work, thanks @Phuturist !

PeterGroeneweg · March 2016

Nice, works nicely. Just had to turn it off to delete some test flows.

Phuturist · March 2016

I have edited the script to create a work around for another UI issue: https://github.com/athombv/homey/issues/383

Athomey · March 2016

+1 hero

Jacob · March 2016

Still without a Homey but wondering, do you neeed to put a large nr of flow's in one screen? Cant you define multiple smaller flow's?

Phuturist · March 2016

Jacob said:

Still without a Homey but wondering, do you neeed to put a large nr of flow's in one screen? Cant you define multiple smaller flow's?

This use case is about flows with lots of cards, for instance turning all your devices of when going to bed. Of course you can create more separate flows with less cards for this but it would not make it more manageable. The number of flows (which are presented on the flow screen) does already increase quite fast when you want to get stuff done, that was the initial reason to create this stylish script.

Arjan · April 2016

Finally had the time to instal the script, wish i had done this before so much better. Nice work @Phuturist !

Fire69 · April 2016

@Phuturist , would it be possible to add the option to make the text in the left column (system/apps/devices) smaller?
I don't stop scrolling up and down when creating flows...
And maybe make the scrollbar a little wider?

caseda · April 2016

To make the text and icons of the sidebar smaller add this to the existing code:
The draggable part is a bit offset above, will try to fix this when i find the time

#items-wrap div.item {
height: 49px;
}
#items-wrap div.label span.name {
font-size: 12px;
}
#items-wrap div.label img.icon {
width: 12px;
}

Couldn't find the way to make the scrollbar wider (yet), it is in a different location and couldn't find the code that fast.

Fire69 · April 2016

Thanks!

LaurensOuwerkerk · April 2016

great work! makes the interface a lot more usable!

MartijnDeRhoter · April 2016

Such a nice script

Phuturist · May 2016

The original script is obsolete from firmware 0.8.35 as it contains a new feature for better flow management. I am however still using a Stylish script with 0.8.35 as I found the area of the flow manager to be to small. The new script only contains one rule for making this area larger. See the opening post if you are interested.

Fire69 · October 2016

I was using this up until 0.9.3 and it still worked great (origal script even, not the +0.8.35 version), but now that I've upgraded tot 0.10.3 it's not working anymore

Everything is way huuuuge again now...
Any way to adapt this to the new firmware?

Phuturist · October 2016

Fire69 said:

I was using this up until 0.9.3 and it still worked great (origal script even, not the +0.8.35 version), but now that I've upgraded tot 0.10.3 it's not working anymore
Everything is way huuuuge again now...
Any way to adapt this to the new firmware?

Sure, but what exactly are you still using this script for? I was mainly using it for the long list of flows then went off screen but that was solved when the new flow manager came round. Now I dont use it anymore.

If you tell me what you like to see fixed it wont be hard to edit the script. I assume you need it for long lists of cards in the AND and ACTION colomn but let me know before I put effort into the wrong thing.

Fire69 · October 2016

The left column is huge again now

Image: https://forum.athom.com/uploads/editor/2j/eovlqtgl8alr.jpg

caseda · October 2016

i'm using this for the flow screen device list which was becoming way too big:

.item>.label>.name {
    font-size: 13px;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
}
.item>.label>.icon {
    width: 20px;
    height: 20px;
}
.label.item ui-draggable {
    height: 20px;
}
.cards>.item {
    height: 50px;
}
.category>.label>.label-inner {
    color: #FFFFFF;
}
#sidebar .category {
    margin: 0px;
}
.category>.items>.item {
    height: 50px;
}

Woops that is the old one:

.item>.label>.name {
    font-size: 13px;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
}
.item>.label>.icon {
    width: 20px;
    height: 20px;
}
.label.item ui-draggable {
    height: 20px;
}
.category>.cards>.item {
    height: 50px;
}
.category>.label>.label-inner {
    color: #FFFFFF;
}
#sidebar .category {
    margin: 0px;
}
.category>.items>.item {
    height: 50px;
}

Fire69 · October 2016

Well, that will do!

Perfect

Phuturist · October 2016

Fire69 said:

Well, that will do!
Perfect

So no need for me to look into it anymore?

Fire69 · October 2016

Phuturist said:

Fire69 said:

Well, that will do!
Perfect

So no need for me to look into it anymore?

Nope, I'm good.

But thanks anyway for willing to look into it!

Simple Stylish script to fix some UI issues

For firmware lower than 0.8.35

For firmware 0.8.35

Comments