<div class="card -with-sidebar">
<div class="card-section card-content">
<div class="alert" data-status="success">
<div class="alert-inner">
<div class="alert-text">
<i class="alert-icon fa fa-check" aria-hidden="true"></i>
<div class="alert-info">Your last document was successfully uploaded</div>
</div>
<button class="btn btn-alert-dismiss js-alert-dismiss" type="button"></button>
</div>
</div>
<h3 class="card-heading">
<span class="text">Documents</span>
</h3>
<div>
<p>You may upload <strong>msg, pdf, doc, wav, mp3, xls, tif, tiff, jpg, jpeg, mov, wma, docx, xlsx, rtf</strong> file types.</p>
<p>Drag and drop into this window to upload or use the ‘Add file’ button below.</p>
</div>
<form action="/upload.php" class="upload-form" method="POST">
<label class="btn btn-add-row file-field" for="fileUpload" tabindex="0" role="button">
<span class="link link-strong">Add file</span>
<span class="help">(or drag and drop)</span>
<div class="drop-overlay -nav-padded">
<div class="overlay-inner">
<div class="overlay-content">
<div class="overlay-icon">
<svg viewBox="0 0 45 50">
<use xlink:href="#icon-file"></use>
</svg>
</div>
<h2>Drop to upload file to Coversheet</h2>
<h3>Access your file in Forms & Documents</h3>
<input type="file" id="fileUpload" name="fileUpload" accept=".msg, .pdf, .doc, .wav, .mp3, .xls, .tif, .tiff, .jpg, .jpeg, .mov, .wma, .docx, .xlsx, .rtf, .xml" hidden data-max-size="4" >
</div>
</div>
</div>
</label>
<div class="hidden-group -hidden">
<div class="form-group">
<div class="form-field">
<label for="description">Description</label>
<input type="text" name="description" id="description">
</div>
</div>
<div class="form-group">
<div class="form-field">
<label for="chrFormType">Type</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<span class="text">Document</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="" role="menuitem">Document</li>
</ul>
</div>
</div>
</div>
<div class="button-group">
<button type="submit" class="btn btn-default">
<span class="text">Submit</span>
</button>
<button type="button" class="btn btn-default js-cancel-file">
<span class="text">Cancel</span>
</button>
</div>
</div>
</form>
<div class="table">
<div class="table-header table-row">
<div class="table-group">
<div class="table-cell -inactive" style="width: 15%" data-name="chrDate" data-flex="1">
<span class="text">Date</span>
<div class="table-handle js-table-handle"></div>
</div>
<div class="table-cell -inactive" style="width: 25%" data-name="chrType" data-flex="1">
<span class="text">Type</span>
<div class="table-handle js-table-handle"></div>
</div>
<div class="table-cell -inactive" style="width: 45%" data-name="chrFile" data-flex="1">
<span class="text">Document</span>
<div class="table-handle js-table-handle"></div>
</div>
<div class="table-cell -inactive" style="width: 15%" data-name="chrSize" data-flex="1">
<span class="text">Size</span>
<div class="table-handle"></div>
</div>
</div>
<!-- set width equal to calc(n * 10rem) where n is the number of actions -->
<div class="table-group actions-group -fixed" style="width: calc(1 * 10rem)">
<div class="table-cell table-actions -inactive">Actions</div>
</div>
</div>
<div class="table-row " role="button" tabindex="0" data-document-id="DOCx56" data-module-name="grantsDocuments">
<div class="table-group">
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">09/11/2017</div>
</div>
<div class="table-cell " style="width: 25%" data-flex="1">
<div class="text">Standard Operating Procedure</div>
</div>
<div class="table-cell " style="width: 45%" data-flex="1">
<div class="text">Animal-handling-sheet.rtf</div>
</div>
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">100 KB</div>
</div>
</div>
<div class="table-group actions-group -fixed" style="width: calc(1 * 10rem)">
<div class="table-cell table-actions">
<ul class="actions-list">
<li class="action-item">
<button type="button" class="btn btn-action js-table-action " data-label="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
</li>
</ul>
</div>
</div>
</div>
<div class="table-row " role="button" tabindex="0" data-document-id="DOCx58" data-module-name="grantsDocuments">
<div class="table-group">
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">09/11/2017</div>
</div>
<div class="table-cell " style="width: 25%" data-flex="1">
<div class="text">Standard Operating Procedure</div>
</div>
<div class="table-cell " style="width: 45%" data-flex="1">
<div class="text">Animal-handling-sheet.pdf</div>
</div>
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">100 KB</div>
</div>
</div>
<div class="table-group actions-group -fixed" style="width: calc(1 * 10rem)">
<div class="table-cell table-actions">
<ul class="actions-list">
<li class="action-item">
<button type="button" class="btn btn-action js-table-action " data-label="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
</li>
</ul>
</div>
</div>
</div>
<div class="table-row " role="button" tabindex="0" data-document-id="DOCx59" data-module-name="grantsDocuments">
<div class="table-group">
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">09/11/2017</div>
</div>
<div class="table-cell " style="width: 25%" data-flex="1">
<div class="text">Standard Operating Procedure</div>
</div>
<div class="table-cell " style="width: 45%" data-flex="1">
<div class="text">Animal-handling-sheet.docx</div>
</div>
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">100 KB</div>
</div>
</div>
<div class="table-group actions-group -fixed" style="width: calc(1 * 10rem)">
<div class="table-cell table-actions">
<ul class="actions-list">
<li class="action-item">
<button type="button" class="btn btn-action js-table-action " data-label="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
</li>
</ul>
</div>
</div>
</div>
<div class="table-row " role="button" tabindex="0" data-document-id="DOCx60" data-module-name="grantsDocuments">
<div class="table-group">
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">09/11/2017</div>
</div>
<div class="table-cell " style="width: 25%" data-flex="1">
<div class="text">Standard Operating Procedure</div>
</div>
<div class="table-cell " style="width: 45%" data-flex="1">
<div class="text">Animal-handling-sheet.xlsx</div>
</div>
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">100 KB</div>
</div>
</div>
<div class="table-group actions-group -fixed" style="width: calc(1 * 10rem)">
<div class="table-cell table-actions">
<ul class="actions-list">
<li class="action-item">
<button type="button" class="btn btn-action js-table-action " data-label="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
</li>
</ul>
</div>
</div>
</div>
<div class="table-row " role="button" tabindex="0" data-document-id="DOCx61" data-module-name="grantsDocuments">
<div class="table-group">
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">09/11/2017</div>
</div>
<div class="table-cell " style="width: 25%" data-flex="1">
<div class="text">Standard Operating Procedure</div>
</div>
<div class="table-cell " style="width: 45%" data-flex="1">
<div class="text">Animal-handling-sheet.mp3</div>
</div>
<div class="table-cell " style="width: 15%" data-flex="1">
<div class="text">100 KB</div>
</div>
</div>
<div class="table-group actions-group -fixed" style="width: calc(1 * 10rem)">
<div class="table-cell table-actions">
<ul class="actions-list">
<li class="action-item">
<button type="button" class="btn btn-action js-table-action " data-label="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<button type="button" class="btn link js-open-document" data-module-name="grantsDocuments" data-document-id="DOCx58">document-example.pdf</button>
</div>
</div>
<div class="card-section card-sidebar">
<div class="card-heading">
<h4 class="card-subheading">Overview</h4>
<a class="link link-strong link-history" href="/history" title="View History">
<span class="text">History</span>
</a>
</div>
<aside class="progress-meter">
<ul class="progress-list">
<li class="progress-item" data-status="completed">
<div class="progress-title">
<a class="link" href="" title="">Overview</a>
</div>
<div class="progress-info">
<span class="progress-status">Completed</span>
<span class="progress-date">21 June 2017</span>
</div>
</li>
<li class="progress-item" data-status="completed">
<div class="progress-title">
<a class="link" href="" title="">Main Details</a>
</div>
<div class="progress-info">
<span class="progress-status">Completed</span>
<span class="progress-date">21 June 2017</span>
</div>
</li>
<li class="progress-item -subitem" data-status="unstarted">
<div class="progress-title">
<a class="link" href="" title="">Investigators</a>
</div>
<div class="progress-info">
<span class="progress-status">Not Started</span>
</div>
</li>
<li class="progress-item" data-status="draft">
<div class="progress-title">
<a class="link" href="" title="">Animal Usage</a>
</div>
<div class="progress-info">
<span class="progress-status">In draft</span>
</div>
</li>
<li class="progress-item" data-status="progress">
<div class="progress-title">
<a class="link" href="" title="">Documents</a>
</div>
<div class="progress-info">
<span class="progress-status">In Progress</span>
</div>
</li>
<li class="progress-item -active" data-status="progress">
<div class="progress-title">
<a class="link" href="" title="">Approvals</a>
</div>
<ul class="person-list sub-list">
<li class="person-item">
<a class="link" href="" title="">Katherine Dreibel</a>
</li>
<li class="person-item">
<a class="link" href="" title="">Jacob Gubb</a>
</li>
</ul>
</li>
<li class="progress-item -show-sections" data-status="progress">
<div class="progress-title">
<a class="link" href="" title="">Questionnaire</a>
</div>
<ul class="person-list sub-list">
<li class="person-item" data-status="completed">
<a class="link" href="" title="">Application</a>
</li>
<li class="person-item" data-status="unstarted">
<a class="link" href="" title="">Monitoring</a>
</li>
</ul>
</li>
</ul>
</aside>
</div>
</div>
<div class="card -with-sidebar">
<div class="card-section card-content">
{{#with alert }}
{{> @alert }}
{{/with}}
<h3 class="card-heading">
<span class="text">Documents</span>
</h3>
<div>
<p>You may upload <strong>msg, pdf, doc, wav, mp3, xls, tif, tiff, jpg, jpeg, mov, wma, docx, xlsx, rtf</strong> file types.</p>
<p>Drag and drop into this window to upload or use the ‘Add file’ button below.</p>
</div>
{{> @upload }}
{{#with files }}
{{> @table }}
{{/with}}
<div>
<button type="button" class="btn link js-open-document" data-module-name="grantsDocuments" data-document-id="DOCx58">document-example.pdf</button>
</div>
</div>
<div class="card-section card-sidebar">
<div class="card-heading">
<h4 class="card-subheading">Overview</h4>
<a class="link link-strong link-history" href="/history" title="View History">
<span class="text">History</span>
</a>
</div>
{{> @progress-meter }}
</div>
</div>
{
"pageTitle": "Documents",
"pageClass": "coversheet js-file-drop",
"dataFormat": "expanded",
"dataChart": "pie",
"width": 238,
"fontSize": 47.6,
"projects": [
{
"title": "Breeding wheat strains to reduce the incidence macular degeneration",
"remaining": 435000,
"awarded": 445000,
"total": 580000,
"status": "on hold",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
},
{
"title": "Assisted vision technologies",
"remaining": 90000,
"awarded": 340000,
"total": 430000,
"status": "active",
"notes": "no roadblocks"
},
{
"title": "Minimizing Carbon Emissions and Maximizing Carbon Sequestration and Storage by Seagrasses, Tidal Marshes, Mangroves",
"remaining": 130000,
"awarded": 155000,
"total": 285000,
"status": "active",
"notes": "no roadblocks"
},
{
"title": "Mitochondrial Turnover",
"remaining": 60000,
"awarded": 95000,
"total": 125000,
"status": "pending",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
},
{
"title": "Crop resilience from complex genomes",
"remaining": 90000,
"awarded": 105000,
"total": 125000,
"status": "on hold",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
}
],
"other": 225000,
"dataTotal": 2000000,
"baseTitle": "Coversheet",
"alert": {
"title": "",
"info": "Your last document was successfully uploaded",
"status": "success",
"icon": "check"
},
"files": {
"actions": [
{
"name": "view-document",
"label": "Details",
"icon": "details"
}
],
"columns": [
{
"name": "chrDate",
"title": "Date",
"width": 15
},
{
"name": "chrType",
"title": "Type",
"width": 25
},
{
"name": "chrFile",
"title": "Document",
"width": 45
},
{
"name": "chrSize",
"title": "Size",
"width": 15
}
],
"tableData": [
{
"data": {
"document-id": "DOCx56",
"module-name": "grantsDocuments"
},
"columns": [
{
"name": "chrDate",
"title": "Date",
"value": "09/11/2017"
},
{
"name": "chrType",
"title": "Type",
"value": "Standard Operating Procedure"
},
{
"name": "chrFile",
"title": "Document",
"value": "Animal-handling-sheet.rtf"
},
{
"name": "chrSize",
"title": "Size",
"value": "100 KB"
}
]
},
{
"data": {
"document-id": "DOCx58",
"module-name": "grantsDocuments"
},
"columns": [
{
"name": "chrDate",
"title": "Date",
"value": "09/11/2017"
},
{
"name": "chrType",
"title": "Type",
"value": "Standard Operating Procedure"
},
{
"name": "chrFile",
"title": "Document",
"value": "Animal-handling-sheet.pdf"
},
{
"name": "chrSize",
"title": "Size",
"value": "100 KB"
}
]
},
{
"data": {
"document-id": "DOCx59",
"module-name": "grantsDocuments"
},
"columns": [
{
"name": "chrDate",
"title": "Date",
"value": "09/11/2017"
},
{
"name": "chrType",
"title": "Type",
"value": "Standard Operating Procedure"
},
{
"name": "chrFile",
"title": "Document",
"value": "Animal-handling-sheet.docx"
},
{
"name": "chrSize",
"title": "Size",
"value": "100 KB"
}
]
},
{
"data": {
"document-id": "DOCx60",
"module-name": "grantsDocuments"
},
"columns": [
{
"name": "chrDate",
"title": "Date",
"value": "09/11/2017"
},
{
"name": "chrType",
"title": "Type",
"value": "Standard Operating Procedure"
},
{
"name": "chrFile",
"title": "Document",
"value": "Animal-handling-sheet.xlsx"
},
{
"name": "chrSize",
"title": "Size",
"value": "100 KB"
}
]
},
{
"data": {
"document-id": "DOCx61",
"module-name": "grantsDocuments"
},
"columns": [
{
"name": "chrDate",
"title": "Date",
"value": "09/11/2017"
},
{
"name": "chrType",
"title": "Type",
"value": "Standard Operating Procedure"
},
{
"name": "chrFile",
"title": "Document",
"value": "Animal-handling-sheet.mp3"
},
{
"name": "chrSize",
"title": "Size",
"value": "100 KB"
}
]
}
]
},
"dropdown": {
"options": [
{
"title": "Document"
}
]
}
}
- Handle: @coversheet--documents
- Variants (5): Default , Documents , Approvals , Questionnaire , Comparison
- Preview:
- Filesystem Path: components/03-pages/10-coversheet/coversheet--documents.hbs
- References (4): @alert, @upload, @table, @progress-meter
There are no notes for this item.