make the layout more responsive
This commit is contained in:
parent
430547f821
commit
2808fb490a
@ -99,8 +99,10 @@ impl Component for Main {
|
||||
<h1 class={classes!("title")}>
|
||||
{"welcome to your vaults"}
|
||||
</h1>
|
||||
<Accounts account_nrs={self.account_nrs.clone()} selected_nr={self.selected_nr.clone()} />
|
||||
<Account balance={self.selected_balance} owner={self.selected_owner.clone()} nr={self.selected_nr.clone()} account_nrs={self.account_nrs.clone()} />
|
||||
<div class={classes!("inner-content")}>
|
||||
<Accounts account_nrs={self.account_nrs.clone()} selected_nr={self.selected_nr.clone()} />
|
||||
<Account balance={self.selected_balance} owner={self.selected_owner.clone()} nr={self.selected_nr.clone()} account_nrs={self.account_nrs.clone()} />
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
|
@ -7,12 +7,19 @@ html, body {
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.account {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.account__grid {
|
||||
@ -102,6 +109,9 @@ html, body {
|
||||
|
||||
.accounts {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
min-width: min-content;
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
@ -130,7 +140,17 @@ html, body {
|
||||
min-width: 370px;
|
||||
}
|
||||
|
||||
@media (max-width: 605px) {
|
||||
@media (max-width: 1005px) {
|
||||
.inner-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 615px) {
|
||||
.accounts {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.account__grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
Loading…
Reference in New Issue
Block a user