Improve mobile UI (#1076)

src/Jackett/Content/custom.css

@@ -1,4 +1,4 @@
-body {
+body {
     background-image: url("binding_dark.png");
     background-repeat: repeat;
 }
@@ -265,4 +265,7 @@ table td.fit{
     float: right;
     text-align: right;
     margin-right: 1em;
-}
+}
+input#searchquery{
+	width:400px;
+}

src/Jackett/Content/custom_mobile.css

@@ -0,0 +1,282 @@
+body {
+    background-image: url("binding_dark.png");
+    background-repeat: repeat;
+}
+
+#page {
+    border-radius: 6px;
+    background-color: white;
+    max-width: 900px;
+    margin: 0 auto;
+    margin-top: 30px;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.container-fluid {
+}
+
+#templates {
+    display: none;
+}
+
+#indexers {
+   text-align: center;
+   margin-top: 30px;
+}
+
+.indexer-table {
+   text-align: left;
+}
+
+.test-success {
+    color: #449d44;
+}
+
+.test-error {
+    color: #c9302c;
+}
+
+.test-inprogress {
+    color: #286090;
+}
+
+.indexer-buttons {
+    text-align: center;
+}
+
+.indexer-buttons > .btn {
+    margin-bottom: 2px;
+}
+
+.indexer-button-test {
+   width: 60px;
+}
+
+.setup-item-inputstring {
+    max-width: 255px;
+}
+
+.setup-item-inputbool input {
+    max-width: 100px;
+    height: 20px;
+}
+
+[data-type=hiddendata]{
+    display: none;
+}
+
+.spinner {
+    -webkit-animation: spin 2s infinite linear;
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    animation: spin 2s infinite linear;
+}
+
+@-moz-keyframes spin {
+    from {
+        -moz-transform: rotate(0deg);
+    }
+
+    to {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#setup-indexer-go {
+    width: 70px;
+}
+
+hr {
+    border-top-color: #cdcdcd;
+}
+
+.input-area {
+    margin: 4px 0px;
+}
+
+    .input-area > * {
+        vertical-align: middle;
+    }
+
+    .input-area > p {
+        margin-top: 10px;
+    }
+
+.input-header {
+    font-size: 18px;
+    width: 160px;
+    display: inline-block;
+}
+
+.input-right {
+    width: 300px;
+    display: inline-block;
+    font-family: monospace;
+}
+
+#sonarr-warning {
+    display: none;
+}
+
+#logo {
+    max-width: 50px;
+}
+
+#header-title {
+    font-size: 34px;
+    vertical-align: middle;
+    padding-left: 15px;
+}
+
+#footer {
+    color: #444444;
+    margin: 0 auto;
+    margin-top: 10px;
+    text-align: center;
+}
+
+#jackett-allowext, #jackett-allowupdate, #jackett-logging, #jackett-prerelease {
+    width: 25px;
+}
+
+.modal-fillwidth {
+    width: 100%;
+    min-width:80%;
+}
+
+.indexer-caps {
+   padding: 0px 15px 15px 15px;
+   border-top: 1px solid #e5e5e5;
+}
+
+.indexer-caps table {
+    border-bottom:   1px solid #ddd;
+}
+
+.jackettlogWarn {
+    background-color: #FFFF8E !important;
+}
+
+.jackettlogError {
+    background-color: #FF6060 !important;
+}
+
+.jackettdownloaded {
+    color: blueviolet;
+}
+
+.jacketdownloadlocal {
+    padding-left: 10px;
+}
+
+.downloadcolumn {
+    text-align:center;
+}
+
+pre {
+    display: block;
+    padding: 3px;
+    margin: 0 0 0px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: transparent;
+    border: 0px;
+    border-radius: 0px;
+}
+
+.modal-open .modal {
+    overflow-x: auto;  /* Model can be bigger than the screen on mobiles */
+}
+
+.dataTables_filter input {
+    width: 75% 
+}
+
+#unconfigured-indexers-template {
+    display: none;
+}
+.jackett-apikey{
+    margin-top: 10px;
+}
+
+.jackett-apikey .input-header{
+    width: 80px;
+}
+
+.setup-item-displayinfo:empty {
+    display: none;
+}
+
+table td.fit{
+    width: 50%;
+}
+
+.label-imdb {
+    background-color: #d0ab44;
+}
+
+.tooltip-inner {
+    max-width: 500px !important;
+}
+
+.tooltip-inner img {
+    max-width: 250px;
+    height: auto;     
+}
+
+.type-public {
+    color: #449d44
+}
+
+.type-private {
+    color: #c9302c
+}
+
+.type-semi-private {
+    color: #ec971f
+}
+
+.dataTables_deadfilter {
+    float: right;
+    text-align: right;
+    margin-right: 1em;
+}
+div#jackett-search-results-datatable_wrapper {
+    width: 100%;
+    overflow-x: scroll;
+}
+div#unconfigured-indexer-datatable_wrapper {
+    width: 100%;
+    overflow-x: scroll;
+}
+div#jackett-releases-datatable_wrapper {
+    width: 100%;
+    overflow-x: scroll;
+}
+input#searchquery{
+	width:50%;
+}

src/Jackett/Content/index.html

@@ -3,7 +3,7 @@
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
     <meta name="mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta charset="utf-8" />
@@ -32,7 +32,9 @@
 
     <link href="../bootstrap/bootstrap.min.css" rel="stylesheet">
     <link href="../animate.css" rel="stylesheet">
-    <link href="../custom.css" rel="stylesheet">
+    <link rel="stylesheet" href="../custom.css" media="only screen and (min-device-width: 480px)">
+    <link rel="stylesheet" href="../custom_mobile.css" media="only screen and (max-device-width: 480px)">
+
     <link href="../css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="../css/font-awesome.min.css">
     <title>Jackett</title>
@@ -392,7 +394,7 @@
                     <div class="modal-body">
                         <p>You can search all configured indexers from this screen.</p>
                         <label>Query</label>
-                        <input type="text" name="query" id="searchquery" style="width:400px" />
+                        <input type="text" name="query" id="searchquery"/>
                         <label>Category</label>
                         <select name="category" id="searchCategory"></select>
                         <label>Tracker</label>