Audit Log

In this example below you will see how to do a Audit Log with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hugofovargue, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hugofovargue ©
  • HTML
  • CSS
  • JavaScript
    <div class="auditTable">
  <div class="auditTable__header">
    <div class="auditTable__cell">Timestamp</div>
    <div class="auditTable__cell">Request UUID</div>
    <div class="auditTable__cell">sysFunction</div>
    <div class="auditTable__cell">Action</div>
    <div class="auditTable__cell">Audit Time</div>
    <div class="auditTable__cell">MD5</div>
  </div>
  <hr>
  <div class="auditTable__row">
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
  </div>
  <div class="auditTable__row">
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
  </div>
  <div class="auditTable__row">
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
  </div>
  <div class="auditTable__row">
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
  </div>
  <div class="auditTable__row">
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
  </div>
  <div class="auditTable__row">
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
    <div class="auditTable__cell auditTable__cell-border">Test</div>
  </div>
</div>


/*Downloaded from https://www.codeseek.co/hugofovargue/audit-log-ZrjXqX */
    $debugGreen: 1px solid green;
$debugRed: 1px solid red;
$debugBlue: 1px solid blue;

$background: #e1e1e1;

$headerFont: 1.2em sans-serif, 'Arial';
$rowFont: 0.8em sans-serif, 'Arial';

$cellBorderColor: #d2d2d2;

body {
  background: $background;
}

.auditTable {
  display: flex;
  flex-wrap: wrap;
  // border: $debugGreen;
  padding: 20px;
  
  background: white;
}

.auditTable__header {
  display: flex;
  flex-basis: 100%;
  
  font: $headerFont;
    
  // border: $debugBlue;
}

.auditTable__row {
  display: flex;
  flex-basis: 100%;
  
  font: $rowFont;
    
  // border: $debugBlue;
}

.auditTable__cell {
  flex-basis: 20%;
}

.auditTable__cell-border {
  padding: 0.2em;
  border-top: 1px solid #d2d2d2;
} 



/*Downloaded from https://www.codeseek.co/hugofovargue/audit-log-ZrjXqX */
    

Comments