Skip to content

Commit

Permalink
optimize codeblock for small screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@cookspam
cookspam committed Sep 9, 2024
1 parent ed0e9bd commit 3cbf355
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 90 deletions.
107 changes: 20 additions & 87 deletions src/components/apps.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. "
Expand Down Expand Up @@ -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." }),
}
};

Expand All @@ -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 {
Expand All @@ -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()
}
}
}
6 changes: 3 additions & 3 deletions src/components/code_block.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -53,4 +53,4 @@ pub fn CodeBlock<'a>(cx: Scope, text: &'a str) -> Element {
}
}
}
}
}
1 change: 1 addition & 0 deletions src/hooks/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")]
Expand Down

0 comments on commit 3cbf355

Please sign in to comment.