1
0
mirror of https://github.com/Mueller-Patrick/Betterzon.git synced 2025-01-11 04:25:12 +00:00

wip: new component created and added to the app.module.ts. Added a minimal grid layout.

This commit is contained in:
Jegor 2021-05-16 22:42:59 +02:00
parent e8bb639ebd
commit 94c3f537bc
5 changed files with 138 additions and 1 deletions

View File

@ -29,6 +29,7 @@ import {MatIconModule} from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from "@angular/material/list";
import {BottomBarComponent} from './components/bottom-bar/bottom-bar.component';
import { HotDealsWidgetComponent } from './components/hot-deals-widget/hot-deals-widget.component';
// For cookie popup
@ -85,7 +86,8 @@ const cookieConfig: NgcCookieConsentConfig = {
ImprintComponent,
PrivacyComponent,
TopBarComponent,
BottomBarComponent
BottomBarComponent,
HotDealsWidgetComponent
],
imports: [
BrowserModule,

View File

@ -0,0 +1,72 @@
.hot-deal-widget-wrapper{
width: 1640px;
height: 820px;
background-color: #f8f9fa;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
}
.product-description {
/*background-color: #3480E3;*/
height: 100%;
display: grid;
grid-template-columns: 15% 16px 15% 16px 15% 16px 15% 16px 15% 16px 15% 8px;
grid-template-rows: repeat(5, 1fr);
}
.product-image {
}
#hot-deals{
/*background-color: #E53167;*/
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 1/2;
}
#product-name {
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 2/3;
/*background-color: #E53167;*/
}
#product-name > p {
font-size: 65px;
}
#sales {
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 3/4;
/*background-color: #E53167;*/
}
#futher-informations {
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 4/5;
/*background-color: #E53167;*/
}
#points {
justify-self: center;
align-self: start;
grid-column: 3/10;
grid-row: 5/6;
/*background-color: #E53167;*/
}
.product-image {
display: grid;
justify-content: center;
}

View File

@ -0,0 +1,23 @@
<div class="hot-deal-widget-wrapper">
<div class="product-description">
<div id="hot-deals">
<h1>HOT DEALS</h1>
</div>
<div id="product-name">
<h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1>
</div>
<div id="sales">
SPARE BIS ZU 7%!
</div>
<div id="futher-informations">
Weitere Informationen
</div>
<div id="points">
points
</div>
</div>
<div class="product-image">
<img src="assets/images/iphone-12-pro-silver-hero.png" height="771">
</div>
</div>

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HotDealsWidgetComponent } from './hot-deals-widget.component';
describe('HotDealsWidgetComponent', () => {
let component: HotDealsWidgetComponent;
let fixture: ComponentFixture<HotDealsWidgetComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HotDealsWidgetComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HotDealsWidgetComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hot-deals-widget',
templateUrl: './hot-deals-widget.component.html',
styleUrls: ['./hot-deals-widget.component.css']
})
export class HotDealsWidgetComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}