shu
/
vesys-bank-server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make the layout more responsive

This commit is contained in:
Sebastian Hugentobler 2022-03-26 16:31:43 +01:00
parent 430547f821
commit 2808fb490a
Signed by: shu
GPG Key ID: BB32CF3CA052C2F0
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
http-client/src/components/main.rs
View File

@ -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>
</>
}

24
http-client/styles.css
View File

@ -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;