Skip to content

Commit

Permalink
WIP: button slide fix, select-all for output, navbar improvements, ab…
Browse files Browse the repository at this point in the history 
…out tab
  • Loading branch information
@alardev
alardev committed Nov 5, 2023
1 parent 52516f0 commit d01e1ca
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 99 deletions.
77 changes: 77 additions & 0 deletions Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion site/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ leptos_meta = { version = "0.5", features = ["csr", "nightly"] }
leptos_router = { version = "0.5", features = ["csr", "nightly"] }
log = "0.4"
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["Window", "Clipboard", "Navigator", "Element"] }
web-sys = { version = "0.3", features = ["Window", "Clipboard", "Navigator", "Element", "DateTimeValue"] }
wana_kana = { path = "../wana_kana_rust" }
wasm-bindgen-futures = "0.4"
chrono = { version = "*", features = ["wasmbind"]}
84 changes: 44 additions & 40 deletions site/src/app.rs
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
use chrono::prelude::*;

use leptos::{logging::log, *};
use leptos_meta::*;
use leptos_router::*;
Expand All @@ -8,10 +10,10 @@ use leptos_tw_ui::components::{
};

use crate::{
pages::home::Home,
pages::{transliterator::Transliterator, about::ExamplePage},
theme::{
default_page_class, MenuBarVariant, MenuHeaderVariant,
ToggleSwitchClassVariant,
ToggleSwitchClassVariant, ButtonVariant,
},
};

