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="">
|
||||
|
||||
<title>Offtopic!</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/css/offtopic.css">
|
||||
|
||||
{{> bootstrap}}
|
||||
</head>
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="/js/ws.js?1"></script>
|
||||
<script src="/js/ws.js"></script>
|
||||
<script type="text/javascript">
|
||||
watchTopic("{{name}}");
|
||||
|
||||
|
|
|
@ -1,25 +1,47 @@
|
|||
{{> header}}
|
||||
|
||||
<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">
|
||||
{{#each topics}}
|
||||
<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>
|
||||
<a href="/topics/{{this}}">
|
||||
{{this}}
|
||||
</a>
|
||||
</strong>
|
||||
|
||||
<form style="display: inline;" action="/topics/{{this}}/watch">
|
||||
<button type="submit" class="btn btn-xs btn-default">
|
||||
watch
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/multipass.js"></script>
|
||||
{{> 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