[OMBU-821] Restyle the app, mobile first, with a copy-as-markdown block - #22
Merged
Conversation
The app had one font-family rule and no other styling. This gives it a layout that follows fastruby.io: Oxygen for text, Source Code Pro for anything numeric, square corners, and the brand palette as custom properties in application.css. Adds a masthead, a page shell and a colophon to the layout, plus the Google Fonts link. The home page becomes a hero, a terminal block showing the two commands, and the FAQ as a definition-style grid rather than a bare <ul>. The report page keeps its table and gains an environment row (ruby / os / arch, which the model already stored but nothing displayed), a rail and tag marking the fastest entry instead of bare bold, and a markdown block to paste into an issue. The block sits under the table rather than replacing it, so the URL stays the primary way to share. It uses user-select: all so a click selects the whole snippet, which avoids adding the first JavaScript to the app. report_markdown and report_environment do the formatting. The snippet mirrors what the page shows: the fastest row is bolded, the slower column only appears for comparison reports, and the environment line is omitted for older reports that predate those fields. Tests updated for the new markup, plus share_snippet_test for the snippet itself. 24 runs, 63 assertions, green on Ruby 4.0.6 for both Rails versions. Verified assets:precompile still succeeds and both pages render.
External links now carry target="_blank" rel="noopener". Applied to all of them, not only the masthead GitHub link, so leaving the site behaves consistently. The footer keeps crediting Evan Phoenix, who wrote both this app and benchmark-ips, and now links his GitHub. The old FAQ said "Who made this? Evan Phoenix (evanphx) did. FastRuby.io maintains ..." and the footer is where that line now lives. Type scale up roughly one step throughout: body 16 to 17px with a little more line-height, wordmark 18 to 20px, home page h1 1.75 to 2.1rem, and the small monospace details (table names, deviations, hints, meta chips) each up about a pixel so they stay legible rather than decorative. db/seeds.rb creates three sample reports so the /:id page can be looked at without running a benchmark, covering the variations the view handles: a comparison report with a noisy entry, one without compare!, and one from an older client that sent no ruby/os/arch. It skips when reports already exist unless FORCE=1, and prints the paths it created.
The three breakpoints were max-width overrides on a desktop baseline. They are now min-width: 40em, with the small-screen values as the base, so the cascade runs the conventional direction. No visual change at either end: the same values apply, they are just declared the other way round. Fixes a real narrow-screen bug in passing. Both numeric columns in the results table are white-space: nowrap and the table had no overflow container, so on a phone the table pushed the page wider than the viewport and the body scrolled sideways. The table now sits in a .results-wrap with overflow-x: auto, which scrolls the table alone. The border moved to the wrapper so the scroll happens inside it. Also drops the two !important declarations on the rail cell, which existed only to win against the generic th/td padding. td.results__rail is specific enough. Mobile matters more than usual here: these links get opened from phones, in Slack and GitHub threads.
Accessibility and correctness, from a critical pass over the redesign:
- Benchmark names are arbitrary strings, and an unescaped pipe added a column to
the markdown table, breaking the row for anyone who pasted it. markdown_cell
escapes it.
- The deviation figures and the fastest row's slower cell used #999, which is
2.85:1 on white and fails WCAG AA at that size. --faint is #6b6b6b, 5.33:1.
- The report page had no heading at all, so the page carrying the content had no
document outline. "Shared report" is now an h1, and the page sets a title
naming the fastest entry.
- Noisy entries were marked by colour alone. They now say "high" in text.
- .results-wrap scrolls but could not be reached without a pointer. It takes
tabindex, role=region, a label, and a visible focus ring.
- The copy hint said "click", which is not what a phone does. It now says
"Select the block to copy it".
- Dropped the dead `environment =` assignment and the --line-soft token, which
was visually identical to --line.
Fonts are self-hosted, so no third-party request on first load. Latin subsets
only, and Source Code Pro is variable so one file covers every weight: 48KB for
all three. Declared in fonts.css.erb rather than SCSS so the asset paths do not
depend on the sass engine.
Removes code nothing reached:
app/assets/javascripts/* no view loads JS, and the manifest never linked
it; the requires named jquery and turbolinks,
which are not in the Gemfile
app/mailers, mailer layouts no mailer subclasses and nothing sends mail
app/helpers/application_helper.rb, docs_helper.rb empty modules
bin/spring spring is not in the Gemfile
.travis.yml, database.yml.travis CI runs on GitHub Actions
26 runs, 69 assertions, green on Ruby 4.0.6 for both Gemfiles. Boot and
assets:precompile verified, and the fonts are served from our own origin.
Removes sass-rails, and with it sassc-rails and sassc. sassc-ruby is archived and libsass is deprecated upstream, so the engine compiling this app's stylesheets was abandoned even though sass-rails reports as up to date. Nothing here needed Sass. The two stylesheets used `&__` concatenation, which is the one nesting feature native CSS cannot express, so they are now flat BEM selectors. sprockets-rails is declared directly, since sass-rails was the only thing pulling it in and config/application.rb requires sprockets/railtie. I previously reported this could not be done because sprockets 4.4 autoloads sassc regardless. That was wrong: when I tested it, one .scss file was still present, which is what pulled sassc in. With no .scss left, precompile is clean. Verified: 26 runs green on both Gemfiles, assets:precompile exits 0, all four pages render, and the compiled stylesheet still carries the font faces, the custom properties and all three breakpoints.
The usage block was a <pre>, so its lines had to start at column 0 or the indentation would have reached the rendered page as leading whitespace. Each line is its own element now, which lets the markup line up with everything around it. white-space: nowrap rather than pre, so the indentation inside each element is collapsed and the line still does not wrap. report_title replaces the inline interpolation, which produced "nokogiri parse and 0 others" for a single-entry report. One entry now titles as just the name.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Gives the app a layout. It had one
font-familyrule and nothing else, so the home page was a bare<ul>and the report page an unstyled table.Styling follows fastruby.io, read off the live site rather than guessed: Oxygen for text, Source Code Pro for anything numeric, square corners, and the brand palette as custom properties at the top of
application.css.Home page
A hero, a terminal block showing the two commands to run, and the FAQ as a grid instead of a bare list.
Report page
Keeps the table, and adds:
ruby / os / arch), which the model already stored but nothing ever displayedFASTESTtag on the winning entry, instead of bare bold<title>naming the fastest entry