diff --git a/assets/images/logo-color.png b/assets/images/logo-color.png new file mode 100644 index 0000000..fcc911c Binary files /dev/null and b/assets/images/logo-color.png differ diff --git a/assets/images/logo-white.png b/assets/images/logo-white.png new file mode 100644 index 0000000..aae8832 Binary files /dev/null and b/assets/images/logo-white.png differ diff --git a/css/body.css b/css/body.css index e139c68..c3ec7de 100644 --- 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); } diff --git a/css/navbar.css b/css/navbar.css index d3f40a7..33a7036 100644 --- 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; } } diff --git a/css/project_card.css b/css/project_card.css index 5132a45..9da27ad 100644 --- 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;*/ diff --git a/css/search.css b/css/search.css index 780623a..de81730 100644 --- 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; + } } \ No newline at end of file diff --git a/index.html b/index.html index e693fed..9a021c8 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - + diff --git a/src/components/nav_bar.rs b/src/components/nav_bar.rs index 9a1fe39..a073008 100644 --- 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 = 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! {
- -
- {NAVBAR_TITLE} -
+
-
+
{NAVBAR_COL_LANDING}
-
- {NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION} -
- -
- {NAVBAR_COL_PROYECTOS_ACABADOS} -
- -
- {NAVBAR_COL_CONTACTO} +
+ {NAVBAR_COL_PROYECTOS}
+ { + if (*window_device_handle) == WindowDevice::Mobile { + html! { +
+ {NAVBAR_COL_CONTACTO} +
+ } + } else { html! {} } + }
-
- -
+ { + if (*window_device_handle) == WindowDevice::Mobile { + html! { +
+ { + if *navbar_toggle { + html! { + <> +
+
+
+ + } + } else { + html! { + <> +
+
+ + } + } + } +
+ } + } else { + html! { +
+ {"Contáctanos"} +
+ } + } + } +
} +} + +#[derive(PartialEq, Eq, PartialOrd, Ord)] +enum WindowDevice { + Desktop, + Mobile } \ No newline at end of file diff --git a/src/constants/mod.rs b/src/constants/mod.rs index 406754a..e0eceba 100644 --- 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"; diff --git a/src/pages/search.rs b/src/pages/search.rs index 22a445c..0813b2f 100644 --- 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> = use_state(|| Vec::new()); let page_counter: UseStateHandle = 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::>>(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!{ <>
// Filters +
+
+ {"Estado del Proyecto"} +
+
+ +
+ {"En construcción"} +
+
+ {"Terminado"} +
+
+
+
{"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, -} diff --git a/src/routes/main_router.rs b/src/routes/main_router.rs index 8c4d032..0dcff53 100644 --- 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! { }, - Route::Search { project_state } => html! { }, + Route::Search => html! { }, Route::Details { project_id } => html! { }, Route::NotFound => html! { }, Route::Contact => html! { }