Merge branch 'master' into 'main'

test slider

See merge request !3

angular.json

@@ -96,6 +96,6 @@
     }
   },
   "cli": {
-    "analytics": "9fdb4643-2379-4b0a-be04-6e4bf67f2743"
+    "analytics": "0bc6e4f8-bb1c-416f-b778-24cb5a0c67cc"
   }
 }

src/app/app.component.html

-<app-activity-cards></app-activity-cards>
\ No newline at end of file
+<app-change-page></app-change-page>
\ No newline at end of file

src/app/app.module.ts

@@ -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,

src/app/change-page/change-page.component.css

+.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

src/app/change-page/change-page.component.html

+
+    <div class="background">
+    <div class="border" id="border" (click)="changeclass()"></div>
+    <div class="border2" id="border2" (click)="changeclass()"></div>
+    </div>

src/app/change-page/change-page.component.spec.ts

+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();
+  });
+});

src/app/change-page/change-page.component.ts

+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"
+        }
+      }
+    } 
+    
+}
+}

src/index.html

@@ -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>