Continuing work on mobile UI.

pull/427/head
Louis Vézina 6 years ago
parent 8ed4385e83
commit 26f57f5ca0

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>
@ -100,8 +100,20 @@
<div style='padding-left: 2em; padding-right: 2em;' class='ui container'>
<div id="divdetails" class="ui container">
<img class="left floated ui image" style="max-height:250px;" src="{{base_url}}image_proxy{{details[2]}}">
<div class="ui right floated basic icon buttons">
<div class="ui stackable grid">
<div class="three wide column">
<img class="ui image" style="max-height:250px;" src="{{base_url}}image_proxy{{details[2]}}">
</div>
<div class="thirteen wide column">
<div class="ui stackable grid">
<div class="ui row">
<div class="twelve wide left aligned column">
<h2>{{details[0]}}</h2>
</div>
<div class="four wide right aligned column">
<div class="ui basic icon buttons">
<button id="scan_disk" class="ui button" data-tooltip="Scan disk for subtitles"><i class="ui inverted large compact refresh icon"></i></button>
<button id="search_missing_subtitles" class="ui button" data-tooltip="Download missing subtitles"><i class="ui inverted huge compact search icon"></i></button>
<%
@ -115,19 +127,27 @@
%>
<button id="config" class="ui button" data-tooltip="Edit series" data-tvdbid="{{details[5]}}" data-title="{{details[0]}}" data-poster="{{details[2]}}" data-audio="{{details[6]}}" data-languages="{{!subs_languages_list}}" data-hearing-impaired="{{details[4]}}"><i class="ui inverted large compact configure icon"></i></button>
</div>
<h2>{{details[0]}}</h2>
</div>
</div>
<div class="ui row">
<p>{{details[1]}}</p>
<p style='margin-top: 3em;'>
</div>
<div class="ui row">
<div class="ui tiny inverted label" style='background-color: #777777;'>{{details[6]}}</div>
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{details[8]}}</div>
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{number}} files</div>
</p>
<p style='margin-top: 2em;'>
</div>
<div class="ui row">
%for language in subs_languages_list:
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{language}}</div>
%end
</p>
<div style='clear:both;'></div>
</div>
</div>
</div>
</div>
</div>
%if len(seasons) == 0:

