fixed #10;fixed mobile table layout issue;included stylesheets in js file and deleted original css files

2021-10-07 22:32:48 +08:00
parent e8534e4f70
commit 3915c292e8
11 changed files with 322 additions and 436 deletions
--- a/src/css/table.scss
+++ b/src/css/table.scss
@@ -0,0 +1,103 @@
+#ncdownloader-table-wrapper {
+  display           : flex;
+  flex-flow         : column nowrap;
+  width             : 100%;
+  margin            : 0 auto;
+  border-radius     : 4px;
+  /*border          : 1px solid #DADADA;*/
+  box-shadow        : 0px 1px 4px rgba(0, 0, 0, .08);
+  justify-content   : center;
+  align-items       : center;
+
+  section.table-body,
+  section.table-heading {
+    width    : 100%;
+    display  : flex;
+    flex-flow: column nowrap;
+  }
+
+  .table-row,
+  .table-row-search {
+    display      : flex;
+    flex-flow    : row nowrap;
+    width        : 100%;
+    border-bottom: 1px solid #dadada;
+  }
+
+  .table-heading {
+
+    .table-row,
+    .table-row-search {
+      color      : #3e3e3e;
+      font-weight: bold;
+    }
+
+    .table-cell:hover {
+      cursor          : pointer;
+      background-color: #c4afaf;
+      /*   box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */
+    }
+  }
+
+  .table-cell {
+    display        : flex;
+    flex-flow      : column wrap;
+    flex           : 1;
+    font-size      : 14px;
+    padding        : 8px 7px;
+    justify-content: left;
+    align-items    : start;
+    transition     : all 0.15s ease-in-out;
+  }
+
+  .table-cell:first-child {
+    flex         : 1 1 auto;
+    width        : 30%;
+    overflow     : hidden;
+    text-overflow: ellipsis;
+    white-space  : nowrap;
+  }
+  .table-cell:hover {
+    cursor          : pointer;
+    background-color: #F0F0F0;
+    /*   box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */
+  }
+
+  .table-row:last-child {
+    border-bottom: 0;
+  }
+
+}
+
+@media only screen and (max-width: 1024px) {
+  #ncdownloader-table-wrapper {
+    #ncdownloader-form-wrapper {
+      position  : relative;
+      margin-top: 2em;
+    }
+
+    .table-cell:first-child {
+      flex   : 1 0 auto;
+      display: flex;
+      width  : 150px;
+    }
+
+    .table-cell:first-child>div {
+      flex-flow: column nowrap;
+    }
+
+    .table-cell:last-child {
+      flex: 1 1 0;
+    }
+  }
+  #ncdownloader-table-wrapper.youtube-dl-downloads {
+
+    #table-cell-speed,
+    .table-heading-speed {
+      flex         : 0 1 auto;
+      overflow     : hidden;
+      text-overflow: ellipsis;
+      width        : 58px;
+    }
+  }
+}