Added a footer to all pages
This commit is contained in:
parent
42a97376a0
commit
8d54067846
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 1.5 MiB |
|
@ -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;
|
||||||
|
}*/
|
|
@ -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;
|
||||||
|
}
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
@ -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!("{}m²", unit.area)}/>
|
<FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}m²", 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! {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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! { }
|
||||||
|
}
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue