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

Developers
81

Versucht mal diesen Code

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

I’m using the following (dark) code:

* {
    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;
    background: -webkit-linear-gradient(55deg,#060006,#505050 30%,#605050);
}

.FlowCard>.Content>.Title>.Text {
     color: white;   
}

.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;
    color: red;
}

.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;
}
body {
    background: -webkit-linear-gradient(55deg,#050005,#404040 50%,#505050);

}
span.TextNode {
  color:white;
}

Hasn’t failed me.

Changed mine a bit with some items of @copiis, i’m happy with it now.

83

@copiis & @Martijn_Hoogenbosch Thanks, your CSS works both for me.

The “problem” is that I used the CSS from @Ruud and a quick look I saw that the backgroud picture does not exist anymore on internet.

This post in this threat

84

But when I use that, I get this down here.

Homey Developer 1797d19f2d60
Homey Developer 1797d19f2d601508×877 57.7 KB

85

To be honest, you shouldn’t be using this anymore. Move to the webapp which will get much more support.

86

But these setting options are not available in the web app, or have I overlooked something?

88

They are, there is a forum topic for it too.

edit:

Sorry! Now I see these are the apps, not flows or anything else. These are not avail in the webapp you are right!

Why would you want to alter these settings?

89

So that it looks like this.
It is clearer to edit.
But if I take the code from above, the working area remains narrow for me.

SKq9s9nb.png)

90

just tested and it works for me as expected!

image
image1545×791 84.1 KB

91

Works for me too… no issues here.

92

Does anyone have this three column view still working? Doens’t work for me anymore, for quite some time now.

93

Still working for me:

/* Show flows in landscape */
/*.css-1hu8qec-sc-Center {
    width: 100%;
  display: flex;    
}
.css-ppwutp-Section {
    width: 33%;
}

*/
/* Show flows in landscape */
.css-14scrpd {
    width: 100%;
  display: flex;    
}
.css-1ab8s7t {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-2gc5z4  {
  width: 95%;
}

.css-1rtbrz0 {
  width: 95%;
}


.css-1iuu5lg {
  width: 95%;
}

.css-vvsplf {
  width: 95%;    
}

/* Adjust flowcards width for landcape view */
/*
.css-7hhj7-CardContainer {
  width: 95%;
}
.css-l8ltv8-CardContainer-DraggableFlowCard {
  width: 95%;
}
.css-x1hjk3-CardContainer-DraggableFlowCard {
  width: 95%;
}*/

/* Make long flow names readable*/
.css-huzgua-sc-ItemLabel {
    white-space: pre-wrap;
}
1 Like
94

Deze werkt inderdaad ook bij mij. Tnx!

heb de laatste tijd overigens dat ik in chrome geen flows meer kan slepen naar andere folders… in Edge werkt dit echter prima, iemand diezelfde ervaring?

95

Thanks, bij mij werkte de oude ook niet meer, deze wel !!