lanes 0.0.1

data/client/screens/user-management/user-management.html

@@ -0,0 +1,8 @@
+<div class="users">
+  <h1>Hello Users</h1>
+
+
+    <div class="grid" data-hook="grid">
+    </div>
+
+</div>

data/client/stylesheets/compoonents/all.scss

@@ -0,0 +1,6 @@
+@import "changes-notification";
+@import "grid";
+@import "grid-editors";
+@import "modal-dialog";
+@import "record-finder";
+@import "suggest";

data/client/stylesheets/compoonents/changes-notification.scss

@@ -0,0 +1,44 @@
+.changes-notification {
+  .btn.dropdown-toggle {
+    padding: 0 10px;
+    margin-bottom: 0;
+    margin-top: 8px;
+    i {
+      font-size: 28px;
+    }
+    .badge {
+      top: -12px !important;
+    }
+  }
+  .title{
+    @extend .popover-title;
+  }
+
+  .dropdown-menu {
+    padding-top: 0px;
+    .arrow {
+    }
+    .update {
+      @extend .list-group-item;
+      span {
+        color: $dropdown-link-color;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+      span:hover{
+        text-decoration: none;
+        color: $dropdown-link-hover-color;
+      }
+    }
+    .scroller {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .ago {
+      @extend small;
+    }
+  }
+  .tooltip{
+    position: fixed;
+  }
+}

data/client/stylesheets/compoonents/grid-editors.scss

@@ -0,0 +1,65 @@
+$editor-chome-color: $navbar-inverse-color;
+
+.grid-row-editor {
+  position: absolute;
+
+  form {
+    background-color: $editor-chome-color;
+    .edit {
+      position: absolute;
+      &:first-child {
+        margin-left: 4px;
+      }
+    }
+
+  }
+  .edit {
+    margin-top: 6px;
+  }
+
+  .controls {
+    text-align: center;
+    position: relative;
+    height: 0px;
+    overflow: visible;
+    .buttons {
+      background-color: $editor-chome-color;
+      display: inline-block;
+      padding: 2px 8px 8px;
+      position: relative;
+      border-bottom-left-radius: 7px;
+      border-bottom-right-radius: 7px;
+
+      // http://css-tricks.com/better-tabs-with-round-out-borders/
+      &:before,
+      &:after {
+        border: 1px solid $editor-chome-color;
+        position: absolute;
+        top: -1px;
+        width: 7px;
+        height: 6px;
+        content: " ";
+      }
+      &:before {
+        left: -7px;
+        border-top-right-radius: 6px;
+        border-width: 1px 1px 0px 0px;
+        box-shadow: 3px 0px 0px $editor-chome-color;
+      }
+      &:after {
+        right: -7px;
+        border-top-left-radius: 6px;
+        border-width: 1px 0px 0px 1px;
+        box-shadow: -3px 0px 0px $editor-chome-color;
+      }
+
+
+    }
+  }
+}
+
+.grid-popover-editor {
+  .buttons {
+    text-align: center;
+  }
+}

data/client/stylesheets/compoonents/grid.scss

@@ -0,0 +1,301 @@
+.lanes-grid {
+
+  clear: both;
+  margin-top: 6px !important;
+  margin-bottom: 6px !important;
+  max-width: none !important;
+
+
+  .dataTables_processing {
+    position: absolute;
+
+    border: 2px solid $panel-default-border;
+    box-shadow:         3px 3px 5px 6px $table-bg-hover;
+
+    display: block;
+    line-height: 5px;
+    padding: 30px;
+    z-index: 28;
+
+    top: 50%;
+    width: 80%;
+    height: 40px;
+    margin-left: 10%;
+    margin-top: -25px;
+    padding-top: 20px;
+    text-align: center;
+    font-size: 1.2em;
+    background:url(asset_path('ajax-loader.gif')) no-repeat scroll 40% 7px $body-bg;
+  }
+
+
+  div.dataTables_length label {
+    font-weight: normal;
+    float: left;
+    text-align: left;
+  }
+
+  div.dataTables_length select {
+    width: 75px;
+  }
+
+  div.dataTables_filter label {
+    font-weight: normal;
+    float: right;
+  }
+
+  div.dataTables_filter input {
+    width: 16em;
+  }
+
+  div.dataTables_info {
+    padding-top: 8px;
+  }
+
+  div.dataTables_paginate {
+    float: right;
+    margin: 0;
+  }
+
+  div.dataTables_paginate ul.pagination {
+    margin: 2px 0;
+    white-space: nowrap;
+  }
+
+  td, th{
+    &.c {
+      text-align: center;
+    }
+
+    &.r {
+      text-align: right;
+    }
+
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+
+
+  thead .sorting,
+  thead .sorting_asc,
+  thead .sorting_desc,
+  thead .sorting_asc_disabled,
+  thead .sorting_desc_disabled {
+    cursor: pointer;
+  }
+
+  thead .sorting { background: url(image-path('dataTables/sort_both.png')) no-repeat center right; }
+  thead .sorting_asc { background: url(image-path('dataTables/sort_asc.png')) no-repeat center right; }
+  thead .sorting_desc { background: url(image-path('dataTables/sort_desc.png')) no-repeat center right; }
+
+  thead .sorting_asc_disabled { background: url(image-path('dataTables/sort_asc_disabled.png')) no-repeat center right; }
+  thead .sorting_desc_disabled { background: url(image-path('dataTables/sort_desc_disabled.png')) no-repeat center right; }
+
+  thead > tr > th {
+    padding-left: 18px;
+    padding-right: 18px;
+    font-size: 1.1vw;
+    white-space: nowrap;
+
+
+  }
+
+  th:active {
+    outline: none;
+  }
+
+  /* Scrolling */
+  div.dataTables_scrollHead table {
+    margin-bottom: 0 !important;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  div.dataTables_scrollHead table thead tr:last-child th:first-child,
+  div.dataTables_scrollHead table thead tr:last-child td:first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  div.dataTables_scrollBody table {
+    border-top: none;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  div.dataTables_scrollBody tbody tr:first-child th,
+  div.dataTables_scrollBody tbody tr:first-child td {
+    border-top: none;
+  }
+
+  div.dataTables_scrollFoot table {
+    margin-top: 0 !important;
+    border-top: none;
+  }
+
+  /* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
+   width calculations when using scrolling impossible to align columns. We have
+   to use separate
+ */
+  table.table-bordered.dataTable {
+    border-collapse: separate !important;
+  }
+  table.table-bordered thead th,
+  table.table-bordered thead td {
+    border-left-width: 0;
+    border-top-width: 0;
+  }
+  table.table-bordered tbody th,
+  table.table-bordered tbody td {
+    border-left-width: 0;
+    border-bottom-width: 0;
+  }
+  table.table-bordered th:last-child,
+  table.table-bordered td:last-child {
+    border-right-width: 0;
+  }
+  div.dataTables_scrollHead table.table-bordered {
+    border-bottom-width: 0;
+  }
+
+  tbody{
+    td{
+      height: 22px;
+    }
+  }
+
+  /*
+   * TableTools styles
+   */
+  .table tbody tr.active td,
+  .table tbody tr.active th {
+    background-color: #08C;
+    color: white;
+  }
+
+  .table tbody tr.active:hover td,
+  .table tbody tr.active:hover th {
+    background-color: #0075b0 !important;
+  }
+
+  .table tbody tr.active a {
+    color: white;
+  }
+
+  .table-striped tbody tr.active:nth-child(odd) td,
+  .table-striped tbody tr.active:nth-child(odd) th {
+    background-color: #017ebc;
+  }
+
+  table.DTTT_selectable tbody tr {
+    cursor: pointer;
+  }
+
+  div.DTTT .btn {
+    color: #333 !important;
+    font-size: 12px;
+  }
+
+  div.DTTT .btn:hover {
+    text-decoration: none !important;
+  }
+
+  ul.DTTT_dropdown.dropdown-menu {
+    z-index: 2003;
+  }
+
+  ul.DTTT_dropdown.dropdown-menu a {
+    color: #333 !important; /* needed only when demo_page.css is included */
+  }
+
+  ul.DTTT_dropdown.dropdown-menu li {
+    position: relative;
+  }
+
+  ul.DTTT_dropdown.dropdown-menu li:hover a {
+    background-color: #0088cc;
+    color: white !important;
+  }
+
+  div.DTTT_collection_background {
+    z-index: 2002;
+  }
+
+  /* TableTools information display */
+  div.DTTT_print_info.modal {
+    height: 150px;
+    margin-top: -75px;
+    text-align: center;
+  }
+
+  div.DTTT_print_info h6 {
+    font-weight: normal;
+    font-size: 28px;
+    line-height: 28px;
+    margin: 1em;
+  }
+
+  div.DTTT_print_info p {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+
+
+  /*
+   * FixedColumns styles
+   */
+  div.DTFC_LeftHeadWrapper table,
+  div.DTFC_LeftFootWrapper table,
+  div.DTFC_RightHeadWrapper table,
+  div.DTFC_RightFootWrapper table,
+  table.DTFC_Cloned tr.even {
+    background-color: white;
+    margin-bottom: 0;
+  }
+
+  div.DTFC_RightHeadWrapper table ,
+  div.DTFC_LeftHeadWrapper table {
+    margin-bottom: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
+  div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
+  div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
+  div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  div.DTFC_RightBodyWrapper table,
+  div.DTFC_LeftBodyWrapper table {
+    border-top: none;
+    margin: 0 !important;
+  }
+
+  div.DTFC_RightBodyWrapper tbody tr:first-child th,
+  div.DTFC_RightBodyWrapper tbody tr:first-child td,
+  div.DTFC_LeftBodyWrapper tbody tr:first-child th,
+  div.DTFC_LeftBodyWrapper tbody tr:first-child td {
+    border-top: none;
+  }
+
+  div.DTFC_RightFootWrapper table,
+  div.DTFC_LeftFootWrapper table {
+    border-top: none;
+  }
+
+
+  /*
+   * FixedHeader styles
+   */
+  div.FixedHeader_Cloned table {
+    margin: 0 !important
+  }
+
+
+}

data/client/stylesheets/compoonents/modal-dialog.scss

@@ -0,0 +1,23 @@
+.modal-backdrop{
+  position: absolute;
+}
+
+.modal-dialog{
+  position: absolute;
+  top: 30px;
+  z-index: 28;
+  right: 5%;
+  left: 5%;
+
+  &.tiny {
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+
+  &.modal-lg{
+    width: 800px;
+  }
+
+}

data/client/stylesheets/compoonents/record-finder.scss

@@ -0,0 +1,71 @@
+
+.record-finder-query-string {
+  text-transform: uppercase;
+}
+
+.record-finder {
+  .form-control {
+    
+  }
+}
+
+.query-clauses {
+  .row {
+    margin-bottom: 5px;
+  }
+  .btn.del-clause {
+    border-bottom-right-radius: $border-radius-base !important;
+    border-top-right-radius: $border-radius-base !important;
+  }
+  >.clause {
+    .run-query {
+      display: none;
+    }
+    .add-clause {
+      display: none;
+    }
+    &:last-child {
+      .del-clause { display: none; }
+      .run-query  { display: inline-block; }
+      .add-clause { display: inline-block; }
+    }
+  }
+  &.multiple {
+    
+  }
+}
+
+.query {
+  width: 300px;
+  .fields {
+    label {
+      display: block;
+    }
+  }
+  .operators {
+    label {
+      display: block;
+      max-height: 3rem;
+      overflow: hidden;
+      &.invalid {
+        max-height: 0;
+        margin: 0;
+        opacity: 0;
+      }
+      transition-property: opacity, margin, max-height;
+      transition-duration: 0.2s, 0.4s;
+    }
+  }
+}
+
+.modal-dialog.tiny {
+  .skr-grid thead > tr > th {
+    font-size: unset;
+  }
+  .action {
+    text-align: center;
+    .btn.run-query span {
+      display: none;
+    }
+  }
+}