pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various UI fixes

Browse Source 
use .icon-link in various places
This commit is contained in:
Andrew Croce 2018-07-30 13:51:58 -04:00
parent c0fc46328b
commit 2a475a6713
9 changed files with 128 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/elements/_block_lists.scss
View File

@ -58,6 +58,10 @@
.block-list__header {
@include block-list-header;
.block-list__header__link {
@include icon-link;
}
}
.block-list__title {

41
scss/elements/_icon_link.scss
View File

@ -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;
}
}

9
scss/elements/_inputs.scss
View File

@ -202,11 +202,15 @@ select {
flex-grow: 1;
&:first-child .usa-input {
&: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 {

30
scss/elements/_tables.scss
View File

@ -8,24 +8,24 @@
@include panel-margin;
min-width: 100%;
tbody {
tr {
th,
td {
white-space: nowrap;
}
th {
@include block-list-header;
display: table-cell;
}
td {
@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 {
td,
th {
border-bottom-style: solid;
}
}
@ -50,6 +50,16 @@
}
}
}
}
thead {
tr {
th {
@include block-list-header;
display: table-cell;
}
}
}
@at-root .panel #{&} {
tr:last-child td {

15
scss/sections/_projects_list.scss
View File

@ -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 {

5
templates/request_approval.html.to
View File

@ -177,7 +177,10 @@
<div class='action-group'>
<a href='/' class='usa-button usa-button-big'>Approve Request</a>
<a href='/' class='usa-button usa-button-big usa-button-secondary'>Deny Request</a>
<a href='/'>Cancel</a>
<a href='/' class='icon-link'>
{% module Icon('x') %}
<span>Cancel</span>
</a>
</div>
</form>
</article>

12
templates/requests.html.to
View File

@ -60,7 +60,6 @@
</div>
</div>
<div class="panel">
<div class='responsive-table-wrapper'>
<table>
<thead>
@ -70,14 +69,14 @@
<th scope="col">Requester</th>
<th scope="col">Total Apps</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
<th scope="col" class="table-cell--shrink">Actions</th>
</tr>
</thead>
<tbody>
{% for r in requests %}
<tr>
<th scope="row">
<a href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
<a class='icon-link icon-link--large' href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
{% if r['is_new'] %}<span class="usa-label">New</span>
</th>
{% end %}
@ -85,9 +84,9 @@
<td>{{ r['full_name'] }}</td>
<td>{{ r['app_count'] }}</td>
<td>{{ r['status'] }}</td>
<td>
<a href="">Download</a>
<a href="/request/approval">Approval</a>
<td class="table-cell--shrink">
<a href="" class='icon-link'>Download</a>
<a href="/request/approval" class='icon-link'>Approval</a>
</td>
</tr>
{% end %}
@ -95,7 +94,6 @@
</table>
</div>
</div>
</div>
{% end %}

6
templates/workspace_members.html.to
View File

@ -39,7 +39,7 @@
<thead>
<tr>
<th scope="col" width="50%">Name</th>
<th scope="col">&nbsp;<span class="hide">Status Flag</span></th>
<th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
<th scope="col">Status</th>
<th scope="col">Workspace Role</th>
</tr>
@ -47,8 +47,8 @@
<tbody>
{% for m in members %}
<tr>
<td><a href="#">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
<td>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
<td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
<td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
<td>{{ m['status'] }}</a></td>
<td>{{ m['workspace_role'] }}</a></td>
</tr>

5
templates/workspace_projects.html.to
View File

@ -6,7 +6,10 @@
<div class='block-list project-list-item'>
<header class='block-list__header'>
<h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
<a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>edit</a>
<a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>
{% module Icon('edit') %}
<span>edit</span>
</a>
</header>
<ul>
{% for environment in project['environments'] %}