mirror of https://github.com/reiseburo/offtopic
Add some l337 UI for creating a multipass UI on the topics watch page
This makes it much easier to watch multiple topics, hoorah Fixes #10
This commit is contained in:
parent
87232daa60
commit
f5b619f5f2
|
@ -8,11 +8,8 @@
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<title>Offtopic!</title>
|
<title>Offtopic!</title>
|
||||||
<style type="text/css">
|
|
||||||
body {
|
<link rel="stylesheet" href="/css/offtopic.css">
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
{{> bootstrap}}
|
{{> bootstrap}}
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/js/ws.js?1"></script>
|
<script src="/js/ws.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
watchTopic("{{name}}");
|
watchTopic("{{name}}");
|
||||||
|
|
||||||
|
|
|
@ -1,25 +1,47 @@
|
||||||
{{> header}}
|
{{> header}}
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div>
|
|
||||||
|
<div class="multipass-panel panel panel-warning" style="display:none;">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title">Multipass</h3>
|
||||||
|
</div>
|
||||||
|
<div class="multipass-body panel-body">
|
||||||
|
<div class="multipass-actions">
|
||||||
|
<button class="go-multipass btn btn-default">
|
||||||
|
Use Multipass!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
{{#each topics}}
|
{{#each topics}}
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
|
<button data-topic="{{this}}" class="add-multipass btn btn-xs btn-default">
|
||||||
|
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true">
|
||||||
|
</span>
|
||||||
|
multipass
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<form style="display: inline;" action="/topics/{{this}}/watch">
|
||||||
|
<button type="submit" class="btn btn-xs btn-default">
|
||||||
|
<span class="glyphicon glyphicon-eye-open" aria-hidden="true">
|
||||||
|
</span>
|
||||||
|
watch
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
<strong>
|
<strong>
|
||||||
<a href="/topics/{{this}}">
|
<a href="/topics/{{this}}">
|
||||||
{{this}}
|
{{this}}
|
||||||
</a>
|
</a>
|
||||||
</strong>
|
</strong>
|
||||||
|
|
||||||
<form style="display: inline;" action="/topics/{{this}}/watch">
|
|
||||||
<button type="submit" class="btn btn-xs btn-default">
|
|
||||||
watch
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</li>
|
</li>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="/js/multipass.js"></script>
|
||||||
{{> footer}}
|
{{> footer}}
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
body {
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipass-body {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipass-actions {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multipass-label {
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
/* Bind all our multipass buttons */
|
||||||
|
$('.add-multipass').click(function(e) {
|
||||||
|
|
||||||
|
$('.multipass-panel').show();
|
||||||
|
|
||||||
|
$('.multipass-body').prepend([
|
||||||
|
'<span class="multipass-label label label-warning">',
|
||||||
|
$(e.target).attr('data-topic'),
|
||||||
|
'</span>'
|
||||||
|
].join("\n"));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$('.go-multipass').click(function(e) {
|
||||||
|
var topics = [];
|
||||||
|
|
||||||
|
$('.multipass-label').each(function(idx, el) {
|
||||||
|
/* Add the topic stripping all the whitespace from the text node jQuery
|
||||||
|
* gives us back
|
||||||
|
*/
|
||||||
|
topics.push($(el).text().replace(/\s/g, ''));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.location.href = "/topics/" + topics.join('+') + "/watch";
|
||||||
|
});
|
Loading…
Reference in New Issue