Feature/never ending UI tweaks 2 (#377)

* Using a rem based measurement rather than pixels, to better handle 4k displays and their adjusted font sizes - and setting relatively large breakpoints and page width limits that should result in a better view of the tables on the home page.

* Here is the latest:

    * Improved metadata display on the process instance page, with better widths, grayed out text (which I lost at some point).
    * Reduced the End Task "instructions for end user" size, and added a fade out on the bottom.
    * Improved the "chicken buttons" for custom columns on the process instance list filters, which can now accommodate very long names for the columns.
    * Removed the "show-page" which is more consistently handled by the content wrappers for the different routers.

spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx

@@ -73,29 +73,20 @@ export default function InstructionsForEndUser({
     return null;
   };
 
-  let instructionsShown = instructions;
+  let className = 'markdown';
   if (collapsed) {
-    if (wordCount(instructions) > maxWordCount) {
+    className += ' markdown-collapsed';
-      instructionsShown = instructions
-        .split(' ')
-        .slice(0, maxWordCount)
-        .join(' ');
-      instructionsShown += '...';
-    } else if (lineCount(instructions) > maxLineCount) {
-      instructionsShown = instructions.split('\n').slice(0, 5).join(' ');
-      instructionsShown += '...';
-    }
   }
 
   return (
     <div style={{ margin: '20px 0 20px 0' }}>
-      <div className="markdown">
+      <div className={className}>
         {/*
           https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
           This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.
         */}
         <div data-color-mode="light">
-          <MDEditor.Markdown linkTarget="_blank" source={instructionsShown} />
+          <MDEditor.Markdown linkTarget="_blank" source={instructions} />
         </div>
       </div>
       {showCollapseToggle()}

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1195,7 +1195,7 @@ export default function ProcessInstanceListTable({
         );
       });
       return (
-        <Grid fullWidth>
+        <Grid narrow fullWidth className="filter-buttons">
           {tags}
           <Column md={1} lg={1} sm={1}>
             <Button

spiffworkflow-frontend/src/index.css

@@ -180,17 +180,23 @@ h1.with-icons {
 }
 
 dl {
-  display: grid;
+  display: block;
-  line-height: 1.2em;
+  grid-template-columns: 35% 65%;
-  grid-template-columns: 25% 75%;
+  font-size: .8rem;
+  line-height: 1.2rem;
 }
 
-dt {
+dl dt {
+  display: inline-block;
   font-weight: 600;
-  font-size: 14px;
+  min-width: 5rem;
-  line-height: 18px;
   color: #161616;
+}
 
+dl dd {
+  display: inline-block;
+  padding-left: 1rem;
+  color: #525252;
 }
 
 .smaller-text {
@@ -398,9 +404,11 @@ td.actions-cell {
 .process-instance-list-table {
   margin: 0;
   padding: 0;
-  width: fit-content;
 }
 
+.process-instance-list-table button.button-tag {
+  max-width: calc(100% - 1rem);
+}
 
 .process-instance-table-header {
   margin-bottom: 1em;

spiffworkflow-frontend/src/index.scss

@@ -23,20 +23,20 @@ main {
 }
 
 .fixed-width-container {
-  padding-left: 0px;
+  padding-left: 0;
   overflow: visible;
 }
 
-@media (min-width: 1400px) {
+@media (min-width: 99rem) {
   .fixed-width-container {
-    max-width: 1280px;
+    max-width: 99rem;
     padding-right: 0;
   }
 }
 
-@media (min-width: 1056px) {
+@media (min-width: 80rem) {
   .fixed-width-container {
-    padding-left: 180px;
+    padding-left: 10rem;
     padding-right: 2rem;
   }
 }
@@ -48,13 +48,27 @@ li.cds--accordion__item {
   max-width: 100%;
 }
 
-div.show-page, div.markdown, div.markdown-collapsed, div.markdown-collapsable {
+div.markdown {
-  margin: 0 auto;
   max-width: 1000px;
   padding: 15px 0 15px 0;
   overflow: visible;
 }
 
+div.markdown-collapsed {
+  max-height: 200px;
+  overflow: hidden;
+
+  --mask: linear-gradient(to bottom,
+          rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%,
+          rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
+  ) 100% 50% / 100% 100% repeat-x;
+
+  font: 2em/1.6em Arial;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+}
+
+
 .cds--data-table-content {
   width: fit-content;
   min-width: 100%;

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -336,7 +336,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
 
     return (
       <Grid condensed fullWidth>
-        <Column sm={4} md={4} lg={8}>
+        <Column sm={4} md={4} lg={5}>
           <dl>
             <dt>Status:</dt>
             <dd>
@@ -1070,59 +1070,57 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
 
     return (
       <>
-        <div className="show-page">
+        <ProcessBreadcrumb
-          <ProcessBreadcrumb
+          hotCrumbs={[
-            hotCrumbs={[
+            ['Process Groups', '/admin'],
-              ['Process Groups', '/admin'],
+            {
-              {
+              entityToExplode: processModelId,
-                entityToExplode: processModelId,
+              entityType: 'process-model-id',
-                entityType: 'process-model-id',
+              linkLastItem: true,
-                linkLastItem: true,
+            },
-              },
+            [`Process Instance Id: ${processInstance.id}`],
-              [`Process Instance Id: ${processInstance.id}`],
+          ]}
-            ]}
+        />
-          />
+        <Stack orientation="horizontal" gap={1}>
-          <Stack orientation="horizontal" gap={1}>
+          <h1 className="with-icons">
-            <h1 className="with-icons">
+            Process Instance Id: {processInstance.id}
-              Process Instance Id: {processInstance.id}
+          </h1>
-            </h1>
+          {buttonIcons()}
-            {buttonIcons()}
+        </Stack>
-          </Stack>
+        {getInfoTag()}
-          {getInfoTag()}
+        <ProcessInterstitial
-          <ProcessInterstitial
+          processInstanceId={processInstance.id}
-            processInstanceId={processInstance.id}
+          processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
-            processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
+          allowRedirect={false}
-            allowRedirect={false}
+          smallSpinner
-            smallSpinner
+          collapsableInstructions
-            collapsableInstructions
+          executeTasks={false}
-            executeTasks={false}
+        />
-          />
+        <Grid condensed fullWidth>
-          <Grid condensed fullWidth>
+          <Column md={6} lg={8} sm={4}>
-            <Column md={6} lg={8} sm={4}>
+            <TaskListTable
-              <TaskListTable
+              apiPath="/tasks"
-                apiPath="/tasks"
+              additionalParams={`process_instance_id=${processInstance.id}`}
-                additionalParams={`process_instance_id=${processInstance.id}`}
+              tableTitle="Tasks I can complete"
-                tableTitle="Tasks I can complete"
+              tableDescription="These are tasks that can be completed by you, either because they were assigned to a group you are in, or because they were assigned directly to you."
-                tableDescription="These are tasks that can be completed by you, either because they were assigned to a group you are in, or because they were assigned directly to you."
+              paginationClassName="with-large-bottom-margin"
-                paginationClassName="with-large-bottom-margin"
+              textToShowIfEmpty="There are no tasks you can complete for this process instance."
-                textToShowIfEmpty="There are no tasks you can complete for this process instance."
+              shouldPaginateTable={false}
-                shouldPaginateTable={false}
+              showProcessModelIdentifier={false}
-                showProcessModelIdentifier={false}
+              showProcessId={false}
-                showProcessId={false}
+              showStartedBy={false}
-                showStartedBy={false}
+              showTableDescriptionAsTooltip
-                showTableDescriptionAsTooltip
+              showDateStarted={false}
-                showDateStarted={false}
+              showLastUpdated={false}
-                showLastUpdated={false}
+              hideIfNoTasks
-                hideIfNoTasks
+              canCompleteAllTasks
-                canCompleteAllTasks
+            />
-              />
+          </Column>
-            </Column>
+        </Grid>
-          </Grid>
+        {taskUpdateDisplayArea()}
-          {taskUpdateDisplayArea()}
+        {processDataDisplayArea()}
-          {processDataDisplayArea()}
+        <br />
-          <br />
+        {viewMostRecentStateComponent()}
-          {viewMostRecentStateComponent()}
-        </div>
         {getTabs()}
       </>
     );

spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx

@@ -16,7 +16,7 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
   }
 
   return (
-    <div className="show-page">
+    <>
       <ProcessBreadcrumb
         hotCrumbs={[
           ['Process Groups', '/admin'],
@@ -36,6 +36,6 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
         processInstanceShowPageUrl={processInstanceShowPageUrl}
         allowRedirect
       />
-    </div>
+    </>
   );
 }

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -616,7 +616,7 @@ export default function ProcessModelShow() {
 
   if (processModel) {
     return (
-      <div className="show-page">
+      <>
         {fileUploadModal()}
         {confirmOverwriteFileDialog()}
         <ProcessBreadcrumb
@@ -718,7 +718,7 @@ export default function ProcessModelShow() {
           />
           <span data-qa="process-model-show-permissions-loaded" />
         </Can>
-      </div>
+      </>
     );
   }
   return null;

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -502,7 +502,7 @@ export default function TaskShow() {
     }
 
     return (
-      <div className="show-page">
+      <>
         <ProcessBreadcrumb
           hotCrumbs={[
             [
@@ -521,7 +521,7 @@ export default function TaskShow() {
         </h3>
         <InstructionsForEndUser task={task} />
         {formElement()}
-      </div>
+      </>
     );
   }