karma/zucchetti-sa5
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

Main page (transactions) is now responsive

Browse Source
This commit is contained in:
Arnaud Fauconnet 2022-11-04 11:01:26 +01:00
parent c7f388f786
commit 4c9b1927e8
2 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Transactions/Table.tsx
View File

@ -49,9 +49,9 @@ export default () => {
<TableCell component="th" scope="row">
{row.date.toLocaleDateString()}
</TableCell>
<TableCell>{row.description}</TableCell>
<TableCell className="description">{row.description}</TableCell>
<TableCell align="right" className={"amount " + (row.amount < 0 ? "negative" : "positive")}>{CHF_currency(row.amount)}</TableCell>
<TableCell align="right">{CHF_currency(row.total)}</TableCell>
<TableCell align="right" className="total">{CHF_currency(row.total)}</TableCell>
</TableRow>
))}
</TableBody>

71
src/scss/transactions.scss
View File

@ -1,6 +1,7 @@
@use "style.scss";
@import "variables.module.scss";
body.transactions {
background-image: url("/public/backgroundCurvyLines.png");
@ -67,6 +68,15 @@ body.transactions {
// justify-content: center;
align-items: center;
.description {
text-overflow: ellipsis;
white-space: nowrap;
// overflow: hidden;
}
.amount, .total{
min-width: 6em;
}
.amount.positive {
color: $fg-green;
}
@ -79,6 +89,7 @@ body.transactions {
aside {
grid-column: 1;
grid-row: 2;
min-width: 173px;
form {
display: flex;
@ -95,4 +106,64 @@ body.transactions {
}
}
}
@media only screen and (max-width: 1044px) {
div#tablePage {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 10fr 1fr;
header,
main,
aside,
footer {
grid-column: 1;
}
header {
grid-row: 1;
position: sticky;
.box.left {
display: none;
}
}
aside {
grid-row: 2;
min-width: 0;
form {
flex-direction: row;
h3 {
display: none;
}
h2 {
text-align: center;
}
.inputs-box {
// background: red;
width: 50vw;
display: flex;
flex-direction: row;
justify-content: space-evenly;
.input {
// background: blue;
width: 10em;
}
}
}
}
main {
grid-row: 3;
}
footer {
grid-row: 4;
}
}
}
}