past cedar
First screenshot how can I make info and buildings text be centered?
They are under a common node set as flex_direction:Column, both main and cross are centre.
Second problem is under the start constructing.
The red is the node that stores both text valuse how do I get them aligned?
Third issue is the text along planet capital is not aligned with the other smaller text
raven lake
First screenshot how can I make info and buildings text be centered?
They are un...
For the first one, the text entity needs to be a child of something with justify main/cross center. The parent needs to have some width too, probably 100%.
What’s your structure for the start constructing text?
For the small text you probably want FlexEnd
past cedar
For the first one, the text entity needs to be a child of something with justify...
I will start with first.
the node that holds the two tab titles
RadioButtonGroup
BorderColor($tab_border)
FlexNode{flex_direction:Row justify_cross:Center justify_main:SpaceEvenly width:100%
border:{top:1px }
}
one of the tabs
//tabs
"info"
RadioButton
ControlRoot("RadioButton")
FlexNode{padding:{left:10px right:10px} justify_self_cross:FlexEnd flex_grow:1.0 }
TextLine{text:"Info" justify:Center }
Animated<TextLineColor>{ idle:#FFFFFF hover:#5080F0 press:#4070E0 }
Interactive
Multi<Animated<TextLineColor>>[
{
idle:#FFFFFF
}
{
state:[Selected]
idle:#FFFF00
}
]
Multi<Animated<BackgroundColor>>[
{
idle:$background_colour
}
{
state:[Selected]
idle:$active_tab_colour
}
]
I I think you can understand the cob data 🙂
raven lake
You have flex grow in there
past cedar
For the small text you probably want FlexEnd
Text has been renamed since screenshot
PlanetOutliner
AbsoluteNode{
left:100% bottom:auto right:auto top:0%
justify_main:Center justify_cross:Center
flex_direction:Column min_width:5vw
}
BackgroundColor(Hsla{ hue:41,saturation:0.2,lightness:0.35 alpha:1.0 })
"Header"
TextLine{text:"Construct these blueprints"}
"blueprint_datum"
FlexNode{flex_direction:Row width:100% justify_main:Center justify_cross:Center column_gap:15px flex_wrap:NoWrap }
BackgroundColor(Hsla{ hue:10,saturation:0.2,lightness:0.35 alpha:1.0 })
"name"
TextLine{text:"name" size:20 justify:Left}
"cost"
TextLine{text:"cost" size:20 justify:Right}
Blueprint datum is the text
past cedar
You have flex grow in there
I shouldn't?
raven lake
I will start with first.
the node that holds the two tab titles
``` "tabs"
...
Is the flex grow so the tab covers the entire area? Id move the actual text of the tab to a new child node, and add centering to the parent.
In my experience, most of the time text works better on its own node that isn’t doing much.
raven lake
Text has been renamed since screenshot
```"blueprint_scene"
PlanetOutliner
...
Hmm it’s name and cost? What if you remove justify:Right? Maybe a bug
past cedar
In my experience, most of the time text works better on its own node that isn’t ...
Managed to fix first issue
//tabs
"info"
RadioButton
ControlRoot("RadioButton")
FlexNode{padding:{left:10px right:10px} justify_main:Center flex_grow:1.0 }
Animated<TextLineColor>{ idle:#FFFFFF hover:#5080F0 press:#4070E0 }
Interactive
Multi<Animated<BackgroundColor>>[
{
idle:$background_colour
}
{
state:[Selected]
idle:$active_tab_colour
}
]
"a"
TextLine{text:"Info" justify:Center }
Multi<Animated<TextLineColor>>[
{
idle:#FFFFFF
}
{
state:[Selected]
idle:#FFFF00
}
]
``` of course text no longer goes yellow on select
Should I move radiobutton and or control root down?
raven lake
Managed to fix first issue
```
//tabs
"info"
RadioButton
ControlRoot("Ra...
Add control label to ‘a’
past cedar
Hmm it’s name and cost? What if you remove justify:Right? Maybe a bug
did not work 😦
raven lake
did not work 😦
Idk what the issue is, try different things to find a solution. Looks like a bug related to adjacent text entities but idk why that would happen.
past cedar
Add control label to ‘a’
like this?
//tabs
"info"
RadioButton
ControlRoot("RadioButton")
FlexNode{padding:{left:10px right:10px} justify_main:Center flex_grow:1.0 }
Animated<TextLineColor>{ idle:#FFFFFF hover:#5080F0 press:#4070E0 }
Interactive
Multi<Animated<BackgroundColor>>[
{
idle:$background_colour
}
{
state:[Selected]
idle:$active_tab_colour
}
]
"a"
ControlLabel("RadioButton")
TextLine{text:"Info" justify:Center }
Multi<Animated<TextLineColor>>[
{
idle:#FFFFFF
}
{
state:[Selected]
idle:#FFFF00
}
]
Yeah, does it work?
raven lake
Oh you have same name for root and label, you’ll need to restart your app lol
It probably warned you in the console
past cedar
changing label worked
past cedar
It probably warned you in the console
got it working
"info"
RadioButton
ControlRoot("RadioButton")
FlexNode{padding:{left:10px right:10px} justify_main:Center flex_grow:1.0 }
Animated<TextLineColor>{ idle:#FFFFFF hover:#5080F0 press:#4070E0 }
Interactive
Multi<Animated<BackgroundColor>>[
{
idle:$background_colour
}
{
state:[Selected]
idle:$active_tab_colour
}
]
"a"
ControlLabel("a")
TextLine{text:"Info" justify:Center }
Multi<Animated<TextLineColor>>[
{
idle:#FFFFFF
}
{
state:[Selected]
idle:#FFFF00
}
]
Multi<Animated<BackgroundColor>>[
{
idle:$background_colour
}
{
state:[Selected]
idle:$active_tab_colour
}
]
will copy changes to building and give "a" a more reasonable name
raven lake
Sweet :) now remove that Animated<TextLineColor> from info lol
past cedar
Oh yeah thanks
past cedar
Sweet :) now remove that Animated<TextLineColor> from info lol
Do you have any other ideas with demolish et all? flex end did not work.
"construct_scene"
FlexNode{width:100% flex_direction:Column justify_self_cross:FlexStart justify_main:FlexStart justify_cross:Center column_gap:5%
margin:{bottom:10% top:5%}
}
"construct_header_scene"
TextLine{text:"Constructing"}
"construct_datum"
ConstructListUi
FlexNode{flex_direction:Row justify_main:FlexStart justify_cross:FlexEnd column_gap:5%}
"demolish"
FlexNode{justify_self_cross:FlexStart}
//TODO animation
TextLine{text:"Demolish" justify:Left}
Interactive
"building"
TextLine{text:"Building name" }
"time"
TextLine{text:"time" }
construct datum is child of construct scene.
edited
raven lake
Do you have any other ideas with demolish et all? flex end did not work.
```
"co...
You have justify self cross flex start. That will justify to the top when in flex direction row.
past cedar
You have justify self cross flex start. That will justify to the top when in fle...
"construct_scene"
FlexNode{width:100% flex_direction:Column justify_self_cross:FlexEnd justify_main:FlexEnd justify_cross:Center column_gap:5%
margin:{bottom:10% top:5%}
}
"construct_header_scene"
TextLine{text:"Constructing"}
"construct_datum"
ConstructListUi
FlexNode{flex_direction:Row justify_main:FlexEnd justify_cross:FlexEnd column_gap:5%}
"demolish"
//TODO animation
TextLine{text:"Demolish" }
Interactive
"building"
TextLine{text:"Building name" }
"time"
TextLine{text:"time" }
``` 😦 still no changeNot sure then. One way to debug is add a background color to nodes so you can see what shape they actually have and the alignments.
past cedar
Not sure then. One way to debug is add a background color to nodes so you can se...
Yeah thats why the construct these blueprints is red to mark them
right now I am just removing stuff that apeears to do nothing and hoping for the best
past cedar
Not sure then. One way to debug is add a background color to nodes so you can se...
Fixed it!
I am sorry I was meant to edit build not construct.
"build_scene"
FlexNode{width:100% flex_direction:Column justify_self_cross:FlexStart justify_main:FlexStart justify_cross:Center column_gap:5%
margin:{top:5%}
}
"build_header_scene"
TextLine{text:"Buildings on planet"}
FlexNode{margin:{bottom:5%}}
"build_datum"
BuiltListUi
FlexNode{flex_direction:Row justify_main:FlexStart justify_cross:Center column_gap:5%}
"demolish"
//TODO animation
TextLine{text:"Demolish" size:15 }
Interactive
"building"
TextLine{text:"Building name" }
"count"
TextLine{text:"count" size:15 }
"workers"
TextLine{text:"workers" size:15 }
I still hate CSS
raven lake
The design of flexbox is like… surely there is a better way…
past cedar
Thank you thats 2/3 I am going to try fixing blueprints with nodes
past cedar
The design of flexbox is like… surely there is a better way…
Probably should have used grid
raven lake
I didn’t add grid layout support yet. Maybe GridNode? Have not had time to learn grid properly.
past cedar
Actually I could just make it one text line, if I can still make the materials go red when I cannot appord
past cedar
I didn’t add grid layout support yet. Maybe GridNode? Have not had time to learn...
I know a very small subset grid template-areas