Added grid for results
This commit is contained in:
parent
39270a6fd2
commit
c3cb0b8add
@ -1,5 +1,33 @@
|
|||||||
|
.results-container-padding {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #E3F0FF;
|
||||||
|
|
||||||
|
}
|
||||||
.results-container {
|
.results-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 20px;
|
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;
|
||||||
}
|
}
|
@ -4,8 +4,28 @@ use yew::prelude::*;
|
|||||||
pub fn results_section() -> Html {
|
pub fn results_section() -> Html {
|
||||||
|
|
||||||
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>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user