94 lines
7.7 KiB
HTML
94 lines
7.7 KiB
HTML
<div class="flex items-center space-x-2">
|
|
<div class="dropdown">
|
|
<button class="block px-4 py-2 bg-gradient-to-t from-gray-200 to-gray-100 focus:from-gray-100 focus:to-gray-200 border border-gray-300 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-700 focus:text-gray-900 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsutton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{% if t=="hour" %}<i class="fas fa-clock text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if t=="day" %}<i class="fas fa-calendar-day text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if t=="week" %}<i class="fas fa-calendar-week text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if t=="month" %}<i class="fas fa-calendar-alt text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if t=="year" %}<i class="fas fa-calendar text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if t=="all" %}<i class="fas fa-infinity text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{{t | capitalize}}
|
|
</button>
|
|
<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsButton" x-placement="bottom-start">
|
|
<li class="{% if t=='hour' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=hour">
|
|
<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
|
|
</a>
|
|
</li>
|
|
<li class="{% if t=='day' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=day">
|
|
<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
|
|
</a>
|
|
</li>
|
|
<li class="{% if t=='week' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=week">
|
|
<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
|
|
</a>
|
|
</li>
|
|
<li class="{% if t=='month' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=month">
|
|
<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
|
|
</a>
|
|
</li>
|
|
<li class="{% if t=='year' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=year">
|
|
<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
|
|
</a>
|
|
</li>
|
|
<li class="{% if t=='all' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=all">
|
|
<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="block px-4 py-2 bg-gradient-to-t from-gray-200 to-gray-100 focus:from-gray-100 focus:to-gray-200 border border-gray-300 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-700 focus:text-gray-900 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsTypeButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{% if sort=="hot" %}<i class="fas fa-fire text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if sort=="new" %}<i class="fas fa-sparkles text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if sort=="old" %}<i class="fas fa-book text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if sort=="controversial" %}<i class="fas fa-bullhorn text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{% if sort=="comments" %}<i class="fas fa-comments text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
|
|
{{sort | capitalize}}
|
|
</button>
|
|
<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsTypeButton" x-placement="bottom-start">
|
|
<li class="{% if sort == 'top' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=top&q={{query | urlencode}}&t={{t}}">
|
|
<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
|
|
</a>
|
|
</li>
|
|
<li class="{% if sort == 'bottom' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
|
|
<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
|
|
</a>
|
|
</li>
|
|
<li class="{% if sort == 'new' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=new&q={{query | urlencode}}&t={{t}}">
|
|
<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
|
|
</a>
|
|
</li>
|
|
<li class="{% if sort == 'old' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=old&q={{query | urlencode}}&t={{t}}">
|
|
<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
|
|
</a>
|
|
</li>
|
|
<li class="{% if sort == 'controversial' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
|
|
<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
|
|
</a>
|
|
</li>
|
|
<li class="{% if sort == 'comments' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
|
|
<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
|
|
</a>
|
|
</li>
|
|
<li class="{% if sort == 'random' %}hidden{% endif %}">
|
|
<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=random&q={{query | urlencode}}&t={{t}}">
|
|
<i class="fas fa-question fa-sm fa-fw mr-4"></i>Random
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> |