archival.ArchiveBox/archivebox/templates/admin/snapshots_grid.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-progress {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
  }
  .cards .card .card-progress .progress-text {
      font-size: 11px;
      color: #3b82f6;
      font-weight: 500;
  }
  .cards .card.archiving {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }
  .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{% if obj.status == 'started' %} archiving{% endif %}">
          <div class="card-info">
            <a href="{% url 'admin:core_snapshot_change' obj.pk %}">
              <span class="timestamp">{{obj.bookmarked_at}}</span>
            </a>
            {% if obj.status == 'started' %}
              <div class="card-progress">
                <span class="snapshot-progress-spinner"></span>
                <span class="progress-text">Archiving...</span>
              </div>
            {% else %}
              <div style="padding: 4px 0;">
                {{ obj.icons|safe }}
              </div>
            {% endif %}
            <label>
              <span>🗄&nbsp; {{ obj.archive_size | file_size }}</span>
              <input type="checkbox" name="_selected_action" value="{{obj.pk}}"/>
            </label>
          </div>
          <a href="{% snapshot_base_url obj %}/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="{% snapshot_base_url obj %}/index.html">
                  <h4>
                    {% if obj.is_archived %}
                        <img src="{% snapshot_base_url obj %}/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 %}