Refined members import data table design

no issues.
- refined style for members import preview table
This commit is contained in:
Peter Zimon 2020-06-18 11:33:34 +02:00
parent 2dfff367b9
commit 7c540a9090
3 changed files with 35 additions and 5 deletions

View File

@ -1,13 +1,21 @@
<table class="bg-whitegrey-l2 ba b--whitegrey br3">
<table class="ba b--whitegrey br3 f8 gh-members-import-table mt1">
<thead>
<th><span class="f5">Header</span></th>
<th><span class="f5">Data</span><a href="#" {{action "prev"}} data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 ml2" }}</a> <a href="#" {{action "next"}} data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 ml2" }}</a></th>
<th class="bb br b--whitegrey bg-whitegrey-l2"><span class="f-small midgrey ttu fw5">Header</span></th>
<th class="bb b--whitegrey bg-whitegrey-l2">
<div class="flex items-center justify-between">
<span class="f-small midgrey ttu fw5">Data</span>
<div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
<a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
<a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
</div>
</div>
</th>
</thead>
<tbody>
{{#each-in currentlyDisplayedData as |key value|}}
<tr>
<td><span>{{key}}</span></td>
<td><span>{{value}}</span></td>
<td class="br b--whitegrey middarkgrey"><span>{{key}}</span></td>
<td class="br b--whitegrey middarkgrey {{unless value "bg-whitegrey-l2"}}"><span>{{value}}</span></td>
</tr>
{{else}}
<tr>

View File

@ -50,6 +50,7 @@
{{/if}}
<GhFormGroup>
{{#if this.config.enableDeveloperExperiments}}
<h4 class="fw6 f8 dib mb1">Preview</h4>
<GhMembersImportTable @importData={{this.fileData}}/>
{{/if}}

View File

@ -461,3 +461,24 @@ p.gh-members-import-errordetailtext {
padding-bottom: 4px;
margin-bottom: 6px;
}
.gh-members-import-table th {
padding: 3px 8px;
}
.gh-members-import-datanav {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.gh-members-import-table td {
padding: 6px 8px;
}
.gh-members-import-table tr td:first-of-type,
.gh-members-import-table tr th:first-of-type {
max-width: 112px;
}
.gh-members-import-table tr:not(:last-of-type) td {
border-bottom: 1px solid var(--whitegrey);
}