From 189fdccd93a6d5abb04e31f49205e3b505365340 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Tue, 12 Mar 2024 20:56:38 -0400 Subject: [PATCH 01/10] initialize all components --- src/app.rs | 10 ++++++++-- src/components.rs | 2 ++ src/components/dashboard.rs | 10 ++++++++++ src/components/sidebar.rs | 22 ++++++++++++++++++++++ src/lib.rs | 1 + style/dashboard.scss | 7 +++++++ style/home.scss | 9 +++++++++ style/main.scss | 23 +++++++++++++---------- style/sidebar.scss | 14 ++++++++++++++ 9 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 src/components.rs create mode 100644 src/components/dashboard.rs create mode 100644 src/components/sidebar.rs create mode 100644 style/dashboard.scss create mode 100644 style/home.scss create mode 100644 style/sidebar.scss diff --git a/src/app.rs b/src/app.rs index 8d1c582..85b00cc 100644 --- a/src/app.rs +++ b/src/app.rs @@ -6,6 +6,8 @@ use leptos_meta::*; use leptos_router::*; use crate::pages::login::*; use crate::pages::signup::*; +use crate::components::sidebar::*; +use crate::components::dashboard::*; #[component] pub fn App() -> impl IntoView { @@ -41,8 +43,12 @@ fn HomePage() -> impl IntoView { let play_status = create_rw_signal(play_status); view! { - - +
+ + + + +
} } diff --git a/src/components.rs b/src/components.rs new file mode 100644 index 0000000..bffdc50 --- /dev/null +++ b/src/components.rs @@ -0,0 +1,2 @@ +pub mod sidebar; +pub mod dashboard; \ No newline at end of file diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs new file mode 100644 index 0000000..a6b871d --- /dev/null +++ b/src/components/dashboard.rs @@ -0,0 +1,10 @@ +use leptos::*; + +#[component] +pub fn Dashboard() -> impl IntoView { + view! { +
+

Dashboard

+
+ } +} \ No newline at end of file diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs new file mode 100644 index 0000000..5f4ace8 --- /dev/null +++ b/src/components/sidebar.rs @@ -0,0 +1,22 @@ +use leptos::*; + +#[component] +pub fn Sidebar() -> impl IntoView { + view! { +
+ +
+

LibreTunes

+
+ +
+ } +} +#[component] +pub fn Top() -> impl IntoView { + view! { +
+

Hello

