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

FantomNotaBene · March 13, 2019, 10:50am

Awesome! Thank you so much!

Stefan_Gorissen · March 14, 2019, 11:04am

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?

Dijker · March 14, 2019, 3:48pm

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 )

Stefan_Gorissen · March 14, 2019, 4:08pm

Thanks! It works like a charm!

Erik_M_Madsen · March 15, 2019, 7:54am

You got a link?

Stylish is not validating very good

KonradWalsh · March 15, 2019, 8:08am

Its called Stylebot

Erik_M_Madsen · March 15, 2019, 9:23am

Thanks Konrad

JvDis · March 17, 2019, 10:18am

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

Ruud · March 27, 2019, 3:35pm

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)

tb1962 · April 6, 2019, 12:22pm

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

MrHaugen · April 11, 2019, 10:48am

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?

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)
Increase the width of the left pane to enable more of the flow names.

Fire69 · April 11, 2019, 1:15pm

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

DaneedeKruyff · April 11, 2019, 2:14pm

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

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

MrHaugen · April 12, 2019, 6:51am

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?

Ruud · May 15, 2019, 10:38am

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

AWBoonen · May 29, 2019, 8:42pm

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

Madd33n · June 20, 2019, 3:02pm

Yes - sadly not for free but spending 3,50€ for a better view is worth it
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!

copiis · July 14, 2019, 8:44am

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

PetervdK · July 14, 2019, 8:50am

Still working here (with Chrome)…

copiis · July 14, 2019, 8:53am

AWBoonen:

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

Ah okay, i had the wrong url

Topic		Replies	Views
Webapp Flows erstellen Flows (DE)	2	801	April 28, 2019
Homey Flow for Web Ideas & Suggestions official	18	9720	April 12, 2019
A welcome reappearance of flow website, however there's a few critical things missing Ideas & Suggestions	2	705	April 10, 2019
Athom's Decision for Mobile First and removing of the Desktop Interface/WEB UI in Homey v2.0.0 Ideas & Suggestions	266	19136	March 18, 2019
Favorite flows Homey Home Screen Ideas & Suggestions	1	1783	March 5, 2019

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

Related Topics