Perfected Navbar

2023-04-04 11:14:16 -04:00 · 2023-04-04 11:14:16 -04:00 · 2df40ac348
commit 2df40ac348
parent 508a165208
11 changed files with 304 additions and 87 deletions
--- a/assets/images/logo-color.png
+++ b/assets/images/logo-color.png
--- a/assets/images/logo-white.png
+++ b/assets/images/logo-white.png
--- a/css/body.css
+++ b/css/body.css
@ -8,6 +8,6 @@ body {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
-    background-color: rgb(0, 0, 0, 0.02);
+    background-color: rgb(243, 243, 243);

 }
--- a/css/navbar.css
+++ b/css/navbar.css
@ -1,6 +1,6 @@
 /* Mobile View */
 .navbar-background {
-    border-top: 3px solid #04B2D9;
+    /*border-top: 3px solid #04B2D9;*/
    position: fixed;
    z-index: 1;
    width: 100%;
@ -9,8 +9,9 @@
    justify-content: end;
    align-items: center;
    align-items: stretch;
-    background-color: #252631;
+    background-color: #02114A;
    min-height: 74px;
+    border-radius: 0px 0px 16px 16px;
 }

 .navbar-container {
@ -26,14 +27,52 @@
    font-size: 20pt;
    color: white;
    display: flex;
+    flex-direction: column;
    justify-content: center;
-    align-items: center;
+    align-items: flex-end;
+    padding: 0px;
+    gap: 4px;
    margin-top: 5px;
+    
    max-height: 35px;
    min-width: 30px;
    padding: 15px;
 }

+.navbar-hamburger-bar-1 {
+    transition-duration: 0.4s;
+    width: 16px;
+    height: 3px;
+    background: #FFFFFF;
+    border-radius: 8888px;
+}
+.navbar-hamburger-bars {
+    transition-duration: 0.4s;
+    width: 27px;
+    height: 3px;
+    background: #FFFFFF;
+    border-radius: 8888px;
+}
+
+.navbar-hamburger-x-1 {
+    transition-duration: 0.2s;
+    position: absolute;
+    width: 27px;
+    height: 3px;
+    background: #FFFFFF;
+    border-radius: 8888px;
+    transform: rotate(-43.4deg);
+}
+.navbar-hamburger-x-2 {
+    transition-duration: 0.2s;
+    position: absolute;
+    width: 27px;
+    height: 3px;
+    background: #FFFFFF;
+    border-radius: 8888px;
+    transform: rotate(43.4deg);
+}
+
 .navbar-hamburger:hover {
    background-color: #ffffff14;
    font-size: 22pt;
@ -52,21 +91,32 @@
 }

 .navbar-open {
+    margin-top: 20px;
+    margin-right: -50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
-    margin-top: 10px;
+    align-items: end;
 }

 .navbar-item {
    color: white;
    font-size: 12pt;
    padding-top: 10px;
-    padding-left: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
    padding-bottom: 10px;
-    font-family: Source Sans Pro;
+    font-family: Space Grotesk;
+}
+.navbar-item-selected {
+    color: white;
+    font-size: 12pt;
+    padding-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    font-family: Space Grotesk;
 }
-
 .navbar-item:hover {
    background-color: #ffffff14;
    font-size: 13pt;
@ -89,25 +139,29 @@
    cursor: pointer;
 }

-.navbar-title {
-    color: white;
-    font-size: 16pt;
-    font-weight: 100;
-    font-family: 'Gill Sans';
-}
-
 .navbar-image {
-    max-width: 50px;
-    max-height: 50px;
+    width: 60px;
+    height: 50px;
+    object-fit: cover;
+    margin-top: -10px;
 }

 /* Desktop view */
