Revert change sizes in number indicators

src/app/monitor/monitor.component.html

@@ -120,7 +120,7 @@
             <h5 *ngIf="countIndicatorsToShow(number.indicators)> 0 "
                 class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
             <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
-              <div *ngIf="isPublicOrIsMember(indicator.visibility)" class="uk-width-medium uk-margin-bottom">
+              <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)" class="uk-margin-bottom">
                 <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
                      [class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
                      [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">

src/app/monitor/monitor.component.ts

@@ -561,6 +561,16 @@ export class MonitorComponent implements OnInit, OnDestroy {
     return "mailto:" + this.properties.feedbackmail + "?subject=%5BOpenAIRE%20Monitor%5D%20" + (this.stakeholder ? this.stakeholder.name : "") + "%20dashboard%20feedback"
   }
   
+  public getNumberClassBySize(size: IndicatorSize) {
+    if (size === 'small') {
+      return 'uk-width-medium';
+    } else if (size === 'medium') {
+      return 'uk-width-1-4@l uk-width-1-2@m uk-width-1-1';
+    } else {
+      return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
+    }
+  }
+  
   public getChartClassBySize(size: IndicatorSize) {
     if (size === 'small') {
       return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';

src/app/topic/indicators.component.html

@@ -43,7 +43,7 @@
         </div>
         <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
           <div *ngIf="indicator" [id]="indicator._id"
-               class="uk-width-medium"
+               [ngClass]="getNumberClassBySize(indicator.width)"
                [class.disable-sortable]="!canReorder"
                [class.uk-sortable-nodrag]="!canReorder">
             <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center uk-position-relative" [class.uk-card-hover]="canReorder">
@@ -106,7 +106,7 @@
         </ng-template>
         <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
           <div class="uk-grid uk-grid-small" uk-grid>
-            <div class="uk-width-medium">
+            <div [ngClass]="getNumberClassBySize('small')">
               <div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
                 <h6 class="uk-text-bold uk-text-center">
                   Create a new number Indicator
@@ -240,7 +240,7 @@
         </ng-template>
         <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
           <div class="uk-grid uk-grid-small" uk-grid>
-            <div class="uk-width-1-3@xl uk-width-1-2@m uk-width-1-1">
+            <div [ngClass]="getChartClassBySize('small')">
               <div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
                 <h5 class="uk-text-bold">
                   Create a custom indicator
@@ -284,10 +284,10 @@
            placeholder="Select a status"
            label="Visibility" [options]="stakeholderUtils.visibility" type="select">
       </div>
-      <!--<div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
+      <div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
            type="select" [options]="indicatorUtils.indicatorSizes"
            placeholder="Select a size" label="Number Size">
-      </div>-->
+      </div>
       <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
         <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
              [formGroup]="indicatorPath">

src/app/topic/indicators.component.ts

@@ -436,6 +436,16 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     return this.chartIndicatorFb.get('indicatorPaths') as FormArray;
   }
   
+  public getNumberClassBySize(size: IndicatorSize) {
+    if (size === 'small') {
+      return 'uk-width-medium';
+    } else if (size === 'medium') {
+      return 'uk-width-1-4@l uk-width-1-2@m uk-width-1-1';
+    } else {
+      return 'uk-width-1-2@l uk-width-1-1@m uk-width-1-1';
+    }
+  }
+  
   public getChartClassBySize(size: IndicatorSize) {
     if (size === 'small') {
       return 'uk-width-1-3@xl uk-width-1-2@m uk-width-1-1';