diff options
| -rw-r--r-- | css/manage/_client.scss | 14 | ||||
| -rw-r--r-- | src/app/manage/client/list/address.rs | 4 | ||||
| -rw-r--r-- | src/app/manage/client/list/list_item.rs | 15 |
3 files changed, 29 insertions, 4 deletions
diff --git a/css/manage/_client.scss b/css/manage/_client.scss index 7908333..36ff66a 100644 --- a/css/manage/_client.scss +++ b/css/manage/_client.scss @@ -9,6 +9,7 @@ border-bottom: 1px solid var(--link-fg); display: flex; flex-direction: column; + gap: 1rem; .header { display: flex; @@ -27,8 +28,19 @@ } .details { - width: 90%; + margin: auto; + width: 98%; display: grid; + grid-template-columns: 1fr 1fr 2fr; + + .contact-info, .client-address { + display: flex; + flex-direction: column; + + .title { + font-weight: bold; + } + } } } } diff --git a/src/app/manage/client/list/address.rs b/src/app/manage/client/list/address.rs index c57ac89..233de92 100644 --- a/src/app/manage/client/list/address.rs +++ b/src/app/manage/client/list/address.rs @@ -22,6 +22,7 @@ use crate::models::client; #[derive(Properties, PartialEq)] pub struct Props { pub address: client::Address, + pub title: String, } #[function_component(Address)] @@ -29,7 +30,8 @@ pub fn address(props: &Props) -> Html { html! { <div class={"client-address"}> - {props.address.address_text.clone()} + <span class={"title"}>{props.title.clone()}</span> + <span>{props.address.address_text.clone()}</span> </div> } } diff --git a/src/app/manage/client/list/list_item.rs b/src/app/manage/client/list/list_item.rs index b2d9ca9..8b78ad7 100644 --- a/src/app/manage/client/list/list_item.rs +++ b/src/app/manage/client/list/list_item.rs @@ -36,14 +36,25 @@ pub fn list_item(props: &Props) -> Html { </div> <div class={"details"}> - <div class={"general-info"}> + <div class={"contact-info"}> + <span class={"title"}>{"Contact Details:"}</span> + <span>{"Name - "}{props.client.contact.contact_name.clone()}</span> + <span>{"Phone - "}{props.client.contact.phone_number.clone()}</span> + <span>{"E-Mail - "}{props.client.contact.email_address.clone()}</span> + <span>{"Website - "}{props.client.contact.website.clone()}</span> </div> - <address::Address address={props.client.billing_address.clone()} /> + <address::Address title={"Billing Address:"} address={props.client.billing_address.clone()} /> <div class={"shipping-addresses-wrapper"}> </div> </div> + + <div class={"options"}> + <p> + {"Options (To Be Added)"} + </p> + </div> </div> } } |