Teacher Tool: Assorted Small UI Fixes (#10180)

This change makes a few small UI fixes: Fixes width of criteria on firefox (webkit not supported) Remove "Max" and display a permanent check instead when the user reaches the max allowed count for a criteria. Fix line wrapping for criteria
microsoft · Sep 13, 2024 · 8e32436 · 8e32436
1 parent 7e64326
commit 8e32436
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/teachertool/src/components/CatalogOverlay.tsx b/teachertool/src/components/CatalogOverlay.tsx
@@ -40,26 +40,28 @@ interface CatalogItemLabelProps {
     recentlyAdded: boolean;
 }
 const CatalogItemLabel: React.FC<CatalogItemLabelProps> = ({ catalogCriteria, isMaxed, recentlyAdded }) => {
-    const showRecentlyAddedIndicator = recentlyAdded && !isMaxed;
     return (
         <div className={css["catalog-item-label"]}>
             <div className={css["action-indicators"]}>
                 {isMaxed ? (
-                    <span>{Strings.Max}</span>
+                    <i
+                        className="fas fa-check"
+                        title={Strings.MaxReached}
+                    />
                 ) : (
                     <>
                         <i
                             className={classList(
                                 "fas fa-check",
                                 css["recently-added-indicator"],
-                                showRecentlyAddedIndicator ? undefined : css["hide-indicator"]
+                                recentlyAdded ? undefined : css["hide-indicator"]
                             )}
                             title={lf("Added!")}
                         />
                         <i
                             className={classList(
                                 "fas fa-plus",
-                                showRecentlyAddedIndicator ? css["hide-indicator"] : undefined
+                                recentlyAdded ? css["hide-indicator"] : undefined
                             )}
                             title={Strings.AddToChecklist}
                         />

diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -28,6 +28,7 @@
 
     .segment-container {
         display: flex;
+        flex-wrap: wrap;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
@@ -158,7 +159,8 @@
     .criteria-description {
         color: var(--pxt-page-foreground-light);
         margin-top: 0.2rem;
-        width: -webkit-fill-available;
+        width: 100%; // For non-webkit browsers
+        width: -webkit-fill-available; // Webkit browsers
 
         &.for-print {
             font-style: italic;

diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -80,7 +80,8 @@
     gap: 0.5rem;
     align-items: center;
     justify-content: flex-start;
-    width: -webkit-fill-available;
+    width: 100%; // For non-webkit browsers
+    width: -webkit-fill-available; // Webkit browsers
     padding: 0.5rem;
 }
 
@@ -89,7 +90,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    width: -webkit-fill-available;
+    width: 100%; // For non-webkit browsers
+    width: -webkit-fill-available; // Webkit browsers
     min-height: 9rem;
     gap: 0.5rem;
 
@@ -163,7 +165,8 @@
 .separator {
     border-bottom: solid 1px var(--pxt-content-accent);
     margin-top: 0.5rem;
-    width: -webkit-fill-available;
+    width: 100%; // For non-webkit browsers
+    width: -webkit-fill-available; // Webkit browsers
 }
 
 .result-details {
@@ -302,4 +305,4 @@
     display: flex;
     flex-direction: column;
     margin-top: 0.5rem;
-}
+}
diff --git a/teachertool/src/constants.ts b/teachertool/src/constants.ts
@@ -32,7 +32,6 @@ export namespace Strings {
     export const Continue = lf("Continue");
     export const Loading = lf("Loading...");
     export const Close = lf("Close");
-    export const Max = lf("Max");
     export const AddToChecklist = lf("Add to Checklist");
     export const SelectCriteriaDescription = lf("Select the criteria you'd like to include");
     export const Checklist = lf("Checklist");
@@ -53,6 +52,7 @@ export namespace Strings {
     export const EvaluationComplete = lf("Evaluation complete");
     export const UnableToEvaluatePartial = lf("Unable to evaluate some criteria");
     export const GiveFeedback = lf("Give Feedback");
+    export const MaxReached = lf("Maximum count reached for this item");
 }
 
 export namespace Ticks {

diff --git a/teachertool/src/services/backendRequests.ts b/teachertool/src/services/backendRequests.ts
@@ -1,4 +1,3 @@
-import { Strings } from "../constants";
 import { stateAndDispatch } from "../state";
 import { ErrorCode } from "../types/errorCode";
 import { logError } from "./loggingService";