Vibe coded some UI scaling so that the buttons always work.
This commit is contained in:
+42
-51
@@ -341,79 +341,69 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
|
||||
let connection_status = match &*status.read() {
|
||||
Connecting => rsx! {
|
||||
div {
|
||||
style: "color: \"{connecting_color}\";",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
style: "vertical-align: middle; font-size: 30px;",
|
||||
"signal_cellular_alt_2_bar"
|
||||
}
|
||||
span {
|
||||
style: "width: 5px; display: inline-block;"
|
||||
}
|
||||
span {
|
||||
style: "vertical-align: middle; font-size: 30px;",
|
||||
"Connecting"
|
||||
class: "connection_status",
|
||||
style: "color: {connecting_color};",
|
||||
div {
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"signal_cellular_alt_2_bar"
|
||||
}
|
||||
span {
|
||||
class: "status_text",
|
||||
" Connecting"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Connected => rsx! {
|
||||
div {
|
||||
class: "connection_status",
|
||||
div {
|
||||
style: "color: \"{connected_color}\";",
|
||||
style: "color: {connected_color};",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
style: "vertical-align: middle; font-size: 30px;",
|
||||
"signal_cellular_alt"
|
||||
}
|
||||
span {
|
||||
style: "width: 5px; display: inline-block;"
|
||||
}
|
||||
span {
|
||||
style: "vertical-align: middle; font-size: 25px;",
|
||||
"Connected"
|
||||
class: "status_text",
|
||||
" Connected"
|
||||
}
|
||||
}
|
||||
div {
|
||||
span { style: "width: 3px; display: inline-block;"}
|
||||
class: "channel_text",
|
||||
span { "{current_channel_name}" }
|
||||
if let Some(proxy_url) = proxy_url {
|
||||
span { " — " }
|
||||
span { "{proxy_url}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Disconnected => rsx! {
|
||||
div {
|
||||
style: "color: \"{disconnected_color}\";",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
style: "vertical-align: middle;",
|
||||
"signal_disconnected"
|
||||
}
|
||||
span {
|
||||
style: "width: 5px; display: inline-block;"
|
||||
}
|
||||
span {
|
||||
style: "vertical-align: middle;",
|
||||
"Disconnected"
|
||||
class: "connection_status",
|
||||
style: "color: {disconnected_color};",
|
||||
div {
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"signal_disconnected"
|
||||
}
|
||||
span {
|
||||
class: "status_text",
|
||||
" Disconnected"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Failed(_) => rsx! {
|
||||
div {
|
||||
style: "color: \"{failed_color}\";",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
style: "vertical-align: middle;",
|
||||
"error"
|
||||
}
|
||||
span {
|
||||
style: "width: 5px; display: inline-block;"
|
||||
}
|
||||
span {
|
||||
style: "vertical-align: middle;",
|
||||
"Failed"
|
||||
class: "connection_status",
|
||||
style: "color: {failed_color};",
|
||||
div {
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
"error"
|
||||
}
|
||||
span {
|
||||
class: "status_text",
|
||||
" Failed"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -445,16 +435,17 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
|
||||
class: "user_edit_button",
|
||||
span {
|
||||
class: "material-symbols-outlined",
|
||||
style: "color: oklch(0.65 0.2245 28.06); font-size: 45px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;",
|
||||
style: "color: oklch(0.65 0.2245 28.06);",
|
||||
"person_edit"
|
||||
}
|
||||
}
|
||||
div {
|
||||
class: "user_info",
|
||||
div {
|
||||
span { style: "font-size: 25px;", "{name}" }
|
||||
span { class: "user_name", "{name}" }
|
||||
}
|
||||
div {
|
||||
span { style: "font-size: 20px; color: gray;", "some data" }
|
||||
span { class: "user_data", "some data" }
|
||||
}
|
||||
}
|
||||
span { class: "spacer" }
|
||||
|
||||
Reference in New Issue
Block a user