mumble/mumble-web2
6
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

UI scaling (#15)
Build Mumble Web 2 / linux_build (push) Successful in 1m31s
Details
Build Mumble Web 2 / windows_build (push) Successful in 2m26s
Details
Build Mumble Web 2 release builder containers / windows-release-builder-container-build (push) Successful in 14s
Details

Browse Source 
I vibe coded a change so that I can use mumble-web2 when I only have it in a small area instead of a full screen.

Scaling for smol screens:
![image.png](/attachments/7187de3c-cfce-4a30-891d-6a1b85096021)

Full screen scaling:
![image.png](/attachments/a1edc925-fb29-4dc7-ab45-51795d0738ad)

Reviewed-on: #15
Reviewed-by: restitux <restitux@ohea.xyz>
Co-authored-by: Samuel Warfield <samuel.warfield2@gmail.com>
Co-committed-by: Samuel Warfield <samuel.warfield2@gmail.com>
This commit was merged in pull request #15.
This commit is contained in:
Samuel Warfield
2026-01-13 18:24:41 +00:00
committed by Samuel Warfield
parent 37c0bce57e
commit f001a192e1
2 changed files with 137 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/src/app.rs
+42 -51
View File
@@ -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" }