+
+ } +} diff --git a/src/lib.rs b/src/lib.rs index 95ab806..0a3d657 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -8,6 +8,7 @@ pub mod queue; pub mod song; pub mod models; pub mod pages; +pub mod components; pub mod users; pub mod search; use cfg_if::cfg_if; diff --git a/style/dashboard.scss b/style/dashboard.scss new file mode 100644 index 0000000..7eb53c9 --- /dev/null +++ b/style/dashboard.scss @@ -0,0 +1,7 @@ +@import 'theme.scss'; + +.dashboard-container { + width: 73%; + background: green; + height: 100vh; +} \ No newline at end of file diff --git a/style/home.scss b/style/home.scss new file mode 100644 index 0000000..76536f0 --- /dev/null +++ b/style/home.scss @@ -0,0 +1,9 @@ +@import "theme.scss"; + +.home-container { + margin-top: 0; + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; +} diff --git a/style/main.scss b/style/main.scss index 6706ef1..557dd84 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,13 +1,16 @@ -@import 'playbar.scss'; -@import 'theme.scss'; -@import 'queue.scss'; -@import 'login.scss'; -@import 'signup.scss'; +@import "playbar.scss"; +@import "theme.scss"; +@import "queue.scss"; +@import "login.scss"; +@import "signup.scss"; +@import "sidebar.scss"; +@import "dashboard.scss"; +@import 'home.scss'; body { - font-family: sans-serif; - background-color: $background-color; - color: $text-controls-color; - margin: 0; - padding: 0; + font-family: sans-serif; + background-color: $background-color; + color: $text-controls-color; + margin: 0; + padding: 0; } diff --git a/style/sidebar.scss b/style/sidebar.scss new file mode 100644 index 0000000..f1a7cd2 --- /dev/null +++ b/style/sidebar.scss @@ -0,0 +1,14 @@ +@import "theme.scss"; + +.sidebar-container { + background-color: red; + width: 27%; + height: calc(100% - 75px); +} + +.sidebar-top-container { + border-radius: 1rem; + background-color: yellow; + height: 20%; + margin: 5px; +} From a7368aec30bc521dbdf77ac43d4e9ed9d3fc8a89 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Thu, 14 Mar 2024 10:56:35 -0400 Subject: [PATCH 02/10] create dashboard/search toggle. modified: Cargo.lock modified: Cargo.toml modified: src/app.rs modified: src/components.rs new file: src/components/search.rs modified: src/components/sidebar.rs modified: src/pages/signup.rs modified: style/dashboard.scss modified: style/main.scss new file: style/search.scss modified: style/sidebar.scss --- Cargo.lock | 10 ++++++++++ Cargo.toml | 4 +++- src/app.rs | 18 ++++++++++++++---- src/components.rs | 3 ++- src/components/search.rs | 11 +++++++++++ src/components/sidebar.rs | 37 ++++++++++++++++++++++++++----------- src/pages/signup.rs | 1 - style/dashboard.scss | 10 +++++----- style/main.scss | 1 + style/search.scss | 8 ++++++++ style/sidebar.scss | 33 ++++++++++++++++++++++++++++++--- 11 files changed, 110 insertions(+), 26 deletions(-) create mode 100644 src/components/search.rs create mode 100644 style/search.scss diff --git a/Cargo.lock b/Cargo.lock index 195bd07..645a1e7 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1314,6 +1314,7 @@ dependencies = [ "icondata_cg", "icondata_core", "icondata_io", + "icondata_oc", "icondata_ri", ] @@ -1359,6 +1360,15 @@ dependencies = [ "icondata_core", ] +[[package]] +name = "icondata_oc" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "667cb0b74516ec3d4ce357b9ec94189eab6e1bfe5a4a28b5e36579028a8075b1" +dependencies = [ + "icondata_core", +] + [[package]] name = "icondata_ri" version = "0.0.8" diff --git a/Cargo.toml b/Cargo.toml index d1a12df..509f87e 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -27,7 +27,9 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "CgTrash", "IoReturnUpBackSharp", "AiEyeFilled", - "AiEyeInvisibleFilled" + "AiEyeInvisibleFilled", + "OcHomeFillLg", + "AiSearchOutlined" ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true } diff --git a/src/app.rs b/src/app.rs index 85b00cc..45824e9 100644 --- a/src/app.rs +++ b/src/app.rs @@ -6,8 +6,7 @@ use leptos_meta::*; use leptos_router::*; use crate::pages::login::*; use crate::pages::signup::*; -use crate::components::sidebar::*; -use crate::components::dashboard::*; + #[component] pub fn App() -> impl IntoView { @@ -36,16 +35,27 @@ pub fn App() -> impl IntoView { } } +use crate::components::sidebar::*; +use crate::components::dashboard::*; +use crate::components::search::*; + /// Renders the home page of your application. #[component] fn HomePage() -> impl IntoView { let mut play_status = PlayStatus::default(); let play_status = create_rw_signal(play_status); + + let (dashboard_open, set_dashboard_open) = create_signal(true); view! {
- - + + } + > + +
diff --git a/src/components.rs b/src/components.rs index bffdc50..e843333 100644 --- a/src/components.rs +++ b/src/components.rs @@ -1,2 +1,3 @@ pub mod sidebar; -pub mod dashboard; \ No newline at end of file +pub mod dashboard; +pub mod search; \ No newline at end of file diff --git a/src/components/search.rs b/src/components/search.rs new file mode 100644 index 0000000..ed11f5b --- /dev/null +++ b/src/components/search.rs @@ -0,0 +1,11 @@ +use leptos::*; +use leptos::leptos_dom::*; + +#[component] +pub fn Search() -> impl IntoView { + view! { +
+

Searching...

