- Support multiple music providers

- feat: Doubleclick on track in Table view to get technical information about it
2024-12-03 12:48:27 +00:00
parent 883294d74e
commit 87791cf21d
12 changed files with 306 additions and 109 deletions
--- a/templates/browse.html
+++ b/templates/browse.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+
+{% block content %}
+{% for section in browse_data %}
+<div class="browse-section">
+    <h1>{{ section.title }}</h1>
+    <div class="row row-cols-1 row-cols-md-4 row-cols-lg-6 g-4">
+        {% for card in section.items %}
+        <div class="col">
+            <div class="card shadow h-100 d-flex flex-column position-relative" >
+                <a href="/browse/page/{{ card.uri }}?provider={{provider_id}}">
+                    <img src="{{ card.artwork.0.url }}" class="card-img-top" alt="{{ card.title }}">
+                    <div class="card-body d-flex flex-column justify-content-between">
+                        <h5 class="card-title">{{ card.title }}</h5>
+                    </div>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endfor %}
+{% endblock %}
+<style>
+    .browse-section {
+        margin: 20px 0;
+    }
+
+    .browse-section h1 {
+        font-size: 24px;
+        margin-bottom: 20px;
+    }
+
+    .browse-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 20px;
+    }
+
+    .browse-card {
+        position: relative;
+        border-radius: 8px;
+        overflow: hidden;
+        text-align: center;
+        color: #fff;
+    }
+
+    .browse-card img {
+        width: 100%;
+        height: auto;
+        display: block;
+    }
+
+    .browse-card .title {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        font-size: 18px;
+        text-shadow: 1px 1px 2px #000;
+    }
+</style>