Skip to content

Commit

Permalink
Use simple content blocks for prototype and classic quicktips section…
Browse files Browse the repository at this point in the history 
…s if feature flag is enabled
  • Loading branch information
@rstorey
rstorey committed Jun 13, 2019
1 parent 9f844fb commit 3a969bf
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 84 deletions.
6 changes: 5 additions & 1 deletion concordia/settings_template.py
View file
Expand Up @@ -310,7 +310,11 @@
DEFAULT_PAGE_TTL = 5 * 60

# Feature flag for social share
FLAGS = {"ACTIVITY_UI_ENABLED": [], "ADVERTISE_ACTIVITY_UI": []}
FLAGS = {
"ACTIVITY_UI_ENABLED": [],
"ADVERTISE_ACTIVITY_UI": [],
"SIMPLE_CONTENT_BLOCKS": [],
}
ASGI_APPLICATION = "concordia.routing.application"

CHANNEL_LAYERS = {
Expand Down
157 changes: 82 additions & 75 deletions concordia/templates/action-app.html
View file
@@ -1,6 +1,8 @@
{% extends "base.html" %}

{% load concordia_sharing_tags %}
{% load feature_flags %}
{% load simple_content_block %}

{% load staticfiles %}

Expand Down Expand Up @@ -77,6 +79,7 @@
{% block site-footer %}{% endblock site-footer %}

{% block site-main %}
{% flag_enabled 'SIMPLE_CONTENT_BLOCKS' as SIMPLE_CONTENT_BLOCKS %}
{% csrf_token %}
<header id="action-app-header">
<nav id="action-app-global-controls" class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
Expand Down Expand Up @@ -240,81 +243,85 @@ <h5 class="modal-title"><span class="asset-title">More Information</span></h5>
<button id="load-more-assets" class="btn btn-secondary btn-block btn-sm">Load more…</button>
</div>
<aside id="help-panel" role="tabpanel" aria-labelledby="help-toggle" hidden>
<h2 class="sr-only">Help</h2>
<section>
<h3>Transcription tips</h3>
<ul>
<li>Type what you see: Preserve line breaks, original spelling, and punctuation.</li>
<li>Use brackets [ ] around deleted, illegible or partially legible text.</li>
<li>Use question mark ? for any words or letters you can't identify.</li>
<li>Use square brackets and asterisks [ * * ] around text from margins.</li>
<li>Include insertions where you would read them in the text.</li>
<li>Click “Save” to save work in progress and “Submit” when complete</li>
</ul>
</section>
<hr />
<section>
<h3>Review tips</h3>
<ul>
<li>Carefully compare each line of the transcription to the original.</li>
<li>Use “Transcription tips” as a guide.</li>
<li>Click “Accept” if accurate or “Edit” if page needs correction.</li>
</ul>
</section>
<hr />
<section>
<h3 class="sr-only">More information</h3>
<p>
Find more detailed instructions in the <a href="{% url 'help-center' %}" target="_blank">Help Center</a>
</p>
</section>
<hr />
<section>
<h3>Keyboard Shortcuts</h3>
<ul class="list-unstyled d-table">
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>w</kbd> or <kbd>up</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2 w-60">Scroll the viewport up</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>s</kbd> or <kbd>down</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Scroll the viewport down</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>a</kbd> or <kbd>left</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Scroll the viewport left</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>d</kbd> or <kbd>right</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Scroll the viewport right</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>0</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Fit the entire image to the viewport</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>-</kbd> or <kbd>_</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Zoom the viewport out</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>=</kbd> or <kbd>+</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Zoom the viewport in</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>r</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Rotate the viewport clockwise</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>R</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Rotate the viewport counterclockwise</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>f</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Flip the viewport horizontally</div>
</li>
</ul>
</section>

{% if SIMPLE_CONTENT_BLOCKS %}
{% simple_content_block "prototype_quicktips" as content_block %}
{{ content_block|safe }}
{% else %}
<h2 class="sr-only">Help</h2>
<section>
<h3>Transcription tips</h3>
<ul>
<li>Type what you see: Preserve line breaks, original spelling, and punctuation.</li>
<li>Use brackets [ ] around deleted, illegible or partially legible text.</li>
<li>Use question mark ? for any words or letters you can't identify.</li>
<li>Use square brackets and asterisks [ * * ] around text from margins.</li>
<li>Include insertions where you would read them in the text.</li>
<li>Click “Save” to save work in progress and “Submit” when complete</li>
</ul>
</section>
<hr />
<section>
<h3>Review tips</h3>
<ul>
<li>Carefully compare each line of the transcription to the original.</li>
<li>Use “Transcription tips” as a guide.</li>
<li>Click “Accept” if accurate or “Edit” if page needs correction.</li>
</ul>
</section>
<hr />
<section>
<h3 class="sr-only">More information</h3>
<p>
Find more detailed instructions in the <a href="{% url 'help-center' %}" target="_blank">Help Center</a>
</p>
</section>
<hr />
<section>
<h3>Keyboard Shortcuts</h3>
<ul class="list-unstyled d-table">
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>w</kbd> or <kbd>up</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2 w-60">Scroll the viewport up</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>s</kbd> or <kbd>down</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Scroll the viewport down</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>a</kbd> or <kbd>left</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Scroll the viewport left</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>d</kbd> or <kbd>right</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Scroll the viewport right</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>0</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Fit the entire image to the viewport</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>-</kbd> or <kbd>_</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Zoom the viewport out</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>=</kbd> or <kbd>+</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Zoom the viewport in</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>r</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Rotate the viewport clockwise</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>R</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Rotate the viewport counterclockwise</div>
</li>
<li class="d-table-row">
<div class="d-table-cell align-middle border-top py-2"><kbd>f</kbd></div>
<div class="d-table-cell align-middle border-top py-2 pl-2">Flip the viewport horizontally</div>
</li>
</ul>
</section>
{% endif %}
</aside>
</main>
{% endblock site-main %}
23 changes: 15 additions & 8 deletions concordia/templates/transcriptions/asset_detail.html
View file
Expand Up @@ -4,6 +4,7 @@
{% load concordia_media_tags %}
{% load concordia_sharing_tags %}
{% load feature_flags %}
{% load simple_content_block %}

{% block title %}
{{ asset.title }} ({{ asset.item.project.campaign.title }}: {{ asset.item.project.title }})
Expand All @@ -30,6 +31,7 @@

{% block main_content %}
{% flag_enabled 'ADVERTISE_ACTIVITY_UI' as ADVERTISE_ACTIVITY_UI %}
{% flag_enabled 'SIMPLE_CONTENT_BLOCKS' as SIMPLE_CONTENT_BLOCKS %}

{% if ADVERTISE_ACTIVITY_UI and activity_mode %}
<div class="alert alert-dark alert-dismissible w-100 text-center" id="new-interface-banner" role="alert" hidden>
Expand Down Expand Up @@ -306,14 +308,19 @@ <h2>Tags</h2>
<span aria-hidden="true">&times;</span>
</button>
<div>
<ul>
<li>Transcribe original spelling, punctuation, word order, and any page numbers or catalog marks.</li>
<li>Preserve line breaks except when a word breaks over a line or page. Then transcribe it on the line or page where it starts.</li>
<li>Use brackets [ ] around deleted, illegible or partially legible text, and square brackets and asterisks around text in margins [ * * ].</li>
<li>Transcribe any words or letters you can't identify as [?].</li>
<li>Include insertions where you would read them in the text.</li>
</ul>
Find more detailed instructions in the <a href="{% url 'help-center' %}">Help Center</a>
{% if SIMPLE_CONTENT_BLOCKS %}
{% simple_content_block "classic_quicktips" as content_block%}
{{ content_block|safe }}
{% else %}
<ul>
<li>Transcribe original spelling, punctuation, word order, and any page numbers or catalog marks.</li>
<li>Preserve line breaks except when a word breaks over a line or page. Then transcribe it on the line or page where it starts.</li>
<li>Use brackets [ ] around deleted, illegible or partially legible text, and square brackets and asterisks around text in margins [ * * ].</li>
<li>Transcribe any words or letters you can't identify as [?].</li>
<li>Include insertions where you would read them in the text.</li>
</ul>
Find more detailed instructions in the <a href="{% url 'help-center' %}">Help Center</a>
{% endif %}
</div>
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions concordia/templatetags/simple_content_block.py
View file
@@ -0,0 +1,11 @@
from django import template

from ..models import SimpleContentBlock

register = template.Library()


@register.simple_tag()
def simple_content_block(block_label):
content_block = SimpleContentBlock.objects.get(label=block_label)
return content_block.body

0 comments on commit 3a969bf

Please sign in to comment.