+
+ } +} \ No newline at end of file diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 5f4ace8..9872b44 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,22 +1,37 @@ use leptos::*; +use leptos::leptos_dom::*; +use leptos_icons::AiIcon::*; +use leptos_icons::OcIcon::*; +use leptos_icons::*; #[component] -pub fn Sidebar() -> impl IntoView { +pub fn Sidebar(setter: WriteSignal) -> impl IntoView { + let open_dashboard = move |_| { + setter.update(|value| *value = true); + log!("open dashboard"); + }; + let open_search = move |_| { + setter.update(|value| *value = false); + log!("open search"); + }; + view! {
- +
+

LibreTunes

+
+ +

Dashboard

+
+
+ +

Search

+
+

LibreTunes

- -
- } -} -#[component] -pub fn Top() -> impl IntoView { - view! { -
-

Hello

+
} } diff --git a/src/pages/signup.rs b/src/pages/signup.rs index c2de8f8..503195e 100644 --- a/src/pages/signup.rs +++ b/src/pages/signup.rs @@ -1,6 +1,5 @@ use crate::auth::signup; use crate::models::User; -use leptos::ev::input; use leptos::leptos_dom::*; use leptos::*; use leptos_icons::AiIcon::*; diff --git a/style/dashboard.scss b/style/dashboard.scss index 7eb53c9..6d9946e 100644 --- a/style/dashboard.scss +++ b/style/dashboard.scss @@ -1,7 +1,7 @@ -@import 'theme.scss'; +@import "theme.scss"; .dashboard-container { - width: 73%; - background: green; - height: 100vh; -} \ No newline at end of file + width: calc(100% - 22rem); + background: green; + height: 100vh; +} diff --git a/style/main.scss b/style/main.scss index 557dd84..cdd8e9a 100644 --- a/style/main.scss +++ b/style/main.scss @@ -6,6 +6,7 @@ @import "sidebar.scss"; @import "dashboard.scss"; @import 'home.scss'; +@import 'search.scss'; body { font-family: sans-serif; diff --git a/style/search.scss b/style/search.scss new file mode 100644 index 0000000..07da063 --- /dev/null +++ b/style/search.scss @@ -0,0 +1,8 @@ +@import 'theme.scss'; + +.search-container { + width: calc(100% - 22rem); + background: green; + height: 100vh; + } + \ No newline at end of file diff --git a/style/sidebar.scss b/style/sidebar.scss index f1a7cd2..4051817 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -2,13 +2,40 @@ .sidebar-container { background-color: red; - width: 27%; + width: 22rem; height: calc(100% - 75px); } .sidebar-top-container { border-radius: 1rem; - background-color: yellow; - height: 20%; + background-color: darkblue; + height: 10rem; margin: 5px; + padding: 0.2rem 1rem 1rem 1rem; +} + +.sidebar-top-container .header { + font-size: 1.4rem; +} +.sidebar-top-container .buttons { + display: flex; + flex-direction: row; + font-size: 2rem; + align-items: center; + transition: all 0.5s; + cursor: pointer; + color: grey; +} +.sidebar-top-container .buttons:hover { + color: white; +} + +.sidebar-top-container .buttons:last-child { + margin-left: 0.02rem; +} + +.sidebar-top-container h1 { + font-size: 1.1rem; + margin-left: 0.8rem; + font-weight: 200; } From e211f476a7b8675b67be7b1c49ccfbf33fa1f2a1 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Fri, 22 Mar 2024 20:25:52 -0400 Subject: [PATCH 03/10] added profile section to homepage --- Cargo.lock | 10 ++++++++++ Cargo.toml | 3 ++- src/app.rs | 4 +++- src/components.rs | 3 ++- src/components/dashboard.rs | 2 +- src/components/personal.rs | 25 ++++++++++++++++++++++++ src/components/search.rs | 2 +- src/components/sidebar.rs | 14 +++++++------- style/dashboard.scss | 4 +--- style/home.scss | 7 +++++++ style/main.scss | 1 + style/personal.scss | 38 +++++++++++++++++++++++++++++++++++++ style/search.scss | 10 ++++------ style/sidebar.scss | 32 +++++++++++++++++++++---------- style/theme.scss | 4 ++++ 15 files changed, 128 insertions(+), 31 deletions(-) create mode 100644 src/components/personal.rs create mode 100644 style/personal.scss diff --git a/Cargo.lock b/Cargo.lock index 645a1e7..198b1f2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1310,6 +1310,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098" dependencies = [ "icondata_ai", + "icondata_bi", "icondata_bs", "icondata_cg", "icondata_core", @@ -1327,6 +1328,15 @@ dependencies = [ "icondata_core", ] +[[package]] +name = "icondata_bi" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "c0953768d0b9cdd2da0b85b5ef44a0b43078d59411282b8da8fe6c13b123e01f" +dependencies = [ + "icondata_core", +] + [[package]] name = "icondata_bs" version = "0.0.8" diff --git a/Cargo.toml b/Cargo.toml index 509f87e..199e742 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -29,7 +29,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "AiEyeFilled", "AiEyeInvisibleFilled", "OcHomeFillLg", - "AiSearchOutlined" + "BiSearchRegular", + "CgProfile" ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true } diff --git a/src/app.rs b/src/app.rs index 45824e9..f22a3c1 100644 --- a/src/app.rs +++ b/src/app.rs @@ -38,6 +38,7 @@ pub fn App() -> impl IntoView { use crate::components::sidebar::*; use crate::components::dashboard::*; use crate::components::search::*; +use crate::components::personal::*; /// Renders the home page of your application. #[component] @@ -49,13 +50,14 @@ fn HomePage() -> impl IntoView { view! {
- + } > +
diff --git a/src/components.rs b/src/components.rs index e843333..4d0c8a5 100644 --- a/src/components.rs +++ b/src/components.rs @@ -1,3 +1,4 @@ pub mod sidebar; pub mod dashboard; -pub mod search; \ No newline at end of file +pub mod search; +pub mod personal; \ No newline at end of file diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs index a6b871d..c6cc16f 100644 --- a/src/components/dashboard.rs +++ b/src/components/dashboard.rs @@ -3,7 +3,7 @@ use leptos::*; #[component] pub fn Dashboard() -> impl IntoView { view! { -
+

Dashboard

} diff --git a/src/components/personal.rs b/src/components/personal.rs new file mode 100644 index 0000000..fdca503 --- /dev/null +++ b/src/components/personal.rs @@ -0,0 +1,25 @@ +use leptos::leptos_dom::*; +use leptos::*; +use leptos_icons::*; +use leptos_icons::CgIcon::*; + +#[component] +pub fn Personal() -> impl IntoView { + view! { +
+ +
+ } +} + +#[component] +pub fn Profile() -> impl IntoView { + view! { +
+
+ +
+ +
+ } +} diff --git a/src/components/search.rs b/src/components/search.rs index ed11f5b..706670b 100644 --- a/src/components/search.rs +++ b/src/components/search.rs @@ -4,7 +4,7 @@ use leptos::leptos_dom::*; #[component] pub fn Search() -> impl IntoView { view! { -
+

Searching...

} diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 9872b44..0e4611b 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,11 +1,11 @@ -use leptos::*; use leptos::leptos_dom::*; -use leptos_icons::AiIcon::*; +use leptos::*; +use leptos_icons::BiIcon::*; use leptos_icons::OcIcon::*; use leptos_icons::*; #[component] -pub fn Sidebar(setter: WriteSignal) -> impl IntoView { +pub fn Sidebar(setter: WriteSignal, active: ReadSignal) -> impl IntoView { let open_dashboard = move |_| { setter.update(|value| *value = true); log!("open dashboard"); @@ -19,16 +19,16 @@ pub fn Sidebar(setter: WriteSignal) -> impl IntoView {

LibreTunes

-
+

Dashboard

-
- +
+

Search

-
+

LibreTunes

diff --git a/style/dashboard.scss b/style/dashboard.scss index 6d9946e..6ecba86 100644 --- a/style/dashboard.scss +++ b/style/dashboard.scss @@ -1,7 +1,5 @@ @import "theme.scss"; .dashboard-container { - width: calc(100% - 22rem); - background: green; - height: 100vh; + width: calc(100% - 22rem - 16rem); } diff --git a/style/home.scss b/style/home.scss index 76536f0..7a33033 100644 --- a/style/home.scss +++ b/style/home.scss @@ -7,3 +7,10 @@ display: flex; flex-direction: row; } +.home-component { + background: #1c1c1c; + height: 100vh; + margin: 2px; + padding: 1rem 1.5rem 1.5rem 1.5rem; + border-radius: 0.5rem; +} \ No newline at end of file diff --git a/style/main.scss b/style/main.scss index cdd8e9a..7793e25 100644 --- a/style/main.scss +++ b/style/main.scss @@ -7,6 +7,7 @@ @import "dashboard.scss"; @import 'home.scss'; @import 'search.scss'; +@import 'personal.scss'; body { font-family: sans-serif; diff --git a/style/personal.scss b/style/personal.scss new file mode 100644 index 0000000..37692e7 --- /dev/null +++ b/style/personal.scss @@ -0,0 +1,38 @@ +@import "theme.scss"; + +.personal-container { + width: 16rem; + background: #1c1c1c; + height: 100vh; + margin: 2px; + border-radius: 0.5rem; + + .profile-container { + display: flex; + border-radius: 0.4rem; + margin: 0.3rem; + min-height: 6rem; + border: 2px solid rgba(89, 89, 89, 0.199); + padding: 0.5rem; + + .profile-icon { + display: inline-flex; + padding: 0.2rem; + cursor: pointer; + font-size: 2rem; + border-radius: 50%; + transition: all 0.3s; + height: max-content; + margin-left: auto; + } + + .profile-icon:hover { + transform: scale(1.1); + background-color: rgba(255, 255, 255, 0.1); + } + + .profile-icon:active { + transform: scale(0.8); + } + } +} diff --git a/style/search.scss b/style/search.scss index 07da063..9e43f4b 100644 --- a/style/search.scss +++ b/style/search.scss @@ -1,8 +1,6 @@ -@import 'theme.scss'; +@import "theme.scss"; .search-container { - width: calc(100% - 22rem); - background: green; - height: 100vh; - } - \ No newline at end of file + width: calc(100% - 22rem - 16rem); + +} diff --git a/style/sidebar.scss b/style/sidebar.scss index 4051817..563cec6 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -1,26 +1,26 @@ @import "theme.scss"; .sidebar-container { - background-color: red; + background-color: transparent; width: 22rem; height: calc(100% - 75px); } .sidebar-top-container { border-radius: 1rem; - background-color: darkblue; - height: 10rem; - margin: 5px; - padding: 0.2rem 1rem 1rem 1rem; + background-color: #1c1c1c; + height: 9rem; + margin: 3px; + padding: 0.1rem 1rem 1rem 1rem; } .sidebar-top-container .header { - font-size: 1.4rem; + font-size: 1.2rem; } .sidebar-top-container .buttons { display: flex; flex-direction: row; - font-size: 2rem; + font-size: 1.8rem; align-items: center; transition: all 0.5s; cursor: pointer; @@ -32,10 +32,22 @@ .sidebar-top-container .buttons:last-child { margin-left: 0.02rem; + margin-top: 0.5rem; } .sidebar-top-container h1 { - font-size: 1.1rem; - margin-left: 0.8rem; - font-weight: 200; + font-size: 0.95rem; + margin-left: 0.9rem; + font-weight: 400; + font-style: $standard-font; + letter-spacing: 0.5px; +} + +.sidebar-bottom-container { + border-radius: 1rem; + background-color: #1c1c1c; + margin: 3px; + margin-top: 6px; + padding: 0.2rem 1rem 1rem 1rem; + height: calc(100% - 9rem); } diff --git a/style/theme.scss b/style/theme.scss index 2d80285..ed21c25 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -1,3 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300,400,500,700,800;1,300,400,500,600,800&display=swap'); + +$standard-font: 'Open Sans', sans-serif; + $background-color: #030303; $accent-color: #4032a8; $text-controls-color: #e0e0e0; From 7c5f21791cf931137168beaab5e419410e69cd55 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Sat, 30 Mar 2024 13:22:09 -0400 Subject: [PATCH 04/10] Added simple popup to profile icon modified: src/components/dashboard.rs modified: src/components/personal.rs modified: style/dashboard.scss modified: style/home.scss modified: style/personal.scss --- src/components/dashboard.rs | 2 +- src/components/personal.rs | 22 +++++++++++++++++++-- style/dashboard.scss | 5 +++++ style/home.scss | 4 ++-- style/personal.scss | 38 ++++++++++++++++++++++++++++++++++++- 5 files changed, 65 insertions(+), 6 deletions(-) diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs index c6cc16f..9881db7 100644 --- a/src/components/dashboard.rs +++ b/src/components/dashboard.rs @@ -4,7 +4,7 @@ use leptos::*; pub fn Dashboard() -> impl IntoView { view! {
-

Dashboard

+

Dashboard

} } \ No newline at end of file diff --git a/src/components/personal.rs b/src/components/personal.rs index fdca503..7fc3ef8 100644 --- a/src/components/personal.rs +++ b/src/components/personal.rs @@ -14,12 +14,30 @@ pub fn Personal() -> impl IntoView { #[component] pub fn Profile() -> impl IntoView { + let (dropdown_open, set_dropdown_open) = create_signal(false); + + let open_dropdown = move |_| { + set_dropdown_open.update(|value| *value = !*value); + log!("opened dropdown"); + }; view! {
-
+
- +
+ +
+
+ } +} +#[component] +pub fn DropDownNotLoggedIn() -> impl IntoView { + view! { +
+

