CC-6137 - datatables is the devil

airtime_mvc/public/css/dashboard.css

@@ -20,6 +20,14 @@
 
     background-color: #242424;
 }
+@media screen and (max-width: 1700px) {
+    #library_display_info {
+        display: none;
+    }
+    #library_display_length {
+        float: left;
+    }
+}
 
 @media screen and (max-width: 1600px) {
     #library_display_wrapper button:not(.dropdown-toggle):not(.btn-new) > span,
@@ -34,6 +42,13 @@
     }
 }
 
+@media screen and (max-width: 1260px) {
+    #library_display_length > label {
+        /* Hacky, but datatables dumps the select inside the label for some reason... */
+        font-size: 0 !important;
+    }
+}
+
 @media screen and (max-width: 1200px) {
     .wrapper {
         -webkit-flex-flow: column !important;
@@ -84,11 +99,11 @@
     padding: 0;
 }
 
-#library_content .dataTables_length {
-    padding: 5px;
+#library_display_length {
+    padding: 6px;
 }
 
-#library_content .dataTables_length label {
+#library_display_length label {
     color: #efefef;
     line-height: 26px;
     font-weight: normal;
@@ -625,7 +640,7 @@ div.ColVis_collectionBackground {
 }
 
 .ColVis.TableTools {
-    margin: 5px 5px 0 0;
+    margin: 6px 6px 0 0;
 }
 
 .ColVis.TableTools > button {
@@ -648,7 +663,7 @@ div.ColVis_collectionBackground {
 
 .fg-toolbar .btn-toolbar {
     margin: 0;
-    padding: 5px;
+    padding: 6px;
 }
 /* ~~~~~~~~~~~~~~~~ */
 
@@ -684,11 +699,6 @@ th.library_checkbox {
     position: fixed !important;
 }
 
-/* Since the z-index gets applied dynamically */
-/*#ui-datepicker-div {*/
-    /*z-index: 1000 !important;*/
-/*}*/
-
 .datatable .ui-state-highlight, .spl_sortable .ui-state-highlight {
     background: rgba(255, 93, 26, .6);
     border: none;
@@ -696,8 +706,13 @@ th.library_checkbox {
 
 .dataTables_scrolling {
     position: absolute;
-    bottom: 37px; /* 36 px is the size of the header/footer + 1px because there's no internal border */
-    top: 37px;
+    bottom: 37px;
+    top: 38px;
     left: 0;
     right: 0;
 }
+
+.DTCR_pointer {
+    background-color: #FF5D1A !important;
+    height: 38px !important;
+}

airtime_mvc/public/css/styles.css

@@ -67,7 +67,8 @@ select {
     height: 7px;
 }
 
-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
     background: transparent none;
 }
 
@@ -83,10 +84,6 @@ select {
     -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.75);
 }
 
-::-webkit-scrollbar-corner {
-    background-color: #000;
-}
-
 .wrapper_panel::-webkit-scrollbar-corner {
     background-color: #242424;
 }
@@ -842,18 +839,17 @@ dl.inline-list dd {
     color: #ccc;
 }
 
-#recent_uploads_table_wrapper .datatable tr td {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .datatable tr, .datatable td,
-.dataTable tr, .dataTable td
-{
+.dataTable tr, .dataTable td {
     border: none;
     border-spacing: 0;
 }
 
+#recent_uploads_table tr, #recent_uploads_table td {
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 200px;
+}
 
 .odd {
     background-color: #282828;
@@ -923,7 +919,7 @@ dl.inline-list dd {
 }
 
 .dataTables_length {
-    float:right;
+    float:left;
     margin:0;
     
 }
@@ -3873,9 +3869,8 @@ li .ui-state-hover {
     -webkit-flex-flow: column;
     flex-flow: column;
 
-    /* Account for the left pane */
     flex: 6 auto;
-    min-width: 500px;
+    min-width: 505px;
 }
 
 .outer-datatable-wrapper {