-@media only screen and (min-width: 850px) {
+@media only screen and (min-width: 750px) {
+    
+    .navbar-background {
+        background-color: rgb(243, 243, 243);
+        border-radius: 0px;
+        border-bottom: solid 0.5px #d8d8d8;
+        min-height: 60px;
+    }
+
    .navbar-container {
        display: flex;
        flex-direction: row;
-        justify-content: flex-start;
-        align-items: stretch;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px;
    }

    .navbar {
@ -120,9 +174,10 @@
    .navbar-closed {
        display: flex;
        flex-direction: row;
-        justify-content: flex-end;
+        justify-content: center;
        flex-grow: 1;
        margin-top: 0px;
+        gap: 5%;
    }

    .navbar-open {
@ -134,31 +189,52 @@
    }

    .navbar-item {
-        color: white;
+        color: #000000;
        font-size: 12pt;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-family: Source Sans Pro;
+        font-weight: 200;
+    }
+    .navbar-item-selected {
+        color: #02114A;
+        font-size: 12pt;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-family: Source Sans Pro;
+        font-weight: bold;
    }

    .navbar-item:hover {
-        background-color: #ffffff14;
-        font-size: 13pt;
-        font-weight: bold;
-        border-radius: 3px;
-        transition-duration: 0.3s;
+        background-color: rgb(0, 0, 0, 0);
+        font-size: 12pt;
+        font-weight: normal;
+        border-radius: 0px;
+        transition-duration: 0.0s;
        cursor: pointer;
    }
-
-    .navbar-title {
+    .navbar-item-contact-us {
+        font-size: 14px;
+        font-family: Space Grotesk;
+        
        color: white;
-        font-size: 23pt;
-        font-family: Sacramento;
-    }
+        background-color: #02114A;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;

-    .navbar-hamburger {
-        display: none;
+        padding: 0px;
+        margin-top: 10px;
+        margin-right: 30px;
+        
+        max-height: 35px;
+        min-width: 30px;
+        padding: 2px 10px;
+        border-radius: 5px;
+        cursor: pointer;
    }
 }
--- a/css/project_card.css
+++ b/css/project_card.css
@ -4,7 +4,8 @@
    background-color: white;
    height: 495px;
    width: 390px;
-    min-width: 80%;
+    max-width: 400px;
+    max-height: 505px;

    border-radius: 6px;
    display: flex;
@ -17,12 +18,6 @@
    gap: 6px;
 }

-@media only screen and (max-width: 400px) {
-    .project-listing-card {
-       width: 90%;
-    }
-}
-
 .project-listing-card:hover {
    cursor: pointer;
    /*border: 3px solid #04B2D9;*/
--- a/css/search.css
+++ b/css/search.css
@ -13,7 +13,6 @@
    flex-direction: column;
    gap: 25px;
    justify-content: stretch;
-    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
 }
@ -49,6 +48,39 @@
    font-size: 16px;
 }

+.project-search-filter-select {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    
+    font-size: 13px;
+    font-weight: 400;
+    font-family: Space Grotesk;
+    text-align: center;
+
+    border: 1px solid #02114A;
+
+    cursor: pointer;
+}
+.project-search-filter-select-item {
+    padding: 15px 10px;
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid #02114A;
+}
+
+.project-search-filter-select-item-selected {
+    color: white;
+
+    padding: 15px 10px;
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid #02114A;
+    background-color: #02114A;
+}

 .project-search-divider {
    width: 100%;
@ -85,4 +117,39 @@
    align-items: center;
    margin-bottom: 50px;
    gap: 30px;
+}
+
+@media only screen and (min-width: 750px) {
+    .project-search-filters-container {
+        flex-direction: row;
+        flex-flow: row wrap;
+        justify-content: center;
+        align-items: center;
+    }
+    .project-search-filter-container {
+        max-width: 450px;
+        min-width: 400px;
+    }
+    .project-search-button {
+        min-width: 400px;
+        margin-top: 30px;
+    }
+    .project-search-filter-select {
+        width: 100%;
+        
+        font-size: 15px;
+        font-weight: 400;
+        font-family: Space Grotesk;
+        text-align: center;
+    
+        border: 1px solid #02114A;
+    
+        cursor: pointer;
+    }
+    .project-search-results-container {
+        flex-direction: row;
+        flex-flow: row wrap;
+        justify-content: center;
+        align-items: center;
+    }
 }
--- a/index.html
+++ b/index.html
@ -17,7 +17,7 @@


        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Space+Grotesk" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">
        <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>

--- a/src/components/nav_bar.rs
+++ b/src/components/nav_bar.rs
@ -1,18 +1,19 @@
-use jl_types::domain::project_state::ProjectState;
+use stdweb::web::{IEventTarget, event::ResizeEvent};
 use yew::prelude::*;
-use yew_router::prelude::use_navigator;
+use yew_router::prelude::{use_navigator, use_route};

-use crate::{routes::main_router::{Route}, constants::{NAVBAR_TITLE, NAVBAR_COL_LANDING, NAVBAR_COL_PROYECTOS_ACABADOS, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}};
+use crate::{routes::main_router::{Route}, constants::{NAVBAR_COL_LANDING, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS}};
 //use yew_router::prelude::use_navigator;


+
 #[function_component(NavigationBar)]
 pub fn navigation_bar() -> Html {
+    let current_route: Option<Route> = use_route();
    let navigator = use_navigator().unwrap();
    let cloned_navigator_1 = navigator.clone();
    let cloned_navigator_2 = navigator.clone();
    let cloned_navigator_3 = navigator.clone();
-    let cloned_navigator_4 = navigator.clone();
    let cloned_navigator_5 = navigator.clone();

    let navbar_toggle = use_state(|| true);
@ -20,39 +21,92 @@ pub fn navigation_bar() -> Html {
        let navbar_toggle = navbar_toggle.clone();
        Callback::from(move |_| navbar_toggle.set(!*navbar_toggle))
    };
-
+    let window_device_handle = use_state_eq(|| if stdweb::web::window().inner_width() > 750 {
+        WindowDevice::Desktop
+    } else {
+        WindowDevice::Mobile
+    });
+    let window_device_handle_cloned = window_device_handle.clone();
+    stdweb::web::window().add_event_listener(move |_: ResizeEvent| {
+        let current_width = stdweb::web::window().inner_width();
+        if current_width >= 750 {
+            window_device_handle_cloned.set(WindowDevice::Desktop)
+        } else {
+            window_device_handle_cloned.set(WindowDevice::Mobile)
+        }
+    });
+    
+    
    html! {
        <div class={"navbar-background"}>
            <div class={"navbar-container"}>
                <div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_5.push(&Route::LandingPage)}>
-                    <img class={"navbar-image"} src="images/proyectosenconstruccion_logo_transparent_bg.png" alt=""/>
-                    <div class={"navbar-title"}>
-                        {NAVBAR_TITLE}
-                    </div>
+                    <img class={"navbar-image"} src={ if (*window_device_handle) == WindowDevice::Mobile {"images/logo-white.png"} else {"images/logo-color.png"}} alt=""/>
                </div>
                
                
                <div class={if *navbar_toggle {"navbar-closed"} else {"navbar-open"}}>
-                    <div onclick={move |_| cloned_navigator_1.push(&Route::LandingPage)} class={"navbar-item"}>
+                    <div onclick={move |_| cloned_navigator_1.push(&Route::LandingPage)} class={
+                        if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::LandingPage) {"navbar-item-selected"} else {"navbar-item"}
+                        }>
                        {NAVBAR_COL_LANDING}
                    </div>

-                    <div onclick={move |_| cloned_navigator_2.push(&Route::Search { project_state: ProjectState::InConstruction })} class={"navbar-item"}>
-                        {NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION}
-                    </div>
-
-                    <div onclick={move |_| cloned_navigator_3.push(&Route::Search { project_state: ProjectState::Finished })} class={"navbar-item"}>
-                        {NAVBAR_COL_PROYECTOS_ACABADOS}
-                    </div>
-
-                    <div onclick={move |_| cloned_navigator_4.push(&Route::Contact)} class={"navbar-item"}>
-                        {NAVBAR_COL_CONTACTO}
+                    <div onclick={move |_| cloned_navigator_2.push(&Route::Search)} class={
+                        if current_route.is_some() && matches!(current_route.unwrap(), Route::Search) {"navbar-item-selected"} else {"navbar-item"}
+                    }>
+                        {NAVBAR_COL_PROYECTOS}
                    </div>
+                    {
+                        if (*window_device_handle) == WindowDevice::Mobile {
+                            html! {
+                                <div onclick={move |_| cloned_navigator_3.push(&Route::Contact)} class={"navbar-item"}>
+                                    {NAVBAR_COL_CONTACTO}
+                                </div>
+                            }
+                        } else { html! {} }
+                    }
                </div>
            </div>
-            <div class={"navbar-hamburger"} onclick={on_click_hamburger}>
-                <i class="fa-solid fa-bars" ></i>
-            </div>
+            {
+                if (*window_device_handle) == WindowDevice::Mobile {
+                    html! {
+                        <div class={"navbar-hamburger"} onclick={on_click_hamburger}>
+                        {
+                            if *navbar_toggle {
+                                html! {
+                                    <>
+                                    <div class={"navbar-hamburger-bar-1"}></div>
+                                    <div class={"navbar-hamburger-bars"}></div>
+                                    <div class={"navbar-hamburger-bars"}></div>
+                                    </>
+                                }
+                            } else {
+                                html! {
+                                    <>
+                                    <div class={"navbar-hamburger-x-1"}></div>
+                                    <div class={"navbar-hamburger-x-2"}></div>
+                                    </>
+                                }
+                            }
+                        }
+                        </div>
+                    }
+                } else {
+                    html! {
+                        <div class={"navbar-item-contact-us"}>
+                            {"Contáctanos"}
+                        </div>
+                    }
+                }
+            }
+            
        </div>
    }
