🐛 Fix "Download MEI" button. Minor UI adjustments.

Author: cadagong

assets/style.css

@@ -137,12 +137,6 @@ a:hover {
     margin-left: 10px;
     transform: scale(0.8);
 }
-.navbar-dropdown-link {
-    color: inherit;
-}
-.navbar-dropdown-link:hover {
-    color: white;
-}
 .navbar-dropdown-icon {
     margin-left: 10px;
     display: none;
@@ -251,8 +245,8 @@ a:hover {
     border-bottom: 0px;
 }
 .panel-heading {
-    font-size: 1.25em;
-    line-height: 1.25;
+    font-size: 1.1em;
+    line-height: 1.1;
     padding: 0.5em 0.75em;
     border-radius: 0px;
     border-top: 0px;
@@ -262,6 +256,9 @@ a:hover {
     border-bottom: 1px solid #c4dafd !important;
     cursor: pointer;
     font-weight: 900;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 .panel-contents {
     max-height: 60vh;
@@ -305,7 +302,11 @@ a:hover {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+#zoomSlider, #opacitySlider, #bgOpacitySlider {
+    margin: 0px;
 }
 .panel-block {
     align-items: center;
@@ -377,9 +378,12 @@ a:hover {
     font-size: 14px;
 }
 .slider-btn {
-    padding: 10px 5px;
-    width: 30%;
-    font-size: 14px;
+    padding: 7px 5px;
+    width: 20%;
+    min-width: 20%;
+    height: 100%;
+    font-size: 0.8em;
+    margin: 0px;
 }
 .side-panel-btn:hover {
     border: 1px solid #c6c6c6;
@@ -415,7 +419,7 @@ a:hover {
 .dropdown-menu {
     padding-top: 0px;
     margin-left: 3px;
-    max-height: 15vh;
+    max-height: 20vh;
     overflow: auto;
     border: 1px solid #dbdbdb;
     border-radius: 4px;

assets/template.html

@@ -32,7 +32,7 @@
           <div class="navbar-dropdown" id="navbar-dropdown-options">
             <div id="save" class="navbar-dropdown-item">Save</div>
             <div id="export" class="navbar-dropdown-item">Save and Export to File</div>
-            <div id="getmei" class="navbar-dropdown-item">Download MEI</div>
+            <a id="getmei" class="navbar-dropdown-item">Download MEI</a>
           </div>   
         </div>
 
@@ -53,18 +53,18 @@
             <div class="navbar-btn-text">Help</div>
           </div>
           <div class="navbar-dropdown">
-            <div class="navbar-dropdown-item">
-              <a class="navbar-dropdown-link" href="//github.com/DDMAL/Neon/wiki/Instructions" target="_blank">User Guide</a>
+            <a class="navbar-dropdown-item navbar-dropdown-link" href="//github.com/DDMAL/Neon/wiki/Instructions" target="_blank">
+              User Guide
               <img class="external-link-icon">
-            </div>
-            <div class="navbar-dropdown-item">
-              <a class="navbar-dropdown-link" href="//github.com/DDMAL/Neon/wiki" target="_blank">Wiki</a>
+            </a>
+            <a class="navbar-dropdown-item" href="//github.com/DDMAL/Neon/wiki" target="_blank">
+              Wiki
               <img class="external-link-icon">
-            </div>
-            <div class="navbar-dropdown-item">
-              <a class="navbar-dropdown-link" href="//ddmal.music.mcgill.ca" target="_blank">DDMAL</a>
+            </a>
+            <a class="navbar-dropdown-item" href="//ddmal.music.mcgill.ca" target="_blank">
+              DDMAL
               <img class="external-link-icon">
-            </div>
+            </a>
             <div class="navbar-dropdown-item">
               <div id="navbar-item-hotkeys">Hotkeys</div>
             </div>
@@ -77,10 +77,10 @@
     </div>
 
     <div class="navbar-end">
-      <div class="navbar-element navbar-btn" id="feedback-form-btn-container">
-        <a href="https://forms.gle/vGUpvZKZxGX5QGJZ9" target="_blank">Feedback Form</a>
+      <a class="navbar-element navbar-btn" id="feedback-form-btn-container" href="https://forms.gle/vGUpvZKZxGX5QGJZ9" target="_blank">
+        Feedback Form
         <img class="external-link-icon">
-      </div>
+      </a>
     </div>
   </div>
 </nav>