Files
vrobbler/vrobbler/templates/webpages/webpage_detail.html

67 lines
2.1 KiB
HTML

{% extends "base_list.html" %}
{% load static %}
{% block title %}{{object.title}}{% endblock %}
{% block head_extra %}
<style>
.webpage-metadata {border: 1px solid #aaa; border-top:none; border-right:none; line-height:0.65em;padding-top:10px;}
.webpage-body {width:40em; text-align:justify; padding-top:20px; font-family:serif; font-size:1.25em; line-height:1.6em; border-right: 1px #ccc solid; padding-right: 2em;}
.webpage-body br { margin-bottom: 1em; }
</style>
<link href="{% static 'css/recogito.min.css' %}" rel="stylesheet">
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/recogito.min.js' %}"></script>
<script type="text/javascript">
(function() {
var r = Recogito.init({
content: document.getElementById('article') // ID or DOM element
});
// Add an event handler
r.on('createAnnotation', function(annotation) { /** **/ });
})();
</script>
{% endblock %}
{% block lists %}
<div class="row webpage">
<div class="webpage-metadata">
<p>Source: <a href="{{object.url}}">{{object.domain}}</a></p>
{% if object.date %}<p>Published: <em>{{object.date}}</em></p>{% endif %}
<p>Time to read: {{object.estimated_time_to_read_in_minutes}} minutes</p>
</div>
{% if object.extract %}
<div class="webpage-body" id="article">
{{object.extract|linebreaks}}
</div>
{% endif %}
<hr/>
</div>
<div class="row">
<div class="col-md">
<h3>Last scrobbles</h3>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tbody>
{% for scrobble in scrobbles.all %}
<tr>
<td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
<td>{% for note in scrobble.logdata.notes %}{{note}}{% if not forloop.last %}; {% endif%}{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}