Paddy/Betterzon
1
0
Fork 0
mirror of https://github.com/Mueller-Patrick/Betterzon.git synced 2024-12-23 12:15:11 +00:00
Code Issues Projects Releases Wiki Activity

wip: component rewritten, simple grid applied.

Browse Source
This commit is contained in:
Jegor 2021-05-15 21:42:52 +02:00
parent ceef01899d
commit e8bb639ebd
4 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Frontend/src/app/components/top-bar/top-bar.component.css
View File

@ -1 +1,54 @@
.top-bar-wrapper {
display: grid;
grid-template-columns: 200px 360px 820px 20px 250px;
grid-template-rows: 40px;
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
}
.top-logo {
grid-area: 1/1;
}
#better {
font-size: 28px;
font-weight: bold;
color: #3480E3;
}
#zon {
font-size: 28px;
font-weight: bold;
color: #E53167;
}
.search-button {
/*background-color: #E53167;*/
}
.sign-up {
/*background-color: #E53167;*/
margin-left: 50px;
margin-right: 25px;
}
.login {
margin-right: 25px;
}
#signin {
border-radius: 25px;
background-color: #E53167;
}
._links > a {
/*background-color: #E53167;*/
margin-left: 10px;
margin-right: 10px;
}
._signing_links > a {
/*background-color: #E53167;*/
margin-left: 50px;
}

26
Frontend/src/app/components/top-bar/top-bar.component.html
View File

@ -1,4 +1,26 @@
<div class="top-bar-wrapper">
<div class="<top-logo>">
<a><span id="better">BETTER</span><span id="zon">ZON</span></a>
</div>
<div class="links">
<nav class="_links">
<a>KONTAKTIERE UNS</a>
<a>KUNDEN</a>
<a>FAQ</a>
</nav>
</div>
<div class="footer_space">
</div>
<div class="search-button">
<a>
<img src="assets/images/Betterzon.svg" [routerLink]="''" alt="Betterzon Logo" width="50px">
<img src="assets/images/search_black_24dp.svg" alt="Sarch button">
</a>
<a class="button fancy-button"><i class="material-icons">shopping_cart</i>Checkout</a>
</div>
<div class="links">
<nav class="_signing_links">
<a>SIGN UP</a>
<a><span id="signin">SIGN IN</span></a>
</nav>
</div>
</div>

1
Frontend/src/assets/images/search_black_24dp.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

12
Frontend/src/styles.css
View File

@ -107,15 +107,19 @@ label {
/* Top Bar */
app-top-bar {
width: 100%;
height: 68px;
background-color: #f2f2f2;
width: 1640px;
height: 70px;
background-color: #ffffff;
padding: 16px;
position: fixed;
left: 50%;
top:0;
margin-left: -820px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)
/*box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)*/
}
app-top-bar h1 {