Added a footer to all pages

This commit is contained in:
Franklin 2023-03-27 07:39:24 -04:00
parent 42a97376a0
commit 8d54067846
10 changed files with 137 additions and 6 deletions

BIN
assets/.DS_Store vendored Normal file

Binary file not shown.

BIN
assets/images/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

77
css/components/footer.css Normal file
View File

@ -0,0 +1,77 @@
.footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 170px;
background-color: #252631;
}
.footer-brand-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
height: 100%;
margin-left: 20px;
}
.footer-logo {
object-fit: cover;
width: 100px;
height: 100px;
}
.footer-copyright-text {
font-size: 9px;
font-family: Inter;
color: white;
white-space: pre-line;
}
.footer-credit-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 3px;
}
.footer-credit {
font-size: 13px;
font-family: Inter;
color: white;
}
.footer-credit-url {
font-size: 13px;
font-family: Inter;
color: #04B2D9;
border-bottom: 1px solid #04B2D9;
}
.footer-credit-url:hover {
font-size: 14px;
cursor: pointer;
transition-duration: 0.4s;
}
/*
.footer-call-to-action-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 20px;
border-bottom: 2px solid white;
}
.footer-call-to-action-input {
background-color: rgba(255, 255, 255, 0);
border: 0;
font-family: Inter;
color: white;
}
.footer-call-to-action-button{
font-size: 14px;
font-family: Inter;
color: white;
border: 2px solid white;
}*/

View File

@ -75,7 +75,7 @@ Divide the Details page into 3 main sections:
width: 100%; width: 100%;
gap: 15px; gap: 15px;
margin-top: -10px; margin-top: -10px;
margin-bottom: 100px; margin-bottom: 30px;
} }
.details-body-description { .details-body-description {
@ -225,3 +225,9 @@ Divide the Details page into 3 main sections:
height: 200px; height: 200px;
margin-bottom: 60px; margin-bottom: 60px;
} }
.details-body-disclaimer {
width: 100%;
font-size: 13px;
font-family: Inter;
}

View File

@ -13,6 +13,7 @@
<link data-trunk type="text/css" href="css/components/loading.css" rel="css" /> <link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
<link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" /> <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
<link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" /> <link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
<link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

26
src/components/footer.rs Normal file
View File

@ -0,0 +1,26 @@
use yew::prelude::*;
#[function_component(PageFooter)]
pub fn page_footer() -> Html {
html! {
<div class={"footer"}>
<div class={"footer-brand-container"}>
<img class={"footer-logo"} src={"images/proyectosenconstruccion_logo_transparent_bg.png"}/>
<div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div>
<div class={"footer-credit-container"}>
<div class={"footer-credit"}>{"Powered by"}</div>
<div class={"footer-credit-url"}>{"Blanco Studios"}</div>
</div>
</div>
/*
<div class={"footer-call-to-action-container"}>
<input placeholder={"AAA"} class={"footer-call-to-action-input"}/>
<div class={"footer-call-to-action-button"}>
{"Subscríbete"}
</div>
</div>
*/
</div>
}
}

View File

@ -4,3 +4,4 @@ pub mod project_card;
pub mod media_slideshow; pub mod media_slideshow;
pub mod floating_widget; pub mod floating_widget;
pub mod feature; pub mod feature;
pub mod footer;

View File

@ -4,11 +4,10 @@ use thousands::Separable;
use uuid::Uuid; use uuid::Uuid;
use yew::prelude::*; use yew::prelude::*;
use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget, feature::FeatureItem}, api::backend::get_project_listing}; use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget, feature::FeatureItem, footer::PageFooter}, api::backend::get_project_listing};
#[function_component(DetailsPage)] #[function_component(DetailsPage)]
pub fn details_page(props: &DetailsPageProps) -> Html { pub fn details_page(props: &DetailsPageProps) -> Html {
//TODO: query backend
let finished_loading = use_state(|| false); let finished_loading = use_state(|| false);
let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default()); let listing_handle: UseStateHandle<Listing> = use_state(|| Listing::default());
let selected_unit_handle = use_state(|| 0); let selected_unit_handle = use_state(|| 0);
@ -196,8 +195,14 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
// Features that always are shown // Features that always are shown
<FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}", unit.area)}/> <FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}", unit.area)}/>
</div> </div>
<div class={"details-body-divider"}></div>
<div class={"details-body-disclaimer"}>
{"*Unidades sujetas a disponibilidad"}
</div>
</div> </div>
} }
} else { } else {
@ -221,6 +226,14 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
</div> </div>
{
if *finished_loading {
html! { <PageFooter/> }
} else {
html! {}
}
}
</> </>
} }
} }

View File

@ -4,7 +4,7 @@ use yew::prelude::*;
use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with}; use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};
use jl_types::domain::option_wrapper::OptionWrapper; use jl_types::domain::option_wrapper::OptionWrapper;
use crate::{components::{nav_bar::NavigationBar, project_card::ProjectCard}, api::backend::{get_all_cities, get_all_districts_in_city, get_all_projects_with_filters_paged}}; use crate::{components::{nav_bar::NavigationBar, project_card::ProjectCard, footer::PageFooter}, api::backend::{get_all_cities, get_all_districts_in_city, get_all_projects_with_filters_paged}};
#[function_component(SearchPage)] #[function_component(SearchPage)]
@ -254,6 +254,13 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
} }
</div> </div>
{
if *finished_loading {
html! { <PageFooter/> }
} else {
html! { }
}
}
</> </>
} }
} }