diff --git a/Scripts/AutoSizingFlexContainer.gd b/Scripts/AutoSizingFlexContainer.gd index f7799bd..bcb4619 100644 --- a/Scripts/AutoSizingFlexContainer.gd +++ b/Scripts/AutoSizingFlexContainer.gd @@ -12,13 +12,15 @@ func _resort() -> void: if has_meta("should_fill_horizontal"): size_flags_horizontal = Control.SIZE_FILL else: - size_flags_horizontal = Control.SIZE_SHRINK_CENTER + if not has_meta("size_flags_set_by_style_manager"): + size_flags_horizontal = Control.SIZE_SHRINK_CENTER # Check if we should fill vertically (for h-full) if has_meta("should_fill_vertical"): size_flags_vertical = Control.SIZE_FILL else: - size_flags_vertical = Control.SIZE_SHRINK_CENTER + if not has_meta("size_flags_set_by_style_manager"): + size_flags_vertical = Control.SIZE_SHRINK_CENTER if debug_draw: _draw_rects.clear() diff --git a/Scripts/B9/CSSParser.gd b/Scripts/B9/CSSParser.gd index 3d8a294..9a2edb8 100644 --- a/Scripts/B9/CSSParser.gd +++ b/Scripts/B9/CSSParser.gd @@ -496,6 +496,18 @@ static func parse_utility_class_internal(rule: CSSRule, utility_name: String) -> rule.properties["border-radius"] = str(int(val)) + "px" return + # Handle margin auto classes for centering + if utility_name == "mx-auto": + rule.properties["mx-auto"] = true + return + if utility_name == "my-auto": + rule.properties["my-auto"] = true + return + if utility_name == "m-auto": + rule.properties["mx-auto"] = true + rule.properties["my-auto"] = true + return + # Handle more utility classes as needed # Add more cases here for other utilities diff --git a/Scripts/Constants.gd b/Scripts/Constants.gd index ecbc9aa..cc45d31 100644 --- a/Scripts/Constants.gd +++ b/Scripts/Constants.gd @@ -24,7 +24,7 @@ pre { text-xl font-mono } button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] } """ -var HTML_CONTENT2 = """ +var HTML_CONTENT = """ My Custom Dashboard @@ -41,9 +41,8 @@ var HTML_CONTENT2 = """ - - -

📊 My Dashboard

+ +

📊 My Dashboard

@@ -100,7 +99,7 @@ var HTML_CONTENT2 = """ """.to_utf8_buffer() -var HTML_CONTENT = """ +var HTML_CONTENT2 = """ My cool web @@ -204,7 +203,7 @@ So

File Upload

- + # Ordered list
    diff --git a/Scripts/StyleManager.gd b/Scripts/StyleManager.gd index 50bb41d..cf6ba60 100644 --- a/Scripts/StyleManager.gd +++ b/Scripts/StyleManager.gd @@ -45,8 +45,16 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement, if node is FlexContainer: if width != null and typeof(width) != TYPE_STRING: node.custom_minimum_size.x = width + var should_center_h = styles.has("mx-auto") or styles.has("justify-self-center") or (styles.has("text-align") and styles["text-align"] == "center") + + node.size_flags_horizontal = Control.SIZE_SHRINK_CENTER if should_center_h else Control.SIZE_SHRINK_BEGIN + node.set_meta("size_flags_set_by_style_manager", true) if height != null and typeof(height) != TYPE_STRING: node.custom_minimum_size.y = height + var should_center_v = styles.has("my-auto") or styles.has("align-self-center") + node.size_flags_vertical = Control.SIZE_SHRINK_CENTER if should_center_v else Control.SIZE_SHRINK_BEGIN + if not node.has_meta("size_flags_set_by_style_manager"): + node.set_meta("size_flags_set_by_style_manager", true) elif node is VBoxContainer or node is HBoxContainer or node is Container: # Hcontainer nodes (like ul, ol) SizingUtils.apply_container_dimension_sizing(node, width, height) diff --git a/Scripts/Utils/UtilityClassValidator.gd b/Scripts/Utils/UtilityClassValidator.gd index 3bda77c..e052f32 100644 --- a/Scripts/Utils/UtilityClassValidator.gd +++ b/Scripts/Utils/UtilityClassValidator.gd @@ -27,6 +27,7 @@ static func init_patterns(): "^(p|px|py|pt|pr|pb|pl)-", # padding "^rounded", # border radius "^basis-", # flex basis + "^(mx|my|m)-auto$", # margin auto for centering "^(hover|active):", # pseudo classes ] for pattern in utility_patterns: