diff --git a/devblog/devblog/client/index.html b/devblog/devblog/client/index.html index 18f5257..83b4989 100644 --- a/devblog/devblog/client/index.html +++ b/devblog/devblog/client/index.html @@ -5,7 +5,6 @@ TheDevBlog - \ No newline at end of file diff --git a/devblog/devblog/client/src/components/comment.rs b/devblog/devblog/client/src/components/comment.rs index 78a75df..d70c846 100644 --- a/devblog/devblog/client/src/components/comment.rs +++ b/devblog/devblog/client/src/components/comment.rs @@ -6,7 +6,6 @@ use crate::{ CommentModel, }; use chrono::{Local, TimeZone}; -use gloo::console::log; use stylist::Style; use yew::{function_component, html, use_state, Callback, Html, Properties}; use yewdux::use_store_value; @@ -36,7 +35,6 @@ pub fn comment(props: &Props) -> Html { let content_clone = content.clone(); let on_edit_save = move |value: String| { - log!("SAVE EDIT COMMENT"); content_clone.set(value); }; @@ -65,19 +63,21 @@ pub fn comment(props: &Props) -> Html {
{date.to_string()}
+ - // EDIT COMMENT - if *is_editing && props.comment.username == store.username { - - } + // EDIT COMMENT + if *is_editing && props.comment.username == store.username { + + } - // CONTENT + // CONTENT + if !*is_editing {

{content.deref()}

- + } } diff --git a/devblog/devblog/client/src/components/comment_edit.rs b/devblog/devblog/client/src/components/comment_edit.rs index 16c7e1a..f6abf74 100644 --- a/devblog/devblog/client/src/components/comment_edit.rs +++ b/devblog/devblog/client/src/components/comment_edit.rs @@ -72,23 +72,25 @@ pub fn edit_comment(props: &Props) -> Html { }; html! { -
- if !props.is_editing { - - - - } + <> +
+ if !props.is_editing { + + + + } - if props.is_editing { -
- + if props.is_editing { +
+ -
- - +
+ + +
-
- } -
+ } +
+ } } diff --git a/devblog/devblog/client/src/components/navbar.rs b/devblog/devblog/client/src/components/navbar.rs index 55d401e..fd956d8 100644 --- a/devblog/devblog/client/src/components/navbar.rs +++ b/devblog/devblog/client/src/components/navbar.rs @@ -1,4 +1,4 @@ -use crate::{pages::sign_out::SignOut, router::Route, store::Store}; +use crate::{icons::icons::MenuIcon, pages::sign_out::SignOut, router::Route, store::Store}; use stylist::Style; use yew::prelude::*; use yew_router::prelude::*; @@ -9,7 +9,43 @@ const STYLE: &str = include_str!("styles/navbar.css"); #[function_component(Navbar)] pub fn navbar() -> Html { let style = Style::new(STYLE).unwrap(); + let is_menu_clicked = use_state(|| false); + let nav_display = use_state(|| "none".to_string()); let store = use_store_value::(); + let location = use_location(); + + let is_active = |path: String| -> String { + match location.clone().unwrap().path() == path { + true => "active".to_string(), + false => "non-active".to_string(), + } + }; + + let st = format!(r#":root {{ display: {} }}"#, *nav_display); + let nav_links_style = Style::new(st).unwrap(); + + // set 'is_menu_clicked' state to true + let is_menu_clicked_clone = is_menu_clicked.clone(); + let menu_click = move |_| { + is_menu_clicked_clone.set(!*is_menu_clicked_clone); + }; + + // reset 'is_menu_clicked' state when path changes + let path = location.clone().unwrap().path().to_string(); + let is_menu_clicked_clone = is_menu_clicked.clone(); + use_effect_with(path, move |_| { + is_menu_clicked_clone.set(false); + }); + + // show / hide nav menu + let is_menu_clicked_clone = is_menu_clicked.clone(); + use_effect_with( + is_menu_clicked_clone.clone(), + move |_| match *is_menu_clicked_clone { + true => nav_display.set("flex".to_string()), + false => nav_display.set("none".to_string()), + }, + ); html! {
@@ -21,21 +57,32 @@ pub fn navbar() -> Html { >
- to={Route::Home}>{"Home"}> - to={Route::Posts}>{"Posts"}> - to={Route::About}>{"About"}> - - if store.admin { - to={Route::Insights}>{"Insights"}> - } - - if store.authenticated { - to={Route::Account}>{"Account"}> - - } else { - to={Route::SignIn}>{"SignIn"}> - to={Route::SignUp}>{"SignUp"}> - } + +
+ + + + +
+ to={Route::Home}>{"Home"}> + to={Route::Posts}>{"Posts"}> + to={Route::About}>{"About"}> + + if store.admin { + to={Route::Insights}>{"Insights"}> + } + + if store.authenticated { + to={Route::Account}>{"Account"}> + + } else { + + to={Route::SignIn}>{"SignIn"}> + to={Route::SignUp}>{"SignUp"}> + + } +
+
diff --git a/devblog/devblog/client/src/components/pager.rs b/devblog/devblog/client/src/components/pager.rs index 449783c..bf78c17 100644 --- a/devblog/devblog/client/src/components/pager.rs +++ b/devblog/devblog/client/src/components/pager.rs @@ -1,7 +1,7 @@ use stylist::Style; use yew::{function_component, html, Callback, Html, Properties}; -use crate::icons::icons::{ArrowLeft, ArrowRight}; +use crate::icons::icons::{ArrowLeftIcon, ArrowRightIcon}; // use gloo::console::log; const STYLE: &str = include_str!("styles/pager.css"); @@ -31,14 +31,14 @@ pub fn pager(props: &Props) -> Html {
// PAGE LEFT if props.page_num > 1 { - + } {props.page_num} // PAGE RIGHT if props.page_num < props.total_pages { - + }
diff --git a/devblog/devblog/client/src/components/styles/commentEdit.css b/devblog/devblog/client/src/components/styles/commentEdit.css index be114c1..2d345a7 100644 --- a/devblog/devblog/client/src/components/styles/commentEdit.css +++ b/devblog/devblog/client/src/components/styles/commentEdit.css @@ -4,7 +4,6 @@ } .edit-comment-btn svg { - fill: white; height: 12; } diff --git a/devblog/devblog/client/src/components/styles/navbar.css b/devblog/devblog/client/src/components/styles/navbar.css index 75ecf81..9eaf7eb 100644 --- a/devblog/devblog/client/src/components/styles/navbar.css +++ b/devblog/devblog/client/src/components/styles/navbar.css @@ -1,3 +1,60 @@ +.non-active, +.accounts a, +.nav-icon { + opacity: 0.8; +} + +.nav-menus-container { + display: flex; + margin-left: auto; +} + +.nav-drop-down { + display: flex; + margin-right: 20px; + flex-direction: column; + z-index: 20; +} + +.nav-drop-down:hover, +.nav-icon:hover, +.nav-links span:hover { + opacity: 1.0; + cursor: pointer; +} + +.nav-links a, +.nav-links form { + text-decoration: none; + padding-top: 5px; +} + +.nav-links span.active { + text-decoration: underline; +} + +.nav-icon { + height: 45; + font-size: 17; + cursor: pointer; + display: flex; + margin-top: 7px; +} + +.nav-links { + margin-top: 70px; + padding: 10px; + right: 2px; + position: fixed; + background-color: rgb(26, 32, 41); + flex-direction: column; +} + +.nav-accounts { + display: flex; + flex-direction: column; +} + .navbar { top: 0; left: 0; @@ -35,4 +92,14 @@ .logo { font-size: 25px; } +} */ + +/* @media(max-width: 450px) { + .nav-icon { + font-size: 50px; + } + + .nav-links { + margin-top: 50px; + } } */ \ No newline at end of file diff --git a/devblog/devblog/client/src/icons/icons.rs b/devblog/devblog/client/src/icons/icons.rs index 5e545e0..f3bda7c 100644 --- a/devblog/devblog/client/src/icons/icons.rs +++ b/devblog/devblog/client/src/icons/icons.rs @@ -25,35 +25,25 @@ pub fn downvote(props: &Props) -> Html { #[function_component(TrashIcon)] pub fn trash() -> Html { - html! { - - - - - } + html! {} } #[function_component(EditIcon)] pub fn edit() -> Html { - html! { - - - - - - - - - - } -} - -#[function_component(ArrowRight)] + html! {} +} + +#[function_component(ArrowRightIcon)] pub fn arrow_right() -> Html { html! {} } -#[function_component(ArrowLeft)] +#[function_component(ArrowLeftIcon)] pub fn arrow_left() -> Html { html! {} } + +#[function_component(MenuIcon)] +pub fn menu() -> Html { + html! {} +} diff --git a/devblog/devblog/client/src/main.rs b/devblog/devblog/client/src/main.rs index b67ebc1..a699d32 100644 --- a/devblog/devblog/client/src/main.rs +++ b/devblog/devblog/client/src/main.rs @@ -15,7 +15,7 @@ use api::*; use components::navbar::Navbar; use models::*; use store::Store; -use stylist::{yew::Global, Style}; +use stylist::yew::Global; use yew::{function_component, html, Html}; use yew_router::{BrowserRouter, Switch}; diff --git a/devblog/devblog/client/src/pages/about.rs b/devblog/devblog/client/src/pages/about.rs index 3cff05c..c1897fb 100644 --- a/devblog/devblog/client/src/pages/about.rs +++ b/devblog/devblog/client/src/pages/about.rs @@ -18,7 +18,7 @@ pub fn about() -> Html {
  • {"LinkedIn"}
    • - The DevBlog creator Andrew Smith + The DevBlog creator Andrew Smith diff --git a/devblog/devblog/client/src/pages/account.rs b/devblog/devblog/client/src/pages/account.rs index 3bdf252..579c854 100644 --- a/devblog/devblog/client/src/pages/account.rs +++ b/devblog/devblog/client/src/pages/account.rs @@ -3,6 +3,7 @@ use crate::{ store::Store, Api, User, }; +use gloo::utils::window; use gloo_net::http::Method; use std::rc::Rc; use stylist::Style; @@ -39,13 +40,20 @@ pub fn account() -> Html { let token = store.token.clone(); let api = Rc::new(api); Callback::from(move |_| { - helpers::on_click( - token.clone(), - api.clone(), - method.clone(), - nav.clone(), - dispatch.clone(), - ) + let mut confirm = true; + if method == Method::DELETE { + confirm = window().confirm_with_message("Are you sure?").unwrap(); + } + + if confirm { + helpers::on_click( + token.clone(), + api.clone(), + method.clone(), + nav.clone(), + dispatch.clone(), + ) + } }) }; diff --git a/devblog/devblog/client/src/pages/insights.rs b/devblog/devblog/client/src/pages/insights.rs index 0d00698..dee9eed 100644 --- a/devblog/devblog/client/src/pages/insights.rs +++ b/devblog/devblog/client/src/pages/insights.rs @@ -4,6 +4,7 @@ use crate::{ store::Store, Api, User, }; +use gloo::utils::window; use gloo_net::http::Method; use std::{ops::Deref, rc::Rc}; use stylist::Style; @@ -32,8 +33,8 @@ pub fn insights() -> Html { html! {
    -

    {"Total Users: "}

    -

    {"Subscribed Users: "}

    +

    {"Total Users: "}{users.len()}

    +

    {"Subscribed Users: "}{users.iter().filter(|u| u.subscribed).count() as u32}

    @@ -48,15 +49,20 @@ pub fn insights() -> Html { {for users.iter().map(|user|{ let current_users = users.clone(); let onclick = |name: String| { + + let token = store.token.clone(); let api = Rc::new(Api::DeleteAccount(user.username.clone())); let users = users.clone(); Callback::from(move |_| { - // remove deleted user from array - let mut current_users = current_users.deref().clone(); - if let Some(idx) = current_users.iter().position(|u| u.username == name) { - current_users.remove(idx); - users.set(current_users); + let confirm = window().confirm_with_message("Are you sure?").unwrap(); + if confirm { + // remove deleted user from array + let mut current_users = current_users.deref().clone(); + if let Some(idx) = current_users.iter().position(|u| u.username == name) { + current_users.remove(idx); + users.set(current_users); + } } helpers::on_click(token.clone(), Rc::clone(&api), Method::DELETE, None, None); }) diff --git a/devblog/devblog/client/src/theme.css b/devblog/devblog/client/src/theme.css index 78cf269..152c4ca 100644 --- a/devblog/devblog/client/src/theme.css +++ b/devblog/devblog/client/src/theme.css @@ -12,6 +12,14 @@ src: local("assets/fonts/Silkscreen-Bold.ttf"); } +a { + color: white; +} + +svg { + fill: white; +} + .post { background-color: #1a2029; }