Merged in DSC-1383-davide (pull request DSpace#1224)

[DSC-1383] Fix metrics layout and responsivity Approved-by: Andrea Barbasso
4Science · Jan 16, 2024 · 4d707bf · 4d707bf
2 parents 49ab676 + 3363c67
commit 4d707bf
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 126 deletions.
diff --git a/...out-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.html b/...out-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.html
@@ -1,10 +1,10 @@
-<div class="{{box.style}} w-100">
-	<div class="container" *ngIf="metricRows">
+<div [class]="box.style" class="w-100">
+	<div *ngIf="metricRows">
 		<!-- PRINT ROWS -->
 		<div ds-metric-row
          *ngFor="let metricRow of (metricRows | async)"
          [metricRow]="metricRow"
-         class="d-flex flex-wrap gap-3 mb-3">
+         class="d-flex flex-row flex-wrap align-items-center gap-3">
     </div>
 	</div>
 </div>
diff --git a/...out-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.scss b/...out-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.scss
@@ -2,11 +2,12 @@
 	border: 1px solid black;
 	border-radius: 3px;
 }
-:host {
-	display: flex;
-	// flex:1;
-}
 
 ngb-accordion {
 	flex-grow: 1;
 }
+
+// This class should be applied to the altmetrics box in the CRIS layout tool
+.altmetrics-wrapper {
+  padding: 15px 70px;
+}
diff --git a/...ayout-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.ts b/...ayout-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.ts
@@ -67,15 +67,18 @@ export class CrisLayoutMetricsBoxComponent extends CrisLayoutBoxModelComponent i
     if (isPlatformBrowser(this.platformId)) {
       this.metricsBoxConfiguration = this.box.configuration as MetricsBoxConfiguration;
       this.subs.push(
-        this.itemService.getMetrics(this.item.uuid).pipe(getFirstSucceededRemoteDataPayload())
-          .subscribe((result) => {
-            const matchingMetrics = this.metricsComponentService.getMatchingMetrics(
-              result.page,
-              this.metricsBoxConfiguration.maxColumns,
-              this.metricsBoxConfiguration.metrics
-            );
-            this.metricRows.next(matchingMetrics);
-          }));
+        this.itemService.getMetrics(this.item.uuid).pipe(
+          getFirstSucceededRemoteDataPayload(),
+        ).subscribe((result) => {
+          const matchingMetrics = this.metricsComponentService.getMatchingMetrics(
+            result.page,
+            this.metricsBoxConfiguration.maxColumns,
+            this.metricsBoxConfiguration.metrics,
+          );
+          this.metricRows.next(matchingMetrics);
+          },
+        ),
+      );
     }
   }
 

diff --git a/src/app/shared/metric/metric-altmetric/metric-altmetric.component.html b/src/app/shared/metric/metric-altmetric/metric-altmetric.component.html
@@ -1,23 +1,19 @@
-<div class="row d-flex align-items-center"
+<div class="d-flex flex-nowrap flex-row gapx-3 align-items-center pr-3"
      *ngIf="!failed && !(isHidden$ | async) && (remark | dsListMetricProps: 'data-badge-enabled':isListElement == true)">