+}
+
+#[derive(PartialEq, Eq, PartialOrd, Ord)]
+enum WindowDevice {
+    Desktop,
+    Mobile
 }
--- a/src/constants/mod.rs
+++ b/src/constants/mod.rs
@ -1,7 +1,5 @@
-pub const NAVBAR_TITLE: &str = "Proyectos en Construcción";
 pub const NAVBAR_COL_LANDING: &str = "Inicio";
-pub const NAVBAR_COL_PROYECTOS_ACABADOS: &str = "Listos para entrega";
-pub const NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION: &str = "En construcción";
+pub const NAVBAR_COL_PROYECTOS: &str = "Proyectos";
 pub const NAVBAR_COL_CONTACTO: &str = "Contacto";

 pub const PRIMARY_COLOR: &str = "#41BDD9";
--- a/src/pages/search.rs
+++ b/src/pages/search.rs
@ -8,18 +8,16 @@ use crate::{components::{nav_bar::NavigationBar, project_card::ProjectCard, foot


 #[function_component(SearchPage)]
-pub fn search_page(props: &SearchPageProperties) -> Html {
+pub fn search_page() -> Html {
    // let force_update_trigger = use_force_update();
    let cities_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
    let districts_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
    let search_results_handle: UseStateHandle<Vec<ProjectCardDto>> = use_state(|| Vec::new());
    let page_counter: UseStateHandle<i64> = use_state(|| 1);
    let finished_loading = use_state(|| false);
+    let project_state_filter_handle = use_state_eq(|| ProjectState::InConstruction);

-    let mut filters = Vec::new();
-    if props.project_state.eq(&ProjectState::Finished) {
-        filters.push(Filter::Finished);
-    }
+    let filters = Vec::new();
    
    // All code to execute on first render and never again
    use_state(|| {
@ -130,7 +128,6 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
        class_css: Some("project-search-filter-item".into())
    });

-    //TODO: District dropdown should only show districts in city, otherwise show nothing or disabled
    let project_district_drop_down = comp_with::<DropDown<OptionWrapper<String>>>(DropDownProps {
        initial: OptionWrapper::new(None),
        options: (*districts_handle).clone(),
@ -151,12 +148,11 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
        let project_condition_filter = project_condition_filter.clone();
        let project_city_filter = project_city_filter.clone();
        let project_district_filter = project_district_filter.clone();
-        
-        let props = props.clone();
+        let project_state_filter = project_state_filter_handle.clone();

        Callback::from(move |_| {
            let mut filters = Vec::new();
-            if props.project_state.eq(&ProjectState::Finished) {
+            if (*project_state_filter).eq(&ProjectState::Finished) {
                filters.push(Filter::Finished);
            }
            match &(*project_type_filter).option {
@ -188,12 +184,49 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
                info!("done");
            });
    })};
+
+    let inconstruction_state_select_onclick = {
+        let project_state_filter = project_state_filter_handle.clone();
+        Callback::from(move |_| {
+            project_state_filter.set(ProjectState::InConstruction)
+        })
+    };
+
+    let finished_state_select_onclick = {
+        let project_state_filter = project_state_filter_handle.clone();
+        Callback::from(move |_| {
+            project_state_filter.set(ProjectState::Finished)
+        })
+    };
    html!{
        <>
            <NavigationBar/>
            <div class={"page-container"}>
                <div class={"project-search-container"}>
                    <div class={"project-search-filters-container"}> // Filters
+                        <div class={"project-search-filter-container"}>
+                            <div class={"project-search-filter-label"}>
+                                {"Estado del Proyecto"}
+                            </div>
+                            <div class={"project-search-filter-select"}>
+                                
+                                <div class={if (*project_state_filter_handle) == ProjectState::InConstruction {
+                                    "project-search-filter-select-item-selected"
+                                } else {
+                                    "project-search-filter-select-item"
+                                }} onclick={inconstruction_state_select_onclick}>
+                                    {"En construcción"}
+                                </div>
+                                <div class={if (*project_state_filter_handle) == ProjectState::Finished {
+                                    "project-search-filter-select-item-selected"
+                                } else {
+                                    "project-search-filter-select-item"
+                                }} onclick={finished_state_select_onclick}>
+                                    {"Terminado"}
+                                </div>
+                            </div>
+                        </div>
+
                        <div class={"project-search-filter-container"}>
                            <div class={"project-search-filter-label"}>
                                {"Tipo de Proyecto"}
@ -264,8 +297,3 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
        </>
    }
 }
-
-#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Properties)]
-pub struct SearchPageProperties {
-    pub project_state: ProjectState,
-}
--- a/src/routes/main_router.rs
+++ b/src/routes/main_router.rs
@ -1,4 +1,3 @@
-use jl_types::domain::project_state::ProjectState;
 use yew_router::prelude::*;
 use yew::prelude::*;

@ -10,8 +9,8 @@ use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::Details
 pub enum Route {
    #[at("/")]
    LandingPage,
-    #[at("/search/:project_state")]
-    Search { project_state: ProjectState },
+    #[at("/search")]
+    Search,
    #[at("/details/:project_id")]
    Details { project_id: Uuid },
    #[at("/contact")]
@ -25,7 +24,7 @@ pub enum Route {
 pub fn switch(routes: Route) -> Html {
    match routes {
        Route::LandingPage => html! { <LandingPage/> },
-        Route::Search { project_state } => html! { <SearchPage project_state={project_state}/> },
+        Route::Search => html! { <SearchPage/> },
        Route::Details { project_id } => html! { <DetailsPage project_id={project_id}/> },
        Route::NotFound => html! { <NotFoundPage/> },
        Route::Contact => html! { <ContactPage/> }