Improve mobile UI (#1076)

This commit is contained in:
griddoz92 2017-03-01 22:57:40 +11:00 committed by kaso17
parent cdd9411d5d
commit 454adfc2ab
3 changed files with 292 additions and 5 deletions

View File

@ -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;
}

View File

@ -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%;
}

View File

@ -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>