LT-342: Audit Log :: style

Packages/hipaa-audit-log/components/hipaaAuditLog/hipaaAuditLog.html

@@ -1,6 +1,3 @@
-
-
-
 <template name="hipaaAuditLog">
   <ul id="hipaaAuditLog" class="list-group">
     {{#each hipaaAudit}}
@@ -13,7 +10,9 @@
   {{#if logMessageType 'init'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-gears fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-gears fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> initialized HIPAA Audit Log.
@@ -26,7 +25,9 @@
   {{#if logMessageType 'access'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-database fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-database fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> accessed record(s) <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
@@ -39,7 +40,9 @@
   {{#if logMessageType 'create'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-plus-circle fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-plus-circle fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           {{#if hasPatientInfo}}
@@ -56,7 +59,9 @@
   {{#if logMessageType 'modify'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-pencil fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-pencil fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           {{#if hasPatientInfo}}
@@ -74,7 +79,9 @@
   {{#if logMessageType 'clone'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-code-fork fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-code-fork fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> cloned record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
@@ -87,7 +94,9 @@
   {{#if logMessageType 'delete'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-minus-circle fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-minus-circle fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> deleted record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
@@ -100,7 +109,9 @@
   {{#if logMessageType 'denied'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-warning fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-warning fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> was denied access to record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
@@ -113,7 +124,9 @@
   {{#if logMessageType 'viewed'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-eye fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-eye fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           {{#if hasPatientInfo}}
@@ -130,7 +143,9 @@
   {{#if logMessageType 'publish'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-rss fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-rss fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> published record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
@@ -143,7 +158,9 @@
   {{#if logMessageType 'unpublish'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-circle-o fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-circle-o fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> unpublished record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
@@ -156,16 +173,16 @@
   {{#if logMessageType 'error'}}
     <li class="hipaaAuditItem list-group-item">
       <div class="media">
-        <i class="pull-left fa fa-bomb fa-2x lightgray"></i>
+        <div class="media-icon">
+          <i class="fa fa-bomb fa-2x"></i>
+        </div>
         <div class="media-body">
           <span class="small gray">{{entryTimestamp}}</span><br>
           <span class="userName" style="{{getHighlightColor}}">{{userName}}</span> received a data access error while performing an action!<br>
           <span class="error">{{getErrorMessage}}</span>
-
         </div>
       </div>
     </li>
   {{/if}}
 
-
 </template>

Packages/hipaa-audit-log/components/hipaaAuditLog/hipaaAuditLog.less

@@ -1,78 +1,48 @@
 #hipaaAuditLog{
-  padding-left: 0px !important;
+  color: #fff;
+  width: 100%;
 
-  li{
+  .hipaaAuditItem {
+    // There's a CSS rule on ohif-user-management that's changing the .hipaaAuditItem border style
+    border: none !important;
+
+    background-color: black;
     list-style: none;
     padding-top: 5px;
-    padding-left: 20px;
+    padding-left: 10px;
+    line-height: 25px;
+    border-top: 1px solid #436270;
+    border-bottom: 1px solid #436270;
+
+    &:nth-child(even) {
+      background-color: #151a1f;
+    }
+
+    &:hover, &:active, &.active {
+      background-color: #2c363f;
+      color: white;
+    }
+
+    .item-icon {
+      top: 12px;
+      position: relative;
+    }
+
+    .media-icon {
+      float: left;
+      top: 12px;
+      width: 40px;
+      text-align: center;
+      position: relative;
+      margin-right: 10px;
+    }
   }
+
   .gray{
     color: gray;
   }
-  .lightgray{
-    color: #aaaaaa;
-  }
-  .iconColumn{
-    width: 10%;
-  }
-  .messageClumn{
-    width: 80%;
-  }
-  .fa{
-    padding-right: 12px;
-    padding-left: 4px;
-    padding-top: 6px;
-    width: 40px;
-    //border: 1px solid orange;
-  }
-  .fa-recycle{
-    padding-top: 8px;
-  }
-  .fa-plus-circle{
-    padding-left: 6px !important;
-  }
-  .fa-circle-o{
-    padding-left: 6px !important;
-  }
-  .fa-minus-circle{
-    padding-left: 6px !important;
-  }
-  .fa-database{
-    padding-left: 7px !important;
-  }
-  .fa-pencil{
-    padding-left: 6px !important;
-  }
-  .fa-code-fork{
-    padding-left: 12px !important;
-  }
-  .fa-warning{
-    padding-left: 5px !important
-  }
-  .fa-rss{
-    padding-left: 7px !important;
-  }
-
-  .hipaaAuditItem{
-    border-top: 1px solid lightgray;
-    padding-bottom: 10px;
-  }
-  .hipaaAuditItem:nth-child(1){
-    border-top: 0px;
-  }
-
-  .media-body{
-    padding-bottom: 5px;
-  }
-
-
-  #hipaaAuditLog{
-    width: 100%;
-  }
 
   .userName, .patientName, .mongoRecordId, .collectionName{
     cursor: pointer;
   }
-
-
 }

Packages/hipaa-audit-log/components/hipaaCloseButton/hipaaCloseButton.less

@@ -1,7 +1,8 @@
+@tableTextSecondaryColor: #91b9cd;
+
 .close-btn {
   text-align: right;
   padding: 5px 5px 0;
-  margin-right: 10px;
 
   &:before,
   &:after {
@@ -10,7 +11,34 @@
     clear: both;
   }
 
+  .close {
+    color: @tableTextSecondaryColor;
+    opacity: 1;
+
+    &.close:hover, &.close:focus {
+      color: #fff;
+      opacity: 1;
+    }
+  }
+
   .btn-default {
     margin-bottom: 5px;
+    margin-right: 5%;
   }
-}
+}
+
+@media only screen and (max-width: 1161px) {
+  .close-btn {
+    .btn-default {
+      margin-right: 3%;
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .close-btn {
+    .btn-default {
+      margin-right: 1%;
+    }
+  }
+}

Packages/hipaa-audit-log/components/hipaaLogPage/hipaaLogPage.html

@@ -1,9 +1,15 @@
 <template name="hipaaLogPage">
   <div id="hipaaLogPage" class="page">
-    {{#if hasCloseButtons}}
+
-      {{> hipaaCloseButton header="true" }}
+    <div class="hipaaHeader clearfix">
-    {{/if}}
+        <div class="header pull-left">
-    
+            Audit Log
+        </div>
+        <div class="pull-right">
+            {{> hipaaCloseButton header="true" }}
+        </div>
+    </div>
+
     {{> hipaaRibbon }}
 
     <div class="container">

Packages/hipaa-audit-log/components/hipaaLogPage/hipaaLogPage.less

@@ -1,13 +1,52 @@
+@tableTextSecondaryColor: #91b9cd;
 
+@hipaaHeaderHeight: 75px;
+@hipaaHeaderBgColor: #151a1f;
 
-#hipaaLogPage{
+#hipaaLogPage {
-  background-color: white;
+  background-color: #000;
-  //padding-top: 80px;
 
-  #hipaaLogTitle{
+  .hipaaHeader {
-    left: 30px;
+    background-color: @hipaaHeaderBgColor;
-    position: absolute;
+    height: @hipaaHeaderHeight;
-    text-align: left;
+    margin-bottom: 2px;
+    padding: 0 20px;
+
+    & > div {
+      display: inline-block;
+    }
+
+    .header {
+      font-size: 22px;
+      font-weight: 300;
+      color: @tableTextSecondaryColor;
+      line-height: @hipaaHeaderHeight;
+    }
   }
 
+  .container {
+    margin: 0;
+    padding: 0 5%;
+    width: 100%;
+
+    & > div.row {
+      margin: 0;
+    }
+  }
+}
+
+@media only screen and (max-width: 1161px) {
+  #hipaaLogPage {
+    .container {
+      padding: 0 3%;
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  #hipaaLogPage {
+    .container {
+      padding: 0 1%;
+    }
+  }
 }

Packages/hipaa-audit-log/components/hipaaRibbon/hipaaRibbon.html

@@ -1,18 +1,28 @@
-  <template name="hipaaRibbon">
+<template name="hipaaRibbon">
-    <aside id="hipaaRibbon" class="{{getRibbonClass}}">
+  <div id="hipaaRibbon" class="row {{getRibbonClass}}">
-        <div class="btn-group">
+    <div class="filter col-xs-12 col-sm-4 col-md-6">
-            <input type="text" name="hipaaSearchFilter" id="hipaaSearchFilter" class="{{getInputClass}}" value="{{getHipaaSearchFilter}}" placeholder="Search User" style="{{getSearchFilterStyling}}">
+      <span>User</span>
-            <span id="searchClear" class="glyphicon glyphicon-remove-circle"></span>
+      <div class="btn-group">
-        </div>
+        <input type="text" name="hipaaSearchFilter" id="hipaaSearchFilter" value="{{getHipaaSearchFilter}}" class="form-control">
-      <!--<input type="text" name="hipaaSearchFilter" id="hipaaSearchFilter" class="{{getInputClass}}" value="{{getHipaaSearchFilter}}" placeholder="Search User" style="{{getSearchFilterStyling}}">-->
+        <span id="searchClear" class="glyphicon glyphicon-remove-circle"></span>
-      <input type="date" id="beginDateInput" class="{{getInputClass}}" value="{{getBeginDate}}" style="{{getDateRangeStyling}}">
+      </div>
-      <input type="date" id="endDateInput" class="{{getInputClass}}" value="{{getEndDate}}" style="{{getDateRangeStyling}}">
+    </div>
-      <select id="actionFilter" name="actionFilter" class="{{getSelectClass}}" style="{{getSelectStyling}}">
+    <div class="filter col-xs-4 col-sm-3 col-md-2 text-center">
+      <span>Begin Date</span>
+      <input type="date" id="beginDateInput" class="{{getInputClass}}" value="{{getBeginDate}}">
+    </div>
+    <div class="filter col-xs-4 col-sm-3 col-md-2 text-center">
+      <span>End Date</span>
+      <input type="date" id="endDateInput" class="{{getInputClass}}" value="{{getEndDate}}">
+    </div>
+    <div class="filter col-xs-4 col-sm-2 text-center">
+      <span>Action</span>
+      <select id="actionFilter" name="actionFilter" class="{{getSelectClass}}">
         <option id="filterCreatedButton" value="create">Created</option>
         <option id="filterModifiedButton" value="modify">Modified</option>
         <option id="filterViewedButton" value="viewed">Viewed</option>
         <option id="filterAllButton" selected value="">All</option>
       </select>
-    </aside>
+    </div>
-
+  </div>
-  </template>
+</template>

Packages/hipaa-audit-log/components/hipaaRibbon/hipaaRibbon.js

@@ -39,36 +39,6 @@ Meteor.startup(function(){
 });
 
 Template.hipaaRibbon.helpers({
-  getSearchFilterStyling: function () {
-    // spacing between inputs should be 20px each
-    // if the overall width of the audit log is less than N, show the fullwidth
-    if(Session.get('ribbonWidth') > ribbonBreakPoint){
-      var searchFilterWidth = Session.get('ribbonWidth') - 575;
-      return "margin-left: 10px; margin-right: 5px; width:" + searchFilterWidth + "px;";
-    }else{
-      var ribbonWidth = Session.get('ribbonWidth') - 40;
-      return "width: " + ribbonWidth + "px; margin-left: 10px; margin-right: 10px;";
-    }
-  },
-  getDateRangeStyling: function () {
-    // spacing between inputs should be 20px each
-    // date range inputs shouldn't be less than 170 px
-    // if the overall width of the audit log is less than N, dont even show them
-    if(Session.get('ribbonWidth') > ribbonBreakPoint){
-      return "visbility: visible; margin-left: 5px; margin-right: 5px; width: 170px;";
-    }else{
-      return "display: none; visibility: hidden";
-    }
-  },
-  getSelectStyling: function () {
-    // spacing between inputs should be 20px each
-    // select input should be the same as daterange
-    if(Session.get('ribbonWidth') > ribbonBreakPoint){
-      return "visbility: visible; margin-left: 5px; margin-right: 5px; width: 170px;";
-    }else{
-      return "display: none; visibility: hidden";
-    }
-  },
   getRibbonClass: function () {
     var hipaaAuditLog = Session.get('HipaaAuditLogConfig');
     if (hipaaAuditLog && hipaaAuditLog.classes) {

Packages/hipaa-audit-log/components/hipaaRibbon/hipaaRibbon.less

@@ -1,46 +1,113 @@
+@tableTextPrimaryColor: white;
+@tableTextSecondaryColor: #91b9cd;
 
-#hipaaRibbon{
+@inputBackgroundColor: #2c363f;
-  position: static;
+@inputPlaceholderColor: lightgray;
-  width: 100%;
-  padding-top: 10px;
-  height: 60px;
-  //background-color: lightgray;
 
-  input[type="date"]{
+@hipaaRibbonBgColor: #151a1f;
+
+#hipaaRibbon {
+  background-color: @hipaaRibbonBgColor;
+  border-bottom: solid 1px #6fbde2;
+  color: @tableTextPrimaryColor; 
+  margin: 0 0 2px;
+  padding: 20px 5%;
+
+  .filter {
+    > span {
+      font-size: 15px;
+      display: block;
+      padding: 5px;
+    }
+
+    min-height: 70px;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    &:not(:last-child) {
+      padding-right: 0;
+    }
+  }
+
+  input[type="date"] {
     padding-left: 10px;
   }
-  input[type="text"]{
+
-    // padding-left: 10px;
+  select {
-    // padding-right: 10px;
-  }
-  select{
     display: inline-block;
-    height: 40px;
-    // padding-left: 10px;
-    // padding-right: 10px;
   }
 
-  #hipaaSearchFilter{
+  input, select {
-    color: black;
+    height: 40px;
-  }
+    padding: 20px;
-  //---------------------------------------
-  // Bootstrap users
-  .form-control{
-    display: inline-block !important;
-  }
-  #searchClear {
-    position: absolute;
-    right: 14px;
-    top: 0;
-    bottom: 0;
-    height: 14px;
-    margin: auto;
-    font-size: 14px;
     cursor: pointer;
-    color: #ccc;
+    border: none;
+    background-color: @inputBackgroundColor;
+    color: @inputPlaceholderColor;
+    font-size: 10pt;
+    font-weight: normal;
+    width: 100%;
+    border-radius: 4px;
+    box-sizing: border-box;
+
+    transition: all 0.15s ease;
+    -webkit-transition: all 0.15s ease;
+
+    &:active, &:hover {
+      background-color: @inputBackgroundColor;
+    }
+  }
+
+  .btn-group {
+    width: 100%;
+
+    #hipaaSearchFilter{
+      padding-right: 35px;
+    }
+
+    #searchClear {
+      position: absolute;
+      right: 14px;
+      top: 0;
+      bottom: 0;
+      height: 14px;
+      margin: auto;
+      font-size: 14px;
+      cursor: pointer;
+      color: #ccc;
+    }
   }
 }
 
-// @media only screen and (max-width: 850px) {
+
-//
+@media only screen and (max-width: 1161px) {
-// }
+  #hipaaRibbon {
+    padding: 20px 3%;
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  #hipaaRibbon {
+    padding: 20px 1%;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  #hipaaRibbon {
+    .filter {
+      &:first-child {
+        padding-bottom: 15px;
+      }
+
+      &:nth-child(2) {
+        padding-left: 0;
+      }
+    }
+  }
+}