Improve scroll handler

clabs · Aug 22, 2024 · b538d07 · b538d07
1 parent b94c1be
commit b538d07
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git a/src/rockon/bands/static/js/voting.js b/src/rockon/bands/static/js/voting.js
@@ -37,14 +37,6 @@ const SongInfo = Vue.defineComponent({
   `
 })
 
-const SongInfoScrolling = Vue.defineComponent({
-  props: ['song', 'band'],
-  template: `
-    <span class="scrolling-text">{{ band.name || band.guid }} - {{ song.file_name_original }}</span>
-    </div>
-  `
-})
-
 const BandLinks = Vue.defineComponent({
   props: ['links'],
   template: `
@@ -670,7 +662,7 @@ const app = createApp({
       playSongBand: null,
       toastAudioPlayer: null,
       toastVisible: false,
-      toastIsMinimized: false,
+      toastIsMaximized: true,
       wavesurfer: null,
       showBandNoName: null,
       showIncompleteBids: null,
@@ -686,7 +678,6 @@ const app = createApp({
     TrackDropdown,
     SongList,
     SongInfo,
-    SongInfoScrolling,
     BandImages,
     BandDocuments,
     BandLinks,
@@ -832,7 +823,7 @@ const app = createApp({
       })
     },
     toggleIcon() {
-      this.toastIsMinimized = !this.toastIsMinimized;
+      this.toastIsMaximized = !this.toastIsMaximized;
     },
     handleCloseClick () {
       console.debug('app handleCloseClick')
@@ -844,6 +835,7 @@ const app = createApp({
       this.playSong = null
       this.playSongBand = null
       this.toastVisible = false
+      this.toastIsMaximized = true
     },
     handleFilterShowBandNoNameChange (checked) {
       console.debug('app handleFilterShowBandNoNameChange:', checked)

diff --git a/src/rockon/bands/templates/bid_vote.html b/src/rockon/bands/templates/bid_vote.html
@@ -53,17 +53,19 @@ <h1>Bandbewertung</h1>
           <div class="toast-header">
               <strong class="me-auto">
                 <i class="fas fa-music" style="padding-right: 0.5em;"></i>
-                <span v-if="!toastIsMinimized">Rockify</span>
+                <span v-if="toastIsMaximized">Rockify</span>
                 <div v-else class="scrolling-container">
-                  <song-info-scrolling :song="playSong" :band="playSongBand"></song-info-scrolling>
+                  <div class="scrolling-text-wrapper">
+                    <span class="scrolling-text">{{ playSongBand.name || playSongBand.guid || "" }} - {{ playSong.file_name_original }}</span>
+                  </div>
                 </div>
               </strong>
-              <button class="btn" style="color: var(--rockon-btn-close-color)" type="button" data-bs-toggle="collapse" data-bs-target="#player-toast-body" :aria-expanded="!toastIsMinimized" aria-controls="player-toast-body" @click="toggleIcon" title="Minimieren">
-                <i :class="toastIsMinimized ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
+              <button class="btn" style="color: var(--rockon-btn-close-color)" type="button" data-bs-toggle="collapse" data-bs-target="#player-toast-body" :aria-expanded="toastIsMaximized" aria-controls="player-toast-body" @click="toggleIcon" title="Minimieren">
+                <i :class="toastIsMaximized ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
               </button>
               <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close" @click="handleCloseClick" title="Schließen"></button>
           </div>
-          <div id="player-toast-body" class="collapse show">
+          <div id="player-toast-body" :class="['collapse', { 'show': toastIsMaximized }]">
               <div class="toast-body">
                   <song-info v-if="playSong" :song="playSong" :band="playSongBand"></song-info>
                   <div id="player-wrapper"></div>
@@ -93,26 +95,34 @@ <h1>Bandbewertung</h1>
     transform: scale(1.1);
   }
 
+  @keyframes scroll {
+    0% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(calc(-100% + 230px));
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .scrolling-text-wrapper {
+    display: flex;
+    width: max-content;
+    animation: scroll 15s linear infinite;
+  }
+
   .scrolling-container {
-    width: 200px; /* Adjust the width as needed */
+    width: 230px; /* Adjust the width as needed */
     overflow: hidden;
     display: inline-block;
     vertical-align: middle;
+    position: relative;
   }
 
   .scrolling-text {
-    display: inline-block;
     white-space: nowrap;
-    animation: scroll 10s linear infinite;
-  }
-
-  @keyframes scroll {
-    0% {
-      transform: translateX(100%);
-    }
-    100% {
-      transform: translateX(-100%);
-    }
   }
 </style>