Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upShow build dates #63
Show build dates #63
Conversation
|
The only issue is that it's a bit ugly and it overlaps with the checksum links. I originally wanted to add an additional column next to the checksums, but the Bootstrap columns don't work with that. Open to suggestions! |
|
This is what it looks like:
|
|
r? @jdm |
|
Actually, there's one other issue: the date doesn't display immediately so each button flickers once on load. |
|
@jdm What do you think?
|
|
I was thinking of showing the checksums in the same table, but they took up too much space and messed up the alignment. |
|
Alternatively, I could put the build info table below the installation instructions, but it might mess up the styling of some other things. |
|
Sorry for not providing feedback sooner. What about a design based on the following changes? diff --git a/index.html b/index.html
index bf78455..5d68cb1 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,16 @@
<link rel="stylesheet" href="/css/style.css"
integrity="sha512-FQmucuHzxei8VvCDQqa5fJIzNaRw/q1pC3UTgQ94WNNws9Tt0A0egUWHxX7K5QNRZJJS53L9tTrLz0fDEqFdjA=="
crossorigin="anonymous"/>
+ <style>
+.builddate > p {
+ margin-top: 1em;
+ line-height: 1.42857143;
+ height: 34px;
+ vertical-align: middle;
+ margin-bottom: 0;
+ padding: 6px 12px;
+}
+ </style>
</head>
<body>
@@ -41,24 +51,24 @@ investing in formal security audits and improving our security practices using
both existing libraries and Rust -- more information coming soon!
</p>
</div>
- <div class="col-sm-8 col-lg-4 col-sm-push-2 col-lg-push-0">
- <span class="col-sm-8 col-sm-push-0">
+ <div class="col-sm-8 col-lg-4 col-lg-push-0">
+ <span class="col-sm-4 scol-sm-push-0">
<a class="btn btn-primary btn-large" role="button"
- href="nightly/windows-msvc/servo-latest.exe">Windows Build Installer (64-bit)</a><br>
+ href="nightly/windows-msvc/servo-latest.exe">Windows x64 (MSI)</a><br>
<a class="btn btn-primary btn-large" role="button"
- href="nightly/windows-msvc/servo-latest.zip">Windows Build (64-bit)</a><br>
+ href="nightly/windows-msvc/servo-latest.zip">Windows x64 (ZIP)</a><br>
<a class="btn btn-primary btn-large" role="button"
- href="nightly/uwp/servo-latest.zip">UWP Build</a><br>
+ href="nightly/uwp/servo-latest.zip">UWP (arm64/x64)</a><br>
<a class="btn btn-primary btn-large" role="button"
- href="nightly/mac/servo-latest.dmg">macOS Build</a><br>
+ href="nightly/mac/servo-latest.dmg">macOS x64</a><br>
<a class="btn btn-primary btn-large" role="button"
- href="nightly/linux/servo-latest.tar.gz">Linux Build (64-bit)</a><br>
+ href="nightly/linux/servo-latest.tar.gz">Linux x64</a><br>
</span>
- <span class="col-sm-push">
+ <span class="col-sm-4 col-sm-push-1">
<a class="btn" href="nightly/windows-msvc/servo-latest.exe.sha256">sha256</a><br>
<a class="btn" href="nightly/windows-msvc/servo-latest.zip.sha256">sha256</a><br>
@@ -69,6 +79,13 @@ both existing libraries and Rust -- more information coming soon!
<a class="btn" href="nightly/linux/servo-latest.tar.gz.sha256">sha256</a><br>
</span>
+ <span class="col-sm-push-2 builddate">
+ <p sclass="builddate" style="margin-top: 1em; line-height: 1.42857143; vertical-align: middle; margin-bottom: 0; padding: 6px 12px;" sclass="btn">2020-06-13</p>
+ <p sclass="btn">2020-06-13</p>
+ <p sclass="btn">2020-06-13</p>
+ <p sclass="btn">2020-06-13</p>
+ <p sclass="btn">2020-06-13</p>
+ </span>
</div>
</div>
<div class="row">This yields: |
|
No worries :) I definitely think that no matter what style we choose for the build dates, having shorter text for the buttons is a good idea since it makes them easier to read. For me, it feels a little busy to have the download buttons, the hash, and the build dates packed tightly together. I think we should have at most one thing next to the download button, and I would prefer none. Another advantage to doing a "build info" table is that we could load the first several characters of the hash into it, where it would be easier for people to check. If we do choose the styling you're suggesting, I think the hashes and the build dates should be swapped, since the build date seems more tightly attached in my mind. Let me know what you think. |
|
Maybe we should just say "all builds are 64-bit," rather than saying it for each build? |
|
The uwp build is both arm64 and x64, so it's not quite correct. |
|
I'm convinced to give your design a try. Do you want to move the sha links away from the download buttons and into the new table instead? |
Although those are still both 64-bit. Maybe we say something like:
|
|
Actually, how can it be both arm64 and x64? Isn't the machine code incompatible? |
Yes, that's what I was thinking. My idea is something like: (this is a mockup)
|
It's an app package that includes builds for both targets. |
|
Here's what I have so far:
|
This displays the first 16 characters of the hash in the table and links to the hash as well.
| <table class="table" id="build-info"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Platform</th> | ||
| <th scope="col">Build date</th> | ||
| <th scope="col">SHA-256</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">Windows Installer</th> | ||
| <td id="date-windows-exe">?</td> | ||
| <td> | ||
| <a id="sha256-windows-exe" href="nightly/windows-msvc/servo-latest.exe.sha256">sha256</a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">Windows Zip</th> | ||
| <td id="date-windows-zip">?</td> | ||
| <td> | ||
| <a id="sha256-windows-zip" href="nightly/windows-msvc/servo-latest.zip.sha256">sha256</a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">UWP</th> | ||
| <td id="date-uwp">?</td> | ||
| <td> | ||
| <a id="sha256-uwp" href="nightly/uwp/servo-latest.zip.sha256">sha256</a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">macOS</th> | ||
| <td id="date-macos">?</td> | ||
| <td> | ||
| <a id="sha256-macos" href="nightly/mac/servo-latest.dmg.sha256">sha256</a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">Linux</th> | ||
| <td id="date-linux">?</td> | ||
| <td> | ||
| <a id="sha256-linux" href="nightly/linux/servo-latest.tar.gz.sha256">sha256</a> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
This comment has been minimized.
This comment has been minimized.
camelid
Jun 19, 2020
Author
Contributor
One issue is that the build dates column's position flickers when the dates load. Is there something wrong with my Bootstrap code?
This comment has been minimized.
This comment has been minimized.
camelid
Jun 19, 2020
Author
Contributor
I also don't love that the row lines extend unnecessarily to the right. I'd prefer that they aren't there at all, or that they're at least equal on the two sides. I'm relatively inexperienced with Bootstrap, so I'm not sure how to fix it.
This comment has been minimized.
This comment has been minimized.
camelid
Jun 19, 2020
Author
Contributor
I think the hashes should probably in a code block, but when I tried that, the link styling looked weird. Maybe I should create a custom class for a plain code block (like the GitHub ones)?
This comment has been minimized.
This comment has been minimized.
jdm
Jun 19, 2020
Member
I don't know anything about using bootstrap, so I won't be able to meaningfully assist with the styling issues.
|
What do you think in terms of the number of digits of the hash to show? I'm currently showing 16 (8 bytes, or 25% of the total hash). Compare that to GitHub, which shows 7 characters (3.5 bytes, or 17.5% of a SHA-1 hash). Also, trailing ellipsis or not? I'm open to suggestions! |
|
I think what's shown in the screenshot looks reasonable to me. I'm going to go ahead and merge as-is. |
|
Okay, great! |
|
Thanks for reviewing this :) |
camelid commentedMay 29, 2020
•
edited
Show build dates for each build using XMLHttpRequests.
Resolves #11.