xemu-website/templates/template_title.html

{% set title_status_colors = {'Unknown' : '#595959', 'Broken' : '#D7263D', 'Intro' : '#F86624', 'Starts' : '#FF9800', 'Playable' : '#42e335', 'Perfect' : '#1bdeff'} %}
{% extends "template_base.html" %}
{% block title %}{{ title.title_name }} Compatibility{% endblock %}
{% block append_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">

<style type="text/css">
.playability-tag {
  display: inline-block;
  font-weight: 400;
  color: {{ title_status_colors[title.status] }};
  text-align: center;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid {{ title_status_colors[title.status] }};
  padding: .375rem .75rem;
  font-size: .9375rem;
  line-height: 1.5;
  border-radius: .25rem;
}
</style>

{% endblock %}

{% block content %}
<!-- Game Identification -->
<div class="py-5 row flex-md-nowrap text-center text-md-left align-items-center justify-content-center justify-content-md-start">
  {% if title.xtimage_url %}
  <div class="col-md-auto">
    <img src="{{ title.xtimage_url }}" class="rounded-circle img-thumbnail" />
  </div>
  {% endif %}
  <div class="col-md-auto align-self-center">
    <h1>{{ title.title_name }}</h1>
    <h6 class="card-subtitle mb-2 text-muted">
      <strong>{{ title.full_title_id_text }}</strong>
      <span class="align-text-top" style="font-family: monospace;">[{{ title.full_title_id_hex }}]</span>
    </h6>
  </div>
</div>

<div class="row">
  <!-- Game Cover -->
  <div class="col-md-4 text-center">
    <figure class="figure">
      <a href="{{ title.cover_url }}" class="enlarge-image"><img src="{{ title.cover_url }}" class="img-thumbnail img-fluid" width=350 /></a>
    </figure>
  </div>

  <!-- Compatibility Details -->
  <div class="col-md-8">
    <ul class="list-group mb-3">

      <li class="list-group-item d-flex justify-content-between">
        <div class="list-group w-100">
          <div class="d-flex w-100 justify-content-between">
            <h5>Status</h5>
            <span class="playability-tag">{{ title.status }}</span>
          </div>
          <p class="text-muted mb-1">{{ title_status_descriptions[title.status] }}</p>
        </div>
      </li>

      {% if title.most_recent_test %}
      <li class="list-group-item d-flex justify-content-between">
        <div class="list-group w-100">
          <div class="d-flex w-100 justify-content-between">
            <h5>Last Tested</h5>
            <strong>{{ title.most_recent_test.created_at.strftime('%b %-d, %Y') }}</strong>
          </div>
          <details>
            <summary>
            {% if title.most_recent_test.info['provided_by_ip_addr'] %}
            <strong>Reported by anonymous user at IP address:</strong> {{ title.most_recent_test.info['provided_by_ip_addr'] }}
            {% endif %}
            {% if title.most_recent_test.info['provided_by_discord_name'] %}
            <strong>Reported by Discord user:</strong> {{ title.most_recent_test.info['provided_by_discord_name'] }}
            {% endif %}
            </summary>
            <pre>
{% for k in title.most_recent_test.info %}{{ k }}: {{ title.most_recent_test.info[k]|e }}
{% endfor %}</pre>
          </details>
        </div>
      </li>
      {% endif %}
      {% if 'external_links' in title.title_report %}
      <li class="list-group-item d-flex justify-content-between">
        <div>
          <span>External Sites</span>
        </div>
        <div class="list-group text-right">
          <div>
          {% for name in title.title_report['external_links'] %}
            <a class="btn btn-outline-secondary btn-sm" href="{{ title.title_report['external_links'][name] }}" role="button">{{ name }}</a>
          {% endfor %}
          </div>
        </div>
      </li>
      {% endif %}
    </ul>

    {% if False %}
    <!-- YouTube Embed -->
    <div class="py-2">
      <h4>Video Playlist</h4>
    </div>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/qlU0dgmj46Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    {% endif %}

    <!-- Known Issues -->
    <div class="py-2">
      <h4>Known Issues</h4>
    </div>
    <div class="list-group">
      {% if title.issues|length > 0 %}
        {% for issue in title.issues %}
      <a href="{{ issue.url }}" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">{{ issue.title|e }}</h5>
          <small>#{{ issue.number }}</small>
        </div>
        <p class="mb-1 text-small text-muted">Issue last updated {{ issue.updated_at.strftime('%b %-d, %Y') }}.</p>
      </a>
        {% endfor %}
      {% else %}
      <div class="list-group-item text-center text-muted text-small">
        No issues have been reported for this title.
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block append_foot %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.enlarge-image').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      mainClass: 'mfp-img-mobile',
      image: {
        verticalFit: true
      }
    });
  });
</script>
{% endblock %}