From 2a475a67132f71fce9682469e38aaa7d3d182011 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 30 Jul 2018 13:51:58 -0400 Subject: [PATCH] Various UI fixes use .icon-link in various places --- scss/elements/_block_lists.scss | 4 ++ scss/elements/_icon_link.scss | 41 ++++++++++----- scss/elements/_inputs.scss | 11 ++-- scss/elements/_tables.scss | 78 ++++++++++++++++------------ scss/sections/_projects_list.scss | 15 +----- templates/request_approval.html.to | 5 +- templates/requests.html.to | 64 +++++++++++------------ templates/workspace_members.html.to | 6 +-- templates/workspace_projects.html.to | 5 +- 9 files changed, 128 insertions(+), 101 deletions(-) diff --git a/scss/elements/_block_lists.scss b/scss/elements/_block_lists.scss index abf51e03..e7caed75 100644 --- a/scss/elements/_block_lists.scss +++ b/scss/elements/_block_lists.scss @@ -58,6 +58,10 @@ .block-list__header { @include block-list-header; + + .block-list__header__link { + @include icon-link; + } } .block-list__title { diff --git a/scss/elements/_icon_link.scss b/scss/elements/_icon_link.scss index 334c21c4..95e372ec 100644 --- a/scss/elements/_icon_link.scss +++ b/scss/elements/_icon_link.scss @@ -1,4 +1,18 @@ +@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) { + color: $color; + + &:hover { + background-color: $hover-color; + color: $color; + } + + .icon { + @include icon-color($color); + } +} + @mixin icon-link { + @include icon-link-color($color-primary); @include h5; display: inline-flex; flex-direction: row; @@ -16,6 +30,16 @@ } } +@mixin icon-link-large { + @include h4; + font-weight: normal; + + .icon { + @include icon-size(16); + margin-right: $gap * 2; + } +} + @mixin icon-link-vertical { flex-direction: column; @@ -24,19 +48,6 @@ } } -@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) { - color: $color; - - &:hover { - background-color: $hover-color; - color: $color; - } - - .icon { - @include icon-color($color); - } -} - .icon-link { @include icon-link; @include icon-link-color($color-primary); @@ -44,4 +55,8 @@ &.icon-link--vertical { @include icon-link-vertical; } + + &.icon-link--large { + @include icon-link-large; + } } diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index 2f3cf594..f303a66c 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -202,11 +202,15 @@ select { flex-grow: 1; &:first-child .usa-input { - margin-top: 0; + &:first-child { + margin-top: 0; + } } &:last-child .usa-input { - margin-bottom: 0; + &:first-child { + margin-top: 0; + } } } @@ -216,7 +220,8 @@ select { .form-col { .usa-input { - margin: 0 ($gap * 4); + margin-left: ($gap * 4); + margin-right: ($gap * 4); } &:first-child { diff --git a/scss/elements/_tables.scss b/scss/elements/_tables.scss index 5971be8f..e1602dfd 100644 --- a/scss/elements/_tables.scss +++ b/scss/elements/_tables.scss @@ -8,44 +8,54 @@ @include panel-margin; min-width: 100%; - tr { - th, - td { - white-space: nowrap; - } - - th { - @include block-list-header; - display: table-cell; - } - - td { - @include block-list-item; - display: table-cell; - } - - &:last-child { + tbody { + tr { + th, td { - border-bottom-style: solid; + @include block-list-item; + display: table-cell; + white-space: nowrap; + border-bottom-style: dashed; + border-top: none; + + &:last-child { + border-bottom-style: dashed; + } + } + + &:last-child { + td, + th { + border-bottom-style: solid; + } + } + + .table-cell--align-right { + text-align: right; + } + + .table-cell--shrink { + width: 1%; + } + + .table-cell--expand { + width: 100%; + } + + .table-cell--hide-small { + display: none; + + @include media($medium-screen) { + display: table-cell; + } } } + } - .table-cell--align-right { - text-align: right; - } - - .table-cell--shrink { - width: 1%; - } - - .table-cell--expand { - width: 100%; - } - - .table-cell--hide-small { - display: none; - - @include media($medium-screen) { + thead { + tr { + th { + @include block-list-header; display: table-cell; } } diff --git a/scss/sections/_projects_list.scss b/scss/sections/_projects_list.scss index 5472ee29..fe62b7a6 100644 --- a/scss/sections/_projects_list.scss +++ b/scss/sections/_projects_list.scss @@ -5,19 +5,8 @@ justify-content: space-between; .project-list-item__environment__link { - text-decoration: none; - display: flex; - flex-direction: row; - align-items: center; - - .icon { - @include icon-color($color-primary); - margin-right: $gap; - } - - span { - text-decoration: underline; - } + @include icon-link; + @include icon-link-large; } .project-list-item__environment__members { diff --git a/templates/request_approval.html.to b/templates/request_approval.html.to index db81049a..142a1951 100644 --- a/templates/request_approval.html.to +++ b/templates/request_approval.html.to @@ -177,7 +177,10 @@
Approve Request Deny Request - Cancel + + {% module Icon('x') %} + Cancel +
diff --git a/templates/requests.html.to b/templates/requests.html.to index d801de0a..756c4bbc 100644 --- a/templates/requests.html.to +++ b/templates/requests.html.to @@ -60,40 +60,38 @@ -
-
- - - - - - - - - - - - - {% for r in requests %} - - - {% end %} - - - - - - +
+
Order IDRequest DateRequesterTotal AppsStatusActions
- {{ r['order_id'] }} - {% if r['is_new'] %}New - {{ r['date'] }}{{ r['full_name'] }}{{ r['app_count'] }}{{ r['status'] }} - Download - Approval -
+ + + + + + + + + + + + {% for r in requests %} + + {% end %} - -
Order IDRequest DateRequesterTotal AppsStatusActions
+ {{ r['order_id'] }} + {% if r['is_new'] %}New +
-
+ {{ r['date'] }} + {{ r['full_name'] }} + {{ r['app_count'] }} + {{ r['status'] }} + + Download + Approval + + + {% end %} + +
diff --git a/templates/workspace_members.html.to b/templates/workspace_members.html.to index e1e407ff..c32e292c 100644 --- a/templates/workspace_members.html.to +++ b/templates/workspace_members.html.to @@ -39,7 +39,7 @@ Name -  Status Flag +  Status Flag Status Workspace Role @@ -47,8 +47,8 @@ {% for m in members %} - {{ m['first_name'] }} {{ m['last_name'] }} - {% if m['num_projects'] == '0' %} No Project Access {% end %} + {{ m['first_name'] }} {{ m['last_name'] }} + {% if m['num_projects'] == '0' %} No Project Access {% end %} {{ m['status'] }} {{ m['workspace_role'] }} diff --git a/templates/workspace_projects.html.to b/templates/workspace_projects.html.to index bd3a0c5b..e4008c3c 100644 --- a/templates/workspace_projects.html.to +++ b/templates/workspace_projects.html.to @@ -6,7 +6,10 @@

{{ project['name'] }} ({{ len(project['environments'])}} environments)

- edit + + {% module Icon('edit') %} + edit +