wip: all components were wrapped now. Grid structure has been applied to the main wrapper-class "container".

This commit is contained in:
Jegor 2021-05-16 23:49:57 +02:00
parent 94c3f537bc
commit c936ec97c0
5 changed files with 40 additions and 7 deletions

View File

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

View File

@ -4,8 +4,6 @@
background-color: #f8f9fa;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 425 KiB

View File

@ -104,6 +104,32 @@ label {
padding-right: 4px;
}
/* Main Container */
.container {
position: fixed;
left: 50%;
margin-left: -820px;
width: 1640px;
height: auto;
display: grid;
grid-template-rows: 70px auto 210px;
}
.header {
grid-row: 1/2;
}
.page-content {
grid-row: 2/3;
}
.footer {
grid-row: 3/4;
}
/* End of Main Container */
/* Top Bar */
app-top-bar {