feat: implement responsive style for mobile (#5)

* feat: implement responsive style for mobile * build: bump version
cr0sh · Jul 16, 2023 · dc7bbc3 · dc7bbc3
1 parent 1b3cc59
commit dc7bbc3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "syn-debugger-web"
-version = "0.1.2"
+version = "0.2.0"
 edition = "2021"
 description = "A syntax debugger for procedural macro developers, powered by Syn and Yew."
 readme = "README.md"

diff --git a/src/app.rs b/src/app.rs
@@ -69,12 +69,12 @@ pub fn app() -> Html {
     html! {
         <main>
             <div class={ classes!("flex", "flex-col", "items-stretch", "px-20", "py-10", "h-screen") }>
-                <h1 class={ classes!("py-5", "text-xl") }>{ format!("syn-debugger-web v{}", env!("CARGO_PKG_VERSION")) }</h1>
-                <div class={ classes!("flex", "flex-row", "grow", "h-4/5") }>
-                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-1/2") }>
+                <h1 class={ classes!("py-5", "text-2xl") }>{ format!("syn-debugger-web v{}", env!("CARGO_PKG_VERSION")) }</h1>
+                <div class={ classes!("flex", "text-xl", "lg:text-md", "flex-col", "lg:flex-row", "grow", "w-full", "h-4/5") }>
+                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-full", "lg:w-1/2", "h-1/2", "lg:h-full") }>
                         <Input {input_ref} onchange={onchange.clone()}/>
                     </div>
-                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-1/2") }>
+                    <div class={ classes!("flex", "flex-col", "px-5", "text-md", "w-full", "lg:w-1/2", "h-1/2", "lg:h-full") }>
                         <Output output={input_value} {parse_method} {onchange}/>
                     </div>
                 </div>