Commit a63a1165 authored by Tankypon's avatar Tankypon

Third iteration

parent 48d37847
......@@ -2,98 +2,44 @@
Grid System
\*------------------------------*/
.row,
.column {
box-sizing: border-box;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.column {
.row {
width: 100%;
margin: 0 auto 20px auto;
display: inline-block;
position: relative;
float: left;
display: block;
}
.column + .column {
margin-left: 1.6%;
}
.column-1 {
width: 6.86666666667%;
}
.column-2 {
width: 15.3333333333%;
}
.column-3 {
width: 23.8%;
}
.column-4 {
width: 32.2666666667%;
}
.column-5 {
width: 40.7333333333%;
}
.column-6 {
width: 49.2%;
}
.column-7 {
width: 57.6666666667%;
}
.column-8 {
width: 66.1333333333%;
}
.column-9 {
width: 74.6%;
}
.column-10 {
width: 83.0666666667%;
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
margin-right: 2%;
}
.column-11 {
width: 91.5333333333%;
.row .col-1:last-child, .row .col-2:last-child, .row .col-3:last-child,
.row .col-4:last-child, .row .col-5:last-child, .row .col-6:last-child,
.row .col-7:last-child, .row .col-8:last-child, .row .col-9:last-child,
.row .col-10:last-child, .row .col-11:last-child, .row .col-12:last-child {
margin-right: 0;
}
.column-12 {
width: 100%;
margin-left: 0;
}
@media only screen and (max-width: 550px) {
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
float: none;
width: auto;
}
.column + .column {
margin-left: 0;
}
}
\ No newline at end of file
.row:after,
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.col-1 { width: 6%; }
.col-2 { width: 15%; }
.col-3 { width: 23.5%; }
.col-4 { width: 32%; }
.col-5 { width: 40%; }
.col-6 { width: 49%; }
.col-7 { width: 56.5%; }
.col-8 { width: 66%; }
.col-9 { width: 74%; }
.col-10 { width: 82.5%; }
.col-11 { width: 91%; }
.col-12 { width: 100%; }
......@@ -63,7 +63,9 @@ footer {
padding: .2em;
}
main.towel { margin-top: 10px; }
main {
margin-top: 10px;
}
.goodbye {
position: absolute;
......@@ -73,9 +75,9 @@ main.towel { margin-top: 10px; }
}
ul li {
display: inline;
list-style: none;
padding-left: 20px;
margin-bottom: 0.2em;
}
/* Typography */
......@@ -83,12 +85,12 @@ a { color: #eeeeee; text-decoration: none; }
a:hover, a:focus { color: #41B1FF; text-decoration: none; }
a:active { color: #105CB6; }
h1 { font-size: 30px; line-height: 20px; margin-bottom: 12px; }
h2 { font-size: 24px; line-height: 20px; margin-bottom: 12px; }
h3 { font-size: 20px; line-height: 20px; margin-bottom: 10px; }
h4 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
h5 { font-size: 14px; line-height: 20px; margin-bottom: 5px; }
h6 { font-size: 12px; line-height: 20px; margin-bottom: 12px; }
h1 { font-size: 30px; line-height: 20px; margin-bottom: 10px; }
h2 { font-size: 24px; line-height: 20px; margin-bottom: 8px; }
h3 { font-size: 20px; line-height: 20px; margin-bottom: 8px; }
h4 { font-size: 16px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }
h1,h2,h3,h4,h5,h6 { color:#eee; }
.float-left { float: left; }
......@@ -180,7 +182,7 @@ div.show-image a.delete {
display: none;
top: 0;
right: 0;
margin-right: 10px;
margin-right: 25px;
}
.scrollable {
......@@ -204,4 +206,4 @@ aside.bottom {
border: 1px #ccc dotted;
}
nav { margin: 0 5px; }
\ No newline at end of file
nav { margin: auto 5px; }
\ 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é?
- Un message d'erreur sur une exception socket est présent au premier lancement
- Navigation bar is on two lines in the perso page
À faire:
--------
......
<div class="float-left"><a href="/" title=" {{tpl_back_to_main}} ">← {{tpl_back_to_main}}</a></div>
<div class="text-left"><a href="/" title=" {{tpl_back_to_main}} ">← {{tpl_back_to_main}}</a></div>
......@@ -17,15 +17,15 @@
<li> {{ntor}} torrent(s): <a href="/cleantorrent">{{tpl_remove_all_t}}</a></li>
<form action="/_applyconfig" method="post">
<li> {{tpl_show_play_link}}
<input name="startperc" type="text" style="width:2em;" value="{{startperc}}"/> %
<input name="startperc" type="text" style="width:2em;" value="{{startperc}}"> %
</li>
<li> {{tpl_upload_limit}}
<input name="uplimit" type="text" value="{{uplimit}}"/>
<input name="uplimit" type="text" value="{{uplimit}}">
</li>
<li> {{tpl_download_limit}}
<input name="downlimit" type="text" value="{{downlimit}}"/>
<input name="downlimit" type="text" value="{{downlimit}}">
</li>
<input value="{{tpl_apply}}" type="submit" />
<input value="{{tpl_apply}}" type="submit">
</form>
</ul>
</main>
......
<footer>
<p class="float-right">
<a href="https://unsplash.com/">{{tpl_footer_bg}}</a> -
<a href="http://yeuxdelibad.net/Programmation/dontpanic.html">Don't Panic</a> -
<a href="https://dontpanic.yeuxdelibad.net">Don't Panic</a> -
<a href="https://flattr.com/submit/auto?user_id=Thuban&amp;url=http%3A%2F%2Fyeuxdelibad.net%2FProgrammation%2fdontpanic.html&amp;title=Dontpanic" target="_blank">
<img style="vertical-align:middle; height:1em;" src="https://button.flattr.com/flattr-badge-large.png" alt="Flattr this" title="Flattr this" /></a>
</p>
......
......@@ -6,10 +6,8 @@
</p>
<p class="float-right">
<a href="https://unsplash.com/">{{tpl_footer_bg}}</a> -
<a href="http://yeuxdelibad.net/Programmation/dontpanic.html">Don't Panic</a> -
<a href="https://dontpanic.yeuxdelibad.net">Don't Panic</a> -
<a href="https://flattr.com/submit/auto?user_id=Thuban&amp;url=http%3A%2F%2Fyeuxdelibad.net%2FProgrammation%2fdontpanic.html&amp;title=Dontpanic" target="_blank">
<img style="vertical-align:middle; height:1em;" src="https://button.flattr.com/flattr-badge-large.png" alt="Flattr this" title="Flattr this" /></a>
</p>
</footer>
......@@ -20,7 +20,7 @@
<h2>{{tpl_watchlist}}</h2>
<hr>
%if len(movies) == 0 and len(series) == 0:
<p>{{tpl_watch_nothing}}</p>
<p class="text-center">{{tpl_watch_nothing}}</p>
%else:
%if len(movies) > 0:
<h3>{{tpl_movies}}</h3>
......
<!doctype html>
<html>
%include('head.tpl')
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
function update_values() {
$.getJSON("/_getinfos/{{movie_name}}/{{index}}",
function(data) {
$("#status").html(data.status);
$("#playlink").html(data.playlink);
$("#subtitles").html(data.subtitles);
$("#stop").html(data.stop);
});
}
setInterval("update_values();", 1000);
</script>
<body>
<header>
<h1>{{movie_name}}</h1>
......@@ -38,6 +22,19 @@
% include('footer.tpl')
% include('scripts.tpl')
<script>
function update_values() {
$.getJSON("/_getinfos/{{movie_name}}/{{index}}",
function(data) {
$("#status").html(data.status);
$("#playlink").html(data.playlink);
$("#subtitles").html(data.subtitles);
$("#stop").html(data.stop);
});
}
setInterval("update_values();", 1000);
</script>
</body>
</html>
......
......@@ -6,7 +6,7 @@
<h1>{{welcomemsg}}</h1>
</header>
<main class="towel">
<main>
<form class="searchbar" action="/search" method="get">
<input name="keywords" type="text" placeholder="{{tpl_movie_or_serie}}" autofocus>
<select name="searchengine" size="1">
......
......@@ -3,13 +3,14 @@
%include('head.tpl')
<body>
<header>
<h1>{{title}}</h1>
<div>
<h1>{{title}}</h1>
<h4>{{ year }}</h4>
</div>
<nav>
%include('backtomain.tpl')
</nav>
<h4 class="float-center">{{ year }}</h4>
</header>
<main class="text-left">
......@@ -18,24 +19,23 @@
%end
<div class="row">
<div class="column-6">
<div class="col-5">
<img src="{{ poster }}">
</div>
<div class="column-6">
<div class="col-7">
<p>{{tpl_director}} {{director}}</p>
<p>{{tpl_writer}} {{writer}}</p>
<p>{{tpl_actors}} {{actors}}</p>
<p>{{ rating }} / 10</p>
<div class="plot">
<p>{{plot}}
<p class="text-justify">{{plot}}</p>
<div class="text-right">
<a href="https://translate.google.com/#en/{{lang}}/{{plot}}" target="_blank">
{{tpl_google_translate}}
</a>
<a href="https://translate.google.com/#en/{{lang}}/{{plot}}" target="_blank">
{{tpl_google_translate}}
</a>
</div>
</p>
</div>
%if isserie == "1" :
......@@ -46,21 +46,23 @@
<input name="nocatalog" type="hidden" value="1">
%end
<ul>
<li>{{tpl_extrawords}}
<input name="extrawords" type="text" placeholder="vostfr">
</li>
<li>{{tpl_searchon}}
<select name="searchengine" size="1">
<option> btdigg
<option> kickasstorrents
<option> piratebay
<option> torrentproject
<option> torrentz
<option> {{tpl_all}}
</select>
</li>
<li>{{tpl_extrawords}}
<input name="extrawords" type="text" placeholder="vostfr">
</li>
<li>{{tpl_searchon}}
<select name="searchengine" size="1">
<option> btdigg
<option> kickasstorrents
<option> piratebay
<option> torrentproject
<option> torrentz
<option> {{tpl_all}}
</select>
</li>
</ul>
<input value="{{tpl_watchnow}}" type="submit" class="big">
<div class="text-center">
<input value="{{tpl_watchnow}}" type="submit" class="big">
</div>
</form>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment