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.
This commit is contained in:
parent
95068495ba
commit
746a41c524
|
@ -73,29 +73,20 @@ export default function InstructionsForEndUser({
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
let instructionsShown = instructions;
|
let className = 'markdown';
|
||||||
if (collapsed) {
|
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 (
|
return (
|
||||||
<div style={{ margin: '20px 0 20px 0' }}>
|
<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)
|
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.
|
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">
|
<div data-color-mode="light">
|
||||||
<MDEditor.Markdown linkTarget="_blank" source={instructionsShown} />
|
<MDEditor.Markdown linkTarget="_blank" source={instructions} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{showCollapseToggle()}
|
{showCollapseToggle()}
|
||||||
|
|
|
@ -1195,7 +1195,7 @@ export default function ProcessInstanceListTable({
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<Grid fullWidth>
|
<Grid narrow fullWidth className="filter-buttons">
|
||||||
{tags}
|
{tags}
|
||||||
<Column md={1} lg={1} sm={1}>
|
<Column md={1} lg={1} sm={1}>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -180,17 +180,23 @@ h1.with-icons {
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
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-weight: 600;
|
||||||
font-size: 14px;
|
min-width: 5rem;
|
||||||
line-height: 18px;
|
|
||||||
color: #161616;
|
color: #161616;
|
||||||
|
}
|
||||||
|
|
||||||
|
dl dd {
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: #525252;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smaller-text {
|
.smaller-text {
|
||||||
|
@ -398,9 +404,11 @@ td.actions-cell {
|
||||||
.process-instance-list-table {
|
.process-instance-list-table {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: fit-content;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.process-instance-list-table button.button-tag {
|
||||||
|
max-width: calc(100% - 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
.process-instance-table-header {
|
.process-instance-table-header {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
|
|
@ -23,20 +23,20 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-width-container {
|
.fixed-width-container {
|
||||||
padding-left: 0px;
|
padding-left: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 99rem) {
|
||||||
.fixed-width-container {
|
.fixed-width-container {
|
||||||
max-width: 1280px;
|
max-width: 99rem;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1056px) {
|
@media (min-width: 80rem) {
|
||||||
.fixed-width-container {
|
.fixed-width-container {
|
||||||
padding-left: 180px;
|
padding-left: 10rem;
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -48,13 +48,27 @@ li.cds--accordion__item {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.show-page, div.markdown, div.markdown-collapsed, div.markdown-collapsable {
|
div.markdown {
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
padding: 15px 0 15px 0;
|
padding: 15px 0 15px 0;
|
||||||
overflow: visible;
|
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 {
|
.cds--data-table-content {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|
|
@ -336,7 +336,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid condensed fullWidth>
|
<Grid condensed fullWidth>
|
||||||
<Column sm={4} md={4} lg={8}>
|
<Column sm={4} md={4} lg={5}>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Status:</dt>
|
<dt>Status:</dt>
|
||||||
<dd>
|
<dd>
|
||||||
|
@ -1070,7 +1070,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="show-page">
|
|
||||||
<ProcessBreadcrumb
|
<ProcessBreadcrumb
|
||||||
hotCrumbs={[
|
hotCrumbs={[
|
||||||
['Process Groups', '/admin'],
|
['Process Groups', '/admin'],
|
||||||
|
@ -1122,7 +1121,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
||||||
{processDataDisplayArea()}
|
{processDataDisplayArea()}
|
||||||
<br />
|
<br />
|
||||||
{viewMostRecentStateComponent()}
|
{viewMostRecentStateComponent()}
|
||||||
</div>
|
|
||||||
{getTabs()}
|
{getTabs()}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="show-page">
|
<>
|
||||||
<ProcessBreadcrumb
|
<ProcessBreadcrumb
|
||||||
hotCrumbs={[
|
hotCrumbs={[
|
||||||
['Process Groups', '/admin'],
|
['Process Groups', '/admin'],
|
||||||
|
@ -36,6 +36,6 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
|
||||||
processInstanceShowPageUrl={processInstanceShowPageUrl}
|
processInstanceShowPageUrl={processInstanceShowPageUrl}
|
||||||
allowRedirect
|
allowRedirect
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -616,7 +616,7 @@ export default function ProcessModelShow() {
|
||||||
|
|
||||||
if (processModel) {
|
if (processModel) {
|
||||||
return (
|
return (
|
||||||
<div className="show-page">
|
<>
|
||||||
{fileUploadModal()}
|
{fileUploadModal()}
|
||||||
{confirmOverwriteFileDialog()}
|
{confirmOverwriteFileDialog()}
|
||||||
<ProcessBreadcrumb
|
<ProcessBreadcrumb
|
||||||
|
@ -718,7 +718,7 @@ export default function ProcessModelShow() {
|
||||||
/>
|
/>
|
||||||
<span data-qa="process-model-show-permissions-loaded" />
|
<span data-qa="process-model-show-permissions-loaded" />
|
||||||
</Can>
|
</Can>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
|
|
@ -502,7 +502,7 @@ export default function TaskShow() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="show-page">
|
<>
|
||||||
<ProcessBreadcrumb
|
<ProcessBreadcrumb
|
||||||
hotCrumbs={[
|
hotCrumbs={[
|
||||||
[
|
[
|
||||||
|
@ -521,7 +521,7 @@ export default function TaskShow() {
|
||||||
</h3>
|
</h3>
|
||||||
<InstructionsForEndUser task={task} />
|
<InstructionsForEndUser task={task} />
|
||||||
{formElement()}
|
{formElement()}
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue