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"> <html lang="en">
<head> <head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script> <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/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script> <script src="{{base_url}}static/jquery/tablesort.js"></script>
@ -100,34 +100,54 @@
<div style='padding-left: 2em; padding-right: 2em;' class='ui container'> <div style='padding-left: 2em; padding-right: 2em;' class='ui container'>
<div id="divdetails" 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 stackable grid">
<div class="ui right floated basic icon buttons"> <div class="three wide column">
<button id="scan_disk" class="ui button" data-tooltip="Scan disk for subtitles"><i class="ui inverted large compact refresh icon"></i></button> <img class="ui image" style="max-height:250px;" src="{{base_url}}image_proxy{{details[2]}}">
<button id="search_missing_subtitles" class="ui button" data-tooltip="Download missing subtitles"><i class="ui inverted huge compact search icon"></i></button> </div>
<%
subs_languages = ast.literal_eval(str(details[7])) <div class="thirteen wide column">
subs_languages_list = [] <div class="ui stackable grid">
if subs_languages is not None: <div class="ui row">
for subs_language in subs_languages: <div class="twelve wide left aligned column">
subs_languages_list.append(subs_language) <h2>{{details[0]}}</h2>
end </div>
end
%> <div class="four wide right aligned column">
<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 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>
<%
subs_languages = ast.literal_eval(str(details[7]))
subs_languages_list = []
if subs_languages is not None:
for subs_language in subs_languages:
subs_languages_list.append(subs_language)
end
end
%>
<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>
</div>
</div>
<div class="ui row">
<p>{{details[1]}}</p>
</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>
</div>
<div class="ui row">
%for language in subs_languages_list:
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{language}}</div>
%end
</div>
</div>
</div>
</div> </div>
<h2>{{details[0]}}</h2>
<p>{{details[1]}}</p>
<p style='margin-top: 3em;'>
<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;'>
%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>
%if len(seasons) == 0: %if len(seasons) == 0:

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!DOCTYPE html>
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script> <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/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script> <script src="{{base_url}}static/jquery/tablesort.js"></script>
@ -91,46 +91,66 @@
<div style='padding-left: 2em; padding-right: 2em;' class='ui container'> <div style='padding-left: 2em; padding-right: 2em;' class='ui container'>
<div id="divdetails" class="ui container"> <div id="divdetails" class="ui container">
<img class="left floated ui image" style="max-height:250px;" src="{{base_url}}image_proxy_movies{{details[2]}}"> <div class="ui stackable grid">
<div class="ui right floated basic icon buttons"> <div class="three wide column">
<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> <img class="left floated ui image" style="max-height:250px;" src="{{base_url}}image_proxy_movies{{details[2]}}">
<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> </div>
<%
subs_languages = ast.literal_eval(str(details[7])) <div class="thirteen wide column">
subs_languages_list = [] <div class="ui stackable grid">
if subs_languages is not None: <div class="ui row">
for subs_language in subs_languages: <div class="twelve wide left aligned column">
subs_languages_list.append(subs_language) <h2>
end %if details[13] == 'True':
end <span data-tooltip="Movie monitored in Radarr"><i class="bookmark icon"></i></span>
%> %else:
%if subs_languages is not None: <span data-tooltip="Movie unmonitored in Radarr"><i class="bookmark outline icon"></i></span>
<button class="manual_search ui button" data-tooltip="Manually search for subtitles" data-inverted="" data-moviePath="{{details[8]}}" data-scenename="{{details[12]}}" data-language="{{subs_languages_list}}" data-hi="{{details[4]}}" data-movie_title="{{details[0]}}" data-radarrId="{{details[10]}}"><i class="ui inverted large compact user icon"></i></button> %end
%end {{details[0]}}
<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> </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>
<%
subs_languages = ast.literal_eval(str(details[7]))
subs_languages_list = []
if subs_languages is not None:
for subs_language in subs_languages:
subs_languages_list.append(subs_language)
end
end
%>
%if subs_languages is not None:
<button class="manual_search ui button" data-tooltip="Manually search for subtitles" data-inverted="" data-moviePath="{{details[8]}}" data-scenename="{{details[12]}}" data-language="{{subs_languages_list}}" data-hi="{{details[4]}}" data-movie_title="{{details[0]}}" data-radarrId="{{details[10]}}"><i class="ui inverted large compact user icon"></i></button>
%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>
</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
</div>
<div class="ui row">
%for language in subs_languages_list:
<div class="ui tiny inverted label" style='background-color: #35c5f4;'>{{language}}</div>
%end
</div>
</div>
</div>
</div> </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 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;'>
%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 id="fondblanc" class="ui container"> <div id="fondblanc" class="ui container">
<table class="ui very basic single line selectable table"> <table class="ui very basic single line selectable table">

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save