The brewing advice is several hundred characters. In a table cell it pushed the table past the width of a phone, so the column was clipped off the right edge and the advice could not be read without sideways scrolling. The advice is now a compact trigger in the cell and the text is in a floating panel that opens on hover (desktop) or on tap (phone). The panel is position:fixed and anchored by the script. Absolutely positioned inside the cell it was clipped by the table's own scroll container, and the advice was sliced in half by the card's edge. It flips above the trigger when there is no room below. The tables now reflow into stacked cards on a narrow screen, with each value labelled by its column name. A seven column table does not fit a phone, and it used to scroll sideways inside its wrapper, so the columns on the right were off the screen. Also: the header wraps onto two rows so the nav tabs are not clipped, the point scale says 'points' rather than 'pts', and the reading count on the beer card does not orphan its word.
139 lines
5.7 KiB
HTML
139 lines
5.7 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Active Beers — Brew Log{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page__head">
|
|
<div>
|
|
<h1 class="page__title">Active Beers</h1>
|
|
<p class="page__sub">Everything currently in the fermenter, with its tap and projected strength.</p>
|
|
</div>
|
|
<div class="btn-row">
|
|
<a class="btn btn--ghost btn--sm" href="{{ url_for('brews.index') }}">Record a reading</a>
|
|
<a class="btn btn--ghost btn--sm" href="{{ url_for('analysis.history') }}">History</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid--3 mb-lg">
|
|
<div class="stat">
|
|
<div class="stat__label">Active brews</div>
|
|
<div class="stat__value">{{ totals.count }}</div>
|
|
<div class="stat__meta">in the fermenter now</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat__label">Average age</div>
|
|
<div class="stat__value">{{ totals.avg_days }}</div>
|
|
<div class="stat__meta">day{{ '' if totals.avg_days == '1' else 's' }} since first reading</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat__label">Longest running</div>
|
|
<div class="stat__value">{{ totals.longest_days if totals.longest_days is not none else '—' }}</div>
|
|
<div class="stat__meta">day{{ '' if totals.longest_days == 1 else 's' }} in the fermenter</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if cards %}
|
|
<div class="grid grid--cards">
|
|
{% for run in cards %}
|
|
<article class="brew-card">
|
|
<div class="brew-card__head">
|
|
<div>
|
|
<h2 class="brew-card__name">
|
|
<a href="{{ url_for('brews.run_detail', run_id=run.beer_run_id) }}">{{ run.canonical_name }}</a>
|
|
</h2>
|
|
<div class="brew-card__meta">
|
|
Run {{ run.beer_run_id }}
|
|
{% if run.first_date %} · since {{ run.first_date }}{% endif %}
|
|
{% if run.reading_count == 1 %} · 1 reading{% else %} · {{ run.reading_count }} readings{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if run.tap_number is not none %}
|
|
<span class="chip chip--tap">Tap {{ run.tap_number }}</span>
|
|
{% else %}
|
|
<span class="chip chip--active">Active</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="brew-card__stats">
|
|
<div class="brew-card__stat">
|
|
<div class="stat__label">Gravity</div>
|
|
<div class="stat__value">
|
|
{% if run.min_sg is not none %}{{ run.min_sg_decimal }}{% else %}—{% endif %}
|
|
</div>
|
|
{% if run.min_sg is not none %}
|
|
<div class="stat__meta">{{ run.min_sg_point_scale }} points</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="brew-card__stat">
|
|
<div class="stat__label">Est. ABV</div>
|
|
<div class="stat__value">
|
|
{% if run.projected_abv is not none %}{{ '%.2f' % run.projected_abv }}%{% else %}—{% endif %}
|
|
</div>
|
|
<div class="stat__meta">
|
|
{% if run.projected_abv is not none %}projected{% else %}needs 2nd reading{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="brew-card__stat">
|
|
<div class="stat__label">Days</div>
|
|
<div class="stat__value">
|
|
{% if run.days_in_fermenter is not none %}{{ run.days_in_fermenter }}{% else %}—{% endif %}
|
|
</div>
|
|
<div class="stat__meta">day{{ '' if run.days_in_fermenter == 1 else 's' }} brewing</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if run.readings | length > 1 %}
|
|
<div class="brew-card__spark">
|
|
<canvas class="sparkline"
|
|
data-labels='{{ run.readings | map(attribute="date") | list | tojson }}'
|
|
data-values='{{ run.readings | map(attribute="sg") | list | tojson }}'></canvas>
|
|
</div>
|
|
{% else %}
|
|
<div class="brew-card__spark brew-card__spark--empty faint tiny">
|
|
One reading so far — the trend appears after the next one.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if run.last_comment %}
|
|
<div class="small muted">
|
|
<strong class="faint tiny">Latest:</strong> {{ run.last_comment }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if run.advice %}
|
|
<div class="advice advice--reading{% if not run.advice_ok %} advice--failed{% endif %}">
|
|
<span class="advice__label">Brewing advice</span>
|
|
{{ run.advice }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="btn-row">
|
|
<a class="btn btn--ghost btn--sm"
|
|
href="{{ url_for('brews.run_detail', run_id=run.beer_run_id) }}">Open run</a>
|
|
<a class="btn btn--sm" href="{{ url_for('brews.index') }}">Add reading</a>
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
|
|
{# A tile that fills the last slot and gives the page its missing
|
|
affordance: there is currently no way to start a brew from here. #}
|
|
<a class="brew-card brew-card--new" href="{{ url_for('brews.index') }}">
|
|
<span class="brew-card__new-mark" aria-hidden="true">+</span>
|
|
<span class="brew-card__new-text">
|
|
<strong>Start a new beer</strong>
|
|
<span class="faint tiny">Record its first reading</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="card">
|
|
<div class="empty">
|
|
<img class="empty__icon" src="{{ url_for('static', filename='img/logo.svg') }}" alt="" width="40" height="40">
|
|
<p><strong>Nothing in the fermenter.</strong></p>
|
|
<p class="small">Start a run by recording its first reading on the
|
|
<a href="{{ url_for('brews.index') }}">brew process page</a>.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|