47 lines
2.7 KiB
HTML
47 lines
2.7 KiB
HTML
{% extends '__layout__.html' %}
|
|
{% block title %}Games{% endblock %}
|
|
{% block head %}
|
|
<style>
|
|
.text-secondary {
|
|
color: rgb(199, 199, 199) !important;
|
|
}
|
|
.wide-place-card {
|
|
aspect-ratio: 16/9;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 50%);
|
|
transition: 0.2s;
|
|
}
|
|
.wide-place-card:hover {
|
|
transform: scale(1.05);
|
|
transition: 0.2s;
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="w-100 ps-4 pe-4 ms-auto me-auto" style="margin-top:100px;min-height: 100vh;max-width: 1950px;">
|
|
<h1>{{ViewerFacingGenre}}</h1>
|
|
<div class="p-2 w-100 row">
|
|
{% for universe in Games: %}
|
|
<a class="text-decoration-none p-1 col-xxl-2 col-lg-3 col-md-4 col-sm-6" href="/games/{{universe.root_place_id}}/">
|
|
<div class="overflow-hidden wide-place-card w-100 position-relative">
|
|
<img width="100%" style="aspect-ratio: 16/9;" src="/Thumbs/Asset.ashx?assetId={{universe.root_place_id}}&x=352&y=352" alt="{{getRootPlace(universe).assetObj.name}}">
|
|
<div class="position-absolute" style="bottom: 0;padding: 5px;width: 100%;background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));">
|
|
<h5 style="font-size: 17px;font-weight: 700;color:rgb(230,230,230);" class="text-truncate m-0">{{getRootPlace(universe).assetObj.name}}</h5>
|
|
<div class="d-flex">
|
|
<p class="text-secondary m-0 ms-1 me-auto" style="font-size: 12px;"><span class="bi bi-person"></span> <span class="text-secondary">{{getPlayerCount(universe)}}</span> Playing</p>
|
|
<p class="text-secondary m-0 ms-auto me-auto" style="font-size: 12px;"><span class="bi bi-eye"></span> <span class="text-secondary">{{universe.visit_count}}</span> Visits</p>
|
|
<p class="text-secondary m-0 me-1 ms-auto" style="font-size: 12px;"><span class="bi bi-hand-thumbs-up"></span> <span class="text-secondary">{{getAssetVotePercentage(universe.root_place_id)}}%</span> Rating</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{%endfor%}
|
|
</div>
|
|
<div class="mt-2 mb-2 w-100 d-flex">
|
|
<a class="m-0 text-decoration-none ms-auto {% if not Games.has_prev %}text-secondary{%endif%}" {% if Games.has_prev %}href="/games/{{Genre}}/view?page={{Games.prev_num}}"{%endif%}>Previous</a>
|
|
<p class="m-0 ms-2 me-2 text-white">Page {{Games.page}} of {{Games.pages}}</p>
|
|
<a class="m-0 text-decoration-none me-auto {% if not Games.has_next %}text-secondary{%endif%}" {% if Games.has_next %}href="/games/{{Genre}}/view?page={{Games.next_num}}"{%endif%}>Next</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |