Skip to content
Snippets Groups Projects
Commit 758c0dca authored by AILLET Gabriel's avatar AILLET Gabriel
Browse files

Merge branch 'master' into 'main'

test slider

See merge request !3
parents 96347eaf 66816d61
No related branches found
No related tags found
1 merge request!3test slider
......@@ -96,6 +96,6 @@
}
},
"cli": {
"analytics": "9fdb4643-2379-4b0a-be04-6e4bf67f2743"
"analytics": "0bc6e4f8-bb1c-416f-b778-24cb5a0c67cc"
}
}
<app-activity-cards></app-activity-cards>
\ No newline at end of file
<app-change-page></app-change-page>
\ No newline at end of file
......@@ -4,14 +4,24 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
<<<<<<< src/app/app.module.ts
=======
import { ActivityCardsComponent } from './activity-cards/activity-cards.component';
import { ActivityContextDirective } from './activity-context.directive';
import { ChangePageComponent } from './change-page/change-page.component';
>>>>>>> src/app/app.module.ts
@NgModule({
declarations: [
AppComponent,
<<<<<<< src/app/app.module.ts
=======
ActivityCardsComponent,
ActivityContextDirective
ChangePageComponent
>>>>>>> src/app/app.module.ts
],
imports: [
BrowserModule,
......
.background{
display: flex;
flex-wrap: nowrap;
}
.border{
background-color: brown;
height: 100vh;
width: 92vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.02,1,1,.98);
border: 0px !important;
}
.border2{
background-image: linear-gradient(red, yellow);
height: 100vh;
width: 800vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.02,1,1,.98);
border: 0px;
}
.border:hover {
background-color: brown;
height: 100vh;
width: 112vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
border: 0px;
}
.bordertest{
background-color:brown;
height: 100vh;
width: 800vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.5s;
transition-duration: cubic-bezier(.02,1,1,.98);
border: 0px;
}
.bordertest2{
background-image: linear-gradient(red, yellow);
height: 100vh;
width: 92vw;
padding: 0px;
margin: 0px;
border: 0px;
}
.bordertest2:hover{
background-image: linear-gradient(red, yellow);
height: 100vh;
width: 112vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
border: 0px;
}
\ No newline at end of file
<div class="background">
<div class="border" id="border" (click)="changeclass()"></div>
<div class="border2" id="border2" (click)="changeclass()"></div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangePageComponent } from './change-page.component';
describe('ChangePageComponent', () => {
let component: ChangePageComponent;
let fixture: ComponentFixture<ChangePageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ChangePageComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ChangePageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-change-page',
templateUrl: './change-page.component.html',
styleUrls: ['./change-page.component.css']
})
export class ChangePageComponent {
changeclass(): void {
var b1 = document.getElementById("border")
if(b1 != null)
{
var b2 = document.getElementById("border2")
if(b2 != null){
if(b1.className == "border"){
b1.className="bordertest"
b2.className="bordertest2"}
else{
b1.className="border"
b2.className="border2"
}
}
}
}
}
......@@ -8,7 +8,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<body style="background-color: bisque; margin: 0px;">
<app-root></app-root>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment