Skip to content

Restructure looks of compare.html site #782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 10, 2020
+16 −13
Merged

Restructure looks of compare.html site #782

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1228e59
Make compare.settings a form
tesuji Oct 2, 2020
e247495
Set page max-width at 800px
tesuji Oct 2, 2020
f762dde
add lame responsive support for mobile devices
tesuji Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions site/static/compare.html
View file
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It always worked fairly okay for me already on mobile, what sort of improvement does this bring?

Copy link
Contributor Author

@tesuji tesuji Oct 9, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is current page on mobile, we have to zoon in to view the page.

Old change

Screen Shot 2020-10-09 at 09 40 55

With this meta tag, we don't. MDN wrote something about this: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#The_viewport_meta_tag

So you should always include the above line of HTML in the head of your documents.

<title>rustc performance data</title>
<link rel="stylesheet" type="text/css" href="perf.css">
<link rel="alternate icon" type="image/png" href="/favicon-32x32.png">
@@ -18,7 +19,7 @@
}
</style>
</head>
<body class="container">
<body class="container" style="max-width:800px">
<div>&gt; <a href="index.html">graphs</a>, <a href="compare.html">compare</a>,
<a href="dashboard.html">dashboard</a>, <a href="bootstrap.html">bootstrap</a>,
<a href="status.html">status</a>.</div>
@@ -46,18 +47,20 @@ <h3>Cache states</h3>
</ul>
</div>
<div id="content" style="display: none"></div>
<div id="settings">
<div id="commits" class="settings" style="text-align:left;">
<h3>Commits</h3>
Commit/Date A: <input width="100em" placeholder="YYYY-MM-DD or SHA" id="start-bound" /><br>
Commit/Date B: <input width="100em" placeholder="YYYY-MM-DD or SHA" id="end-bound" /><br>
<select id='stats' name="stat">
</select>
<div class="submit">
<a href="#" onClick="submit_settings(); return false;">Submit</a>
</div>
</div>
</div>
<form id="settings" action="">
<fieldset id="commits">
<legend>Commits</legend>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe you could adjust the legend to eg "Select comparision" or "Choose commits to compare" ?

<label for="start-bound">Commit/Date A:</label>
<input width="100em" placeholder="YYYY-MM-DD or SHA" id="start-bound" /><br>
<label for="end-bound">Commit/Date B:</label>
<input width="100em" placeholder="YYYY-MM-DD or SHA" id="end-bound" /><br>
</fieldset>
<label for="stats">Choose a comparison method:</label>
<select id='stats' name="stat">
</select><br>
<input type="submit" value="Submit" onclick="submit_settings(); return false;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd include the buttons in the fieldset so the box is drawn around all of it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have strong preference. To be honest, I'm not a web dev. This PR is result of googling around
plus some web basic knowledge. I'd leave it to maintainer to decide.

</form>
<br>
<div id="as-of"></div>
<a href="https://github.com/rust-lang-nursery/rustc-perf">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">