ArchiveBox/archivebox/templates/admin/snapshots_grid.html
2021-04-11 00:49:33 -04:00

190 lines
5 KiB
HTML

{% load i18n admin_urls static admin_list %}
{% load core_tags %}
{% block extrastyle %}
<style>
#changelist-search #searchbar {
min-height: 24px;
}
.cards {
padding-top: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* see notes below */
grid-auto-rows: minmax(200px, auto);
grid-gap: 14px 14px;
}
.cards .card {
position: relative;
max-height: 380px;
overflow: hidden;
background-color: #fffcfc;
border: 1px solid #f1efef;
border-radius: 4px;
box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.01);
text-align: center;
color: #5d5e5e;
}
.cards .card.selected-card {
border: 3px solid #2196f3;
box-shadow: 2px 3px 6px 2px rgba(0, 0, 221, 0.14);
}
.cards .card .card-thumbnail {
display: block;
width: 100%;
height: 345px;
overflow: hidden;
border-radius: 4px;
background-color: #fffcfc;
}
.cards .card .card-thumbnail img {
width: 100%;
height: auto;
border: 0;
}
.cards .card .card-thumbnail.missing img {
opacity: 0.03;
width: 20%;
height: auto;
margin-top: 84px;
}
.cards .card .card-tags {
width: 100%;
}
.cards .card .card-tags span {
display: inline-block;
padding: 2px 5px;
border-radius: 5px;
opacity: 0.95;
background-color: #bfdfff;
color: #679ac2;
font-size: 12px;
margin-bottom: 3px;
}
.cards .card .card-footer {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
.cards .card .card-title {
padding: 4px 5px;
background-color: #fffcfc;
/*height: 50px;
vertical-align: middle;
line-height: 50px;*/
}
.cards .card .card-title h4 {
color: initial;
display: block;
vertical-align: middle;
line-height: normal;
margin: 0px;
padding: 5px 0px;
font-size: 13.5px;
font-weight: 400;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
max-height: 46px;
}
.cards .card .card-title h4 .title-text {
user-select: all;
}
.cards .card .card-title .link-favicon {
height: 15px;
margin: 2px;
vertical-align: -5px;
display: inline-block;
}
.cards .card .card-info {
padding: 2px 4px;
/*border-top: 1px solid #ddd;*/
background-color: #fffcfc;
font-size: 11px;
color: #333;
}
.cards .card .card-info input[type=checkbox] {
float: right;
width: 18px;
height: 18px;
}
.cards .card .card-info label {
display: inline-block;
height: 20px;
width: 145px;
font-size: 11px;
}
.cards .card .card-info .timestamp {
font-weight: 600;
}
.cards .card .card-footer code {
display: inline-block;
width: 100%;
margin-top: 2px;
font-size: 10px;
opacity: 0.4;
user-select: all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
{% endblock %}
{% block content %}
<section class="cards">
{% for obj in results %}
<div class="card">
<div class="card-info">
<a href="{% url 'admin:core_snapshot_change' obj.id %}">
<span class="timestamp">{{obj.added}}</span>
</a>
<label>
<span class="num_outputs">📄 &nbsp; {{obj.num_outputs}}</span> &nbsp; &nbsp;
<span>🗄&nbsp; {{ obj.archive_size | file_size }}</span>
<input type="checkbox" name="_selected_action" value="{{obj.pk}}"/>
</label>
</div>
<a href="/{{obj.archive_path}}/index.html" class="card-thumbnail {% if not obj.thumbnail_url %}missing{% endif %}">
<img src="{{obj.thumbnail_url|default:'/static/spinner.gif' }}" alt="{{obj.title|default:'Not yet archived...'}}" />
</a>
<div class="card-footer">
{% if obj.tags_str %}
<div class="card-tags">
{% for tag in obj.tags_str|split:',' %}
<span>
{{tag}}
</span>
{% endfor %}
</div>
{% endif %}
<div class="card-title" title="{{obj.title}}">
<a href="/{{obj.archive_path}}/index.html">
<h4>
{% if obj.is_archived %}
<img src="/{{obj.archive_path}}/favicon.ico" onerror="this.style.display='none'" class="link-favicon" decoding="async"/>
{% else %}
<img src="{% static 'spinner.gif' %}" onerror="this.style.display='none'" class="link-favicon" decoding="async"/>
{% endif %}
<span class="title-text">{{obj.title|default:'Pending...' }}</span>
</h4>
</a>
<code title="{{obj.url}}">{{obj.url}}</code>
</div>
</div>
</div>
{% endfor %}
</section>
<br/>
{% endblock %}