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

make the layout more responsive

Browse Source
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")}> <h1 class={classes!("title")}>
{"welcome to your vaults"} {"welcome to your vaults"}
</h1> </h1>
<Accounts account_nrs={self.account_nrs.clone()} selected_nr={self.selected_nr.clone()} /> <div class={classes!("inner-content")}>
<Account balance={self.selected_balance} owner={self.selected_owner.clone()} nr={self.selected_nr.clone()} account_nrs={self.account_nrs.clone()} /> <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> </main>
</> </>
} }

24
http-client/styles.css
View File

@ -7,12 +7,19 @@ html, body {
} }
.title { .title {
margin: 0; margin-top: 0;
}
.inner-content {
display: flex;
justify-content: flex-start;
gap: 10px;
} }
.account { .account {
border-style: solid; border-style: solid;
border-color: black; border-color: black;
flex-grow: 1;
} }
.account__grid { .account__grid {
@ -102,6 +109,9 @@ html, body {
.accounts { .accounts {
list-style-type: none; list-style-type: none;
display: inline-block;
min-width: min-content;
margin: 0;
padding: 0.5em; padding: 0.5em;
border-style: solid; border-style: solid;
border-color: black; border-color: black;
@ -130,7 +140,17 @@ html, body {
min-width: 370px; 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 { .account__grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;