@ -1,8 +1,5 @@
<html>
<header>
<!DOCTYPE html>
</header>
<html>
<body>
<div style='margin-bottom:2em; color:Gray;' class="ui center aligned container">
Bazarr Ver. {{bazarr_version}}

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="{{base_url}}static/noty/noty.css" rel="stylesheet">
<script src="{{base_url}}static/noty/noty.min.js" type="text/javascript"></script>
<style>
@ -13,6 +17,12 @@
margin: 0em !important;
background: none !important;
}
#icon_menu {
background: transparent !important;
border: solid;
border-width: 1px;
border-color: white;
}
.prompt {
background-color: #333333 !important;
color: white !important;
@ -26,7 +36,7 @@
@media only screen and (max-width: 1024px) {
.logo {
width: 50%;
width: 36px;
height: auto;
}
}
@ -62,9 +72,9 @@
% from get_providers import list_throttled_providers
% throttled_providers_count = len(eval(str(settings.general.throtteled_providers)))
<div id="divmenu" class="ui container">
<div class="ui stackable grid">
<div class="ui grid">
<div class="three wide column">
<div class="ui segment menu_segment">
<div class="ui compact segment menu_segment">
<a href="{{base_url}}"><img class="logo" src="{{base_url}}static/logo128.png"></a>
</div>
</div>
@ -124,7 +134,7 @@
</div>
<div class="ui center aligned segment menu_segment">
<div class="ui grid">
<div class="ten wide centered column">
<div id="search_column" class="centered column">
<div class="ui fluid search">
<div class="ui left icon fluid input">
<input class="prompt" type="text" placeholder="Search in your library">
@ -137,9 +147,9 @@
</div>
<div class="three wide right aligned column">
<div id="dropdown_menu" class="ui segment menu_segment" hidden="hidden">
<div class="ui compact icon menu">
<div id="icon_menu" class="ui compact tiny icon menu">
<div id="dropdown_menu_button" class="ui floating right dropdown item">
<i class="bars icon"></i>
<i class="inverted bars icon"></i>
<div class="ui menu">
% if settings.general.getboolean('use_sonarr'):
<a class="item" href="{{base_url}}series">
@ -300,9 +310,11 @@
if($(window).width() < 1024){
$('#button_menu').hide();
$('#dropdown_menu').show();
$('#search_column').removeClass('ten wide');
} else {
$('#dropdown_menu').hide();
$('#button_menu').show();
$('#search_column').addClass('ten wide');
}
}).resize();
</script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>
@ -91,7 +91,26 @@
<div style='padding-left: 2em; padding-right: 2em;' class='ui container'>
<div id="divdetails" class="ui container">
<div class="ui stackable grid">
<div class="three wide column">
<img class="left floated ui image" style="max-height:250px;" src="{{base_url}}image_proxy_movies{{details[2]}}">
</div>
<div class="thirteen wide column">
<div class="ui stackable grid">
<div class="ui row">
<div class="twelve wide left aligned column">
<h2>
%if details[13] == 'True':
<span data-tooltip="Movie monitored in Radarr"><i class="bookmark icon"></i></span>
%else:
<span data-tooltip="Movie unmonitored in Radarr"><i class="bookmark outline icon"></i></span>
%end
{{details[0]}}
</h2>
</div>
<div class="four wide right aligned column">
<div class="ui right floated basic icon buttons">
<button id="scan_disk" class="ui button" data-tooltip="Scan disk for subtitles" data-inverted=""><i class="ui inverted large compact refresh icon"></i></button>
<button id="search_missing_subtitles_movie" class="ui button" data-tooltip="Download missing subtitles" data-inverted=""><i class="ui inverted huge compact search icon"></i></button>
@ -109,28 +128,29 @@
%end
<button id="config" class="ui button" data-tooltip="Edit movie" data-inverted="" data-tmdbid="{{details[5]}}" data-title="{{details[0]}}" data-poster="{{details[2]}}" data-audio="{{details[6]}}" data-languages="{{!subs_languages_list}}" data-hearing-impaired="{{details[4]}}"><i class="ui inverted large compact configure icon"></i></button>
</div>
<h2>
%if details[13] == 'True':
<span data-tooltip="Movie monitored in Radarr"><i class="bookmark icon"></i></span>
%else:
<span data-tooltip="Movie unmonitored in Radarr"><i class="bookmark outline icon"></i></span>
%end
{{details[0]}}
</h2>
<p>{{details[1]}}</p>
<p style='margin-top: 3em;'>
</div>
</div>
<div class="ui row">
{{details[1]}}
</div>
<div class="ui row">
<div class="ui tiny inverted label" style='background-color: #777777;'>{{details[6]}}</div>
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{details[8]}}</div>
% if details[12] is not None:
<div class="ui tiny inverted label" style='background-color: orange;'>{{details[12]}}</div>
% end
</p>
<p style='margin-top: 2em;'>
</div>
<div class="ui row">
%for language in subs_languages_list:
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{language}}</div>
%end
</p>
<div style='clear:both;'></div>
</div>
</div>
</div>
</div>
<div id="fondblanc" class="ui container">
<table class="ui very basic single line selectable table">

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<link rel="stylesheet" href="{{base_url}}static/semantic/semantic.min.css">
@ -59,7 +59,7 @@
<div class="ui basic buttons">
<button id="serieseditor" class="ui button"><i class="configure icon"></i>Series Editor</button>
</div>
<table id="tableseries" class="ui very basic selectable table">
<table id="tableseries" class="ui very basic selectable stackable table">
<thead>
<tr>
<th>Name</th>
@ -75,7 +75,7 @@
%import ast
%import os
%for row in rows:
<tr class="selectable">
<tr>
<td><a href="{{base_url}}episodes/{{row[5]}}">{{row[1]}}</a></td>
<td>
%if os.path.isdir(row[2]):

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>

Loading…
Cancel
Save