Better Responsiveness

src/app/projects/project-card/project-card.component.css

@@ -81,7 +81,7 @@
 }
 
 /* COMPUTER FORMAT */
-@media only screen and (min-width: 712px) {
+@media only screen and (min-width: 770px) {
     .card-languages {
         margin: 0;
     }

src/app/projects/project-card/project-card.component.html

@@ -7,7 +7,7 @@
                 <p class="card-text">{{project.description}}</p>
             </div>
             <div class="card-content-f row">
-                <div class="card-languages col-sm-9" *ngIf="hasLanguage" id="language-chart">
+                <div class="card-languages col-md-9" *ngIf="hasLanguage" id="language-chart">
                     <apx-chart *ngIf="chartOptions !== undefined"
                         [series]="chartOptions.series"
                         [colors]="chartOptions.colors"
@@ -18,7 +18,7 @@
                         [dataLabels]="chartOptions.dataLabels">
                     </apx-chart>
                 </div>
-                <div class="card-stats" [ngClass]="hasLanguage ? 'col-sm-3' : 'stats-inline'">
+                <div class="card-stats" [ngClass]="hasLanguage ? 'col-md-3' : 'stats-inline'">
                     <div class="stat-item" *ngIf="hasLicense">
                         <div class="stat-icon">
                             <fa-icon [icon]="faLicense"></fa-icon>

src/app/projects/project-card/project-card.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, HostListener, Input, OnInit, ViewChild} from '@angular/core';
 import { faCodeFork, faEye, faStar } from '@fortawesome/free-solid-svg-icons';
 import {Language, Project} from "../../shared/model/project/project.model";
 import {faScaleBalanced} from "@fortawesome/free-solid-svg-icons/faScaleBalanced";
@@ -46,13 +46,28 @@ export class ProjectCardComponent implements OnInit {
 
     faEye = faEye;
 
+    private windowResizeTimeout: any;
+
     ngOnInit() {
         if (!!this.project.languages) {
-            this.chartOptions = this.generateChart(this.project.languages);
+            const windowWidth = window.innerWidth;
+            this.chartOptions = this.generateChart(this.project.languages, windowWidth);
         }
 
     }
 
+    @HostListener('window:resize', ['$event'])
+    getScreenSize(event: Event) {
+        clearTimeout(this.windowResizeTimeout);
+
+        this.windowResizeTimeout = setTimeout(() => {
+            if (!this.project.languages) return;
+            this.chartOptions = this.generateChart(
+                this.project.languages, window.innerWidth
+            );
+        }, 100);
+    }
+
     get hasLicense(): boolean {
         return this.project.license !== undefined;
     }
@@ -62,7 +77,10 @@ export class ProjectCardComponent implements OnInit {
             this.project.languages?.length > 0;
     }
 
-    private generateChart(languages: Language[]): ChartOptions {
+    private generateChart(languages: Language[], windowWidth: number): ChartOptions {
+        const responsiveWindowWidth = windowWidth >= 530 ?
+            300 : (windowWidth*.8 - 80);
+
         return {
             series: languages.map(value => value.percentage),
             colors: languages.map(value => value.color),
@@ -73,10 +91,10 @@ export class ProjectCardComponent implements OnInit {
             labels: languages.map(value => value.name),
             responsive: [
                 {
-                    breakpoint: 480,
+                    breakpoint: 530,
                     options: {
                         chart: {
-                            width: 300
+                            width: responsiveWindowWidth
                         },
                         legend: {
                             position: "bottom"