updated download / replay menu

src/views/Match.vue

@@ -44,26 +44,29 @@
           <img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
                class="match-len"
                src="../assets/images/icons/timer_long.svg" title="Long-Match">
+
           <span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
+
           <img v-if="data.matchDetails.parsed"
                :alt="DisplayRank(data.avgRank)[1]"
                :src="DisplayRank(data.avgRank)[0]"
                :title="'Average Rank: ' + DisplayRank(data.avgRank)[1]"
                class="rank-icon"/>
-          <span v-if="data.matchDetails.replay_url" class="text-muted px-2">—</span>
-          <div v-if="data.matchDetails.replay_url" class="btn-group">
-            <button id="dropdownMenuButton" aria-expanded="false" class="btn dropdown-toggle" data-bs-toggle="dropdown"
-                    type="button">
-              <i class="fa fa-download"></i>
-            </button>
-            <ul aria-labelledby="dropdownMenuButton" class="dropdown-menu dropdown-menu-end">
-              <li v-if="data.matchDetails.replay_url"><a :href="data.matchDetails.replay_url"
-                                                         class="text-primary dropdown-item" title="Download Match">Download
-                Match</a></li>
-              <li v-if="data.matchDetails.share_code"><a
-                  :href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
-                  class="text-primary dropdown-item" title="Download Match">Replay Match in CSGO</a></li>
-            </ul>
+
+          <span v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="text-muted px-2">—</span>
+
+          <div v-if="data.matchDetails.parsed && data.matchDetails.replay_url" class="btn-group">
+            <i id="downloadMenuBtn" aria-hidden="true" class="fa fa-ellipsis-h mx-2"
+               @click.prevent="handleDownloadMenu"></i>
+            <div id="downloadGroup" class="group">
+              <a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" title="Download Demo">
+                <i id="downloadDemo" aria-hidden="true" class="fa fa-download mx-2"></i>
+              </a>
+              <a v-if="data.matchDetails.share_code"
+                 :href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code" title="Watch Demo">
+                <i id="replayDemo" aria-hidden="true" class="fa fa-television mx-2"></i>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -226,6 +229,35 @@ export default {
       }
     }
 
+    const handleDownloadMenu = () => {
+      const downloadGroup = document.getElementById('downloadGroup')
+      const menuBtn = document.getElementById('downloadMenuBtn')
+      let opacity = window.getComputedStyle(menuBtn).getPropertyValue('opacity')
+
+      function show() {
+        if (opacity < 1) {
+          opacity = opacity + 0.1
+          downloadGroup.style.opacity = opacity
+        } else {
+          clearInterval(0)
+        }
+      }
+
+      function hide() {
+        if (opacity > 0) {
+          opacity = opacity - 0.1
+          menuBtn.style.opacity = opacity
+        } else {
+          menuBtn.style.display = 'none'
+          downloadGroup.style.opacity = 0
+          downloadGroup.style.display = 'block'
+          setInterval(show, 35)
+        }
+      }
+
+      setInterval(hide, 35)
+    }
+
     // Watchers
     watch(() => props.match_id, GetMatch)
 
@@ -254,7 +286,7 @@ export default {
     })
 
     return {
-      data, DisplayRank, FormatFullDate, FormatDuration, route, checkWin
+      data, DisplayRank, FormatFullDate, FormatDuration, route, checkWin, handleDownloadMenu
     }
   }
 }
@@ -339,42 +371,31 @@ export default {
     }
 
     .match-len {
-      width: 20px;
-      height: 20px;
+      width: 22px;
+      height: 22px;
     }
 
-    .btn-group {
-      margin-left: -10px;
+    #downloadMenuBtn {
+      cursor: pointer;
+      font-size: 1.3rem;
+      margin-left: -5px;
+    }
 
-      .btn, .dropdown-toggle {
-        outline: none;
-        border: none;
-        box-shadow: none;
+    .group {
+      display: none;
+      margin-left: -5px;
 
-        &:focus, &:hover, &:active {
-          outline: none;
-          border: none;
-          box-shadow: none;
-        }
+      i {
+        cursor: pointer;
+        color: white;
+        font-size: 1.3rem;
 
-        .fa {
+        &:hover, &:focus {
           color: var(--bs-warning);
         }
       }
-
-      ul {
-        border: 2px solid var(--bs-primary);
-        background: var(--bs-secondary);
-
-        li {
-          a:hover, a:focus {
-            background: var(--bs-body-bg);
-          }
-        }
-      }
     }
   }
-
 }
 
 .nav {