From ed8100eac088ab163a7b66d666f9512b20fd44a9 Mon Sep 17 00:00:00 2001 From: Eric Sorenson Date: Wed, 26 Dec 2018 14:16:25 -0600 Subject: [PATCH 1/3] new Work Queue style --- web-client/src/index.pug | 1 + web-client/src/index.scss | 2 + web-client/src/styles/custom.scss | 137 ++++++++++---------- web-client/src/styles/overrides.scss | 2 +- web-client/src/styles/responsive-table.scss | 40 ++++++ web-client/src/views/WorkQueue.jsx | 71 ++++++---- 6 files changed, 164 insertions(+), 89 deletions(-) create mode 100644 web-client/src/styles/responsive-table.scss diff --git a/web-client/src/index.pug b/web-client/src/index.pug index f91c344cafd..c86527b7beb 100644 --- a/web-client/src/index.pug +++ b/web-client/src/index.pug @@ -5,6 +5,7 @@ html(lang="en") meta(built="" + Date()) meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") title U.S. Tax Court Electronic Filing and Case Management System + link(href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,600,700" rel="stylesheet") link(rel="stylesheet" href="index.scss") body #app diff --git a/web-client/src/index.scss b/web-client/src/index.scss index fff8f10ee85..850fffe4083 100644 --- a/web-client/src/index.scss +++ b/web-client/src/index.scss @@ -1,6 +1,8 @@ $font-path: '../node_modules/uswds/dist/fonts'; $image-path: '../node_modules/uswds/dist/img'; +$font-serif: 'Noto Serif JP'; @import '../node_modules/uswds/src/stylesheets/uswds.scss'; @import './styles/overrides.scss'; @import './styles/custom.scss'; +@import './styles/responsive-table.scss'; diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss index 885ff14fc32..4e1e2c41e22 100644 --- a/web-client/src/styles/custom.scss +++ b/web-client/src/styles/custom.scss @@ -89,32 +89,70 @@ h1[tabIndex='-1']:focus { margin-top: 2rem; } +.work-queue-tab-container { + background-color: $color-gray-light; +} + +.work-queue-tab { + display: inline-block; + padding: 1rem 2rem; + border-top: 2px solid $color-gray-light; + border-left: 2px solid $color-gray-light; + margin: 0; + background-color: $color-white; +} + table.work-queue { - a { - display: block; - margin-bottom: 1rem; - font-weight: bold; + td, + th { + border: none; } - border: 1px solid $color-gray-light; - margin-top: 3rem; - border-collapse: collapse; + tbody tr { + border-top: 2px solid $color-gray-light; + } td { - padding-bottom: 1rem; - border: none; - background-color: inherit; - font-weight: inherit; - vertical-align: top; + font-size: 1.4rem; // 14px + label { + margin: 0; + } } - thead { - border: 1px solid $color-gray-light; + thead th { + background-color: $color-white; } - th { - font-size: 1.5rem; + .action-bar { + background-color: #f1f9fc; + font-size: 1.7rem; + + label { + display: inline-block; + margin: 0; + } + + select { + display: inline-block; + width: auto; + margin: 0 1rem; + } + + button { + margin: 0; + } + + .selected-count { + margin-right: 3rem; + font-weight: $font-bold; + } } + + width: 100%; + border-top: none; + border-right: 2px solid $color-gray-light; + border-bottom: 2px solid $color-gray-light; + border-left: 2px solid $color-gray-light; } table.case-list thead th, @@ -143,6 +181,15 @@ input:focus::placeholder { color: transparent; } +.fa-file-pdf { + margin-right: 1rem; +} + +#paygov-link-container { + padding-bottom: 2rem; + text-align: center; +} + .progress-container { max-width: 50rem; height: 2rem; @@ -158,15 +205,6 @@ input:focus::placeholder { transition: all 2s; } -.fa-file-pdf { - margin-right: 1rem; -} - -#paygov-link-container { - padding-bottom: 2rem; - text-align: center; -} - .progress-indicator { position: fixed; z-index: 100; @@ -217,12 +255,20 @@ iframe { padding: 0.5rem 2rem; margin: 0; cursor: pointer; + + h2 { + font-weight: $font-normal; + } } .active { border-bottom: 0.3rem $color-blue solid; cursor: default; font-weight: $font-bold; + + h2 { + font-weight: $font-bold; + } } } @@ -255,44 +301,3 @@ iframe { background-color: white; } } - -.responsive-table { - width: 100%; - - label { - margin: 1rem 0 !important; - } - - .responsive-label { - display: none; - } -} - -@media only screen and (max-width: $small-screen) { - .responsive-table { - thead { - display: none; - } - - tr { - display: block; - } - - td { - display: block; - border: none; - } - - .responsive-title { - border-bottom: 1px solid $color-gray-light; - background: $color-gray-lightest; - font-weight: $font-bold; - } - - .responsive-label { - display: block; - margin-bottom: 0.5rem; - font-weight: $font-bold; - } - } -} diff --git a/web-client/src/styles/overrides.scss b/web-client/src/styles/overrides.scss index a1e23b66fb2..f08a670ba78 100644 --- a/web-client/src/styles/overrides.scss +++ b/web-client/src/styles/overrides.scss @@ -28,7 +28,7 @@ h1 { } h2 { - font-size: 26px; + font-size: 24px; } legend { diff --git a/web-client/src/styles/responsive-table.scss b/web-client/src/styles/responsive-table.scss new file mode 100644 index 00000000000..45e6bdf7769 --- /dev/null +++ b/web-client/src/styles/responsive-table.scss @@ -0,0 +1,40 @@ +.responsive-table { + width: 100%; + + label { + margin: 1rem 0 !important; + } + + .responsive-label { + display: none; + } +} + +@media only screen and (max-width: $small-screen) { + .responsive-table { + thead { + display: none; + } + + tr { + display: block; + } + + td { + display: block; + border: none; + } + + .responsive-title { + border-bottom: 1px solid $color-gray-light; + background: $color-gray-lightest; + font-weight: $font-bold; + } + + .responsive-label { + display: block; + margin-bottom: 0.5rem; + font-weight: $font-bold; + } + } +} diff --git a/web-client/src/views/WorkQueue.jsx b/web-client/src/views/WorkQueue.jsx index 1ca4419a44d..9e553427a09 100644 --- a/web-client/src/views/WorkQueue.jsx +++ b/web-client/src/views/WorkQueue.jsx @@ -10,25 +10,61 @@ export default connect( return (

