From b566f453b25452f0da6ff8e9ed9b631684e44b13 Mon Sep 17 00:00:00 2001 From: janeth Date: Wed, 13 May 2020 20:51:39 +0530 Subject: [PATCH 1/8] Get image on top of card --- src/app/components/project-card/project-card.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html index 9438dc9..1119eb2 100644 --- a/src/app/components/project-card/project-card.component.html +++ b/src/app/components/project-card/project-card.component.html @@ -3,8 +3,8 @@
 
-
{{data.name}}
+
{{data.name}}
{{data.description}}
-
+
Card image cap
{{project.projectName}} From f3c4509d014d57d57d1fd1aaf1217fdca940dfa7 Mon Sep 17 00:00:00 2001 From: janeth Date: Thu, 14 May 2020 18:20:47 +0530 Subject: [PATCH 4/8] Change cursor to pointer --- src/app/components/our-work/our-work.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/our-work/our-work.component.scss b/src/app/components/our-work/our-work.component.scss index 006a2aa..6d1c60c 100644 --- a/src/app/components/our-work/our-work.component.scss +++ b/src/app/components/our-work/our-work.component.scss @@ -1,4 +1,5 @@ .project { + cursor: pointer; margin: 2px 20px; width: 18rem; From 04c50e1efad33d02891434a5aa6699947573a8d2 Mon Sep 17 00:00:00 2001 From: janeth Date: Fri, 15 May 2020 15:10:33 +0530 Subject: [PATCH 5/8] Add close x to individual card --- src/app/components/project-card/project-card.component.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html index 1119eb2..1c30425 100644 --- a/src/app/components/project-card/project-card.component.html +++ b/src/app/components/project-card/project-card.component.html @@ -1,6 +1,9 @@
 
+
From a1b4a8801f9309843af60a2c4ce751d92489748e Mon Sep 17 00:00:00 2001 From: janeth Date: Fri, 15 May 2020 15:14:33 +0530 Subject: [PATCH 6/8] Make close button consistant as team card --- src/app/components/project-card/project-card.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html index 1c30425..bcd6782 100644 --- a/src/app/components/project-card/project-card.component.html +++ b/src/app/components/project-card/project-card.component.html @@ -19,7 +19,7 @@
{{data.name}}
- +
From 9c29413a4a2e7c749842904236ea41f8dddb8eac Mon Sep 17 00:00:00 2001 From: janeth Date: Fri, 15 May 2020 15:28:27 +0530 Subject: [PATCH 7/8] Add heading for checkout project --- .../project-card/project-card.component.html | 13 +++++++++---- .../project-card/project-card.component.scss | 5 +++++ 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html index bcd6782..4ee21b6 100644 --- a/src/app/components/project-card/project-card.component.html +++ b/src/app/components/project-card/project-card.component.html @@ -10,10 +10,15 @@
 
{{data.name}}
{{data.description}}
diff --git a/src/app/components/project-card/project-card.component.scss b/src/app/components/project-card/project-card.component.scss index 1abea42..35f39fe 100644 --- a/src/app/components/project-card/project-card.component.scss +++ b/src/app/components/project-card/project-card.component.scss @@ -36,3 +36,8 @@ color: #000000; font-size: large; } + +.checkProjects{ + margin-top: 10px; + color: gray; +} From e19cbd893d9c708328c2ba81018293f83011d082 Mon Sep 17 00:00:00 2001 From: janeth Date: Sat, 16 May 2020 22:35:50 +0530 Subject: [PATCH 8/8] Add project carousel --- angular.json | 7 ++- package.json | 4 +- src/app/components/components.module.ts | 2 + .../our-work/our-work.component.html | 37 +++++++-------- .../our-work/our-work.component.scss | 30 ++++-------- .../components/our-work/our-work.component.ts | 47 +++++-------------- 6 files changed, 49 insertions(+), 78 deletions(-) diff --git a/angular.json b/angular.json index 73215d4..7139b38 100644 --- a/angular.json +++ b/angular.json @@ -21,12 +21,17 @@ "src/favicon.ico" ], "styles": [ + "node_modules/slick-carousel/slick/slick.scss", + "node_modules/slick-carousel/slick/slick-theme.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/sass/paper-kit.scss", "src/assets/css/demo.css", "src/assets/css/nucleo-icons.css" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/slick-carousel/slick/slick.min.js" + ] }, "configurations": { "production": { diff --git a/package.json b/package.json index 4ce7cca..1c87a3b 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,15 @@ "@ng-bootstrap/ng-bootstrap": "6.0.0", "bootstrap": "4.1.2", "core-js": "3.6.4", - "jquery": "3.5.0", + "jquery": "^3.5.1", "jw-bootstrap-switch-ng2": "2.0.1", "ng2-nouislider": "1.7.12", + "ngx-slick-carousel": "^0.5.0", "nouislider": "9.2.0", "popper.js": "1.14.4", "rxjs": "6.5.4", "rxjs-compat": "6.5.4", + "slick-carousel": "^1.8.1", "zone.js": "0.10.2" }, "devDependencies": { diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index c07e967..564e363 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms'; import { NouisliderModule } from 'ng2-nouislider'; import { JwBootstrapSwitchNg2Module } from 'jw-bootstrap-switch-ng2'; import { RouterModule } from '@angular/router'; +import { SlickCarouselModule } from 'ngx-slick-carousel'; import { TeamSectionComponent } from './teamSection/teamSection.component'; @@ -23,6 +24,7 @@ import { TechBlogComponent } from './tech-blog/tech-blog.component'; FormsModule, NgbModule, NouisliderModule, + SlickCarouselModule, RouterModule, JwBootstrapSwitchNg2Module ], diff --git a/src/app/components/our-work/our-work.component.html b/src/app/components/our-work/our-work.component.html index 44be4e3..371cc58 100644 --- a/src/app/components/our-work/our-work.component.html +++ b/src/app/components/our-work/our-work.component.html @@ -1,26 +1,23 @@
-

Our Work

-
-
- -
- Card image cap +

Our Work

+ +
+ + Project Image
-
{{project.projectName}} -
-

{{project.description}}

+
{{project.projectName}} + +
+

{{project.description}}

-
- +
-
+
-
+
\ No newline at end of file diff --git a/src/app/components/our-work/our-work.component.scss b/src/app/components/our-work/our-work.component.scss index 6d1c60c..c5a1af5 100644 --- a/src/app/components/our-work/our-work.component.scss +++ b/src/app/components/our-work/our-work.component.scss @@ -1,29 +1,17 @@ .project { cursor: pointer; - margin: 2px 20px; - width: 18rem; - - @media screen and (max-width: 995px) { - margin: 2px 12px; - } - - @media screen and (max-width: 398px) { - margin: 2px 5px; - width: 250px; - } + height: 100%; +} - @media screen and (max-width: 398px) { - margin: 2px 5px; - width: 220px; - } +.slick-slider { + width: 85%; + margin: auto; } -.slider_button { - display: block; - margin-bottom: auto; - margin-top: auto; +.prev-slide { + left: -33px; } -.work-section { - margin-top: 5vh; +.next-slide { + right: -33px; } diff --git a/src/app/components/our-work/our-work.component.ts b/src/app/components/our-work/our-work.component.ts index 46cb6e4..e90a65f 100644 --- a/src/app/components/our-work/our-work.component.ts +++ b/src/app/components/our-work/our-work.component.ts @@ -11,19 +11,11 @@ import { ProjectCardComponent } from '../project-card/project-card.component'; }) export class OurWorkComponent implements OnInit { - private displayCount; - public listedProjects; - private clicker = 0; + projects: any = projects; constructor(private modalService: NgbModal) { } - @HostListener('window:resize', ['$event']) - onResize(event) { - this.adjustScreen(event.target.innerWidth); - } - ngOnInit() { - this.adjustScreen(window.innerWidth); } showProjectCard(data) { @@ -31,31 +23,16 @@ export class OurWorkComponent implements OnInit { card.open(data); } - foward() { - if (this.clicker < projects.length - this.displayCount) { - this.clicker++; - this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker); - } - } - - backward() { - if (this.clicker > 0) { - this.clicker--; - this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker); - } - } + slideConfig = { + "slidesToShow": 3, + "slidesToScroll": 1, + "nextArrow": "
", + "prevArrow": "
", + "autoplay": true, + "autoplaySpeed": 2000, + "adaptiveHeight": true, + "dots": true, + "infinite": true + }; - adjustScreen(width) { - if (width <= 767) { - this.displayCount = 1; - } else if (width < 770) { - this.displayCount = 2; - } - else if (width < 1300) { - this.displayCount = 2; - } else { - this.displayCount = 3; - } - this.listedProjects = projects.slice(0, this.displayCount); - } }