feat: add product overview component with styling and product listing
This commit is contained in:
parent
765e0ae521
commit
a5fcb20296
@ -0,0 +1,97 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
column-gap: 2rem;
|
||||||
|
row-gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
max-width: 25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3, h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
column-gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
width: 300px;
|
||||||
|
background-color: #333;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 10;
|
||||||
|
white-space: pre-line;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info:hover .info-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0.8rem;
|
||||||
|
padding-bottom: 0.8rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-light {
|
||||||
|
background-color: rgba(132, 129, 122, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-standard {
|
||||||
|
background-color: rgba(33, 140, 116, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-premium {
|
||||||
|
background-color: rgba(34, 112, 147, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item > ul > li {
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: start;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<div class="container">
|
||||||
|
<div class="item" *ngFor="let product of products">
|
||||||
|
<div class="product-header">
|
||||||
|
<div class="product" [ngClass]="product.class">
|
||||||
|
<h3>{{ product.name }}</h3>
|
||||||
|
<h2>{{ product.price }} Euro / einmalig</h2>
|
||||||
|
</div>
|
||||||
|
<div class="product-info">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem"
|
||||||
|
fill="rgba(51, 217, 178,1.0)">
|
||||||
|
<path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
|
||||||
|
</svg>
|
||||||
|
<div class="info-box" *ngIf="product.info">
|
||||||
|
{{ product.info }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="product-info">-->
|
||||||
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem"-->
|
||||||
|
<!-- fill="rgba(51, 217, 178,1.0)">-->
|
||||||
|
<!-- <path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>-->
|
||||||
|
<!-- </svg>-->
|
||||||
|
<!-- <!– <p>{{ product.info }}</p>–>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li *ngFor="let feature of product.features">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem"
|
||||||
|
fill="rgba(64, 64, 122,1.0)">
|
||||||
|
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
|
||||||
|
</svg>
|
||||||
|
<!-- <img src="/public/assets/digitaler-frieden_logo.svg" style="width: 2rem; height: 2rem;">-->
|
||||||
|
<p>
|
||||||
|
{{ feature }}
|
||||||
|
</p>
|
||||||
|
<!-- </div>-->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ProductOverviewComponent } from './product-overview.component';
|
||||||
|
|
||||||
|
describe('ProductOverviewComponent', () => {
|
||||||
|
let component: ProductOverviewComponent;
|
||||||
|
let fixture: ComponentFixture<ProductOverviewComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [ProductOverviewComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(ProductOverviewComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {NgClass, NgForOf, NgIf} from "@angular/common";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'atomic-product-overview',
|
||||||
|
imports: [
|
||||||
|
NgForOf,
|
||||||
|
NgClass,
|
||||||
|
NgIf
|
||||||
|
],
|
||||||
|
templateUrl: './product-overview.component.html',
|
||||||
|
styleUrl: './product-overview.component.css'
|
||||||
|
})
|
||||||
|
export class ProductOverviewComponent {
|
||||||
|
products: any[] = [
|
||||||
|
{name: 'Light', price: 119, features: ['Abfrage bei 100 Anbietern'], info: '', class: 'product-light'},
|
||||||
|
{
|
||||||
|
name: 'Standard',
|
||||||
|
price: 179,
|
||||||
|
features: ['Abfrage bei 300 Anbietern', 'Abfrage bei Banken'],
|
||||||
|
info: '',
|
||||||
|
class: 'product-standard'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Premium Plus',
|
||||||
|
price: 199,
|
||||||
|
features: ['Abfrage bei 400 Anbietern', 'Abfrage bei Banken', 'Löschen von Personenbezogenen Daten', 'Löschen von E-Mail Adressen aus E-Mail Verteilern', 'MyDF Dashboard'],
|
||||||
|
info: 'Wir suchen bei über 400 Anbietern nach Anmeldungen/Konten oder Registrierungen im Auftrag der Erben von Verstorbenen.\n' +
|
||||||
|
'Eine Übersicht über den aktuellen Stand sehen Sie in Ihrem MYDF-Dashboard.\n' +
|
||||||
|
'Dieses listet Ihnen alle gefundenen Anbieter mit Interaktion auf.\n' +
|
||||||
|
'Per Klick einfach und übersichtlich Spuren löschen.\n' +
|
||||||
|
'KEINE WERBUNG mehr nach Jahren. KEINE STÖRUNG.'
|
||||||
|
, class: 'product-premium'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user