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

fix layout switching between grid and flexbox

Browse Source
This commit is contained in:
Sebastian Hugentobler 2022-03-26 16:13:18 +01:00
parent 4f1b866ca5
commit 430547f821
Signed by: shu
GPG Key ID: BB32CF3CA052C2F0
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -159,9 +159,9 @@ impl Component for Account {
</select>
</div>
<button onclick={on_deposit} class={classes!("account__button")} disabled={!self.amount_valid}>{"deposit"}</button>
<button onclick={on_withdraw} class={classes!("account__button")} disabled={!self.amount_valid}>{"withdraw"}</button>
<button onclick={on_transfer} class={classes!("account__button")} disabled={!self.amount_valid || !self.is_transfer_account_valid()}>{"transfer"}</button>
<button onclick={on_deposit} class={classes!("account__button", "account__deposit")} disabled={!self.amount_valid}>{"deposit"}</button>
<button onclick={on_withdraw} class={classes!("account__button", "account__withdraw")} disabled={!self.amount_valid}>{"withdraw"}</button>
<button onclick={on_transfer} class={classes!("account__button", "account__transfer")} disabled={!self.amount_valid || !self.is_transfer_account_valid()}>{"transfer"}</button>
</fieldset>
</section>
</>

24
http-client/styles.css
View File

@ -48,6 +48,21 @@ html, body {
flex-direction: column;
}
.account__deposit {
grid-column: 1;
grid-row: 2;
}
.account__withdraw {
grid-column: 2;
grid-row: 2;
}
.account__transfer {
grid-column: 3;
grid-row: 2;
}
.account__button {
color: black;
border-radius: 0;
@ -117,12 +132,7 @@ html, body {
@media (max-width: 605px) {
.account__grid {
display: grid;
grid-template-columns: 1fr;
}
.account__accounts {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
}
}