From f29807a913746c6bdb2e3205f63fb81e93681129 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Mon, 21 Oct 2024 17:46:40 +0800
Subject: [PATCH] Optimize the download button

Replace download button with windows icon (just four squares).
Make the download button last so on certain screens it wouldn't cause additional empty-ish lines.
Redo the wording so the button is shorter, but the dropdown menu is filled.

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 sass/css/_base.scss                  |  2 ++
 static/images/icons/icon-windows.svg |  1 +
 templates/index.html                 | 21 ++++++++++++++-------
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 static/images/icons/icon-windows.svg

diff --git a/sass/css/_base.scss b/sass/css/_base.scss
index ac8f359..cd787da 100644
--- a/sass/css/_base.scss
+++ b/sass/css/_base.scss
@@ -225,6 +225,8 @@ ul:not(.navbar-nav) li {
     &:after {
       align-self: center;
     }
+  }
+  button {
     &[aria-expanded='true']:after {
       transform: rotate(-180deg);
     }
diff --git a/static/images/icons/icon-windows.svg b/static/images/icons/icon-windows.svg
new file mode 100644
index 0000000..f6432e3
--- /dev/null
+++ b/static/images/icons/icon-windows.svg
@@ -0,0 +1 @@
+<svg width="48" height="48" version="1.1" viewBox="0 0 12.7 12.7" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" stroke-linecap="round" stroke-opacity=".6" stroke-width=".35269"><path d="m0.52917 0.52917h5.5563v5.5563h-5.5563z"/><path d="m6.6146 0.52917h5.5563v5.5563h-5.5563z"/><path d="m0.52917 6.6146h5.5563v5.5563h-5.5563z"/><path d="m6.6146 6.6146h5.5563v5.5563h-5.5563z"/></g></svg>
diff --git a/templates/index.html b/templates/index.html
index ce7ec9e..4afcd58 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -53,22 +53,29 @@
               <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="{{ get_url(path='@/experiment-control/artiq.md') }}" class="btn btn-primary btn-lg">More...</a>
               <div class="btn-group download-selector">
-                <a class="btn btn-primary btn-lg" href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1">
-                  <img src="/images/icons/icon-download.svg" class="d-inline-block align-self-center mx-1" style="height: 1rem" alt="download">
-                  Windows installer
+                <a class="btn btn-primary btn-lg d-inline-flex" href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1">
+                  <img src="/images/icons/icon-windows.svg" class="d-inline-block align-self-center mx-1" style="height: 1rem" alt="windows">
+                  <span class="d-inline-block">Download <sup>.exe</sup></span>
                 </a>
                 <div class="divider"></div>
                 <button type="button" class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                   <span>stable</span>
                 </button>
                 <ul class="dropdown-menu shadow dropdown-menu-end">
-                  <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>
+                  <li>
+                    <a class="dropdown-item" href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1">
+                    ARTIQ-8 (stable) for Windows
+                    </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) for Windows
+                    </a>
+                  </li>
                 </ul>
               </div>
-              <a href="{{ get_url(path='@/experiment-control/artiq.md') }}" class="btn btn-primary btn-lg">More...</a>
-
             </div>
 
           </div>