Merge pull request #1448 from ASU/ws2-2190-wbdr

Fix profile squishing grif view

Author: mlsamuelson

packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js

@@ -11,6 +11,11 @@ export default {
       control: "select",
       options: ["true", "false"],
     },
+    columnView: {
+      control: "select",
+      options: ["50%"],
+      description: "50% mimics the webspark 2 column layout",
+    },
   },
   args: { alphaFilter: "false" },
   decorators: [story => <FullLayout>{story()}</FullLayout>],
@@ -40,48 +45,60 @@ const filters = {
 export const webDirectoryExampleDepartments = args => {
   return (
     <div className="uds-content-align">
-      <WebDirectory
-        searchType="departments"
-        deptIds="1349,1353,32397,1518,1520,3534,1350,334996,1504,2000,2003,159390"
-        API_URL="https://test-asu-isearch.ws.asu.edu"
-        searchApiVersion="/api/v1/"
-        filters={filters}
-        display={{...display, grid: "true"}}
-        alphaFilter={args.alphaFilter}
-        // appPathFolder="/my/custom/path/to/component/root/example"
-      />
+      <div className="row">
+        <div className={args.columnView === "50%" ? "col-md-6" : ""}>
+          <WebDirectory
+            searchType="departments"
+            deptIds="1349,1353,32397,1518,1520,3534,1350,334996,1504,2000,2003,159390"
+            API_URL="https://test-asu-isearch.ws.asu.edu"
+            searchApiVersion="/api/v1/"
+            filters={filters}
+            display={{ ...display, grid: "false" }}
+            alphaFilter={args.alphaFilter}
+            // appPathFolder="/my/custom/path/to/component/root/example"
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 export const webDirectoryExamplePeople = args => {
   return (
     <div className="uds-content-align">
-      <WebDirectory
-        searchType="people"
-        ids="mcrow:454517,mdenke:1350,jagarc50:1350,lhillzev:1353"
-        API_URL="https://test-asu-isearch.ws.asu.edu"
-        searchApiVersion="/api/v1/"
-        display={display}
-        alphaFilter={args.alphaFilter}
-        // appPathFolder="/my/custom/path/to/component/root/example"
-      />
+      <div className="row">
+        <div className={args.columnView === "50%" ? "col-md-6" : ""}>
+          <WebDirectory
+            searchType="people"
+            ids="mcrow:454517,mdenke:1350,jagarc50:1350,lhillzev:1353"
+            API_URL="https://test-asu-isearch.ws.asu.edu"
+            searchApiVersion="/api/v1/"
+            display={display}
+            alphaFilter={args.alphaFilter}
+            // appPathFolder="/my/custom/path/to/component/root/example"
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 export const webDirectoryExampleDepartmentsAndPeople = args => {
   return (
     <div className="uds-content-align">
-      <WebDirectory
-        searchType="people_departments"
-        ids=",tgrandli:1344,mcrow:1343,jcunnin8:1358,ccherrer:1358,csmudde:1358"
-        API_URL="https://test-asu-isearch.ws.asu.edu"
-        searchApiVersion="/api/v1/"
-        display={display}
-        alphaFilter={args.alphaFilter}
-        // appPathFolder="/my/custom/path/to/component/root/example"
-      />
+      <div className="row">
+        <div className={args.columnView === "50%" ? "col-md-6" : ""}>
+          <WebDirectory
+            searchType="people_departments"
+            ids=",tgrandli:1344,mcrow:1343,jcunnin8:1358,ccherrer:1358,csmudde:1358"
+            API_URL="https://test-asu-isearch.ws.asu.edu"
+            searchApiVersion="/api/v1/"
+            display={display}
+            alphaFilter={args.alphaFilter}
+            // appPathFolder="/my/custom/path/to/component/root/example"
+          />
+        </div>
+      </div>
     </div>
   );
 };

packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss

@@ -126,12 +126,13 @@ Desktop styles
       margin-bottom: 16px;
       .profile-img-placeholder {
         width: var(--grid-pic-size);
-        height: var(--grid-pic-size);
+        height: fit-content;
         max-width: 100%;
         .profile-img {
           width: var(--grid-pic-size);
-          height: var(--grid-pic-size);
           max-width: 100%;
+          height: auto;
+          aspect-ratio: 1 / 1;
         }
       }
     }