Homey Community Forum

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

Awesome! Thank you so much!

I think I’m doing something wrong. I can’t get this to work.

If I insert the code into “Stylish” I get the following errors:

Code 1
warning 7 : 5 Expected (inline | block | list-item | inline-block | table | inline-table | table-row-group | table…
warning 8 : 5 Unknown property ‘flex-wrap’.
warning 11 : 5 Unknown property ‘flex’.
warning 14 : 5 Unknown property ‘flex’.
warning 19 : 5 Unknown property ‘flex’.

Can somebody point me in the right direction?

For what I have seen Stylish was not updated and therefore generated errors for valid properties
I switched to CSS (on Chrome for Windows)
(Advised by some CSS Guru’s )

Thanks! It works like a charm!

You got a link?

Stylish is not validating very good

Its called Stylebot

1 Like

Thanks Konrad :slight_smile:

Hi!,

This is an awesome feature @Dijker introduced and has been perfected by others!

I noticed that testing a flow does not always work when using the adapted CSS. Clicking on test when input variables need to be given (e.g. with a temperature update), the dialog that opens is underneath the ‘WHEN’ column

I fixed this by explicitly setting the z-index on the dialog. It’s a bit dirty, but it works.

.TestDialog {
    z-index: 99;
}
3 Likes

I just put a video online for people who aren’t that handy with computers and also want to make this change. thanks for this idea Geurt (Linkje naar video)

1 Like

When you have, like me a larger screen and larger flows. you may like this setup

flow%20for%20web

edit: the order of the cards is from left to right and top to bottom. But if you want to change order, you have to move the card to the top (or bottom). TThat may feel un naturaly but i can’t change that.

css:

.AddFlowCardButton {
bottom: 0;
position: absolute;
}

.EditCard {
margin-right: 0;
}

.FlowCardArgument {
display: block;
}

.FlowInner {
display: flex;
flex-wrap: wrap;
}

.FlowInner > input {
flex: 0 0 100%;
}

.Folder>.Children {
border-left: 1px solid hsla(0,0%,100%,.1);
margin-left: 20px;
}

.FoldersItem>.FoldersItemInner>.Title {
-moz-user-select: none;
-webkit-user-select: none;
color: #fff;
flex-grow: 1;
font-size: 13px;
font-weight: 400;
margin: 1px;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
}

.FoldersItemInner .Icon {
flex: 0 0 20px;
}

.Sidebar {
overflow: auto;
width: 450px;
}

.Sidebar>.Content {
right: 0;
width: unset;
}

.SimulatorInner {
width: 975px ;
}

@media screen and (max-width: 1500px) {
.EditCard.Visible {
width: 340px;
background: url(“data:image/svg+xml;utf8,”) no-repeat;
-webkit-background-size: 12px;
background-size: 12px;
background-position: center center;
}
.EditCard.Visible > div {
visibility: hidden;
-webkit-opacity: 0;
opacity: 0;
}
.EditCard:hover.Visible {
width: 340px;
background-image: none;
}
.EditCard:hover.Visible > div {
visibility: visible;
-webkit-opacity: 1;
opacity: 1;
-o-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
}

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

.FlowTypeGroup:last-of-type {
flex-grow: 3;
flex-flow: column;
display: flex;
flex-direction: column;
}

.Flow .FlowCards {
display: flex;
flex-direction: column;
margin: 10px;
width: 100%;
}

.FlowCard {
margin: 10px;
}

.FlowGroupSeparator:not([style*=transition]):last-child {
visibility: visible;
}

.FlowGroupSeparator {
width: 100%;
}

.FlowCards > div {
display: flex;
flex-direction: column;
flex-flow: wrap;
}

.FlowTypeGroup>.FlowCards>.AddFlowCardButton, .FlowTypeGroup>.FlowCards>.AddFlowCardButton:active {
align-self: center;
}

4 Likes

I have a problem with flow names being cut off in the left pane. Anyone have a tip on how one could do one of the following?

  1. Word wrap the flow names in the left pane? Like:
    –> Looooooooooong flow name that goes
    … on over two lines. (… representing empty space to tab after the flowicons)
  2. Increase the width of the left pane to enable more of the flow names.

That doesn’t really matter, all the actions are performed at the same time (normally…)

This will prevent the shortening of the flow names and let it span multiple lines:

.FoldersItem>.FoldersItemInner>.Title {
	white-space: normal !important;
}

image

4 Likes

Thank you. That’s SO much better!
Are there any documentation of this stuff, or do you just hack what source code you brows and try/fail? :slight_smile:

Today I made my own version of the css code of @Dijker. I’ve changed the background. I think he is very successful if I say so myself.

Here is my code

.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;
}

.FoldersItem>.FoldersItemInner>.Title {
white-space: normal ;
}

body {
background: url(https://in04.hostcontrol.com/resources/92174d6ec1ea91/7e57aefa92.JPEG);
background-attachment: fixed;
background-repeat: auto;
background-size: cover;
}
4 Likes

So for the people liking the initial css, I’ve done some tweaks which forces a 3 column layout, even if your screen is not wide enough.
A scrollbar will appear to allow you to scroll to the right.
Next to that I’ve looked at some comments mentioned here and embedded that.
I’ve also given the value a grey background and different font family.

Please note that the initial code of Athom is ugly at best, so everything here is merely a hack :-(.

Enjoy:

* {
    box-sizing: border-box;
}

.AddFlowCardButton {
    bottom: 0;
    position: absolute;
    width: auto;
    left: 40px;
    right: 40px;
}

.FlowInner {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 60px;
    position: relative;
}

.FlowInner > input {
    flex: 0 0 100%;
}

.FlowTypeGroup {
    flex: 1;
    padding-bottom: 70px;
    position: relative;
    margin-right: 20px;
}

.FoldersItemInner .Icon {
    flex: 0 0 20px;
}

.Flow .FlowCards {
    width: auto;
    flex: 1;
}

.FlowCard {
    width: auto;
    margin-bottom: 20px
;
}

.Flow .Name {
    position: absolute;
    top: 20px;
}

.Viewport {
    overflow: auto;
}

.FlowCardArgument {
    font-family: 'lucida console', monospace;
    font-size: .85em;
    display: inline-block;
    padding: 0 3px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.FlowCardDroptoken {
    display: block;
}

.FlowCardIcon {
    flex: 0 0 40px;
    height: 40px;
    padding: 5px;
    border-radius: 10px
;
}

.FoldersItem .FoldersItemInner .Title {
    white-space: normal;
}

.FoldersItem .FoldersItemInner {
    align-items: center;
}

4 Likes

Yes - sadly not for free but spending 3,50€ for a better view is worth it :slight_smile:
Search for the Safari extension Cascadea. Easy set up - ready to go within 1 Minute due to the published css code from the community members!

Seems like it doesent work anymore. Athom changed something on the flowsite?

Still working here (with Chrome)…

Ah okay, i had the wrong url