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.
2023-07-06 16:38:44 -04:00 · 2023-07-06 16:38:44 -04:00 · 746a41c524
parent 95068495ba
commit 746a41c524
8 changed files with 99 additions and 88 deletions
--- a/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
+++ b/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) {
-      instructionsShown = instructions
-        .split(' ')
-        .slice(0, maxWordCount)
-        .join(' ');
-      instructionsShown += '...';
-    } else if (lineCount(instructions) > maxLineCount) {
-      instructionsShown = instructions.split('\n').slice(0, 5).join(' ');
-      instructionsShown += '...';
-    }
+    className += ' markdown-collapsed';
  }

  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()}
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/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
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@ -180,17 +180,23 @@ h1.with-icons {
 }

 dl {
-  display: grid;
-  line-height: 1.2em;
-  grid-template-columns: 25% 75%;
+  display: block;
+  grid-template-columns: 35% 65%;
+  font-size: .8rem;
+  line-height: 1.2rem;
 }

-dt {
+dl dt {
+  display: inline-block;
  font-weight: 600;
-  font-size: 14px;
-  line-height: 18px;
+  min-width: 5rem;
  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;
--- a/spiffworkflow-frontend/src/index.scss
+++ b/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 {
-  margin: 0 auto;
+div.markdown {
  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%;
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/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
-            hotCrumbs={[
-              ['Process Groups', '/admin'],
-              {
-                entityToExplode: processModelId,
-                entityType: 'process-model-id',
-                linkLastItem: true,
-              },
-              [`Process Instance Id: ${processInstance.id}`],
-            ]}
-          />
-          <Stack orientation="horizontal" gap={1}>
-            <h1 className="with-icons">
-              Process Instance Id: {processInstance.id}
-            </h1>
-            {buttonIcons()}
-          </Stack>
-          {getInfoTag()}
-          <ProcessInterstitial
-            processInstanceId={processInstance.id}
-            processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
-            allowRedirect={false}
-            smallSpinner
-            collapsableInstructions
-            executeTasks={false}
-          />
-          <Grid condensed fullWidth>
-            <Column md={6} lg={8} sm={4}>
-              <TaskListTable
-                apiPath="/tasks"
-                additionalParams={`process_instance_id=${processInstance.id}`}
-                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."
-                paginationClassName="with-large-bottom-margin"
-                textToShowIfEmpty="There are no tasks you can complete for this process instance."
-                shouldPaginateTable={false}
-                showProcessModelIdentifier={false}
-                showProcessId={false}
-                showStartedBy={false}
-                showTableDescriptionAsTooltip
-                showDateStarted={false}
-                showLastUpdated={false}
-                hideIfNoTasks
-                canCompleteAllTasks
-              />
-            </Column>
-          </Grid>
-          {taskUpdateDisplayArea()}
-          {processDataDisplayArea()}
-          <br />
-          {viewMostRecentStateComponent()}
-        </div>
+        <ProcessBreadcrumb
+          hotCrumbs={[
+            ['Process Groups', '/admin'],
+            {
+              entityToExplode: processModelId,
+              entityType: 'process-model-id',
+              linkLastItem: true,
+            },
+            [`Process Instance Id: ${processInstance.id}`],
+          ]}
+        />
+        <Stack orientation="horizontal" gap={1}>
+          <h1 className="with-icons">
+            Process Instance Id: {processInstance.id}
+          </h1>
+          {buttonIcons()}
+        </Stack>
+        {getInfoTag()}
+        <ProcessInterstitial
+          processInstanceId={processInstance.id}
+          processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
+          allowRedirect={false}
+          smallSpinner
+          collapsableInstructions
+          executeTasks={false}
+        />
+        <Grid condensed fullWidth>
+          <Column md={6} lg={8} sm={4}>
+            <TaskListTable
+              apiPath="/tasks"
+              additionalParams={`process_instance_id=${processInstance.id}`}
+              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."
+              paginationClassName="with-large-bottom-margin"
+              textToShowIfEmpty="There are no tasks you can complete for this process instance."
+              shouldPaginateTable={false}
+              showProcessModelIdentifier={false}
+              showProcessId={false}
+              showStartedBy={false}
+              showTableDescriptionAsTooltip
+              showDateStarted={false}
+              showLastUpdated={false}
+              hideIfNoTasks
+              canCompleteAllTasks
+            />
+          </Column>
+        </Grid>
+        {taskUpdateDisplayArea()}
+        {processDataDisplayArea()}
+        <br />
+        {viewMostRecentStateComponent()}
        {getTabs()}
      </>
    );
--- a/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx
+++ b/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>
+    </>
  );
 }
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/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;
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/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>
+      </>
    );
  }