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> </select>
</div> </div>
<button onclick={on_deposit} class={classes!("account__button")} disabled={!self.amount_valid}>{"deposit"}</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")} disabled={!self.amount_valid}>{"withdraw"}</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")} disabled={!self.amount_valid || !self.is_transfer_account_valid()}>{"transfer"}</button> <button onclick={on_transfer} class={classes!("account__button", "account__transfer")} disabled={!self.amount_valid || !self.is_transfer_account_valid()}>{"transfer"}</button>
</fieldset> </fieldset>
</section> </section>
</> </>

24
http-client/styles.css
View File

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