Simple Stylish script to fix some UI issues

Phuturist

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

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

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

Phuturist

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

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

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

Phuturist

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

Athomey

+1 hero

Jacob

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

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

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

Fire69

@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

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

Thanks!

LaurensOuwerkerk

great work! makes the interface a lot more usable!

MartijnDeRhoter

Such a nice script

Phuturist

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

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

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

The left column is huge again now  

caseda

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

Well, that will do! 
Perfect 

Phuturist

Fire69 said:

Well, that will do! 
Perfect 

So no need for me to look into it anymore?

Fire69

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!