Commit 48d37847 authored by Tankypon's avatar Tankypon

Second iteration of new UI

parent 71c35e40
......@@ -57,14 +57,14 @@ def search2html(keywords, extrawords=' ', searchengine='btdigg', page=0, isserie
# If there is results
if s:
html = '<div class="scrollable">'
html = '<div>'
html += '<table class="sortable, float-center">\n'
html += '<thead>\n'
html += '<tr>\n'
html += '<th class="text-left">{}</th>\n'.format(_('Name'))
html += '<th class="text-center">{}</th>\n'.format(_('Size'))
html += '<th class="text-center">{}</th>\n'.format(_('Leechs'))
html += '<th class="text-center">{}</th>\n'.format(_('Seeds'))
html += '<th>{}</th>\n'.format(_('Size'))
html += '<th>{}</th>\n'.format(_('Leechs'))
html += '<th>{}</th>\n'.format(_('Seeds'))
html += '</tr>\n'
html += '</thead>\n'
......@@ -90,9 +90,9 @@ def search2html(keywords, extrawords=' ', searchengine='btdigg', page=0, isserie
color = 'blue'
elif seeds > 100:
color = 'green'
html += '<td class="text-center" style="background:{};"><a href="{}">{}</a></td>'.format(
color, link, result['seeds'])
html += '</tr>'
html += '</tbody>'
html += '</table>'
......@@ -101,7 +101,7 @@ def search2html(keywords, extrawords=' ', searchengine='btdigg', page=0, isserie
html += '<a href="/moreresults/{}/{}/{}/{}/{}">{}</a>'.format(
keywords, int(page) + 1, searchengine, extrawords, isserie, _('More results'))
else: # If there is no result
html = '<div class="text-center"><br>{}</div>'.format(
html = '<p><br>{}</p>'.format(
_('There is no result for your search, try something else'))
return html
......@@ -139,11 +139,11 @@ def getseriestuff(keywords, year, extrawords='', user='', searchengine="torrentz
eplist = get_episode_list(keywords, year)
serie_stuff = '<div class="scrollable">'
serie_stuff += '<table class="sortable, float-center">'
serie_stuff += '<th class="text-center">{}</th>'.format(_('Season'))
serie_stuff += '<th class="text-center">{}</th>'.format(_('Episode'))
serie_stuff += '<th>{}</th>'.format(_('Season'))
serie_stuff += '<th>{}</th>'.format(_('Episode'))
serie_stuff += '<th>{}</th>'.format(_('Title'))
serie_stuff += '<th class="text-right">{}</th>'.format(_('Release date'))
serie_stuff += '<th class="text-center">{}</th>'.format(_('Seen'))
serie_stuff += '<th>{}</th>'.format(_('Seen'))
for season in eplist:
for e in season['Episodes']:
episode = 'S{0:02d}E{1:02d}'.format(int(season['Season']), int(e['Episode']))
......@@ -207,14 +207,15 @@ def omdb2template(keywords, year, isserie=0):
while len(k.split(' ')) > 1:
k = k.rsplit(' ', 1)[0]
lop.append(k)
k = keywords
while len(k.split(' ')) > 1:
k = k.split(' ', 1)[-1]
lop.append(k)
# lop = set(listofpossibles)[0] # remove duplicates
for i in lop:
html += ' - '
html += '<a href="/whatsthat/{0}/{1}/{2}/">{0}</a>'.format(i, year, isserie)
html += '<a href="/whatsthat/{0}/{1}/{2}">{0}</a>'.format(i, year, isserie)
html += ' - '
html += "</p>"
......@@ -313,13 +314,13 @@ class DontPanic:
isserie = ele["isserie"]
poster = ele["poster"]
posterhtml = '<div class="show-image">\n'
posterhtml += '<img src="{}" />\n'.format(poster)
posterhtml += '<a class="delete" href="/_removeinrecent/{}/">✗</a>\n'.format(title)
posterhtml += '</div>\n'
posterhtml = '<img src="{}" title="{} {}" data-toggle="tooltip" ' \
'data-placement="bottom">'.format(poster, title, year)
posterhtml = '<a href="/whatsthat/{}/{}/{}">{}</a>'.format(title, year, isserie, posterhtml)
posterhtml += '<a class="delete" href="/_removeinrecent/{}/">✗</a>'.format(title)
posterhtml = '<div class="show-image">{}</div>'.format(posterhtml)
html += '<li><a href="/whatsthat/{1}/{2}/{3}/">{0}<p>{1} <br> {2}</p></a></li>'.format(
posterhtml, title, year, isserie)
html += '<li>{}</li>'.format(posterhtml)
html = '<ul class="ca-menu">{}</ul>'.format(html)
......@@ -418,7 +419,7 @@ class DontPanic:
else:
html = _("An error occurred while deleting your account. Please contact the administrator")
html = "<div class='text-center'>{}</div>".format(html)
html = "<div>{}</div>".format(html)
tplvars = {'htmlstuff': html, 'title': _("Unsubscribe")}
tplvars.update(tpl_msg)
......@@ -459,7 +460,7 @@ class DontPanic:
htmlresults = search2html(keywords, extrawords=extrawords, searchengine=searchengine, isserie=isserie)
except Exception as e:
logger.info('Error while searching : {}... '.format(e))
htmlresults = '<div class="text-center"><br>{}</div>'.format(
htmlresults = '<div><br>{}</div>'.format(
_("Error while searching. Try another engine"))
if nocatalog != "1":
......@@ -501,7 +502,6 @@ class DontPanic:
tplvars.update(tpl_msg)
return template('results', tplvars)
@self.app.route('/whatsthat/<title>/<year>/<isserie>/')
@self.app.route('/whatsthat/<title>/<year>/<isserie>')
def whatsthat(title, year, isserie):
title_simplify = simplifyname(title)
......@@ -626,7 +626,7 @@ class DontPanic:
session.remove_torrent(h)
self.dldic.pop(i)
del session
html = "<div class='text-center'>{}</div>".format(_("Torrent deleted"))
html = "<div>{}</div>".format(_("Torrent deleted"))
tplvars = {'htmlstuff': html, 'title': "Deleted"}
tplvars.update(tpl_msg)
......@@ -649,7 +649,7 @@ class DontPanic:
links += '<a href="/video/{}">{}</a>\n'.format(filename, _('Download the video'))
links += '</div>\n'
html = "<div class='text-center'>{} {}</div>".format(video, links)
html = "<div>{} {}</div>".format(video, links)
tplvars = {'title': os.path.basename(filename), 'htmlstuff': html}
tplvars.update(tpl_msg)
......@@ -693,7 +693,7 @@ class DontPanic:
else:
subdb = '<p>{}</p>'.format(_('No subtitle available on subdb'))
html = "<div class='text-center'>{} {}</div>".format(subdb, opensubtitles)
html = "<div>{} {}</div>".format(subdb, opensubtitles)
tplvars = {'title': title, 'htmlstuff': html}
tplvars.update(tpl_msg)
......@@ -706,7 +706,7 @@ class DontPanic:
msg2 = _("Click here if you want to download them on you computer")
msg3 = _("This page will close in 5.42 seconds")
msg4 = _("You may now close this page")
html = """<div class="text-center">
html = """<div>
<p>{}<br><a href="/video/{}">{}</a></p>
<p>{}</p>
</div>
......@@ -719,7 +719,7 @@ class DontPanic:
</noscript>
""".format(msg1, filename, msg2, msg3, msg4)
else:
html = "<div class='text-center'>{}</div>".format(_("Failed to download subtitles"))
html = "<div>{}</div>".format(_("Failed to download subtitles"))
tplvars = {'title': _("Subtitles"), 'htmlstuff': html}
tplvars.update(tpl_msg)
......@@ -843,18 +843,16 @@ class DontPanic:
html = str()
for result in results:
html += '<li><a href="/whatsthat/{1}/{2}/{3}/"><img src="{0}"><p>{1} <br> {2}</p></a></li>'.format(
result["img"], result["title"], result["year"], i)
html += '<li><a href="/whatsthat/{1}/{2}/{3}"><img src="{0}" data-toggle="tooltip" ' \
'data-placement="bottom" title="{1} {2}"></a></li>'.format(result["img"], result["title"],
result["year"], i)
html = '<ul class="ca-menu">{}</ul>'.format(html)
tplvars = {'url': url, 'title': title, 'htmlstuff': html}
tplvars.update(tpl_msg)
if i == 1:
return template('bestseries', tplvars)
else:
return template('bestmovies', tplvars)
return template('best', tplvars)
def read_config(self):
conf = load_config()
......
This diff is collapsed.
......@@ -88,7 +88,7 @@
.column-9,
.column-10,
.column-11,
.column-12 {
.column-12 {
float: none;
width: auto;
}
......@@ -96,54 +96,4 @@
.column + .column {
margin-left: 0;
}
}
/*------------------------------*\
Styling
\*------------------------------*/
body {
padding: 20px;
}
.column {
background: #eee;
border: 1px solid #ccc;
border-radius: 4px;
color: #777;
padding: 5px;
min-height: 30px;
text-align: center;
}
.row {
margin-bottom: 10px;
}
.row:last-child {
margin-bottom: 0;
}
.column .column {
color: #eee;
background: #333;
border-color: #000;
}
.p {
font-size: 14px;
text-align: center;
padding-top: 100px;
}
@media only screen and (max-width: 550px) {
.row {
margin-bottom: 0;
}
.column {
margin-bottom: 10px;
}
.row:last-child .column:last-child {
margin-bottom: 0;
}
}
\ No newline at end of file
This diff is collapsed.
* { margin: 0; padding: 0; }
html { height: 100%; }
html { min-height: 100%; }
/* Layout */
body.spring {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?spring');
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
body.summer {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?summer');
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
body.autumn {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?autumn');
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
body.winter {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?winter');
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
body.december {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://source.unsplash.com/daily?december');
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
body {
......@@ -38,36 +43,27 @@ body {
text-align: center;
transition: all 0.5s ease;
width: 85%;
padding: 15px;
margin: 0 auto;
color: #eeeeee;
}
header {
border-bottom: 1px solid #ccc;
top: 10px;
z-index: 1;
border-bottom: 1px solid #cccccc;
}
footer {
border-top: 1px solid #ccc;
border-top: 1px solid #cccccc;
font-size: 13px;
bottom: 2px;
}
header, footer, main {
position: fixed;
left: 50%;
margin-left: -42.5%;
bottom: 2px;
z-index: 1;
width: inherit;
height: 1.1em;
padding: .2em;
}
main {
margin-top: 5%;
height: 80%;
overflow-y: auto;
}
main.towel { margin-top: 3.5%; }
main.towel { margin-top: 10px; }
.goodbye {
position: absolute;
......@@ -76,16 +72,14 @@ main.towel { margin-top: 3.5%; }
transform: translate(-50%, -50%);
}
p, em, li, div, span { color: #eeeeee; }
ul li {
display:inline;
list-style:none;
padding-left:20px;
display: inline;
list-style: none;
padding-left: 20px;
}
/* Typography */
a { color: #eee; text-decoration: none; }
a { color: #eeeeee; text-decoration: none; }
a:hover, a:focus { color: #41B1FF; text-decoration: none; }
a:active { color: #105CB6; }
......@@ -113,10 +107,10 @@ span.text-left { margin-left: 5px; }
.big { font-size: 1.5em;}
/* Misc */
hr { background-color: #ccc; border: 0; color: #ccc; height: 1px; margin-bottom: 20px; }
hr { background-color: #cccccc; border: 0; color: #cccccc; height: 1px; margin-bottom: 20px; }
/* List */
ul { margin-bottom: 20px; list-style-type:none; margin-left:30px; }
ul { margin-bottom: 20px; list-style-type: none; margin-left: 30px; }
ol { margin-bottom: 20px; list-style-position: inside; }
ul ul, ol ol { margin-bottom:0; }
......@@ -130,21 +124,23 @@ ul ul, ol ol { margin-bottom:0; }
select { padding:2px; min-width: 30px; }
/* Table */
sortable { margin-bottom: 20px; width:100%; }
table {width: 100%; margin-bottom: 20px;}
th { font-weight: bold; }
td { text-align: left; }
tr { width: 100%; }
td { text-align: left; padding: 0 10px 0 10px;}
tfoot { font-style: italic; }
tr:hover { background: #ccc; text-shadow:none}
tr:hover a { color: #111; }
tr:hover { background: #cccccc; text-shadow: none}
tr:hover a { color: #111111; }
td a { display: block; }
/* to show posters */
.ca-menu { padding:0; margin:0; }
.ca-menu { padding: 0; margin: 0; }
.ca-menu li{
display: inline-block;
width: 200px;
height: 150px;
margin: 20px auto;
}
.ca-menu li img{
......@@ -155,26 +151,20 @@ td a { display: block; }
.progressbar {
width:100%;
max-width:100%;
/*
background: linear-gradient(to right, #ccc, #ccc );
background-repeat : no-repeat;
margin-bottom:20px;
border:1px solid #ccc;
*/
}
.progressbar progress {
width:100%;
height:42px;
width: 100%;
height: 42px;
text-align: center;
margin-bottom:20px;
background: linear-gradient(rgba(9, 9, 9, 0.4), rgba(9, 9, 9, 0.4)));
border:1px solid #ccc;
margin-bottom: 20px;
background: linear-gradient(rgba(9, 9, 9, 0.4), rgba(9, 9, 9, 0.4));
border: 1px solid #cccccc;
}
div.show-image {
position: relative;
margin: 0 25px;
margin: 10px auto;
}
div.show-image:hover img {
......@@ -186,10 +176,20 @@ div.show-image:hover a.delete {
}
div.show-image a.delete {
position:absolute;
display:none;
top:0;
right:0;
position: absolute;
display: none;
top: 0;
right: 0;
margin-right: 10px;
}
.scrollable {
display: block;
width: 100%;
height: 342px;
min-height: 100%;
overflow: auto;
margin: 10px;
}
aside.bottom {
......@@ -198,4 +198,10 @@ aside.bottom {
margin: 0 auto;
}
.plot {
margin: 10px;
padding: 10px;
border: 1px #ccc dotted;
}
nav { margin: 0 5px; }
\ No newline at end of file
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
filter: alpha(opacity=0);
opacity: 0;
line-break: auto;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
\ No newline at end of file
Branche new_ui:
---------------
- Rapprocher la croix de l'affiche
- Refaire fonctioner les listes
- Mettre le main en dessous de l'header, actuellement il est sur l'header
- Voir pourquoi les colums ne fonctionnent plus dans la page whatsthat
Bugs:
-----
- Lorsqu'un sous-titre a été téléchargé avec succès, la page ne se ferme pas automatiquement > Le javascript est-il activé?
......
......@@ -3,22 +3,15 @@
%include('head.tpl')
<body>
<header>
<h1><a href={{url}}>{{title}}</a></h1>
<h1>{{title}}</h1>
<nav>
%include('backtomain.tpl')
<div class="float-right sourcelist">
{{tpl_provided}} :
<span class="float-right">
{{tpl_provided}} :
<!--
%if source == 0:
<span class="big">Allocine</span> - <a href="/_bestvideos/0/1">IMDB</a>
%else:
<span class="big">IMDB</span> - <a href="/_bestvideos/0/0">Allocine</a>
%end
-->
<span class="big">IMDB</span>
</div>
<span class="big"><a href="{{url}}">IMDB</a></span>
</span>
</nav>
</header>
......@@ -26,6 +19,11 @@
% include('footer.tpl')
% include('scripts.tpl')
</body>
</html>
<script>
$(function () {
$('[data-toggle=tooltip]').tooltip();
});
</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
%include('head.tpl')
<body>
<header>
<h1><a href={{url}}>{{title}}</a></h1>
<nav>
%include('backtomain.tpl')
<div class="float-right sourcelist">
{{tpl_provided}} :
<!--
%if source == 0:
<span class="big">Allocine</span> - <a href="/_bestvideos/1/1">IMDB</a>
%else:
<span class="big">IMDB</span> - <a href="/_bestvideos/1/0">Allocine</a>
%end
-->
<span class="big">IMDB</span>
</div>
</nav>
</header>
<main> {{ !htmlstuff }} </main>
% include('footer.tpl')
% include('scripts.tpl')
</body>
</html>
......@@ -8,7 +8,8 @@
<link rel="stylesheet" type="text/css" href="/static/style.css">
<link rel="stylesheet" type="text/css" href="/static/grid.css">
<link rel="stylesheet" type="text/css" href="/static/tooltip.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery.slimscroll.min.js"></script>
<script src="/static/jquery-2.2.0.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
</head>
<!doctype html>
<html>
%include('head.tpl')
<script src="/static/sorttable.js"></script>
<script type="text/javascript" src="/static/jquery.slimscroll.min.js"></script>
<script type="text/javascript">
$(function(){
$('#scroll').slimScroll({
height: '347px'
});
});
</script>
<body>
<header>
<h1>{{tpl_schres}}</h1>
......@@ -25,35 +35,26 @@
<input value="{{tpl_search}}" type="submit" />
</form>
{{ !sch_res }}
<div id="scroll">
{{ !sch_res }}
</div>
%if (moviessch != '' or seriessch != '') and nocatalog != '1':
<div>
<h2>{{tpl_see_also}}</h2>
<div class="text-center">
%if moviessch != '':
<div>
<h3>{{tpl_movies}}</h3>
{{ !moviessch }}
</div>
%end
%if seriessch != '':
<div>
<h3 >{{tpl_series}}</h3>
{{ !seriessch }}
</div>
%end
</div>
</div>
<h2>{{tpl_see_also}}</h2>
%if moviessch != '':
<h3>{{tpl_movies}}</h3>
{{ !moviessch }}
%end
%if seriessch != '':
<h3>{{tpl_series}}</h3>
{{ !seriessch }}
%end
%end
</main>
% include('footer.tpl')
% include('scripts.tpl')
<script src="/static/sorttable.js"></script>
</body>
</html>
......
<script type="text/javascript">
<script>
var month = new Date().getMonth();
if (month >= 0 && month < 3) {
......
......@@ -8,7 +8,7 @@
<main class="towel">
<form class="searchbar" action="/search" method="get">
<input name="keywords" type="text" placeholder="{{tpl_movie_or_serie}}" autofocus