LM - Upload template

by lasha

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
<div class="upload-master-container">
<!-- <h3>Uploading data sources...</h3> -->
<div class="upload-table" border="0" cellspacing="0" cellpadding="0">
    <div class="table-row thead">    
        <div class="table-cell upload-files">Files</div>
        <div class="table-cell upload-time">Time Uploaded</div>
        <div class="table-cell upload-progress">Status</div>
        <div class="table-cell upload-status"></div>
        <div class="table-cell upload-toggle"></div>
    </div>
        <div class="table-row upload-set complete">
            <span class="upload-progress-track">
                <span class="upload-progress-bar" style="width: 64%;"></span>
            </span>
            <div class="table-cell upload-files">5 files</div>
            <div class="table-cell upload-time">10 minutes ago</div>
            <div class="table-cell upload-progress">
                <span class="upload-indexed">
                    Successfully Indexed <span class="upload-tick"></span>
                </span>
                <span class="upload-uploading">Uploading...</span>
            </div>
            <div class="table-cell upload-status">
                <a href="#" class="upload-search-set">Search this set of data</a>
            </div>
            <div class="table-cell upload-toggle">
                <span class="upload-toggle-btn"></span>
            </div>
        </div>
        <div class="table-row upload-set-files">
            <span class="done">filenamegoeshereSomeLongerFileName.log</span><br>
            <span>filenamegoeshere.log</span><br>
            <span class="done">filenamegoeshereLogFileName.log</span><br>
            <span>filenamegoeshere.log</span>
        </div>
        <div class="table-row upload-set">
            <span class="upload-progress-track">
                <span class="upload-progress-bar" style="width: 64%;"></span>
            </span>
       ...

CSS

body {
    font-family: helvetica;
    font-size: 12px;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0; padding: 0; font-weight: normal;
}

// copy all styles below
.upload-master-container {
  padding: 20px 27px 5px;
}
.upload-master-container > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.upload-table {
  width: 100%;
  min-width: 750px;
  border: 1px solid #aaa;
  margin-bottom: 30px;
  display: table;
}
.upload-table .thead {
  font-weight: bold;
  background-color: #ccc;
  text-align: left;
}
.upload-table .thead .table-cell {
  padding: 8px 20px;
  border-top: 0;
}
.upload-table .table-row {
  /* display: table-row; */

  display: table;
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  border-top: 1px solid #aaa;
}
.upload-table .table-row:first-child {
  border-top: 0;
}
.upload-table .table-cell {
  position: relative;
  z-index: 100;
  display: table-cell;
  vertical-align: middle;
  padding: 15px 20px;
  /* border-top: 1px solid #aaa; */

}
.upload-indexed {
  display: none;
}
.upload-progress-track {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.complete .upload-progress-track {
  display: none;
}
.complete .upload-indexed {
  display: inline-block;
}
.upload-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ecf3fe;
  border-top: 3px solid #7cafec;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.upload-status {
  text-align: right;
}
.complete .upload-uploading {
  display: none;
}
.complete .upload-search-set {
  display: inline-block;
}
.upload-search-set {
  display: none;
}
.upload-remove-row {
  cursor: pointer;
  padding: 4px;
}
.upload-files {
  width: 10%;
}
.upload-time {
  width: 20%;
}
.upload-progress {
  width: 30%;
}
.upload-status {
  width: 35%;
}
.upload-toggle {
  width: 5%;
}
.upload-toggle-btn {
  display: inline-block;
 ...

JavaScript

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');
// Step 2: Tell LESS to refresh the styles
less.refreshStyles();

$(".upload-toggle-btn").on("click", function(e){
    var $this = $(this);
    $this.toggleClass("active");
    $this.parent().parent().next().toggleClass("active");
});