From adb9b1d5d87fbb1a1fea347b4d1aae7e67a3955d Mon Sep 17 00:00:00 2001 From: julian laplace Date: Thu, 27 Oct 2022 17:19:25 +0200 Subject: file sorting --- public/assets/css/audioplayer.css | 10 +++++++++- public/assets/css/hootstream.css | 4 ++++ public/assets/js/lib/views/details/audioPlayer.js | 1 + public/assets/js/lib/views/stream/hootstream.js | 4 ++-- 4 files changed, 16 insertions(+), 3 deletions(-) (limited to 'public') diff --git a/public/assets/css/audioplayer.css b/public/assets/css/audioplayer.css index 49a2809..2728c16 100644 --- a/public/assets/css/audioplayer.css +++ b/public/assets/css/audioplayer.css @@ -31,6 +31,9 @@ transition: 0.2s cubic-bezier(0, 0, 1, 1); opacity: 0; } +.player.unloaded { + pointer-events: none; +} .player.active { opacity: 1; } @@ -43,8 +46,8 @@ display: flex; flex-direction: column; padding: 1rem; + border-radius: 0.25rem; } - .player .controls { background: linear-gradient(-90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)); } @@ -63,6 +66,11 @@ display: flex; justify-content: center; align-items: center; + transition: opacity 0.1s; + opacity: 0.9; +} +.player .icon:hover { + opacity: 1; } .player .pos { flex: 1; diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css index 1966da5..d0d10a2 100644 --- a/public/assets/css/hootstream.css +++ b/public/assets/css/hootstream.css @@ -57,6 +57,7 @@ /** ImAgeS and other image lISTS!! */ #hootevents .imageList { + padding-left: 7.5rem; margin-bottom: 1rem; display: flex; flex-direction: row; @@ -520,6 +521,9 @@ max-width: calc(100vmin - 2rem); max-height: calc(80vmin - 1rem); } + #hootevents .imageList { + padding-left: 0; + } #hootevents .imageList img { max-width: calc(100vmin - 2rem); max-height: calc(80vmin - 1rem); diff --git a/public/assets/js/lib/views/details/audioPlayer.js b/public/assets/js/lib/views/details/audioPlayer.js index 700daa5..a2e38e5 100644 --- a/public/assets/js/lib/views/details/audioPlayer.js +++ b/public/assets/js/lib/views/details/audioPlayer.js @@ -77,6 +77,7 @@ const AudioPlayer = View.extend({ */ onPlay: function (element) { if (!this.active) { + this.$el.removeClass("unloaded"); this.active = true; this.$el.addClass("active"); } diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js index 4d64cf6..50b2f46 100644 --- a/public/assets/js/lib/views/stream/hootstream.js +++ b/public/assets/js/lib/views/stream/hootstream.js @@ -262,8 +262,8 @@ var HootStream = View.extend({ .map(([image]) => image); // console.log(filteredImages); - // console.log(thread); + return [ "
", this.renderHoot({ @@ -344,7 +344,7 @@ var HootStream = View.extend({ return null; } const $table = $("
"); - for (const file of files) { + for (const file of files.sort((file) => file.filename.toLowerCase())) { const $el = this.renderFile(this.fileTemplate, file); $table.append($el); } -- cgit v1.2.3-70-g09d2