Not Logged in!

+ +
} } diff --git a/style/dashboard.scss b/style/dashboard.scss index 6ecba86..e0df7d0 100644 --- a/style/dashboard.scss +++ b/style/dashboard.scss @@ -2,4 +2,9 @@ .dashboard-container { width: calc(100% - 22rem - 16rem); + .dashboard-header { + font-size: 1.2rem; + font-weight: 300; + border-bottom: 2px solid white; + } } diff --git a/style/home.scss b/style/home.scss index 7a33033..371032d 100644 --- a/style/home.scss +++ b/style/home.scss @@ -11,6 +11,6 @@ background: #1c1c1c; height: 100vh; margin: 2px; - padding: 1rem 1.5rem 1.5rem 1.5rem; + padding: 0.2rem 1.5rem 1.5rem 1rem; border-radius: 0.5rem; -} \ No newline at end of file +} diff --git a/style/personal.scss b/style/personal.scss index 37692e7..e03e05e 100644 --- a/style/personal.scss +++ b/style/personal.scss @@ -10,7 +10,7 @@ .profile-container { display: flex; border-radius: 0.4rem; - margin: 0.3rem; + margin: 0.2rem; min-height: 6rem; border: 2px solid rgba(89, 89, 89, 0.199); padding: 0.5rem; @@ -34,5 +34,41 @@ .profile-icon:active { transform: scale(0.8); } + .dropdown-container { + position: absolute; + top: 3.8rem; + right: 0.8rem; + background: #1c1c1c; + border-radius: 0.5rem; + width: 10rem; + z-index: 1; + background-color: red; + border: 1px solid grey; + + .dropdown-not-logged { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + h1 { + font-size: 1.2rem; + } + .auth-button { + } + } + } + .dropdown-container:before { + content: ""; + position: absolute; + top: -0.4rem; + right: 0.92rem; + width: 10px; + height: 10px; + transform: rotate(45deg); + background-color: red; + border-left: 1px solid grey; + border-top: 1px solid grey; + } } } From 5f9140c96d556ea3af3c9fa58f0bf2b3140b186c Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Fri, 5 Apr 2024 16:49:09 -0400 Subject: [PATCH 05/10] modified: Cargo.toml modified: src/components/sidebar.rs modified: style/sidebar.scss --- Cargo.toml | 3 ++- src/components/sidebar.rs | 22 +++++++++++++++++++--- style/sidebar.scss | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 4 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 199e742..599eaa1 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -30,7 +30,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "AiEyeInvisibleFilled", "OcHomeFillLg", "BiSearchRegular", - "CgProfile" + "CgProfile", + "IoAddSharp" ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true } diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 0e4611b..6532348 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,6 +1,7 @@ use leptos::leptos_dom::*; use leptos::*; use leptos_icons::BiIcon::*; +use leptos_icons::IoIcon::*; use leptos_icons::OcIcon::*; use leptos_icons::*; @@ -28,10 +29,25 @@ pub fn Sidebar(setter: WriteSignal, active: ReadSignal) -> impl Into

