Replace download button with dropdown

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_base.scss

@@ -90,8 +90,9 @@ a {
   }
 }
 
-.navbar-light .navbar-nav .nav-link,
+.navbar {
-.dropdown-item {
+  .navbar-light .navbar-nav .nav-link,
+  .dropdown-item {
     outline: none;
     color: $color-primary;
     text-decoration: none;
@@ -103,15 +104,38 @@ a {
     &:hover {
       color: $color-secondary;
     }
-}
+  }
 
-.navbar-light .navbar-nav .active>.nav-link,
+  .navbar-light .navbar-nav .active>.nav-link,
-.navbar-light .navbar-nav .nav-link.active,
+  .navbar-light .navbar-nav .nav-link.active,
-.navbar-light .navbar-nav .nav-link.show,
+  .navbar-light .navbar-nav .nav-link.show,
-.navbar-light .navbar-nav .show>.nav-link {
+  .navbar-light .navbar-nav .show>.nav-link {
     color: $color-secondary;
-}
+  }
 
+  .dropdown-menu {
+    border: none;
+  }
+  .dropdown-item {
+    &:hover,
+    &:active {
+      background-color: transparent;
+    }
+  }
+  .dropdown-item.active {
+    color: $color-secondary;
+    background-color: transparent;
+  }
+
+  .navbar-toggler {
+    outline: none;
+
+    &:focus,
+    &:hover {
+      outline: none;
+    }
+  }
+}
 
 
 /**
@@ -127,22 +151,6 @@ a {
   border: 1px solid transparent;
 }
 
-.dropdown-menu {
-  border: none;
-  margin-top: 0;
-  padding-top: 0;
-}
-.dropdown-item {
-  &:hover,
-  &:active {
-    background-color: transparent;
-  }
-}
-.dropdown-item.active {
-  color: $color-secondary;
-  background-color: transparent;
-}
-
 .btn-primary {
   background-color: $btn-primary-2;
   color: #fff !important;
@@ -155,18 +163,11 @@ a {
     border: 1px solid $btn-secondary-2 !important;
   }
 }
+
 .btn-lg {
   font-size: 1rem;
   padding: 1rem 1.25rem;
 }
-.navbar-toggler {
-  outline: none;
-
-  &:focus,
-  &:hover {
-    outline: none;
-  }
-}
 
 ul.th {
   list-style: none;
@@ -200,6 +201,48 @@ ul:not(.navbar-nav) li {
 }
 
 
+.download-selector {
+  display: inline-block;
+
+  .dropdown-menu {
+    border: none;
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  .btn {
+    background-color: $btn-primary-2;
+    &:hover {
+      background-color: $btn-secondary-2;
+    }
+    &:after {
+      align-self: center;
+    }
+  }
+
+  ul {
+    list-style: none;
+    margin-left: 0!important;
+    width: 100%;
+    padding: 0;
+
+    li {
+      padding: 0;
+      margin: 0;
+
+      a {
+        padding: 0.75rem 0.5rem 0.75rem 1.25rem;
+      }
+    }
+
+    li::before {
+      content: none;
+      display: none;
+    }
+  }
+}
+
+
 .bg-white-shadow {
   background: url(../images/migen-links@2x.png);
   background-repeat: no-repeat;

templates/index.html

@@ -53,10 +53,17 @@
               <a href="{{ get_url(path='@/experiment-control/place-order.md') }}" class="btn btn-primary btn-inversed btn-lg">Order hardware</a>
               <a href="https://m-labs.hk/artiq/manual/" class="btn btn-primary btn-lg">Manual</a>
               <a href="https://forum.m-labs.hk" class="btn btn-primary btn-lg">Forum</a>
-              <a href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1" class="btn btn-primary btn-lg d-inline-flex">
+              <div class="dropdown download-selector">
+                <a class="btn btn-primary btn-lg d-inline-flex dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   <img src="/images/icons/icon-download.svg" class="d-inline-block align-self-center mx-1" style="height: 1rem" alt="download">
                   Windows installer
                 </a>
+
+                <ul class="dropdown-menu shadow">
+                  <li><a class="dropdown-item" href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1">ARTIQ-8 (stable)</a></li>
+                  <li><a class="dropdown-item" href="https://nixbld.m-labs.hk/job/artiq/extra-beta/msys2-offline-installer/latest/download/1">ARTIQ-9 (beta)</a></li>
+                </ul>
+              </div>
               <a href="{{ get_url(path='@/experiment-control/artiq.md') }}" class="btn btn-primary btn-lg">More...</a>
 
             </div>