barthiv73098/Testosteroth
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Balance added + entry list structure

Browse Source
This commit is contained in:
simongig 2019-11-05 17:05:45 +01:00
parent 473e56adfb
commit f9a77cb191
4 changed files with 75 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/icons/caret-down-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" class="svg-inline--fa fa-caret-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 359 B

1
components/icons/user-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 484 B

25
index.html
View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="index_styles.css"> <link rel="stylesheet" href="index_styles.css">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<nav> <nav>
@ -18,13 +19,29 @@
</nav> </nav>
<div class="balance-list"> <div class="balance-list">
<h1>Umsätze</h1> <div class="overview">
<div id="title">Balance:</div>
<div id="total-amount">500,00 Euro</div>
</div>
<div class="grid-wrapper"> <div class="grid-wrapper">
<div class="box"></div> <div class="box">
<div class="box"></div> <div class="dropdown"></div>
<div class="box"></div> <span class="entry">Beschreibung</span>
<span class="amount">Betrag</span>
</div>
<div class="box">
<div class="dropdown"></div>
<div class="entry">Beschreibung</div>
<div class="amount">Betrag</div>
</div>
<div class="box">
<div class="dropdown"></div>
<div class="entry">Beschreibung</div>
<div class="amount">Betrag</div>
</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

55
index_styles.css
View File

@ -15,12 +15,61 @@
.grid-wrapper { .grid-wrapper {
display: grid; display: grid;
padding: 4rem 4rem 0 4rem; padding: 0 2em 0 2em;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 100px 100px 100px; grid-template-rows: 80px 80px 80px;
grid-gap: 10px; grid-gap: 10px;
} }
.box { .box {
background-color: grey; background-color: #C4C4C4;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-areas: "dropdown entry entry entry entry entry entry entry entry entry amount amount";
font-size: 2em;
border-radius: 10px;
}
.entry {
display: flex;
vertical-align: center;
align-items: center;
padding: 5px;
grid-area: entry;
}
.amount {
display: flex;
vertical-align: center;
align-items: center;
padding: 10px;
text-align: right;
grid-area: amount;
}
.balance-list {
display: grid;
grid-template-areas: ;
}
.overview {
text-align: center;
padding: 20px;
}
#title {
font-size: 2em;
}
#total-amount {
font-size: 3em;
color: green;
}
.dropdown {
grid-area: dropdown;
background-image: url("./components/icons/caret-down-solid.svg");
background-repeat: no-repeat;
background-position: center;
fill: #F3f3F3
} }