Search

-
-

LibreTunes

-
+
} } + +#[component] +pub fn Bottom() -> impl IntoView { + view! { +
+
+

Playlists

+ +
+
+ } +} diff --git a/style/sidebar.scss b/style/sidebar.scss index 563cec6..2eb8c72 100644 --- a/style/sidebar.scss +++ b/style/sidebar.scss @@ -50,4 +50,42 @@ margin-top: 6px; padding: 0.2rem 1rem 1rem 1rem; height: calc(100% - 9rem); + + .heading { + display: flex; + flex-direction: row; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + .header { + font-size: 1.2rem; + font-weight: 200; + } + + .add-playlist { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + font-size: 0.9rem; + border-radius: 50px; + border: none; + height: 2.2rem; + padding-right: 2rem; + padding-left: 2rem; + cursor: pointer; + transition: background-color 0.3s ease; + .add-sign { + font-size: 1.5rem; + margin-top: auto; + margin-right: 5px; + color: white; + } + } + .add-playlist:hover { + background-color: #9e9e9e; + } + } } From 7a39e18451984ece7b86d97d4206835ec5896812 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Fri, 5 Apr 2024 17:14:36 -0400 Subject: [PATCH 06/10] Update wasm-bindgen to 0.2.92 --- Cargo.lock | 20 ++++++++++---------- Cargo.toml | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 198b1f2..3b25e66 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3134,9 +3134,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423" [[package]] name = "wasm-bindgen" -version = "0.2.89" +version = "0.2.92" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0ed0d4f68a3015cc185aff4db9506a015f4b96f95303897bfa23f846db54064e" +checksum = "4be2531df63900aeb2bca0daaaddec08491ee64ceecbee5076636a3b026795a8" dependencies = [ "cfg-if", "wasm-bindgen-macro", @@ -3144,9 +3144,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-backend" -version = "0.2.89" +version = "0.2.92" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "1b56f625e64f3a1084ded111c4d5f477df9f8c92df113852fa5a374dbda78826" +checksum = "614d787b966d3989fa7bb98a654e369c762374fd3213d212cfc0251257e747da" dependencies = [ "bumpalo", "log", @@ -3171,9 +3171,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-macro" -version = "0.2.89" +version = "0.2.92" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0162dbf37223cd2afce98f3d0785506dcb8d266223983e4b5b525859e6e182b2" +checksum = "a1f8823de937b71b9460c0c34e25f3da88250760bec0ebac694b49997550d726" dependencies = [ "quote", "wasm-bindgen-macro-support", @@ -3181,9 +3181,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-macro-support" -version = "0.2.89" +version = "0.2.92" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "f0eb82fcb7930ae6219a7ecfd55b217f5f0893484b7a13022ebb2b2bf20b5283" +checksum = "e94f17b526d0a461a191c78ea52bbce64071ed5c04c9ffe424dcb38f74171bb7" dependencies = [ "proc-macro2", "quote", @@ -3194,9 +3194,9 @@ dependencies = [ [[package]] name = "wasm-bindgen-shared" -version = "0.2.89" +version = "0.2.92" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "7ab9b36309365056cd639da3134bf87fa8f3d86008abf99e612384a6eecd459f" +checksum = "af190c94f2773fdb3729c55b007a722abb5384da03bc0986df4c289bf5567e96" [[package]] name = "web-sys" diff --git a/Cargo.toml b/Cargo.toml index 599eaa1..20c56f7 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -17,7 +17,7 @@ leptos = { version = "0.5", features = ["nightly"] } leptos_meta = { version = "0.5", features = ["nightly"] } leptos_actix = { version = "0.5", optional = true } leptos_router = { version = "0.5", features = ["nightly"] } -wasm-bindgen = "=0.2.89" +wasm-bindgen = "=0.2.92" leptos_icons = { version = "0.1.0", default_features = false, features = [ "BsPlayFill", "BsPauseFill", From 439dd25b94e68457bf84837a37de5f89a05ee065 Mon Sep 17 00:00:00 2001 From: Ethan Girouard Date: Sat, 6 Apr 2024 15:46:47 -0400 Subject: [PATCH 07/10] Update ahash version --- Cargo.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 3b25e66..f65c84f 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -52,7 +52,7 @@ dependencies = [ "actix-rt", "actix-service", "actix-utils", - "ahash 0.8.6", + "ahash 0.8.11", "base64 0.21.5", "bitflags 2.4.1", "brotli", @@ -201,7 +201,7 @@ dependencies = [ "actix-service", "actix-utils", "actix-web-codegen", - "ahash 0.8.6", + "ahash 0.8.11", "bytes", "bytestring", "cfg-if", @@ -301,9 +301,9 @@ dependencies = [ [[package]] name = "ahash" -version = "0.8.6" +version = "0.8.11" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "91429305e9f0a25f6205c5b8e0d2db09e0708a7a6df0f42212bb56c32c8ac97a" +checksum = "e89da841a80418a9b391ebaea17f5c112ffaaa96f621d2c285b5174da76b9011" dependencies = [ "cfg-if", "getrandom", @@ -1208,7 +1208,7 @@ version = "0.14.3" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "290f1a1d9242c78d09ce40a5e87e7554ee637af1351968159f4952f028f75604" dependencies = [ - "ahash 0.8.6", + "ahash 0.8.11", "allocator-api2", ] From f23b62de9822e354950a6f2d9f04208d817d49d5 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Fri, 12 Apr 2024 13:24:04 -0400 Subject: [PATCH 08/10] fixed google font api --- style/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/theme.scss b/style/theme.scss index ed21c25..a7ebc14 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300,400,500,700,800;1,300,400,500,600,800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); $standard-font: 'Open Sans', sans-serif; From a4fb055e84ffcc6c13c47219f584adf9f17ef40c Mon Sep 17 00:00:00 2001 From: Ethan Girouard Date: Fri, 12 Apr 2024 16:33:33 -0400 Subject: [PATCH 09/10] Fix use of old icons crate --- src/components/personal.rs | 3 +-- src/components/sidebar.rs | 9 +++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/personal.rs b/src/components/personal.rs index 7fc3ef8..889a780 100644 --- a/src/components/personal.rs +++ b/src/components/personal.rs @@ -1,7 +1,6 @@ use leptos::leptos_dom::*; use leptos::*; use leptos_icons::*; -use leptos_icons::CgIcon::*; #[component] pub fn Personal() -> impl IntoView { @@ -23,7 +22,7 @@ pub fn Profile() -> impl IntoView { view! {
- +
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 6532348..805fa4e 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -1,8 +1,5 @@ use leptos::leptos_dom::*; use leptos::*; -use leptos_icons::BiIcon::*; -use leptos_icons::IoIcon::*; -use leptos_icons::OcIcon::*; use leptos_icons::*; #[component] @@ -21,11 +18,11 @@ pub fn Sidebar(setter: WriteSignal, active: ReadSignal) -> impl Into

LibreTunes

- +

Dashboard

- +

Search

@@ -43,7 +40,7 @@ pub fn Bottom() -> impl IntoView {

Playlists

From 14a8f83fe6239b51176fb4198ef459827e7d48b9 Mon Sep 17 00:00:00 2001 From: Ethan Girouard Date: Fri, 12 Apr 2024 16:43:04 -0400 Subject: [PATCH 10/10] Removed unused leptos_dom import --- src/components/search.rs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/search.rs b/src/components/search.rs index 706670b..ceb986b 100644 --- a/src/components/search.rs +++ b/src/components/search.rs @@ -1,5 +1,4 @@ use leptos::*; -use leptos::leptos_dom::*; #[component] pub fn Search() -> impl IntoView {