[TASK] improve style searchable table

2024-04-14 17:43:18 +02:00
parent b0c936cc34
commit 0b6461eeb5
6 changed files with 204 additions and 25 deletions
--- a/frontend/scss/components/_searchable-table.scss
+++ b/frontend/scss/components/_searchable-table.scss
@ -0,0 +1,178 @@
+/*!
+ * JSTable v1.6.5
+ */
+
+ .dt-container{
+  position:relative;
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  overflow-y: hidden;
+
+  .dt-message {
+      text-align: center;
+  }
+
+  .dt-loading{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      margin-left: -50%;
+      margin-top: -20px;
+      height: 40px;
+      text-align: center;
+      background-color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.9) 25%,rgba(255,255,255,0.9) 75%,rgba(255,255,255,0) 100%);
+  }
+}
+
+.dt-top,
+.dt-bottom {
+  padding: 8px 10px;
+  display:flex;
+  justify-content:space-between;
+
+  .dt-info {
+      margin: 7px 0;
+  }
+
+}
+
+/* PAGER */
+.dt-pagination {
+
+  ul {
+      margin: 0;
+      padding-left: 0;
+      li {
+          list-style: none;
+          float: left;
+      }
+  }
+  a, span{
+      border: 1px solid transparent;
+      float: left;
+      margin-left: 2px;
+      padding: 6px 12px;
+      position: relative;
+      text-decoration: none;
+      color: inherit;
+  }
+
+  a:hover {
+      background-color: #d9d9d9;
+  }
+  .active a{
+      &, &:focus, &:hover{
+          background-color: #d9d9d9;
+          cursor: default;
+      }
+  }
+
+  .dt-ellipsis span{
+      cursor: not-allowed;
+  } 
+  .disabled a{
+      &, &:focus, &:hover{
+          cursor: not-allowed;
+          opacity: 0.4;
+      }
+  }
+
+  .pager a {
+      font-weight: bold;
+  }
+}
+
+
+.dt-table {
+  max-width: 100%;
+  width: 100%;
+  border-spacing: 0;
+
+  & > tbody, > tfoot, > thead{
+      & > tr{
+          & > td, & > th{
+              vertical-align: top;
+              padding: 8px 10px;
+              white-space: nowrap;
+          }
+      }
+  }
+
+  & > thead > tr{ 
+      & > th, & > td{
+          vertical-align: bottom;
+          text-align: left;
+          border-bottom: 1px solid #d9d9d9;
+      }
+  }
+
+  & > tfoot  > tr{ 
+      & > th, & > td{
+          vertical-align: bottom;
+          text-align: left;
+          border-top: 1px solid #d9d9d9;
+      }
+  }
+
+  th {
+      vertical-align: bottom;
+      text-align: left;
+
+      &.dt-sorter {
+          position: relative;
+          cursor: pointer;
+          padding-right:20px;
+
+          &::before,
+          &::after {
+              content: "";
+              height: 0;
+              width: 0;
+              position: absolute;
+              right: 7px;
+              border-left: 4px solid transparent;
+              border-right: 4px solid transparent;
+              opacity: 0.2;
+          }
+
+          &::before {
+              border-top: 4px solid #000;
+              top: 18px;
+          }
+
+          &::after {
+              border-bottom: 4px solid #000;
+              border-top: 4px solid transparent;
+              bottom: 22px;
+          }
+
+          &.asc::after,
+          &.desc::before {
+              opacity: 0.6;
+          }
+
+      }
+  }
+
+}
+
+.dt-loading.hidden{
+  display:none!important;
+  opacity:0!important;
+}
+
+.dt-input {
+  @extend .input;
+}
+
+.dt-selector {
+  @extend .input;
+}