janis/time-tracking
1
0
Fork 0
mirror of https://github.com/DerTyp7/time-tracking.git synced 2025-10-29 04:22:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

d

Browse Source
This commit is contained in:
Janis M
2022-05-04 13:46:22 +02:00
parent a9a2708d5d
commit 569b381aa0
2 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/Nav.jsx
View File

@@ -102,7 +102,8 @@ function Nav() {
</a> </a>
</div> </div>
</div> </div>
<div> {/* <div>
<div className="nav-info"> <div className="nav-info">
<p <p
className={ className={
@@ -112,7 +113,7 @@ function Nav() {
{gz} GZ {gz} GZ
</p> </p>
</div> </div>
</div> </div> */}
<div className="month-navigation"> <div className="month-navigation">
<div <div
className="nav-arrows-previous" className="nav-arrows-previous"
@@ -128,7 +129,7 @@ function Nav() {
onClick={nextMonth} onClick={nextMonth}
></div> ></div>
</div> </div>
<div> {/*<div>
<div className="working-hours"> <div className="working-hours">
<div className="working-hours-input-block"> <div className="working-hours-input-block">
<div className="working-hours-input-container"> <div className="working-hours-input-container">
@@ -144,9 +145,9 @@ function Nav() {
<small>Working hours</small> <small>Working hours</small>
</div> </div>
</div> </div>*/}
<div className="nav-account"> <div className="nav-account">
<p>Welcome back, Username!</p> <p>Hey, Username!</p>
<a className="logout-a" href="/logout"> <a className="logout-a" href="/logout">
Log out Log out
</a> </a>

21
frontend/src/css/components/nav.scss
View File

@@ -2,8 +2,10 @@
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color: rgb(13, 13, 13); background-color: rgb(13, 13, 13);
display: grid; display: flex;
grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr 0.5fr; flex-wrap: wrap;
align-content: center;
justify-content: space-between;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@@ -23,11 +25,10 @@
} }
div { div {
grid-area: auto;
.nav-overview { .nav-overview {
margin-top: 3px; margin-top: 3px;
margin-left: 30px; margin-left: 30px;
width: 300px;
a { a {
background-color: #0f9f5f; background-color: #0f9f5f;
@@ -144,6 +145,7 @@
.month-navigation { .month-navigation {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 1fr; grid-template-columns: 1fr 2fr 1fr;
width: 30%;
div { div {
background-color: transparent; background-color: transparent;
@@ -174,8 +176,10 @@
} }
.nav-account { .nav-account {
display: flex; display: flex;
justify-content: flex-end;
width: 300px;
p { p {
margin-left: 0px;
padding-top: 3px; padding-top: 3px;
font-size: 12pt; font-size: 12pt;
font-weight: bold; font-weight: bold;
@@ -193,3 +197,10 @@
} }
} }
} }
@media screen and (max-width: 1000px) {
.nav {
height: 60px;
grid-template-columns: 1fr 1fr 1fr;
}
}