esavkin
/
web2019
forked from M-Labs/web2019
1
0
Fork 0
Code Pull Requests 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>