Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added scrolling to members import preview table

Browse source 
no issues.
- adds scrolling to import table
- adds shadow to top and bottom if the table is taller than the viewport
This commit is contained in:
Peter Zimon 2020-06-19 19:42:09 +02:00
parent eee84ab5f7
commit db065a58e7
3 changed files with 76 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ghost/admin/app/components/gh-members-import-table.hbs
View file

@ -1,9 +1,9 @@
<table class="ba b--whitegrey br3 f8 gh-members-import-table mt1">
<table class="f8 gh-members-import-table ma0">
<thead>
<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">
<th class="bb br b--whitegrey"><span class="f-small midgrey ttu fw5">Header</span></th>
<th class="bb b--whitegrey">
<div class="flex items-center justify-between">
<span class="f-small midgrey ttu fw5">Data</span>
<span class="f-small midgrey ttu fw5 nudge-top--1">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>
@ -14,8 +14,8 @@
<tbody>
{{#each-in currentlyDisplayedData as |key value|}}
<tr>
<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>
<td class="middarkgrey"><span>{{key}}</span></td>
<td class="middarkgrey {{unless value "empty-cell"}}"><span>{{value}}</span></td>
</tr>
{{else}}
<tr>

4
ghost/admin/app/components/modal-import-members.hbs
View file

@ -45,7 +45,9 @@
<GhFormGroup>
{{#if this.config.enableDeveloperExperiments}}
<h4 class="fw6 f8 dib mb1">Preview</h4>
<GhMembersImportTable @importData={{this.fileData}}/>
<div class="gh-members-import-scrollarea">
<GhMembersImportTable @importData={{this.fileData}}/>
</div>
{{else}}
<div class="bg-whitegrey-l2 ba b--whitegrey br3">
<div class="flex flex-column items-center justify-center gh-members-import-file">

73
ghost/admin/app/styles/layouts/members.css
View file

@ -465,6 +465,32 @@ textarea.gh-member-details-textarea {
border-left: 4px solid var(--red);
}
.gh-members-import-scrollarea {
position: relative;
max-height: calc(100vh - 350px - 12vw);
min-height: 175px;
overflow-y: scroll;
margin: 0 -32px;
padding: 0 32px;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
/* radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.12), rgba(0,0,0,0)) -64px 0,
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.12), rgba(0,0,0,0)) -64px 100%; */
linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0)),
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.08)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
margin-top: 4px;
}
.gh-members-import-errorheading {
font-size: 1.4rem;
line-height: 1.55em;
@ -488,12 +514,42 @@ p.gh-members-import-errordetailtext {
margin-bottom: 6px;
}
.gh-members-import-table th {
padding: 3px 8px;
.gh-members-import-table {
position: relative;
border: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.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::before {
position: absolute;
display: block;
content: "";
top: 0;
left: -33px;
bottom: 0;
height: 100%;
width: 32px;
background: var(--white);
}
.gh-members-import-table::after {
position: absolute;
display: block;
content: "";
top: 0;
right: -33px;
bottom: 0;
height: 100%;
width: 32px;
background: var(--white);
}
.gh-members-import-table th {
padding: 3px 8px;
background: color-mod(var(--darkgrey) a(5%) s(+50%));
}
.gh-members-import-table td.empty-cell {
background: color-mod(var(--darkgrey) a(3%) s(+50%));
}
.gh-members-import-table td {
@ -502,11 +558,16 @@ p.gh-members-import-errordetailtext {
.gh-members-import-table tr td:first-of-type,
.gh-members-import-table tr th:first-of-type {
max-width: 112px;
width: 170px;
border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.gh-members-import-table tr:not(:last-of-type) td {
border-bottom: 1px solid var(--whitegrey);
border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
}
.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);
}
p.gh-members-import-errordetail {