-  <div class="col-5 text-left">
-    <div #metricChild>
-      <div
-        class="altmetric-embed"
-        [attr.data-hide-no-mentions]="remark | dsListMetricProps : 'data-hide-no-mentions' : isListElement"
-        [attr.data-hide-less-than]="remark | dsListMetricProps : 'data-hide-less-than' : isListElement"
-        [attr.data-badge-details]="remark | dsListMetricProps : 'data-badge-details' : isListElement"
-        [attr.data-badge-type]="remark | dsListMetricProps : 'badgeType' : isListElement"
-        [attr.data-badge-popover]="remark | dsListMetricProps : 'popover' : isListElement"
-        [attr.data-doi]="remark | dsListMetricProps : 'doiAttr' : isListElement"
-        [attr.data-pmid]="remark | dsListMetricProps : 'pmidAttr' : isListElement"
-        [attr.data-link-target]="remark | dsListMetricProps : 'data-link-target' : isListElement"
-      ></div>
-    </div>
+  <div #metricChild>
+    <div
+      class="altmetric-embed"
+      [attr.data-hide-no-mentions]="remark | dsListMetricProps : 'data-hide-no-mentions' : isListElement"
+      [attr.data-hide-less-than]="remark | dsListMetricProps : 'data-hide-less-than' : isListElement"
+      [attr.data-badge-details]="remark | dsListMetricProps : 'data-badge-details' : isListElement"
+      [attr.data-badge-type]="remark | dsListMetricProps : 'badgeType' : isListElement"
+      [attr.data-badge-popover]="remark | dsListMetricProps : 'popover' : isListElement"
+      [attr.data-doi]="remark | dsListMetricProps : 'doiAttr' : isListElement"
+      [attr.data-pmid]="remark | dsListMetricProps : 'pmidAttr' : isListElement"
+      [attr.data-link-target]="remark | dsListMetricProps : 'data-link-target' : isListElement"
+    ></div>
   </div>
-  <div class="col-7" *ngIf="!hideLabel">
-    <div class="font-weight-bold text-capitalize">
-      {{ metric.metricType | translate }}
-    </div>
+  <div class="font-weight-bold" *ngIf="!hideLabel">
+    {{ "item.page.metric.label." + metric.metricType | translate }}
   </div>
 </div>
