diff --git a/public/css/dashboard.css b/public/css/dashboard.css index 83c3ff7..7ef3a9a 100644 --- a/public/css/dashboard.css +++ b/public/css/dashboard.css @@ -19,9 +19,7 @@ } .tile-content { - position: absolute; - width: 100%; - height: 100%; + position: relative; } .thumbnail { @@ -30,7 +28,14 @@ cursor: pointer; } +.thumbnail:after { + content: ""; + display: block; + padding-top: calc(100% * 9 / 16); +} + .thumbnail img { + position: absolute; width: 100%; } @@ -50,4 +55,30 @@ .info { padding: 1vw; +} + +.disable { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.8); +} + +.disable .spinner { + position: absolute; + width: 3vw; + height: 3vw; + left: calc(50% - 1.5vw); + top: calc(9 / 16 * 50%); + color: lightgrey; +} + +.disable .state { + position: absolute; + text-align: center; + width: 100%; + top: 55%; + color: lightgray; } \ No newline at end of file diff --git a/templates/dashboard/dashboard.html.twig b/templates/dashboard/dashboard.html.twig index 36df61d..d67b298 100644 --- a/templates/dashboard/dashboard.html.twig +++ b/templates/dashboard/dashboard.html.twig @@ -9,19 +9,22 @@
{% for video in videos %} + {% set disabled = video.state != constant("App\\Entity\\Video::DONE") %}
- Thumbnail -
- -
+ {% if disabled == false %} + Thumbnail +
+ +
+ {% endif %}
{{ video.name }}
@@ -29,6 +32,16 @@ {{ video.description }}

+ {% if disabled %} +
+
+ Loading... +
+
+ {{ video.getStateString() }} +
+
+ {% endif %}
{% endfor %}