M-Labs
/
web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

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>
This commit is contained in:
Egor Savkin 2024-10-21 17:46:40 +08:00
parent 9d9a4c9f5a
commit f29807a913
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/css/_base.scss
View File

@ -225,6 +225,8 @@ ul:not(.navbar-nav) li {
&:after { &:after {
align-self: center; align-self: center;
} }
}
button {
&[aria-expanded='true']:after { &[aria-expanded='true']:after {
transform: rotate(-180deg); transform: rotate(-180deg);
} }

1
static/images/icons/icon-windows.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

21
templates/index.html
View File

@ -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="{{ 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://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://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"> <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"> <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-download.svg" class="d-inline-block align-self-center mx-1" style="height: 1rem" alt="download"> <img src="/images/icons/icon-windows.svg" class="d-inline-block align-self-center mx-1" style="height: 1rem" alt="windows">
Windows installer <span class="d-inline-block">Download <sup>.exe</sup></span>
</a> </a>
<div class="divider"></div> <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"> <button type="button" class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span>stable</span> <span>stable</span>
</button> </button>
<ul class="dropdown-menu shadow dropdown-menu-end"> <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>
<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> <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> </ul>
</div> </div>
<a href="{{ get_url(path='@/experiment-control/artiq.md') }}" class="btn btn-primary btn-lg">More...</a>
</div> </div>
</div> </div>