Просмотр исходного кода

Match learning report metric height to schedule cards

彭峰 3 дней назад
Родитель
Сommit
449de0b31b

+ 30 - 0
projects/xiaoshu-admin/src/app/pages/operations-overview-metrics.scss

@@ -89,6 +89,36 @@ app-operations-payroll .payroll-metrics.overview-metrics > article > strong {
   }
 }
 
+/* Long word totals need the card width, without pushing labels into vertical text. */
+app-operations-learning-reports .report-metrics.overview-metrics > article {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr auto;
+  row-gap: 2px;
+  min-height: 124px;
+  padding: 16px 18px;
+}
+
+app-operations-learning-reports .report-metrics.overview-metrics > article > span {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+app-operations-learning-reports .report-metrics.overview-metrics > article > strong {
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  justify-self: end;
+  font-size: clamp(30px, 2.25vw, 43px) !important;
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+app-operations-learning-reports .report-metrics.overview-metrics > article > small {
+  grid-column: 1;
+  grid-row: 3;
+  overflow-wrap: normal;
+}
+
 /* The selected day is context; the four live figures are the metrics. */
 app-admin-dashboard .trend-summary.overview-metrics {
   grid-template-columns: repeat(4, minmax(0, 1fr));