Expand All @@ -25,9 +27,8 @@ pub fn App() -> impl IntoView {
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Router>
<Routes>
<Route path="/" view=move || view! { <Home/> }/>
// <Route path="/counter" view=move || view! { <Counter/> }/>
// <Route path="/example" view=move || view! { <ExamplePage/> }/>
<Route path="/" view=move || view! { <Transliterator/> }/>
<Route path="/about" view=move || view! { <ExamplePage/> }/>
</Routes>
</Router>
</Layout>
Expand All @@ -40,7 +41,7 @@ pub fn Layout(children: Children) -> impl IntoView {
<LayoutWrapper>
<Menu />
{children()}
// <Footer />
<Footer />
</LayoutWrapper>
}
}
Expand All @@ -65,23 +66,22 @@ fn Menu() -> impl IntoView {
<MenuHeader variant={MenuHeaderVariant::Default.get()}>
<MenuBar variant={MenuBarVariant::Default.get()}>
<div class="flex items-center justify-between">
<span class="flex-none font-weight-20 text-3xl text-blue-800 dark:text-gray-200">Коваль</span>
<span class="select-none flex-none font-weight-20 text-3xl text-blue-800 dark:text-gray-200">Коваль
<span class="text-sm block">{"Транслітерація японськіх імен"}</span>
</span>
<div class="sm:hidden">
<MenuToggleButton on_change=set_active class="focus:outline-none p-1"
icon_class="w-7 h-7 fill-gray-700 hover:fill-gray-500 dark:fill-gray-300 dark:hover:fill-gray-100 dark:hover:outline rounded-2xl" />
</div>
</div>
<div class={move || match active(){ true => "transition-all duration-300 basis-full grow sm:block", false => "hidden transition-all duration-300 basis-full grow sm:block"}}>
<div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
// <LinkButton href="/" variant={ButtonVariant::Ghost.get()}>
// Home
// </LinkButton>
// <LinkButton href="/counter" variant={ButtonVariant::Ghost.get()}>
// Counter
// </LinkButton>
// <LinkButton href="/example" variant={ButtonVariant::Ghost.get()}>
// Examples
// </LinkButton>
<div class="select-none flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
<LinkButton href="/" variant={ButtonVariant::Ghost.get()}>
Транслітерація
</LinkButton>
<LinkButton href="/about" variant={ButtonVariant::Ghost.get()}>
Про Коваль
</LinkButton>
<ThemeToggleSwitch mode_fn={theme_mode} class={ToggleSwitchClassVariant::Encased.get()} />
</div>
</div>
Expand All @@ -93,33 +93,37 @@ fn Menu() -> impl IntoView {
// Sticky footer
#[component]
fn Footer() -> impl IntoView {

let year = Local::now().year();

view! {
<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-slate-900 dark:border-gray-600">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">{"© 2023 "} <a href="https://example.com/" class="hover:underline">{"Footer™"}</a>. All Rights Reserved.
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">{ format!("© {} ", year) }
<a href="https://github.com/GlooriousWalrus" class="hover:underline">{"GlooriousWalrus"}</a>
</span>
<ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
<li>
<LinkButton href="#" class="mr-4 hover:underline md:mr-6">
About
</LinkButton>
</li>
<li>
<LinkButton href="#" class="mr-4 hover:underline md:mr-6">
Privacy Policy
</LinkButton>
</li>
<li>
<LinkButton href="#" class="mr-4 hover:underline md:mr-6">
Licensing
</LinkButton>
</li>
<li>
<LinkButton href="#" class="mr-4 hover:underline md:mr-6">
Contact
</LinkButton>
// <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
// <li>
// <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
// About
// </LinkButton>
// </li>
// <li>
// <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
// Privacy Policy
// </LinkButton>
// </li>
// <li>
// <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
// Licensing
// </LinkButton>
// </li>
// <li>
// <LinkButton href="#" class="mr-4 hover:underline md:mr-6">
// Contact
// </LinkButton>

</li>
</ul>
// </li>
// </ul>
</footer>
}
}
60 changes: 31 additions & 29 deletions site/src/pages/example.rs → site/src/pages/about.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ use std::ops::Not;
#[component]
pub fn ExamplePage() -> impl IntoView {
view! {
<Title text="Leptos + Tailwindcss | Examples"/>
<Main id="main" class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto pb-[100px] text-gray-900 dark:text-gray-400">
<div>
// <!-- Announcement Banner -->
<Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>Examples with Explanations</Typography>
// <!-- End Announcement Banner -->
</div>
<DarkModeSection/>
<ButtonSection/>
<Title text="Коваль | Про Коваль"/>
<Main id="main" class="max-w-[85rem] h-screen px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400">
// <div>
// // <!-- Announcement Banner -->
// <Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>Examples with Explanations</Typography>
// // <!-- End Announcement Banner -->
// </div>
// <DarkModeSection/>
// <ButtonSection/>
<TypographySection/>
</Main>
// An empty Fragment is not created on the DOM
Expand Down Expand Up @@ -78,28 +78,30 @@ fn ButtonSection() -> impl IntoView {
#[component]
fn TypographySection() -> impl IntoView {
view! {
<section class="max-w-[70rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
<Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>Typography</Typography>
<section class="max-w-[70rem] sm:mt-16 px-4 py-4 sm:px-6 lg:px-8 mx-auto py-auto">
// <Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>Про Коваль</Typography>
<div class="border rounded-xl shadow-sm border-blue-600 dark:bg-slate-800 dark:border-slate-600 p-5 mt-3">
<Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>H1</Typography>
<Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>H2</Typography>
<Typography variant=TypographyVariant::H3 class={TypographyClass::H3.get()}>H3</Typography>
<Typography variant=TypographyVariant::H4 class={TypographyClass::H4.get()}>H4</Typography>
<Typography variant=TypographyVariant::H5 class={TypographyClass::H5.get()}>H5</Typography>
<Typography variant=TypographyVariant::H6 class={TypographyClass::H6.get()}>H6</Typography>
<Typography variant=TypographyVariant::Paragraph class={TypographyClass::Paragraph.get()}>This is a Paragraph</Typography>
<p>The word <Typography variant=TypographyVariant::SpanInline class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
also the following code
<Typography variant=TypographyVariant::Code {inline:true} class={TypographyClass::Code.get()}>This is a Code block</Typography>
is wrapped.</p>
<p>The word <Typography variant={TypographyVariant::Span {inline:false}} class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
also the following code
<Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>This is a Code block</Typography>
is wrapped but they are not inline.</p>
<Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>
<Typography variant=TypographyVariant::Span {inline:false}>let num: i32 = 100;</Typography>
<Typography variant=TypographyVariant::Span {inline:false}>"println!{""{}"", num};"</Typography>
<Typography variant=TypographyVariant::H1 class={TypographyClass::H1.get()}>Про Коваль</Typography>
// <Typography variant=TypographyVariant::H2 class={TypographyClass::H2.get()}>H2</Typography>
// <Typography variant=TypographyVariant::H3 class={TypographyClass::H3.get()}>H3</Typography>
// <Typography variant=TypographyVariant::H4 class={TypographyClass::H4.get()}>H4</Typography>
// <Typography variant=TypographyVariant::H5 class={TypographyClass::H5.get()}>H5</Typography>
// <Typography variant=TypographyVariant::H6 class={TypographyClass::H6.get()}>H6</Typography>
<Typography variant=TypographyVariant::Paragraph class={TypographyClass::Paragraph.get()}>
{""}
</Typography>
// <p>The word <Typography variant=TypographyVariant::SpanInline class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
// also the following code
// <Typography variant=TypographyVariant::Code {inline:true} class={TypographyClass::Code.get()}>This is a Code block</Typography>
// is wrapped.</p>
// <p>The word <Typography variant={TypographyVariant::Span {inline:false}} class={TypographyClass::Span.get()}>span</Typography> in this sentence is wrapped,
// also the following code
// <Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>This is a Code block</Typography>
// is wrapped but they are not inline.</p>
// <Typography variant=TypographyVariant::Code {inline:false} class={TypographyClass::Code.get()}>
// <Typography variant=TypographyVariant::Span {inline:false}>let num: i32 = 100;</Typography>
// <Typography variant=TypographyVariant::Span {inline:false}>"println!{""{}"", num};"</Typography>
// </Typography>
</div>
</section>
}
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/mod.rs
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// pub mod counter;
pub mod example;
pub mod home;
pub mod about;
pub mod transliterator;
Loading

0 comments on commit d01e1ca

Please sign in to comment.