Skip to content
Snippets Groups Projects
Commit 525c0803 authored by BOUZIDI Nadjim's avatar BOUZIDI Nadjim
Browse files

Added the body structure : composed of many clickable cards, that shows all...

Added the body structure : composed of many clickable cards, that shows all the contain in details, created card component, card-display component (for the details), and seminar-cards component (main structure). Next step would be to create a Database and link all the cards info to the database.
parent 26c3cd4b
No related branches found
No related tags found
No related merge requests found
Showing
with 302 additions and 7 deletions
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<app-page-head></app-page-head>
<app-seminar-cards></app-seminar-cards>
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PageHeadComponent } from './components/page-head/page-head.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { AdvancedSearchComponent } from './components/advanced-search/advanced-search.component';
import { PageHeadComponent } from './components/head/page-head/page-head.component';
import { SeminarCardsComponent } from './components/body/seminar-cards/seminar-cards.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, PageHeadComponent, SidebarComponent, AdvancedSearchComponent],
imports: [RouterOutlet, PageHeadComponent, SeminarCardsComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
......
<div class="card-display" *ngIf="isCardVisible">
<div id="close-btn" (click)="toggleDisplayCard()">
<i class="fas fa-times"></i>
</div>
<div id="displayed">
<h2>{{title}}</h2>
<h3>{{place}}</h3>
<h3>{{date}}</h3>
<p onload="recieveData()">{{content}}</p>
</div>
</div>
<div id="overlay" *ngIf="isCardVisible"></div>
.card-display{
position: fixed;
background-color: white;
z-index: 10000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
width: 70%;
}
#close-btn {
position: absolute;
top: 10px;
right: 12px;
cursor: pointer;
background-color: white;
font-size: 30px;
border: none;
}
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* fond sombre semi-transparent */
z-index: 9999; /* positionne l'overlay au-dessus de tous les autres éléments de la page */
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CardDisplayComponent } from './card-display.component';
describe('CardDisplayComponent', () => {
let component: CardDisplayComponent;
let fixture: ComponentFixture<CardDisplayComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CardDisplayComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CardDisplayComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit} from '@angular/core';
import { NgIf, CommonModule} from '@angular/common';
import { DataService } from '../../../../services/data.service';
@Component({
selector: 'app-card-display',
standalone: true,
imports: [NgIf, CommonModule],
templateUrl: './card-display.component.html',
styleUrl: './card-display.component.scss'
})
export class CardDisplayComponent implements OnInit {
title!: String;
place!: String;
date!: String;
content!: String;
receivedData: String[] = [];
isCardVisible: boolean = false;
constructor(private dataService: DataService) {}
toggleDisplayCard(){
this.dataService.toggleDisplayCard();
}
ngOnInit(): void {
this.dataService.isCardOpen$.subscribe(isOpen => {
this.isCardVisible = isOpen;
});
this.dataService.getData().subscribe(data => {
this.receivedData = data;
this.title = this.receivedData[0];
this.place = this.receivedData[1];
this.date = this.receivedData[2];
this.content = this.receivedData[3];
});
}
}
<div class="card" (click) = "cardClick()">
<div id="card-head">
<h2 id="title">{{cardComponent.title}}</h2>
<h3 id="place">{{cardComponent.place}}</h3>
<h3 id="date">{{cardComponent.date}}</h3>
</div>
<div id="card-body">
<p id="content">{{cardComponent.content}}</p>
</div>
</div>
.card{
border: 1px solid black;
padding: 10px;
margin: 20px;
cursor: pointer;
}
h2,h3,p{
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
}
h2, h3{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: x-large;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
h2{
text-align: center;
border-bottom: 1px solid black;
padding-bottom: 5px;
}
p{
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CardComponent } from './card.component';
describe('CardComponent', () => {
let component: CardComponent;
let fixture: ComponentFixture<CardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CardComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit} from '@angular/core';
import { DataService } from '../../../../services/data.service';
import { Card } from '../../../../models/card.model';
@Component({
selector: 'app-card',
standalone: true,
imports: [],
templateUrl: './card.component.html',
styleUrl: './card.component.scss'
})
export class CardComponent implements OnInit{
data: String[] = [];
@Input() cardComponent!: Card;
constructor(public dataService:DataService) {
}
ngOnInit(): void {
this.data.push( this.cardComponent.title);
this.data.push(this.cardComponent.place);
this.data.push(this.cardComponent.date);
this.data.push(this.cardComponent.content);
}
cardClick(): void{
if(this.data.length != 0){
this.dataService.emitData(this.data);
}
this.dataService.toggleDisplayCard();
}
}
<div class="seminar-cards">
<h1>SÉMINAIRES 2024</h1>
<div class="cards">
<app-card-display ></app-card-display>
<app-card [cardComponent]="card1"></app-card>
<app-card [cardComponent]="card2"></app-card>
<app-card [cardComponent]="card3"></app-card>
<app-card [cardComponent]="card4"></app-card>
</div>
</div>
.seminar-cards{
margin: 40px;
}
h1{
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 3.2em;
font-weight: bold;
padding: 30px;
background-color: rgb(25, 100, 200);
display: inline-block;
}
.cards{
margin: 30px;
display: flex;
flex-wrap: wrap;
}
app-card{
width: 33%;
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SeminarCardComponent } from './seminar-cards.component';
describe('SeminarCardComponent', () => {
let component: SeminarCardComponent;
let fixture: ComponentFixture<SeminarCardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [SeminarCardComponent]
})
.compileComponents();
fixture = TestBed.createComponent(SeminarCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit} from '@angular/core';
import { NgIf, CommonModule} from '@angular/common';
import { CardComponent } from './card/card.component';
import { CardDisplayComponent } from './card-display/card-display.component';
import { Card } from '../../../models/card.model';
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-seminar-cards',
standalone: true,
imports: [CardComponent, CardDisplayComponent, NgIf, CommonModule],
templateUrl: './seminar-cards.component.html',
styleUrl: './seminar-cards.component.scss'
})
export class SeminarCardsComponent implements OnInit{
constructor(private dataService: DataService){}
card1!:Card;
card2!:Card;
card3!:Card;
card4!:Card;
ngOnInit(): void {
this.card1 = new Card(
"Le meilleur titre",
"New York City",
"14h00",
"the description of the best title ever existed in the planet of the universe calledd EAAARTH"
);
this.card2 = new Card(
"Le meilleur titre 2",
"New York City 2",
"14h00 2",
"the description of the best title ever existed in the planet of the universe calledd EAAARTH 2"
);
this.card3 = new Card(
"Le meilleur titre 3",
"New York City 3",
"14h00 3",
"the description of the best title ever existed in the planet of the universe calledd EAAARTH 3"
);
this.card4 = new Card(
"Le meilleur titre 4",
"New York City 4",
"14h00 4",
"the description of the best title ever existed in the planet of the universe calledd EAAARTH 4"
);
}
}
import { Component } from '@angular/core';
import { AdvancedSearchService } from '../../services/advanced-search.service';
import { AdvancedSearchService } from '../../../services/advanced-search.service';
import { NgIf, CommonModule } from '@angular/common';
@Component({
......
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div id="head-item">
<button id="slide" (click) = "slideClick()"><i class="fas fa-bars"></i></button>
<app-sidebar></app-sidebar>
......
#head-item{
position: absolute;
position: relative;
top: 0;
background-color: #4A8DB7;
width: 100%;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment