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

appinfo/info.xml

@@ -5,7 +5,7 @@
     <summary>Aria2 and youtube-dl web gui for nextcloud</summary>
     <description>built-in torrent search;Start and stop Aria2 process, manage Aria2 from the web;
 Download videos from youtube, twitter and other sites;</description>
-    <version>0.2.0</version>
+    <version>0.2.5</version>
     <licence>agpl</licence>
     <author mail="freefallbenson@gmail.com" homepage="https://github.com/shiningw">jiaxinhuang</author>
     <namespace>NCDownloader</namespace>

css/style.css

@@ -1,296 +0,0 @@
-.action-item {
-	position: relative;
-}
-
-a {
-	color          : #337ab7;
-	text-decoration: none;
-}
-
-#ncdownloader-form-wrapper .form-input-wrapper {
-	display  : flex;
-	flex-flow: row nowrap;
-}
-
-#ncdownloader-form-wrapper .form-input-wrapper select,
-#ncdownloader-form-wrapper .form-input-wrapper input {
-	justify-content: left;
-}
-
-a:hover,
-a:focus {
-	color          : #23527c;
-	text-decoration: underline;
-}
-
-a:focus {
-	outline       : 5px auto -webkit-focus-ring-color;
-	outline-offset: -2px;
-}
-
-div .number {
-	background   : none repeat scroll 0 0 #5f5853;
-	border-radius: 999px;
-	color        : #FFFFFF;
-	display      : inline-block;
-	font-size    : 15px;
-	font-style   : italic;
-	height       : 20px;
-	line-height  : 20px;
-	margin-right : 10px;
-	padding      : 0 8px;
-}
-
-#ncdownloader-settings-form input[type=text] {
-	width: 160px;
-}
-
-#ncdownloader-form-wrapper input[type=text] {
-	padding: 0px 5px;
-	flex   : auto;
-}
-
-#ncdownloader-table-data .table-cell {
-	padding-left: 4px;
-}
-
-.icon-power {
-	background-image: url('../img/power.svg');
-}
-
-.icon-purge {
-	background-image: url('../img/trash.svg');
-}
-
-.icon-unpause {
-	background-image: url('../img/play.svg');
-}
-.icon-refresh {
-	background-image: url('../img/refresh.svg');
-}
-
-#ncdownloader-action-links-container {
-	position: relative;
-}
-
-#ncdownloader-action-links-container ul {
-	background-color: #ededed;
-}
-
-#ncdownloader-action-links-container .action-link-item a:hover {
-	background-color: #c2afaf;
-}
-
-#ncdownloader-message-banner.success,
-.message-banner.success {
-	color           : #3c763d;
-	background-color: #dff0d8;
-	border-color    : #d6e9c6;
-	width           : fit-content;
-}
-
-#ncdownloader-message-banner.error,
-.message-banner.error {
-	color           : #a94442;
-	background-color: #f2dede;
-	border-color    : #ebccd1;
-	width           : fit-content;
-}
-
-
-
-.action-links {
-	/*visibility: hidden;*/
-	display         : none;
-	position        : absolute;
-	background-color: #f1f1f1;
-	min-width       : 60px;
-	box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-	z-index         : 9999;
-}
-
-.action-link-item a {
-	color          : black;
-	padding        : 6px 6px;
-	text-decoration: none;
-	display        : block;
-}
-
-.app-ncdownloader,
-#ncdownloader-content {
-	width: 100%;
-}
-
-.ncdownloader-content-wrapper {
-	width      : 100%;
-	padding-top: 0.3em;
-}
-
-#ncdownloader-form-wrapper {
-	width: 100%;
-}
-
-
-#ncdownloader-table-content {
-	width: 100%;
-}
-
-.app-ncdownloader #app-content #app-content-wrapper {
-	flex-wrap: wrap;
-}
-
-#app-content-wrapper #ncdownloader-table-content thead>tr {
-	height          : 30px;
-	background-color: #eee;
-}
-
-#app-content-wrapper #ncdownloader-table-content thead>tr>th {
-	font-style   : italic;
-	font-weight  : bold;
-	padding      : 2px 0 2px 5px;
-	border-bottom: 1px solid #ddd;
-	text-align   : left;
-}
-
-#ncdownloader-table-content thead.table-heading th {
-	border-left: 1px solid rgb(216, 202, 202);
-}
-
-#app-content-wrapper #ncdownloader-table-content .table-cell {
-	border-bottom: 1px solid #9d9595;
-	border-left  : 1px solid #eee;
-
-}
-
-.app-navigation-entry-bullet {
-	background-color: rgb(80, 80, 173);
-}
-
-.notinstalled {
-	color: red;
-}
-
-.checkboxes label {
-	display: inline-block;
-	padding-right: 10px;
-	white-space: nowrap;
-  }
-  .checkboxes input {
-	vertical-align: middle;
-  }
-  .checkboxes label span {
-	vertical-align: middle;
-  }
-
-  #ncdownloader-content > #app-navigation:not(.vue) > ul > li > a {
-    padding: 0 12px 0 44px;
-}
-
-@media only screen and (min-width: 800px) {}
-
-@media only screen and (max-width: 1024px) {
-	#ncdownloader-form-wrapper {
-		position  : relative;
-		margin-top: 2em;
-	}
-	#ncdownloader-settings-form input[type=text] {
-		width: 135px;
-	}
-}
-
-
-/* from bootstrap */
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
-	position   : absolute !important;
-	width      : 1px !important;
-	height     : 1px !important;
-	padding    : 0 !important;
-	margin     : -1px !important;
-	overflow   : hidden !important;
-	clip       : rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border     : 0 !important;
-}
-
-@-webkit-keyframes spinner-border {
-	to {
-		transform: rotate(360deg)
-			/* rtl  :ignore */
-		;
-	}
-}
-
-@keyframes spinner-border {
-	to {
-		transform: rotate(360deg)
-			/* rtl  :ignore */
-		;
-	}
-}
-
-.spinner-border {
-	display           : inline-block;
-	width             : 2rem;
-	height            : 2rem;
-	vertical-align    : -0.125em;
-	border            : 0.25em solid currentColor;
-	border-right-color: transparent;
-	border-radius     : 50%;
-	-webkit-animation : 0.75s linear infinite spinner-border;
-	animation         : 0.75s linear infinite spinner-border;
-}
-
-.spinner-border-sm {
-	width       : 1rem;
-	height      : 1rem;
-	border-width: 0.2em;
-}
-
-@-webkit-keyframes spinner-grow {
-	0% {
-		transform: scale(0);
-	}
-
-	50% {
-		opacity  : 1;
-		transform: none;
-	}
-}
-
-@keyframes spinner-grow {
-	0% {
-		transform: scale(0);
-	}
-
-	50% {
-		opacity  : 1;
-		transform: none;
-	}
-}
-
-.spinner-grow {
-	display          : inline-block;
-	width            : 2rem;
-	height           : 2rem;
-	vertical-align   : -0.125em;
-	background-color : currentColor;
-	border-radius    : 50%;
-	opacity          : 0;
-	-webkit-animation: 0.75s linear infinite spinner-grow;
-	animation        : 0.75s linear infinite spinner-grow;
-}
-
-.spinner-grow-sm {
-	width : 1rem;
-	height: 1rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-	.spinner-border,
-	.spinner-grow {
-		-webkit-animation-duration: 1.5s;
-		animation-duration        : 1.5s;
-	}
-}

css/table.css

@@ -1,81 +0,0 @@
-#ncdownloader-table-wrapper {
-  display: flex;
-  flex-flow: column nowrap;
-  background-color: white;
-  width: 100%;
-  margin: 0 auto;
-  border-radius: 4px;
-  /*border          : 1px solid #DADADA;*/
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
-  justify-content: center;
-  align-items: center;
-  background-color: #fafafa; }
-  #ncdownloader-table-wrapper .table-row,
-  #ncdownloader-table-wrapper .table-row-search {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    border-bottom: 1px solid #dadada; }
-  #ncdownloader-table-wrapper section.table-body,
-  #ncdownloader-table-wrapper section.table-heading {
-    width: 100%;
-    display: flex;
-    flex-flow: column nowrap; }
-  #ncdownloader-table-wrapper .table-row,
-  #ncdownloader-table-wrapper .table-row-search {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    border-bottom: 1px solid #dadada; }
-  #ncdownloader-table-wrapper .table-heading .table-row,
-  #ncdownloader-table-wrapper .table-heading .table-row-search {
-    background-color: #ececec;
-    color: #3e3e3e;
-    font-weight: bold; }
-  #ncdownloader-table-wrapper .table-heading .table-cell:hover {
-    cursor: pointer;
-    background-color: #c4afaf;
-    /*   box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */ }
-  #ncdownloader-table-wrapper .table-cell {
-    display: flex;
-    flex-flow: column wrap;
-    flex: 1;
-    font-size: 14px;
-    padding: 8px 3px;
-    justify-content: left;
-    align-items: left;
-    transition: all 0.15s ease-in-out; }
-  #ncdownloader-table-wrapper .table-cell:first-child {
-    flex: 1 1 30%; }
-  #ncdownloader-table-wrapper .table-cell:last-child {
-    flex: 0 1 7%; }
-  #ncdownloader-table-wrapper #table-cell-status,
-  #ncdownloader-table-wrapper .table-heading-status {
-    flex: 0 1 15%;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  #ncdownloader-table-wrapper .table-cell:hover {
-    cursor: pointer;
-    background-color: #F0F0F0;
-    /*   box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */ }
-  #ncdownloader-table-wrapper .row-sub-container {
-    display: flex;
-    flex-flow: column nowrap;
-    flex: 1; }
-  #ncdownloader-table-wrapper .row-sub-container .table-cell {
-    padding: 8px 0;
-    border-bottom: 1px solid #dadada; }
-  #ncdownloader-table-wrapper .table-row:last-child,
-  #ncdownloader-table-wrapper .row-sub-container .table-cell:last-child {
-    border-bottom: 0; }
-
-@media only screen and (max-width: 1024px) {
-  #ncdownloader-table-wrapper #ncdownloader-form-wrapper {
-    position: relative;
-    margin-top: 2em; }
-  #ncdownloader-table-wrapper .table-cell:first-child {
-    flex: 1 0 250px;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  #ncdownloader-table-wrapper .table-cell:last-child {
-    flex: 1 1 7%; } }

lib/Controller/Aria2Controller.php

@@ -234,7 +234,7 @@ class Aria2Controller extends Controller
                 $actions[] = $this->createActionItem('unpause', 'unpause');
             }
             if ($this->aria2->methodName === "tellActive") {
-                $speed = [Helper::formatBytes($value['downloadSpeed']), $left . " left"];
+                $speed = [Helper::formatBytes($value['downloadSpeed']), $left];
                 $tmp['speed'] = $speed;
                 $tmp['progress'] = $value['progress'];
                 $actions[] = $this->createActionItem('pause', 'pause');

lib/Controller/MainController.php

@@ -43,8 +43,8 @@ class MainController extends Controller
         // $str = \OC::$server->getDatabaseConnection()->getInner()->getPrefix();
         //$config = \OC::$server->getAppConfig();
         OC_Util::addScript($this->appName, 'app');
-        OC_Util::addStyle($this->appName, 'style');
+       // OC_Util::addStyle($this->appName, 'style');
-        OC_Util::addStyle($this->appName, 'table');
+       // OC_Util::addStyle($this->appName, 'table');
         $params = array();
         $params['aria2_running'] = $this->aria2->isRunning();
         $params['aria2_installed'] = $this->aria2->isInstalled();

lib/Controller/YoutubeController.php

@@ -53,7 +53,7 @@ class YoutubeController extends Controller
             $filename = sprintf('<a class="download-file-folder" href="%s">%s</a>', $folderLink, $value['filename']);
             $fileInfo = sprintf("%s | %s", $value['filesize'], date("Y-m-d H:i:s", $value['timestamp']));
             $tmp['filename'] = array($filename, $fileInfo);
-            $tmp['speed'] = $value['speed'];
+            $tmp['speed'] = explode("|", $value['speed']);
             $tmp['progress'] = $value['progress'];
             if ((int) $value['status'] == Helper::STATUS['COMPLETE']) {
                 $path = $this->urlGenerator->linkToRoute('ncdownloader.Youtube.Delete');

src/css/style.scss

@@ -0,0 +1,279 @@
+.action-item {
+    position: relative;
+}
+
+a {
+    color          : #337ab7;
+    text-decoration: none;
+}
+
+#ncdownloader-form-wrapper .form-input-wrapper {
+    display  : flex;
+    flex-flow: row nowrap;
+}
+
+#ncdownloader-form-wrapper .form-input-wrapper select,
+#ncdownloader-form-wrapper .form-input-wrapper input {
+    justify-content: left;
+}
+
+a:hover,
+a:focus {
+    color          : #23527c;
+    text-decoration: underline;
+}
+
+a:focus {
+    outline       : 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+div .number {
+    background   : none repeat scroll 0 0 #5f5853;
+    border-radius: 999px;
+    color        : #FFFFFF;
+    display      : inline-block;
+    font-size    : 15px;
+    font-style   : italic;
+    height       : 20px;
+    line-height  : 20px;
+    margin-right : 10px;
+    padding      : 0 8px;
+}
+
+#ncdownloader-settings-form input[type=text] {
+    width: 160px;
+}
+
+#ncdownloader-form-wrapper input[type=text] {
+    padding: 0px 5px;
+    flex   : auto;
+}
+
+#ncdownloader-table-data .table-cell {
+    padding-left: 4px;
+}
+
+.icon-power {
+    background-image: url('../../img/power.svg');
+}
+
+.icon-purge {
+    background-image: url('../../img/trash.svg');
+}
+
+.icon-unpause {
+    background-image: url('../../img/play.svg');
+}
+
+.icon-refresh {
+    background-image: url('../../img/refresh.svg');
+}
+
+#ncdownloader-action-links-container {
+    position: relative;
+
+    .action-link-item a:hover {
+        background-color: #c2afaf;
+    }
+
+    ul {
+        background-color: #ededed;
+    }
+}
+
+#ncdownloader-message-banner.success,
+.message-banner.success {
+    color           : #3c763d;
+    background-color: #dff0d8;
+    border-color    : #d6e9c6;
+    width           : fit-content;
+}
+
+#ncdownloader-message-banner.error,
+.message-banner.error {
+    color           : #a94442;
+    background-color: #f2dede;
+    border-color    : #ebccd1;
+    width           : fit-content;
+}
+
+
+
+.action-links {
+    /*visibility: hidden;*/
+    display         : none;
+    position        : absolute;
+    background-color: #f1f1f1;
+    min-width       : 60px;
+    box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index         : 9999;
+}
+
+.action-link-item a {
+    color          : black;
+    padding        : 6px 6px;
+    text-decoration: none;
+    display        : block;
+}
+
+.app-ncdownloader,
+#ncdownloader-content,.ncdownloader-content-wrapper,#ncdownloader-form-wrapper, #ncdownloader-table-content{
+    width: 100%;
+}
+.ncdownloader-content-wrapper {
+    padding-top: 0.3em;
+}
+.app-ncdownloader #app-content #app-content-wrapper {
+    flex-wrap: wrap;
+}
+
+#app-content-wrapper #ncdownloader-table-content .table-cell {
+    border-bottom: 1px solid #9d9595;
+    border-left  : 1px solid #eee;
+
+}
+
+.app-navigation-entry-bullet {
+    background-color: rgb(80, 80, 173);
+}
+
+.notinstalled {
+    color: red;
+}
+
+.checkboxes label {
+    display      : inline-block;
+    padding-right: 10px;
+    white-space  : nowrap;
+}
+
+.checkboxes input {
+    vertical-align: middle;
+}
+
+.checkboxes label span {
+    vertical-align: middle;
+}
+
+#ncdownloader-content>#app-navigation:not(.vue)>ul>li>a {
+    padding: 0 12px 0 44px;
+}
+
+.button-container [class^='icon-'],
+.button-container [class*=' icon-'] {
+    background-repeat  : no-repeat;
+    background-position: center;
+    /* min-width       : 18px; */
+    min-height         : 24px;
+}
+
+@media only screen and (min-width: 800px) {}
+
+@media only screen and (max-width: 1024px) {
+    #ncdownloader-form-wrapper {
+        position  : relative;
+        margin-top: 2em;
+    }
+
+    #ncdownloader-settings-form input[type=text] {
+        width: 135px;
+    }
+}
+
+
+/* from bootstrap */
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position   : absolute !important;
+    width      : 1px !important;
+    height     : 1px !important;
+    padding    : 0 !important;
+    margin     : -1px !important;
+    overflow   : hidden !important;
+    clip       : rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border     : 0 !important;
+}
+
+@-webkit-keyframes spinner-border {
+    to {
+        transform   : rotate(360deg)
+            /* rtl  :ignore */
+        ;
+    }
+}
+
+@keyframes spinner-border {
+    to {
+        transform   : rotate(360deg)
+            /* rtl  :ignore */
+        ;
+    }
+}
+
+.spinner-border {
+    display           : inline-block;
+    width             : 2rem;
+    height            : 2rem;
+    vertical-align    : -0.125em;
+    border            : 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius     : 50%;
+    -webkit-animation : 0.75s linear infinite spinner-border;
+    animation         : 0.75s linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+    width       : 1rem;
+    height      : 1rem;
+    border-width: 0.2em;
+}
+
+@-webkit-keyframes spinner-grow {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        opacity  : 1;
+        transform: none;
+    }
+}
+
+@keyframes spinner-grow {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        opacity  : 1;
+        transform: none;
+    }
+}
+
+.spinner-grow {
+    display          : inline-block;
+    width            : 2rem;
+    height           : 2rem;
+    vertical-align   : -0.125em;
+    background-color : currentColor;
+    border-radius    : 50%;
+    opacity          : 0;
+    -webkit-animation: 0.75s linear infinite spinner-grow;
+    animation        : 0.75s linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+    width : 1rem;
+    height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+    .spinner-border,
+    .spinner-grow {
+        -webkit-animation-duration: 1.5s;
+        animation-duration        : 1.5s;
+    }
+}

src/css/table.scss

@@ -1,23 +1,13 @@
 #ncdownloader-table-wrapper {
-  display         : flex;
+  display           : flex;
-  flex-flow       : column nowrap;
+  flex-flow         : column nowrap;
-  background-color: white;
+  width             : 100%;
-  width           : 100%;
+  margin            : 0 auto;
-  margin          : 0 auto;
+  border-radius     : 4px;
-  border-radius   : 4px;
   /*border          : 1px solid #DADADA;*/
-  box-shadow      : 0px 1px 4px rgba(0, 0, 0, .08);
+  box-shadow        : 0px 1px 4px rgba(0, 0, 0, .08);
-  justify-content : center;
+  justify-content   : center;
-  align-items     : center;
+  align-items       : center;
-  background-color: #fafafa;
-
-  .table-row,
-  .table-row-search {
-    display      : flex;
-    flex-flow    : row nowrap;
-    width        : 100%;
-    border-bottom: 1px solid #dadada;
-  }
 
   section.table-body,
   section.table-heading {
@@ -38,9 +28,8 @@
 
     .table-row,
     .table-row-search {
-      background-color: #ececec;
+      color      : #3e3e3e;
-      color           : #3e3e3e;
+      font-weight: bold;
-      font-weight     : bold;
     }
 
     .table-cell:hover {
@@ -55,46 +44,26 @@
     flex-flow      : column wrap;
     flex           : 1;
     font-size      : 14px;
-    padding        : 8px 3px;
+    padding        : 8px 7px;
     justify-content: left;
-    align-items    : left;
+    align-items    : start;
     transition     : all 0.15s ease-in-out;
   }
 
   .table-cell:first-child {
-    flex: 1 1 30%;
+    flex         : 1 1 auto;
-  }
+    width        : 30%;
-
-  .table-cell:last-child {
-    flex: 0 1 7%;
-  }
-
-  #table-cell-status,
-  .table-heading-status {
-    flex         : 0 1 15%;
     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); */
   }
 
