diff --git a/playlist/static/style.css b/playlist/static/style.css index 319d2ad..7cccadf 100644 --- a/playlist/static/style.css +++ b/playlist/static/style.css @@ -1,11 +1,14 @@ body { background-color: #01817F; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + margin: 0; } .window:not([role="tabpanel"]) { position: fixed; z-index:99; - min-width: 380px; min-height: 520px; width:max(560px, 50vw); resize: both; @@ -28,6 +31,14 @@ body { flex-shrink: 0; } +.window.hide { + display:none; +} + +.window form { + margin: 0; +} + .window-body { flex-grow: 1; display: flex; @@ -60,6 +71,10 @@ iframe { #album h1, #album h2 { color: white; margin: 0; + overflow: hidden; + max-width: 100%; + white-space: nowrap; + text-overflow:ellipsis; } #album h1 { @@ -112,6 +127,23 @@ input[type="range"]::-moz-range-thumb { position: relative; } +.clippy .body .content { + max-height:calc(100vh - 197px); + overflow-y: scroll; +} + +@media (max-width: 500px) { + .clippy { + width: calc(100vw - 10px); + } + .clippy .body.hide { + display: none; + } + .body.hide ~ img { + display:none; + } +} + .clippy .body.hide { display: none; } @@ -120,7 +152,7 @@ input[type="range"]::-moz-range-thumb { content: ""; position: absolute; bottom: -13px; - left: 128px; + right: 128px; border-width: 13px 17px 0; border-style: solid; border-color: lightyellow transparent; @@ -132,7 +164,7 @@ input[type="range"]::-moz-range-thumb { content: ""; position: absolute; bottom: -14px; - left: 126px; + right: 127px; border-width: 14px 19px 0; border-style: solid; border-color: black transparent; diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html index c44ab41..8607386 100644 --- a/playlist/templates/Base.html +++ b/playlist/templates/Base.html @@ -10,8 +10,11 @@ {% block window-title %}{% endblock %}
- - + +
+ {% csrf_token %} + +
@@ -46,6 +49,15 @@ }, } }) + + function hideWindow() { + document.getElementById("main-window").classList.add("hide"); + } + + function resetWindow() { + position.reset() + document.getElementById("main-window").style.transform = ''; + } diff --git a/playlist/templates/Clippy.html b/playlist/templates/Clippy.html index 0f8d7d4..2979d48 100644 --- a/playlist/templates/Clippy.html +++ b/playlist/templates/Clippy.html @@ -8,7 +8,7 @@
- {{ body }} +
{{ body }}

{% if img %} diff --git a/playlist/templates/Vote.html b/playlist/templates/Vote.html index 4914841..0e4f4e4 100644 --- a/playlist/templates/Vote.html +++ b/playlist/templates/Vote.html @@ -15,11 +15,13 @@ Stemmen {% else %} {% endif %} -

{{track.name}}

-

{{track.artist}}

+

{{track.name}}

+

{{track.artist}}

- +
+ +
\ No newline at end of file