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

Developers
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:

image
image.jpg1677×948 358 KB

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!

39 Likes
2

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

image

.SimulatorInner {
    width: 975px !important;
}

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

11 Likes
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:

image
image.jpg1834×972 305 KB

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.

5 Likes
7

For a dark mode

image
image.png1822×320 55.6 KB 

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

4 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

flow
flow.JPG1192×893 44.1 KB

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