Skip to content

Commit

Permalink
Merge pull request #215 from fedspendingtransparency/mod/11131-reform…
Browse files Browse the repository at this point in the history 
…at-mobile-stacked-view

Mod/11131 reformat mobile stacked view
  • Loading branch information
@nick-torres
nick-torres committed Jul 11, 2024
2 parents e959955 + 23740a6 commit fba97ae
Show file tree
Hide file tree
Showing 13 changed files with 63 additions and 49 deletions.
2 changes: 1 addition & 1 deletion dist/data-transparency-ui.css
View file

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions docs/485.a3afc9db.iframe.bundle.js
View file

This file was deleted.

2 changes: 2 additions & 0 deletions docs/485.e7f45bd1.iframe.bundle.js
View file

Large diffs are not rendered by default.

0 ...485.a3afc9db.iframe.bundle.js.LICENSE.txt → ...485.e7f45bd1.iframe.bundle.js.LICENSE.txt
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions docs/iframe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@
/* eslint-enable object-shorthand */
})
);
};</script><link href="main.d0be1fd2725205e6d15b.css" rel="stylesheet"><style>#root[hidden],
};</script><link href="main.a339a42cbe0f798dcecb.css" rel="stylesheet"><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
Expand All @@ -361,4 +361,4 @@



window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="485.a3afc9db.iframe.bundle.js"></script><script src="main.ddbcd588.iframe.bundle.js"></script></body></html>
window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="485.e7f45bd1.iframe.bundle.js"></script><script src="main.ddbcd588.iframe.bundle.js"></script></body></html>
6 changes: 3 additions & 3 deletions docs/main.d0be1fd2725205e6d15b.css → docs/main.a339a42cbe0f798dcecb.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/main.a339a42cbe0f798dcecb.css.map
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion docs/main.d0be1fd2725205e6d15b.css.map
View file

This file was deleted.

2 changes: 1 addition & 1 deletion docs/project.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"generatedAt":1719954358303,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.8.1"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}
{"generatedAt":1720710537957,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.8.1"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "data-transparency-ui",
"version": "6.2.33",
"version": "6.2.34",
"description": "Library of UI components powering Data Transparency websites",
"main": "dist/index.js",
"style": "dist/data-transparency-ui.css",
Expand Down
51 changes: 15 additions & 36 deletions styles/components/table/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,6 @@ table.usda-table {
background-color: $color-white;
}

&.usda-table__row_odd {
td.usda-table__cell {
background-color: $color-gray-lightest;
}
}

&.usda-table__row_expandable {
button.usda-table__expand-button {
@include button-unstyled;
Expand Down Expand Up @@ -84,12 +78,6 @@ table.usda-table {
tr.usda-table__child-row {
background-color: $color-white;

&.usda-table__row_odd {
td.usda-table__cell {
background-color: $color-gray-lightest;
}
}

&.usda-table__child-row_divider {
font-weight: $font-semibold;
}
Expand Down Expand Up @@ -146,7 +134,6 @@ table.usda-table {

td {
border: rem(1) solid $gray-cool-10;
background-color: unset;
}

thead.usda-table__head {
Expand All @@ -166,7 +153,7 @@ table.usda-table {
}

tbody.usda-table__body {
color: $theme-color-body;
color: $gray-90;
line-height: 1.5;

tr:last-of-type {
Expand All @@ -184,13 +171,17 @@ table.usda-table {
background-color: $gray-cool-2;

&.special-hover-color td:nth-last-of-type(-n + 4) {
background-color: $blue-warm-10;
background-color: $blue-warm-10;
}
}

td.usda-table__cell {
padding: rem(8) rem(16);
height: inherit;

@media (max-width: $tablet-screen - 1) {
padding: 0 rem(16) rem(12);
}
}

// if the td contains an a tag, we want the entire cell to be clickable
Expand All @@ -208,16 +199,18 @@ table.usda-table {
&:hover {
color: $blue-vivid-70;
}
}
}

&.usda-table__row_odd {
&:hover {
background-color: $gray-cool-2;
&:visited {
color: $violet-70v;
}
}

td.usda-table__cell {
background-color: unset;
@media (max-width: $tablet-screen - 1) {
padding: 0 rem(16) rem(12);

a {
padding: 0
}
}
}
}
Expand Down Expand Up @@ -270,20 +263,6 @@ table.usda-table {
background-color: $gray-cool-2;
}
}

&.usda-table__row_odd {
td.usda-table__cell {
&.stickyColumn {
background-color: $color-white;
}
}

&:hover {
td.usda-table__cell.stickyColumn {
background-color: $gray-cool-2;
}
}
}
}
}
}
Expand Down
35 changes: 35 additions & 0 deletions styles/components/table/_tableStacked.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,31 @@ table.usa-dt-table__stacked {
display: block;
width: 100%;


@media (max-width: $tablet-screen - 1) {
font-weight: $font-semibold;

.usda-table__cell-heading {
color: $gray-60;
}

td:first-of-type {
background-color: $blue-warm-70v;
font-size: rem(18);
margin-bottom: rem(12);
color: $gray-2;

.usda-table__cell-heading {
color: $gray-10;
}

a {
color: $gray-2 !important;
text-decoration: underline;
}
}
}

td.usda-table__cell {
// keep display block (vs. flex) for accessibility
display: block;
Expand All @@ -31,13 +56,23 @@ table.usa-dt-table__stacked {
word-break: break-all;
text-align: left;

@media (max-width: $tablet-screen - 1) {
padding: 0 rem(12) rem(16);;
}

.usda-table__cell-heading-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;

.usda-table__cell-heading {
font-weight: $font-semibold;

@media (max-width: $tablet-screen - 1) {
font-weight: normal;
font-size: rem(12);
text-transform: uppercase;
}
}

.usda-table__cell-message {
Expand Down

0 comments on commit fba97ae

Please sign in to comment.