Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 101460cd47 | |||
| 591c9cdd2a |
@@ -90,13 +90,7 @@ export default class extends Controller {
|
||||
}
|
||||
|
||||
toggleList() {
|
||||
// if (!this.isOpen) {
|
||||
// this.toggleButtonTarget.classList.add('rotate-180');
|
||||
// this.toggleButtonTarget.classList.remove('-rotate-180');
|
||||
// } else {
|
||||
// this.toggleButtonTarget.classList.add('-rotate-180');
|
||||
// this.toggleButtonTarget.classList.remove('rotate-180');
|
||||
// }
|
||||
this.listTarget.classList.toggle('options-table');
|
||||
this.listTarget.classList.toggle('hidden');
|
||||
this.toggleButtonTarget.classList.toggle('rotate-90');
|
||||
this.toggleButtonTarget.classList.toggle('-rotate-90');
|
||||
|
||||
1
assets/icons/pajamas/hamburger.svg
Normal file
1
assets/icons/pajamas/hamburger.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 0 0"><path fill="currentColor" fill-rule="evenodd" d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 333 B |
@@ -63,3 +63,17 @@ dialog[data-dialog-target="dialog"][open] {
|
||||
dialog[data-dialog-target="dialog"][closing] {
|
||||
animation: fade-out 200ms forwards;
|
||||
}
|
||||
|
||||
.options-table {
|
||||
display: flex;
|
||||
|
||||
:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.options-table {
|
||||
display: inline-table;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
|
||||
{% block stylesheets %}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
|
||||
{% block stylesheets %}
|
||||
@@ -13,11 +14,11 @@
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body class="flex flex-col bg-stone-700">
|
||||
<div class="grid grid-cols-6">
|
||||
<div class="col-span-1 h-screen">
|
||||
<div class="grid md:grid-cols-6">
|
||||
<div class="hidden md:block md:col-span-1 md:h-screen">
|
||||
<twig:NavBar />
|
||||
</div>
|
||||
<div class="col-span-5 h-screen overflow-y-scroll">
|
||||
<div class="col-span-6 md:col-span-5 h-screen overflow-y-scroll">
|
||||
<twig:Header />
|
||||
<h2 class="px-4 my-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
data-result-filter-tv-results-outlet=".results"
|
||||
data-result-filter-tv-episode-list-outlet=".episode-list"
|
||||
>
|
||||
<div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
|
||||
<div class="w-full p-4 flex flex-col md:flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
|
||||
<label for="resolution">
|
||||
Resolution
|
||||
<select id="resolution"
|
||||
|
||||
@@ -5,12 +5,17 @@
|
||||
<div class="md:flex md:items-center md:gap-12">
|
||||
<nav aria-label="Global" class="md:block">
|
||||
<ul class="flex items-center gap-6 text-sm">
|
||||
<li><twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/></li>
|
||||
<li>
|
||||
<li class="hidden">
|
||||
<twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/>
|
||||
</li>
|
||||
<li class="hidden md:block">
|
||||
<a href="{{ path('app_logout') }}">
|
||||
<twig:ux:icon name="material-symbols:logout" width="25px" class="text-orange-500" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="md:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="text-orange-500 ml-4" width="25px" height="25px" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/></svg>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
mediaType: mediaType,
|
||||
imdbId: imdbId
|
||||
}) }}">
|
||||
<img src="{{ image }}" class="w-40 rounded-md" />
|
||||
<img src="{{ image }}" class="w-full md:w-40 rounded-md" />
|
||||
</a>
|
||||
<a href="{{ path('app_search_result', {
|
||||
mediaType: mediaType,
|
||||
imdbId: imdbId
|
||||
}) }}">
|
||||
<h3 class="text-center text-gray-50 max-w-[16ch] text-extrabold">{{ title }}</h3>
|
||||
<h3 class="text-center text-white text-xl md:text-base md:max-w-[16ch]">{{ title }}</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div{{ attributes }}>
|
||||
<div class="p-4 flex flex-row gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
|
||||
<div class="p-4 flex flex-col md:flex-row gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
|
||||
{% if poster != null and poster != "https://image.tmdb.org/t/p/w500" %}
|
||||
<img class="w-24 rounded-lg" src="{{ poster }}" />
|
||||
<img class="w-full md:w-24 rounded-lg" src="{{ poster }}" />
|
||||
{% else %}
|
||||
<div class="w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
||||
<div class="w-full md:w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
||||
<twig:ux:icon width="16" name="hugeicons:loading-01" />
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -12,11 +12,11 @@
|
||||
<h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
|
||||
{{ title }} - {{ year }}
|
||||
</h3>
|
||||
<p class="text-gray-50">
|
||||
<p class="hidden md:text-gray-50">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
<a class="h-9 rounded-md py-1 px-2 bg-green-600 text-gray-50"
|
||||
<a class="h-9 rounded-md py-1 px-2 bg-green-600 text-gray-50 text-center"
|
||||
href="{{ path('app_search_result', {mediaType: mediaType, imdbId: imdbId}) }}"
|
||||
>choose</a>
|
||||
</div>
|
||||
|
||||
@@ -15,12 +15,12 @@
|
||||
active: 'true',
|
||||
}) }}
|
||||
>
|
||||
<div class="p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
{% if episode['poster'] != null %}
|
||||
<img class="w-64 rounded-lg" src="{{ episode['poster'] }}" />
|
||||
<img class="w-full md:w-64 rounded-lg" src="{{ episode['poster'] }}" />
|
||||
{% else %}
|
||||
<div class="w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
||||
<div class="w-full md:w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
||||
<twig:ux:icon width="32" name="hugeicons:loading-01" />
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% block body %}
|
||||
<div class="p-4 flex flex-col grow gap-4 z-30">
|
||||
<h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<twig:Card title="Active Downloads" class="w-full">
|
||||
<twig:DownloadList :type="'active'" />
|
||||
</twig:Card>
|
||||
@@ -14,13 +14,13 @@
|
||||
<twig:DownloadList :type="'complete'" />
|
||||
</twig:Card>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<twig:Card title="Monitors" class="w-full">
|
||||
<twig:MonitorList :type="'active'" :isWidget="true" />
|
||||
</twig:Card>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<twig:Card title="Popular Movies" contentClass="flex flex-row justify-between w-full">
|
||||
<twig:Card title="Popular Movies" contentClass="flex flex-col gap-4 md:flex-row md:justify-between w-full">
|
||||
{% for movie in popular_movies %}
|
||||
<twig:Poster imdbId="{{ movie.imdbId }}"
|
||||
tmdbId="{{ movie.tmdbId }}"
|
||||
@@ -32,7 +32,7 @@
|
||||
/>
|
||||
{% endfor %}
|
||||
</twig:Card>
|
||||
<twig:Card title="Popular TV Shows" contentClass="flex flex-row justify-between w-full">
|
||||
<twig:Card title="Popular TV Shows" contentClass="flex flex-col md:flex-row justify-between w-full">
|
||||
{% for movie in popular_tvshows %}
|
||||
<twig:Poster imdbId="{{ movie.imdbId }}"
|
||||
tmdbId="{{ movie.tmdbId }}"
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
<h2 class="mb-2 text-3xl font-bold text-gray-50">Media Results</h2>
|
||||
<div class="flex flex-row w-full gap-2">
|
||||
<twig:Card title="" contentClass="flex flex-col gap-4 justify-between w-full text-gray-50">
|
||||
<div class="p-4 flex flex-row gap-6">
|
||||
<div class="p-2 md:p-4 flex flex-col md:flex-row gap-6">
|
||||
{% if results.media.poster != null %}
|
||||
<img class="w-40 rounded-lg" src="{{ results.media.poster }}" />
|
||||
<img class="w-full md:w-40 rounded-lg" src="{{ results.media.poster }}" />
|
||||
{% else %}
|
||||
<div class="w-40 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
||||
<div class="w-full md:w-40 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
||||
<twig:ux:icon width="24" name="hugeicons:loading-01" />
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -127,4 +127,20 @@
|
||||
</twig:Card>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
thead tr:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,59 +1,62 @@
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 {{ results.media.mediaType == "tvshows" ? "hidden" }}"
|
||||
<table class="w-full max-w-[75vw] text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 flex-row flex-no-wrap {{ results.media.mediaType == "tvshows" ? "hidden" : "options-table" }}"
|
||||
{{ stimulus_target(controller, "list") }}
|
||||
>
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr class="dark:bg-stone-600 overflow-hidden">
|
||||
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
|
||||
{% for result in results.results %}
|
||||
<tr class="dark:bg-stone-600 overflow-hidden flex flex-col md:flex-col flex-no wrap md:table-row border-b border-gray-500">
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Size
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Resolution
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Codec
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Seeders
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Provider
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Language
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
class="px-4 py-4 leading-[32px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody class="flex-1 sm:flex-none">
|
||||
{% for result in results.results %}
|
||||
<tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200" data-provider="{{ result.provider }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
|
||||
<td id="size" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
<tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap sm:table-row border-b border-gray-500" data-provider="{{ result.provider }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
|
||||
<td id="size" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.size }}
|
||||
</td>
|
||||
<td id="resolution" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
<td id="resolution" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.resolution }}
|
||||
</td>
|
||||
<td id="codec" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
<td id="codec" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.codec }}
|
||||
</td>
|
||||
<td id="seeders" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
<td id="seeders" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
|
||||
{{ result.seeders }}
|
||||
</td>
|
||||
<td id="provider" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-provider="{{ result.provider }}">
|
||||
<td id="provider" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50 " data-provider="{{ result.provider }}">
|
||||
{{ result.provider }}
|
||||
</td>
|
||||
<td id="language" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-languages="{{ result.languages|json_encode }}">
|
||||
<td id="language" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50 overflow-scroll" data-languages="{{ result.languages|json_encode }}">
|
||||
{{ result.languageFlags|raw }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-start mb:justify-end">
|
||||
<button class="download-btn p-1.5 bg-green-600 rounded-md text-gray-50"
|
||||
{{ stimulus_controller('download_button', {
|
||||
url: result.url,
|
||||
|
||||
Reference in New Issue
Block a user