BETTERZON-78 - grid added, structured as in Adobe XD mockup

This commit is contained in:
Jegor 2021-05-11 11:54:02 +02:00
parent 6982a139af
commit a3d9b826f0
8 changed files with 669 additions and 403 deletions

File diff suppressed because it is too large Load Diff

View File

@ -29,8 +29,8 @@
"karma-firefox-launcher": "^2.1.0", "karma-firefox-launcher": "^2.1.0",
"ng": "0.0.0", "ng": "0.0.0",
"ng-apexcharts": "^1.5.6", "ng-apexcharts": "^1.5.6",
"ngx-cookieconsent": "^2.2.3",
"ngx-bootstrap": "^6.2.0", "ngx-bootstrap": "^6.2.0",
"ngx-cookieconsent": "^2.2.3",
"rxjs": "~6.6.0", "rxjs": "~6.6.0",
"tslib": "^2.0.3", "tslib": "^2.0.3",
"zone.js": "~0.10.2" "zone.js": "~0.10.2"

View File

@ -1,7 +1,7 @@
<app-top-bar></app-top-bar> <app-top-bar></app-top-bar>
<div class="page-content">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div>
<app-bottom-bar></app-bottom-bar> <app-bottom-bar></app-bottom-bar>

View File

@ -1,28 +1,30 @@
.bottom-bar-container { .bottom-bar-wrapper {
background-color: black
;
width: 100%;
height: 68px;
position: fixed;
padding: 16px;
align-items: center;
bottom: 0;
display: grid; display: grid;
grid-template-columns: 100px auto 100px; grid-template-columns: repeat(3, 1fr);
grid-template-rows: 70px 70px 70px;
grid-column-gap: 0px;
grid-row-gap: 0px;
} }
.betterzonlogo { .folge-uns-item {
grid-column-start: 1; grid-column: 2; grid-row: 1;
grid-column-end: 2; justify-self: center;
} }
.references { .link-items {
grid-column-start: 2; grid-column: 2; grid-row: 2;
grid-column-end: 3; justify-self: center;
align-items: center;
} }
.copyright { .footer-links li {
grid-column-start: 3; display: inline;
grid-column-end: 4; margin-right: 60px;
}
.bottom-logo {
grid-column: 1; grid-row: 3;
}
.bottom-info {
grid-column: 3; grid-row: 3;
} }

View File

@ -1,14 +1,25 @@
<div class="bottom-bar-container"> <div class="bottom-bar-wrapper">
<div class="betterzonlogo"> <div class="folge-uns-item">
<a> <p>FOLGE UNS</p>
<img src="assets/images/Betterzon.svg" [routerLink]="''" alt="Betterzon Logo" width="50px">
</a>
</div> </div>
<div class="references"> <div class="link-items">
<mat-icon aria-hidden="false" aria-label="Example home icon" [routerLink]="''">home</mat-icon> <ul style="list-style-type:none" class="footer-links">
<li><a>GiT</a></li>
<li><a>BLOG</a></li>
<li><a>Wiki</a></li>
<li><a>YouTrack</a></li>
</ul>
</div> </div>
<div class="copyright"> <div class="bottom-logo">
Betterzon ©2020 <p>BETTERZON</p>
</div>
<div class="bottom-info">
<ul style="list-style-type:none" class="footer-links">
<li><a>COOKIES</a></li>
<li><a>NUTZUNGSBEDINGUNGEN</a></li>
<li><a>IMPRESSUM</a></li>
</ul>
</div> </div>
</div> </div>

View File

@ -1,3 +1 @@
.column {
width: 33.33%;
}

View File

@ -1,4 +1,3 @@
<div id="mainComponents"> <div id="mainComponents">
<div id="searchContainer"> <div id="searchContainer">
<input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()"> <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
@ -15,4 +14,3 @@
</div> </div>
</div> </div>
</div> </div>
<app-footer></app-footer>

View File

@ -1,22 +1,13 @@
/* general settings */
* { * {
font-family: 'Roboto', Arial, sans-serif;
color: #616161;
box-sizing: border-box; box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
body { html, body {
height: 100%;
margin: 0; margin: 0;
} background-color: #FFFFFF;
.container {
display: flex;
flex-direction: row;
}
router-outlet + * {
padding: 0 16px;
} }
/* Text */ /* Text */
@ -33,6 +24,10 @@ h1, h2 {
font-weight: lighter; font-weight: lighter;
} }
h3 {
font-size: 18px;
}
p { p {
font-size: 14px; font-size: 14px;
} }
@ -41,7 +36,7 @@ p {
a { a {
cursor: pointer; cursor: pointer;
color: #1976d2; color: #000000;
text-decoration: none; text-decoration: none;
} }
@ -49,6 +44,12 @@ a:hover {
opacity: 0.8; opacity: 0.8;
} }
a, p{
font-size: 16px;
}
/* links */
/* Input */ /* Input */
input { input {
@ -107,7 +108,7 @@ label {
app-top-bar { app-top-bar {
width: 100%; width: 100%;
height: 68px; height: 68px;
background-color: #1976d2; background-color: #f2f2f2;
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -116,9 +117,21 @@ app-top-bar {
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, app-bottom-bar h1 { app-top-bar h1 {
color: white; color: white;
margin: 0; margin: 0;
} }
/* Bottom Bar */
app-bottom-bar{
background-color: #F8F8F8;
width: 1640px;
height: 210px;
position: fixed;
padding: 16px;
margin-top: 90px;
bottom: 0;
flex-direction: row;
}