Homey Community Forum

Homey Flow for Web - three Column view [CSS customization]

#1

Of course everyone is happy With the new Flow for Web App!
but some where more happy using a flow editor in three columns.

The nice thing is with a extra CSS file you can customize the way your browser presents it.
Lucky for me (and you) some Homeys on Slack already shared what they like.

As I am no CSS guru I asked how they did. Thanks to Rob and Bjorn I got some Code.
The people using Linux with fe Epiphany probably know how to use it.

As I use Chrome most of the time I installed the extension StyleBot and added a small css code.
Opened Flow Web App:

Only thing to configure after a default install is the following code for the url: flow.homey.app

.AddFlowCardButton {
    bottom: 0;
    position: absolute;
}
.FlowInner {
    display: flex;
    flex-wrap: wrap;
}
.FlowInner > input {
    flex: 0 0 100%;
}
.FlowTypeGroup {
    flex: 1;
    padding-bottom: 70px;
    position: relative;
}
.FoldersItemInner .Icon {
    flex: 0 0 20px;
}

If you use FireFox you could use it with Custom Style Script.

For what I have tested everything works as normal, but pls remove it before reporting issues with the Flow for Web app to Athom as it will be a problem for them supporting everything with the PBKAC error’s :wink: !!

Have fun!

30 Likes
Rebooting Homey from a flow
Homey Flow for Web
Heimdall - Let Homey watch over your home
Webapp Flows erstellen
#2

Here’s another one, but now for the Settings pages on the developer site:

.SimulatorInner {
    width: 975px !important;
}

Use it for https://developer.athom.com/tools/app-settings

10 Likes
Heimdall - Let Homey watch over your home
#3

This is great.
I hope to see this also for other browsers with an integrated feature… just applying styles should be easy to solve…

#4

Thanks so much for this! :smiley:

#5

Very cool… wish I thought of it first :rofl:

#6

If your screen width isn’t enough and this happens with the custom css above:

just add

.Sidebar {
    width: 7%;
    overflow: auto;
}

.Sidebar:hover {
	width: 301px;   
}

This will slide in the Flow selection column and widen it when you hover over it to select a flow.

4 Likes
#7

For a dark mode

body {
    background: -webkit-linear-gradient(55deg,#100010,#100010 50%,#100010);
}

Possibilities are endless…

4 Likes
#8

This is really helpful, not only the flow editor is back but also the look and feel in a horizontal mode. Many thanks for sharing.

1 Like
#9

Thanks for sharing. Love it!

#10

Fantastic, really appreciated!

#11

Athom read and apply global :slight_smile:

#12

Is there anyone handy enough to apply the iOS shortcuts trick in below link to create an iPad version of this css? Reading it, it may work, but I am not proficient in the code. Can I inspire someone to try?

#13

It looks great but have no clue how to do it in fire fox.

#14

:pray: :pray: :pray: :pray:

#15
#16

Little enhancement so arguments on flowcards are given their own line instead of displaying everything inline

.FlowCardArgument {
    display: block;
}

Before:
image image

After:
image image

3 Likes
#17

Is it possible to fix this issue if a card have many boxes,no scrollbar and a hard time tabbing between settings?

This is for the pushsafer app card

#18

That one looks to me like it needs to be fixed by Athom cause that’s something that should be fixed for everybody and not just the ones running custom CSS.

I suggest reporting this one here: https://support.athom.com/hc/en/requests/new

#19

Well, … I am much less then a guru.

I installed the extension ‘stylebot’ and already stuck. Is there a step by step handout to make this css work? This last 30 years I developed myself as a fantastic computer abuser.

Thanks.

1 Like
#20

@DaneedeKruyff idea taken to its natural progression :

@media screen and (min-width: 1400px) {
  .AddFlowCardButton {    
    bottom: 0;    
    position: absolute;
  }
  .FlowInner {    
    display: flex;    
    flex-wrap: wrap;
  }
  .FlowInner > input {    
    flex: 0 0 100%;
  }
  .FlowTypeGroup {    
    flex: 1;    
    padding-bottom: 70px;    
    position: relative;
  }
  .FoldersItemInner .Icon {   
    flex: 0 0 20px;
  }
  .FlowCardArgument {    
    display: block;
  }
}

@media screen and (min-width: 1500px) and (max-width: 1700px) {
  .Sidebar {    
    width: 7%;    
    min-width: 215px;  
    overflow-x: hidden;
  }
  .Sidebar:hover {    
    width: 301px;    
    overflow: auto;
  }
}

@media screen and (max-width: 1500px) {
    .Sidebar {
        width: 50px;
        overflow-x: hidden;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff'><polygon points='0,0 50,50 0,100'/></svg>") no-repeat;
        background-size: 12px;
        background-position: center center;
        background-color: hsla(0,0%,100%,.1);
    }
    .Sidebar > div {
        visibility: hidden;
        opacity: 0;
    }

    .Sidebar:hover {
        width: 301px;
        overflow: auto;
        background-image: none;
    }

    .Sidebar:hover > div {
        visibility: visible;
        opacity: 1;
        transition: opacity .5s ease-in-out;
    }
}

If your the type of person who REALLY likes their space, you can do the same to the right edit - so it only shows on hover.

@media screen and (max-width: 1500px) {

    .EditCard.Visible {
        width: 50px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff'><polygon points='50,0 0,50 50,100'/></svg>") no-repeat;
        background-size: 12px;
        background-position: center center;
    }

    .EditCard.Visible > div {
        visibility: hidden;
        opacity: 0;
    }

    .EditCard:hover.Visible {
        width: 340px;
        background-image: none;
    }

    .EditCard:hover.Visible > div {
        visibility: visible;
        opacity: 1;
        transition: opacity .5s ease-in-out;
    }
}

2 Likes