syntaxwebsite/app/pages/users/index.html

71 lines
3.5 KiB
HTML

{% extends '__layout__.html' %}
{% block title %}Search Users{% endblock %}
{% block head %}
<style>
.text-secondary {
color: rgb(200,200,200) !important;
}
.status-icon {
position: absolute;
bottom : -4px;
right: -4px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgb(0, 139, 219);
border: 1px solid rgb(30,30,30);
}
.status-icon-green {
background-color: rgb(15, 211, 80) !important;
}
</style>
{% endblock %}
{% block content %}
<div class="ms-auto me-auto ps-2 pe-2 mb-3" style="width: 700px;min-height: 100vh;margin-top: 120px;">
<h2>Users</h2>
<form method="post">
<div class="input-group">
<div class="form-floating" style="width: 52%;">
<input type="text" class="form-control" id="search-input" name="q" {%if SearchQuery != None: %}value="{{SearchQuery}}"{%endif%} placeholder="Username">
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
<label for="search-input">Search</label>
</div>
<button type="submit" class="btn btn-outline-primary fw-bold" style="min-width: 50px;"><i class="bi bi-search"></i></button>
</div>
</form>
<div class="row mt-2">
{% for userObj in UserLookupResults.items %}
<div class="col-12 mt-2">
<a href="/users/{{userObj.id}}/profile" class="text-decoration-none m-0 p-0">
<div class="bg-dark border p-2 d-flex">
<div class="position-relative">
<img src="/Thumbs/Head.ashx?x=100&y=100&userId={{userObj.id}}" style="aspect-ratio: 1/1;height: 80px !important;" class="rounded border" alt="{{userObj.username}}">
{% if userObj.lastonline > MinOnlineTime %}
<div class="status-icon {% if IsInGame(userObj ) %}status-icon-green{%endif%}"></div>
{%endif%}
</div>
<div class="ms-2" style="max-height: 80px;overflow-y: hidden;">
<h5 class="m-0">{{userObj.username}}</h5>
<p class="text-secondary m-0 mt-1" style="font-size: 13px;">{{userObj.description}}</p>
</div>
<div class="ms-auto text-center" style="min-width: 120px;">
<p class="text-secondary m-0" style="font-size: 13px;">Last Online</p>
<p class="text-white m-0" style="font-size: 15px;font-weight:400;">{{GetTimeAgoTime( userObj )}}</p>
</div>
</div>
</a>
</div>
{%endfor%}
</div>
{% if len(UserLookupResults.items) == 0 %}
<p class="mt-5 mb-5 w-100 text-center">No Results Found</p>
{%endif%}
<div class="d-flex w-100 mt-2" style="font-size: 14px;">
<a class="text-decoration-none ms-auto {% if not UserLookupResults.has_prev: %}text-secondary{%endif%}" {% if UserLookupResults.has_prev: %}href="/users?page={{UserLookupResults.prev_num}}{%if SearchQuery != None %}&q={{SearchQuery}}{%endif%}"{%endif%}>Previous</a>
<p class="m-0 ms-2 me-2 text-white">Page {{UserLookupResults.page}} of {{UserLookupResults.pages}}</p>
<a class="text-decoration-none me-auto {% if not UserLookupResults.has_next: %}text-secondary{%endif%}" {% if UserLookupResults.has_next: %}href="/users?page={{UserLookupResults.next_num}}{%if SearchQuery != None %}&q={{SearchQuery}}{%endif%}"{%endif%}>Next</a>
</div>
</div>
{% endblock %}