mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-12-23 04:05:12 +00:00
BETTERZON-78 - grid added, structured as in Adobe XD mockup
This commit is contained in:
parent
6982a139af
commit
a3d9b826f0
938
Frontend/package-lock.json
generated
938
Frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -29,8 +29,8 @@
|
|||
"karma-firefox-launcher": "^2.1.0",
|
||||
"ng": "0.0.0",
|
||||
"ng-apexcharts": "^1.5.6",
|
||||
"ngx-cookieconsent": "^2.2.3",
|
||||
"ngx-bootstrap": "^6.2.0",
|
||||
"ngx-cookieconsent": "^2.2.3",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.3",
|
||||
"zone.js": "~0.10.2"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<app-top-bar></app-top-bar>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<div class="page-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<app-bottom-bar></app-bottom-bar>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
.bottom-bar-container {
|
||||
background-color: black
|
||||
;
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
position: fixed;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
.bottom-bar-wrapper {
|
||||
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 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
.folge-uns-item {
|
||||
grid-column: 2; grid-row: 1;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.references {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
align-items: center;
|
||||
.link-items {
|
||||
grid-column: 2; grid-row: 2;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 4;
|
||||
.footer-links li {
|
||||
display: inline;
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.bottom-logo {
|
||||
grid-column: 1; grid-row: 3;
|
||||
}
|
||||
|
||||
.bottom-info {
|
||||
grid-column: 3; grid-row: 3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,25 @@
|
|||
<div class="bottom-bar-container">
|
||||
<div class="betterzonlogo">
|
||||
<a>
|
||||
<img src="assets/images/Betterzon.svg" [routerLink]="''" alt="Betterzon Logo" width="50px">
|
||||
</a>
|
||||
<div class="bottom-bar-wrapper">
|
||||
<div class="folge-uns-item">
|
||||
<p>FOLGE UNS</p>
|
||||
</div>
|
||||
<div class="references">
|
||||
<mat-icon aria-hidden="false" aria-label="Example home icon" [routerLink]="''">home</mat-icon>
|
||||
<div class="link-items">
|
||||
<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 class="copyright">
|
||||
Betterzon ©2020
|
||||
<div class="bottom-logo">
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
.column {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<div id="mainComponents">
|
||||
<div id="searchContainer">
|
||||
<input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
|
||||
|
|
@ -15,4 +14,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
/* general settings */
|
||||
|
||||
* {
|
||||
font-family: 'Roboto', Arial, sans-serif;
|
||||
color: #616161;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
router-outlet + * {
|
||||
padding: 0 16px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
|
|
@ -33,6 +24,10 @@ h1, h2 {
|
|||
font-weight: lighter;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -41,7 +36,7 @@ p {
|
|||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #1976d2;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +44,12 @@ a:hover {
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
a, p{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* links */
|
||||
|
||||
/* Input */
|
||||
|
||||
input {
|
||||
|
|
@ -107,7 +108,7 @@ label {
|
|||
app-top-bar {
|
||||
width: 100%;
|
||||
height: 68px;
|
||||
background-color: #1976d2;
|
||||
background-color: #f2f2f2;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
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)
|
||||
}
|
||||
|
||||
app-top-bar, app-bottom-bar h1 {
|
||||
app-top-bar h1 {
|
||||
color: white;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user