diff --git a/src/app/shared/metric/metric-altmetric/metric-altmetric.component.spec.ts b/src/app/shared/metric/metric-altmetric/metric-altmetric.component.spec.ts
@@ -50,7 +50,7 @@ describe('MetricAltmetricComponent', () => {
     expect(component).toBeTruthy();
   });
   it('should render badge div', () => {
-    const div = fixture.debugElement.queryAll(By.css('div'))[3];
+    const div = fixture.debugElement.queryAll(By.css('div'))[2];
     expect(div.nativeElement.className).toEqual('altmetric-embed');
     expect(div.nativeElement.dataset.badgePopover).toEqual('bottom');
     expect(div.nativeElement.dataset.doi).toEqual('10.1056/Test');

diff --git a/src/app/shared/metric/metric-dimensions/metric-dimensions.component.html b/src/app/shared/metric/metric-dimensions/metric-dimensions.component.html
@@ -1,23 +1,19 @@
-<div class="row d-flex align-items-center"
+<div class="d-flex flex-nowrap flex-row gapx-3 align-items-center pr-3"
      *ngIf="!(isHidden$ | async) && !failed && (remark | dsListMetricProps: 'data-badge-enabled':isListElement == true)">
-  <div class="col-5 text-left">
-    <div
-      #metricChild
-      class="__dimensions_badge_embed__"
-      [attr.data-hide-zero-citations]="remark | dsListMetricProps: 'data-hide-zero-citations':isListElement"
-      [attr.data-pmid]="
+  <div
+    #metricChild
+    class="__dimensions_badge_embed__"
+    [attr.data-hide-zero-citations]="remark | dsListMetricProps: 'data-hide-zero-citations':isListElement"
+    [attr.data-pmid]="
       (remark | dsListMetricProps: 'data-doi':isListElement)
           ? null
           : (remark | dsListMetricProps: 'data-pmid':isListElement)
       "
-      [attr.data-doi]="remark | dsListMetricProps: 'data-doi':isListElement"
-      [attr.data-style]="remark | dsListMetricProps: 'data-style':isListElement"
-      [attr.data-legend]="remark | dsListMetricProps: 'data-legend':isListElement"
-    ></div>
-  </div>
-  <div class="col-7" *ngIf="!hideLabel">
-    <div class="font-weight-bold text-capitalize">
-      {{ metric.metricType | translate }}
-    </div>
+    [attr.data-doi]="remark | dsListMetricProps: 'data-doi':isListElement"
+    [attr.data-style]="remark | dsListMetricProps: 'data-style':isListElement"
+    [attr.data-legend]="remark | dsListMetricProps: 'data-legend':isListElement"
+  ></div>
+  <div class="font-weight-bold" *ngIf="!hideLabel">
+    {{ "item.page.metric.label." + metric.metricType | translate }}
   </div>
 </div>
diff --git a/src/app/shared/metric/metric-dimensions/metric-dimensions.component.spec.ts b/src/app/shared/metric/metric-dimensions/metric-dimensions.component.spec.ts
@@ -49,7 +49,7 @@ describe('MetricDimensionsComponent', () => {
     expect(component).toBeTruthy();
   });
   it('should render badge div', () => {
-    const div = fixture.debugElement.queryAll(By.css('div'))[2];
+    const div = fixture.debugElement.queryAll(By.css('div'))[1];
     expect(div.nativeElement.className).toEqual('__dimensions_badge_embed__');
     expect(div.nativeElement.dataset.doi).toEqual('10.1056/Test');
     expect(div.nativeElement.dataset.style).toEqual('small_rectangle');

diff --git a/src/app/shared/metric/metric-googlescholar/metric-googlescholar.component.html b/src/app/shared/metric/metric-googlescholar/metric-googlescholar.component.html
@@ -6,8 +6,8 @@
       </div>
       <div class="col">
         <div class="d-flex justify-content-center">
-          <div class="font-weight-bold text-capitalize">
-            {{ metric.metricType | translate }}
+          <div class="font-weight-bold">
+            {{ "item.page.metric.label." + metric.metricType | translate }}
           </div>
         </div>
       </div>

diff --git a/src/app/shared/metric/metric-loader/base-metric.component.scss b/src/app/shared/metric/metric-loader/base-metric.component.scss
@@ -1,16 +1,14 @@
 ::ng-deep {
-  .container.plumX.alert.metric-container,
-  .container.altmetric.alert.metric-container,
-  .container.dimensions.alert.metric-container {
-    // .plumX & .altmetric & dimensions-> metricType dimensions
-    display: contents;
-  }
+  .metric-container.alert {
 
-  .container.alert.metric-container {
     max-height: inherit;
     min-height: 7.1em;
     height: 100%;
 
+    margin: 0;
+
+    width: 250px;
+
     .btn-overlap-container {
       display: none !important;
       z-index: 1;
@@ -20,81 +18,87 @@
       color: inherit;
       text-decoration: auto;
     }
-  }
 
-  .container.alert.metric-container:hover {
+    &:hover {
       opacity: 0.7;
 
-    .btn-overlap-container {
-      margin-top: 0.5em;
-      display: inline-flex !important;
-      z-index: 3;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      color: white;
-      -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%),
+      .btn-overlap-container {
+        margin-top: 0.5em;
+        display: inline-flex !important;
+        z-index: 3;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%),
         0 1px 1px rgb(0 0 0 / 8%);
-      box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%),
+        box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%),
         0 1px 1px rgb(0 0 0 / 8%);
+      }
     }
-  }
 
-  .alert.metric-container.alert-info {
-    .btn-overlap-container {
-      background-color: #113d4f;
-      border-color: #113d4f;
+    .plumX, .altmetric, .dimensions {
+      // .plumX & .altmetric & dimensions-> metricType dimensions
+      display: contents;
     }
-  }
 
-  .alert.metric-container.alert-success {
-    .btn-overlap-container {
-      background-color: #4c6722;
-      border-color: #4c6722;
+    &.alert-info {
+      .btn-overlap-container {
+        background-color: #113d4f;
+        border-color: #113d4f;
+      }
     }
-  }
 
-  .alert.metric-container.alert-danger {
-    .btn-overlap-container {
-      background-color: #6c2323;
-      border-color: #6c2323;
+    &.alert-success {
+      .btn-overlap-container {
+        background-color: #4c6722;
+        border-color: #4c6722;
+      }
     }
-  }
 
-  .alert.metric-container.alert-primary {
-    .btn-overlap-container {
-      background-color: #004085;
-      border-color: #004085;
+    &.alert-danger {
+      .btn-overlap-container {
+        background-color: #6c2323;
+        border-color: #6c2323;
+      }
     }
-  }
 
-  .alert.metric-container.alert-secondary {
-    .btn-overlap-container {
-      background-color: #383d41;
-      border-color: #383d41;
+    &.alert-primary {
+      .btn-overlap-container {
+        background-color: #004085;
+        border-color: #004085;
+      }
     }
-  }
 
-  .alert.metric-container.alert-warning {
-    .btn-overlap-container {
-      background-color: #7b4d1b;
-      border-color: #7b4d1b;
+    &.alert-secondary {
+      .btn-overlap-container {
+        background-color: #383d41;
+        border-color: #383d41;
+      }
     }
-  }
 
-  .alert.metric-container.alert-dark {
-    .btn-overlap-container {
-      background-color: #1b1e21;
-      border-color: #1b1e21;
+    &.alert-warning {
+      .btn-overlap-container {
+        background-color: #7b4d1b;
+        border-color: #7b4d1b;
+      }
     }
-  }
 
-  .alert.metric-container.alert-light {
-    .btn-overlap-container {
-      background-color: #818182;
-      border-color: #818182;
-      color: black !important;
+    &.alert-dark {
+      .btn-overlap-container {
+        background-color: #1b1e21;
+        border-color: #1b1e21;
+      }
     }
+
+    &.alert-light {
+      .btn-overlap-container {
+        background-color: #818182;
+        border-color: #818182;
+        color: black !important;
+      }
+    }
+
   }
 }
diff --git a/src/app/shared/metric/metric-loader/metric-loader.component.html b/src/app/shared/metric/metric-loader/metric-loader.component.html
@@ -1,3 +1,3 @@
-<div class="container p-2 mb-0" style="width: 250px;" role="alert" [ngClass]="metric | dsMetricStyleConfig">
+<div role="alert" [ngClass]="metric | dsMetricStyleConfig">
   <div #container></div>
 </div>
diff --git a/src/app/shared/metric/metric-plumx/metric-plumx.component.html b/src/app/shared/metric/metric-plumx/metric-plumx.component.html
@@ -1,4 +1,4 @@
-<div class="row d-flex align-items-center justify-content-center" *ngIf="remark && !(isHidden$ | async)">
+<div class="d-flex flex-nowrap flex-row gapx-3 align-items-center pr-3" *ngIf="remark && !(isHidden$ | async)">
   <div [ngSwitch]="(remark | dsListMetricProps: 'type':isListElement)" [class.person-type-plumX]="isListElement">
     <ng-container *ngSwitchCase="'Person'">
       <a *ngIf="remark && (remark | dsListMetricProps: 'data-person-badge-enabled':isListElement == true)"
@@ -30,4 +30,7 @@
       >{{ remark | dsListMetricProps: "placeholder":isListElement }}</a>
     </ng-container>
   </div>
+  <div class="font-weight-bold" *ngIf="!hideLabel">
+    {{ "item.page.metric.label." + metric.metricType | translate }}
+  </div>
 </div>
diff --git a/src/app/shared/metric/pipes/metric-style-config/metric-style-config.pipe.ts b/src/app/shared/metric/pipes/metric-style-config/metric-style-config.pipe.ts
@@ -17,7 +17,7 @@ export class MetricStyleConfigPipe implements PipeTransform {
 
   transform(metric: Metric): unknown {
     if (metric) {
-      let metricClass = 'alert-warning'; // default style
+      let metricClass = 'alert alert-warning'; // default style
 
       // check if metric has a preconfigured style
       const metricTypeConfig = this.style.find((x) => isEqual(x.type, metric.metricType));
@@ -31,7 +31,6 @@ export class MetricStyleConfigPipe implements PipeTransform {
       classes[metric.metricType] = true;
       const classlist = {
         ...classes,
-        alert: true,
         'metric-container': true,
       };
       classlist[metricClass] = true;

diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
@@ -3184,7 +3184,9 @@
 
   "item.page.metric.details": "Details",
 
-  "item.page.metric.label.altmetrics": "Altmetrics©",
+  "item.page.metric.label.altmetric": "Altmetrics©",
+
+  "item.page.metric.label.dimensions": "Dimensions",
 
   "item.page.metric.label.check": "Check",