franklinblanco/realtor-lp-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added grid for results

Browse Source
This commit is contained in:
Franklin 2023-05-11 15:29:47 -04:00
parent 39270a6fd2
commit c3cb0b8add
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/components/page/results.css
View File

@ -1,5 +1,33 @@
.results-container-padding {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #E3F0FF;
}
.results-container {
display: grid;
gap: 20px;
width: 90%;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(6, calc((90vw / 2) - 20px));
}
.result-square {
background-color: red;
}
.result-portrait {
background-color: blue;
grid-row: span 2;
}
.result-landscape {
background-color: green;
grid-column: span 2;
}
.result-instagram {
background-color: yellow;
grid-column: span 2;
grid-row: span 2;
}

22
src/components/page/results.rs
View File

@ -4,8 +4,28 @@ use yew::prelude::*;
pub fn results_section() -> Html {
html! {
<div class={"results-container"}>
<div class={"results-container-padding"}>
<div class={"results-container"}>
<div class={"result-square"}>
</div>
<div class={"result-portrait"}>
</div>
<div class={"result-square"}>
</div>
<div class={"result-landscape"}>
</div>
<div class={"result-instagram"}>
</div>
<div class={"result-square"}>
</div>
<div class={"result-square"}></div>
</div>
</div>
}
}