-  .row-sub-container {
+  .table-row:last-child {
-    display  : flex;
-    flex-flow: column nowrap;
-    flex     : 1;
-  }
-
-  .row-sub-container .table-cell {
-    padding      : 8px 0;
-    border-bottom: 1px solid #dadada;
-  }
-
-  .table-row:last-child,
-  .row-sub-container .table-cell:last-child {
     border-bottom: 0;
   }
 
@@ -108,16 +77,27 @@
     }
 
     .table-cell:first-child {
-      flex         : 1 0 250px;
+      flex   : 1 0 auto;
-      overflow     : hidden;
+      display: flex;
-      text-overflow: ellipsis;
+      width  : 150px;
+    }
+
+    .table-cell:first-child>div {
+      flex-flow: column nowrap;
     }
 
     .table-cell:last-child {
-      flex: 1 1 7%;
+      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;
+    }
+  }
+}

src/index.js

@@ -7,6 +7,9 @@ import inputAction from './inputAction'
 import updatePage from './updatePage'
 import buttonActions from './buttonActions'
 import inputBox from './inputBox'
+import './css/style.scss'
+import './css/table.scss'
+
 'use strict'
 const basePath = "/apps/ncdownloader";
 $(document).on('ajaxSend', function (elm, xhr, settings) {

src/settings.js

@@ -8,6 +8,7 @@ import autoComplete from './autoComplete';
 import eventHandler from './eventHandler';
 import aria2Options from './aria2Options';
 import helper from './helper';
+import './css/autoComplete.css'
 
 'use strict';
 window.addEventListener('DOMContentLoaded', function () {