Work Queue

- +
+
    +
  • +

    My Queue

    +
    • +
  • +

    Section Queue

    +
    • +
+
+
+

Inbox

+
+
- - - + + + + + + + + + + {workQueue.map(item => ( - + + - - - + + + + ))} From 461e4b302919286f0077e666a5f088c07261bfe6 Mon Sep 17 00:00:00 2001 From: Eric Sorenson Date: Wed, 26 Dec 2018 14:37:16 -0600 Subject: [PATCH 2/3] move custom color to variable --- web-client/src/index.scss | 1 + web-client/src/styles/custom.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web-client/src/index.scss b/web-client/src/index.scss index 850fffe4083..706a2b37036 100644 --- a/web-client/src/index.scss +++ b/web-client/src/index.scss @@ -1,6 +1,7 @@ $font-path: '../node_modules/uswds/dist/fonts'; $image-path: '../node_modules/uswds/dist/img'; $font-serif: 'Noto Serif JP'; +$color-primary-alt-lightest: #f1f9fc; @import '../node_modules/uswds/src/stylesheets/uswds.scss'; @import './styles/overrides.scss'; diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss index 4e1e2c41e22..cd8df606fe2 100644 --- a/web-client/src/styles/custom.scss +++ b/web-client/src/styles/custom.scss @@ -124,7 +124,7 @@ table.work-queue { } .action-bar { - background-color: #f1f9fc; + background-color: $color-primary-alt-lightest; font-size: 1.7rem; label { From 21d8df8caa2f9533607b9aca2abaa78a83c873f9 Mon Sep 17 00:00:00 2001 From: Eric Sorenson Date: Wed, 26 Dec 2018 15:38:01 -0600 Subject: [PATCH 3/3] feedback from Kristen --- web-client/src/styles/custom.scss | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss index cd8df606fe2..b6561f3fc90 100644 --- a/web-client/src/styles/custom.scss +++ b/web-client/src/styles/custom.scss @@ -90,16 +90,17 @@ h1[tabIndex='-1']:focus { } .work-queue-tab-container { - background-color: $color-gray-light; + border: 1px solid $color-gray-light; + background-color: $color-gray-lightest; } .work-queue-tab { display: inline-block; padding: 1rem 2rem; - border-top: 2px solid $color-gray-light; - border-left: 2px solid $color-gray-light; + border-right: 1px solid $color-gray-light; margin: 0; background-color: $color-white; + box-shadow: 0 2px 0 $color-white; } table.work-queue { @@ -109,7 +110,7 @@ table.work-queue { } tbody tr { - border-top: 2px solid $color-gray-light; + border-top: 1px solid $color-gray-light; } td { @@ -121,6 +122,7 @@ table.work-queue { thead th { background-color: $color-white; + font-weight: 600; } .action-bar { @@ -150,9 +152,9 @@ table.work-queue { width: 100%; border-top: none; - border-right: 2px solid $color-gray-light; - border-bottom: 2px solid $color-gray-light; - border-left: 2px solid $color-gray-light; + border-right: 1px solid $color-gray-light; + border-bottom: 1px solid $color-gray-light; + border-left: 1px solid $color-gray-light; } table.case-list thead th, @@ -252,8 +254,8 @@ iframe { li { display: inline-block; - padding: 0.5rem 2rem; - margin: 0; + padding: 0.5rem 0; + margin: 0 2rem 0 0; cursor: pointer; h2 {
- MessageTrial DateSent bySelectDocket ReceivedDocumentStatusDueFromTo
+ 2 selected + + + +
- Docket number - {item.docketNumber} + + + {item.docketNumber}Received - Message {item.document.documentType} - {item.messages[0].message} - - Trial Date - {item.trialDate} - - Sent By - {item.messages[0].sentBy} - - Received - {item.messages[0].createdAtFormatted} General Docket12/15/2018{item.messages[0].sentBy}Unassigned