Skip to content

Commit

Permalink
Denser detail head
Browse files Browse the repository at this point in the history
  • Loading branch information
@scheb
scheb committed Mar 9, 2024
1 parent db62c01 commit e8e334a
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 66 deletions.
13 changes: 11 additions & 2 deletions web_app/static/scss/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
}

.detail-alias {
margin-top:-0.25rem;
margin-bottom: 0.5rem;
margin-top:-0.33rem;
margin-bottom: 0.75rem;
font-size: 0.75rem;
--bs-text-opacity: 1;
color: var(--bs-secondary-color) !important;
Expand All @@ -20,6 +20,15 @@
}
}

.detail-summary {
margin-bottom: 1rem;

.detail-info,
.badge-list {
margin-bottom: 0.5rem;
}
}

dl.detail-info {
display: flex;
flex-wrap: wrap;
Expand Down
130 changes: 66 additions & 64 deletions web_app/templates/hop/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,76 +22,78 @@ <h1>{{ hop.name }} Hops</h1>
{% endspaceless %}{% endif %}
</header>

<dl class="detail-info">
<dt>Recipes:</dt>
<dd>{{ hop.recipes_count }}</dd>
<dt>Purpose:</dt>
<dd>{{ hop.category_name }}</dd>
<div class="detail-summary">
<dl class="detail-info">
<dt>Recipes:</dt>
<dd>{{ hop.recipes_count }}</dd>
<dt>Purpose:</dt>
<dd>{{ hop.category_name }}</dd>

{% if hop.recipes_alpha_mean %}
<dt>Alpha:</dt>
<dd>{{ hop.alpha_level|title }}</dd>
{% endif %}
{% if hop.recipes_alpha_mean %}
<dt>Alpha:</dt>
<dd>{{ hop.alpha_level|title }}</dd>
{% endif %}

{% if hop.origin_countries|length > 0 %}
<dt>Origin:</dt>
<dd>{% for origin in hop.origin_countries %}{% if forloop.counter0 %}, {% endif %}{{ origin.flag }} {{ origin.name }}{% endfor %}</dd>
{% endif %}
</dl>
{% if hop.origin_countries|length > 0 %}
<dt>Origin:</dt>
<dd>{% for origin in hop.origin_countries %}{% if forloop.counter0 %}, {% endif %}{{ origin.flag }} {{ origin.name }}{% endfor %}</dd>
{% endif %}
</dl>

<div class="d-flex flex-column d-lg-block">
{% if hop.recipes_count %}
<nav class="toc toc-align order-last">
<h2 class="toc-headline">Table of Contents</h2>
<ol>
<li class="d-lg-none"><a href="#profile" data-interaction="Hops:Click TOC:$label">Profile</a></li>
<li><a href="#characteristics" data-interaction="Hops:Click TOC:$label">Characteristics</a>
<li><a href="#popularity" data-interaction="Hops:Click TOC:$label">Popularity Over Time</a>
<li><a href="#styles-percent-recipes" data-interaction="Hops:Click TOC:$label">Popularity within Beer Styles</a>
<li><a href="#styles-number-recipes" data-interaction="Hops:Click TOC:$label">Common Beer Styles</a>
<li><a href="#style-amount" data-interaction="Hops:Click TOC:$label">Dosage per Style</a>
<li><a href="#usage-amount" data-interaction="Hops:Click TOC:$label">Dosage per Use</a>
<li><a href="#hop-pairings" data-interaction="Hops:Click TOC:$label">Hop Pairings</a>
<li><a href="#most-used-yeasts" data-interaction="Hops:Click TOC:$label">Most Used Yeasts</a>
<li><a href="#trending-yeasts" data-interaction="Hops:Click TOC:$label">Trending Yeasts</a>
<li><a href="#recipes" data-interaction="Hops:Click TOC:$label">Brewing Recipes</a>
</ol>
</nav>
{% endif %}

{% if hop.accessible_substitutes.count %}{% spaceless %}
<figure class="badge-list">
<figcaption>Substitutes:</figcaption>
<ul>
{% for substitute in hop.accessible_substitutes %}
<li><a href="{{ substitute|url }}" class="badge bg-primary">{{ substitute.name }}</a></li>
{% endfor %}
</ul>
</figure>
{% endspaceless %}{% endif %}

{% if hop.significant_pairings.count %}{% spaceless %}
<figure class="badge-list">
<figcaption>Pairings:</figcaption>
<div class="d-flex flex-column d-lg-block">
{% if hop.recipes_count %}
<nav class="toc toc-align order-last">
<h2 class="toc-headline">Table of Contents</h2>
<ol>
{% for pairing in hop.significant_pairings %}
<li><a href="{{ pairing.paired_hop|url }}" class="badge bg-secondary">{{ pairing.paired_hop.name }}</a></li>
{% endfor %}
<li class="d-lg-none"><a href="#profile" data-interaction="Hops:Click TOC:$label">Profile</a></li>
<li><a href="#characteristics" data-interaction="Hops:Click TOC:$label">Characteristics</a>
<li><a href="#popularity" data-interaction="Hops:Click TOC:$label">Popularity Over Time</a>
<li><a href="#styles-percent-recipes" data-interaction="Hops:Click TOC:$label">Popularity within Beer Styles</a>
<li><a href="#styles-number-recipes" data-interaction="Hops:Click TOC:$label">Common Beer Styles</a>
<li><a href="#style-amount" data-interaction="Hops:Click TOC:$label">Dosage per Style</a>
<li><a href="#usage-amount" data-interaction="Hops:Click TOC:$label">Dosage per Use</a>
<li><a href="#hop-pairings" data-interaction="Hops:Click TOC:$label">Hop Pairings</a>
<li><a href="#most-used-yeasts" data-interaction="Hops:Click TOC:$label">Most Used Yeasts</a>
<li><a href="#trending-yeasts" data-interaction="Hops:Click TOC:$label">Trending Yeasts</a>
<li><a href="#recipes" data-interaction="Hops:Click TOC:$label">Brewing Recipes</a>
</ol>
<small class="ms-1 text-nowrap">☞ <a href="#hop-pairings" data-interaction="Hops:Click See Dosage">See Dosage</a></small>
</figure>
{% endspaceless %}{% endif %}
</nav>
{% endif %}

{% if hop.aroma_tags.count %}{% spaceless %}
<figure class="badge-list">
<figcaption>Flavor:</figcaption>
<ul>
{% for tag in hop.aroma_tags.all %}
<li><a href="{% url "hop_flavor_detail" tag.id %}" class="badge bg-{{ tag.category }}">{{ tag.name }}</a></li>
{% endfor %}
</ul>
</figure>
{% endspaceless %}{% endif %}
{% if hop.accessible_substitutes.count %}{% spaceless %}
<figure class="badge-list">
<figcaption>Substitutes:</figcaption>
<ul>
{% for substitute in hop.accessible_substitutes %}
<li><a href="{{ substitute|url }}" class="badge bg-primary">{{ substitute.name }}</a></li>
{% endfor %}
</ul>
</figure>
{% endspaceless %}{% endif %}

{% if hop.significant_pairings.count %}{% spaceless %}
<figure class="badge-list">
<figcaption>Pairings:</figcaption>
<ol>
{% for pairing in hop.significant_pairings %}
<li><a href="{{ pairing.paired_hop|url }}" class="badge bg-secondary">{{ pairing.paired_hop.name }}</a></li>
{% endfor %}
</ol>
<small class="ms-1 text-nowrap">☞ <a href="#hop-pairings" data-interaction="Hops:Click See Dosage">See Dosage</a></small>
</figure>
{% endspaceless %}{% endif %}

{% if hop.aroma_tags.count %}{% spaceless %}
<figure class="badge-list">
<figcaption>Flavor:</figcaption>
<ul>
{% for tag in hop.aroma_tags.all %}
<li><a href="{% url "hop_flavor_detail" tag.id %}" class="badge bg-{{ tag.category }}">{{ tag.name }}</a></li>
{% endfor %}
</ul>
</figure>
{% endspaceless %}{% endif %}
</div>
</div>

<h2 class="d-lg-none">
Expand Down

0 comments on commit e8e334a

Please sign in to comment.