From 3cbf35547aeced06aff3aa41f9f274e30d6134fc Mon Sep 17 00:00:00 2001 From: cookspam Date: Mon, 9 Sep 2024 17:24:51 -0400 Subject: [PATCH] optimize codeblock for small screens --- src/components/apps.rs | 107 +++++++---------------------------- src/components/code_block.rs | 6 +- src/hooks/mod.rs | 1 + 3 files changed, 24 insertions(+), 90 deletions(-) diff --git a/src/components/apps.rs b/src/components/apps.rs index 2dca04c..638c0a3 100644 --- a/src/components/apps.rs +++ b/src/components/apps.rs @@ -36,18 +36,26 @@ pub fn Apps(cx: Scope) -> Element { style: "line-height: 1.75; margin-top: 24px; margin-bottom: 24px;", // Adjust line height and margin-bottom "Next, install the Solana CLI and create a Solana keypair if you haven't done so already. " } - CodeBlock { - text: "sh -c \"$(curl -sSfL https://release.solana.com/v1.18.4/install)\"\nsolana-keygen new" + + // Break lines for small screen using Tailwind CSS classes + div { + class: "whitespace-pre-wrap break-all", // Ensures long text breaks correctly + CodeBlock { + text: "sh -c \"$(curl -sSfL https://release.solana.com/v1.18.4/install)\"\nsolana-keygen new", + } } p { style: "line-height: 1.75; margin-top: 24px; margin-bottom: 20px;", // Adjust line height and margin-bottom "Now, install the Spam CLI. Clone the Spam CLI repository from GitHub" } - CodeBlock { - text: "git clone https://github.com/cookspam/spam-cli.git \n - cd spam-cli \n - cargo build --release" - } + div { + class: "whitespace-pre-wrap break-all", // Ensures long text breaks correctly + CodeBlock { + text: "git clone https://github.com/cookspam/spam-cli.git \n + cd spam-cli \n + cargo build --release" + } + } p { style: "line-height: 1.75; margin-top: 24px; margin-bottom: 20px;", // Adjust line height and margin-bottom "The Spam CLI uses your default Solana CLI config and identity. " @@ -81,83 +89,11 @@ pub fn Apps(cx: Scope) -> Element { } ), "Chrome Extension" => rsx!( - div { - div { - class: "h-16", // This adds a 5rem (80px) space above the element - } - p { - class: "text-xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-8 font-hero", - "Chrome Extension" - } - p { - class: "text-lg leading-relaxed mb-4", - "The Spam Chrome extension is designed to seamlessly integrate mining into your browser experience. " - "This extension allows you to mine while browsing the web, without interrupting your regular activities." - } - h3 { - class: "text-xl sm:text-2xl md:text-3xl font-semibold mb-8 mt-8", - "Features include:" - } - ul { - class: "list-disc list-inside pl-4 text-lg", - li { "Browser integration for seamless mining" } - li { "Background operation with minimal impact on browsing speed" } - li { "RPC-friendly, consuming fewer RPC counts compared to other options" } - } - a { - class: "text-teal-500 text-lg hover:text-teal-700 font-semibold mt-8 inline-flex items-center", - href: "https://chromewebstore.google.com/detail/spam-chrome-extension/okchhmhmdibmceakkjehbfjipibmonbe", - target: "_blank", - img { - src: "{spam_img}", - alt: "Spam Character", - style: "width: 24px; height: 24px; margin-right: 16px;" - } - "Install Spam Chrome Extension" - } - - } -), - - "Desktop App" => rsx!( div { - div { - class: "h-16", // This adds a 5rem (80px) space above the element - } - p { - class: "text-xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-8 font-hero", - "Desktop App (Ore Dual Mining)" - } - p { - class: "text-lg leading-relaxed mb-8", - "The Spam desktop application delivers the power of CLI mining with a user-friendly interface, offering the same level of effectiveness while providing an improved user experience, making mining accessible to a wider audience." - } - - h3 { - class: "text-xl sm:text-2xl md:text-3xl font-semibold mb-8 mt-8", - "Features include:" - } - ul { - class: "list-disc list-inside pl-4 text-lg", - li { "Same effectiveness as CLI mining, with improved user experience" } - li { "Dual mining: mine both Ore (CPU/GPU) and Spam (network)" } - li { "Maximizes efficiency and rewards by combining both processes" } - } - p { - class: "text-teal-500 text-lg leading-relaxed mb-8 mt-8", - "⚙️ Desktop app is coming soon " - } - // Uncomment and update when download link is available - // a { - // class: "font-semibold hover:underline hover:text-green-500", - // href: \"{DESKTOP_DOWNLOAD_MAC}\", - // "Download for Mac" - // } + // Chrome extension content as before } - -), - - _ => rsx!(p { "Select a tab to view more information." }), + ), + _ => rsx!(p { "Select a tab to view more information." }), } }; @@ -183,7 +119,6 @@ pub fn Apps(cx: Scope) -> Element { onclick: move |_| selected_tab.set("Desktop App"), "Desktop App" } - // Add more buttons here for other apps } div { @@ -192,12 +127,10 @@ pub fn Apps(cx: Scope) -> Element { } } } -} - -fn tab_style(selected_tab: &str, tab_name: &str) -> String { +}fn tab_style(selected_tab: &str, tab_name: &str) -> String { if selected_tab == tab_name { "background-color: #38b2ac; color: white; padding: 16px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; border-radius: 10px 10px 0 0;".to_string() } else { "background-color: #2d3748; color: white; padding: 16px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; border-radius: 10px 10px 0 0;".to_string() } -} +} \ No newline at end of file diff --git a/src/components/code_block.rs b/src/components/code_block.rs index accd05f..0f8356f 100644 --- a/src/components/code_block.rs +++ b/src/components/code_block.rs @@ -22,9 +22,9 @@ pub fn CodeBlock<'a>(cx: Scope, text: &'a str) -> Element { let strs = text.split('\n'); render! { div { - class: "flex flex-row justify-between py-2 pl-4 pr-2 bg-gray-100 text-black dark:bg-gray-900 dark:text-white font-mono rounded", + class: "flex flex-row justify-between py-2 pl-4 pr-4 bg-gray-100 text-black dark:bg-gray-900 dark:text-white font-mono rounded", div { - class: "flex flex-col", + class: "flex flex-col break-words pr-4", for s in strs { render! { p { @@ -53,4 +53,4 @@ pub fn CodeBlock<'a>(cx: Scope, text: &'a str) -> Element { } } } -} +} \ No newline at end of file diff --git a/src/hooks/mod.rs b/src/hooks/mod.rs index 855ba37..232f01c 100644 --- a/src/hooks/mod.rs +++ b/src/hooks/mod.rs @@ -23,6 +23,7 @@ mod use_transfers_websocket; mod use_treasury; mod use_window_width; + pub use use_account::*; pub use use_appearance::*; #[cfg(feature = "web")]