Skip to content

Commit

Permalink
Merge pull request #788 from LibraryOfCongress/print-friendly-transcr…
Browse files Browse the repository at this point in the history 
…iptions

#734 Added print CSS and bootstrap print display utility classes to t…
  • Loading branch information
@rstorey
rstorey committed Jan 31, 2019
2 parents 754b299 + 3d91e1a commit 9533d2e
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 41 deletions.
51 changes: 51 additions & 0 deletions concordia/static/css/base.css
View file
Expand Up @@ -1212,3 +1212,54 @@ div.related-links {
#registration-form-container > .col-md-6 {
max-width: 30rem;
}

/* print */
@media print {
@page {
margin: 0.75in;
}
body {
border-style: none;
background-color: transparent;
font-size: 14pt;
}
header .navbar {
padding: 0;
background-color: transparent;
}
#navigation-container {
border-style: none;
padding: 0;
}
#contribute-container {
border-style: none;
}
#contribute-container #viewer-column .print-transcription-image {
height: 700px;
border: thin solid #ccc;
}
#contribute-container #viewer-column .print-transcription-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
#contribute-container .gutter-horizontal {
display: none;
}
#contribute-container #editor-column .tx-status-display {
font-size: 24px;
margin: 2rem 0;
}
#contribute-container #editor-column .print-transcription-text {
display: block !important;
white-space: pre-wrap;
color: #000;
}
#current-tags {
max-height: none;
}
#current-tags li {
background-color: transparent;
color: #000;
}
}
14 changes: 7 additions & 7 deletions concordia/templates/base.html
View file
Expand Up @@ -31,9 +31,9 @@
{% endif %}
</head>

<body class="view-{{ VIEW_NAME_FOR_CSS }} section-{{ PATH_LEVEL_1|default:'homepage' }} environment-{{ CONCORDIA_ENVIRONMENT }} {% block extra_body_classes %}{% endblock %}">
<body class="view-{{ VIEW_NAME_FOR_CSS }} section-{{ PATH_LEVEL_1|default:'homepage' }} environment-{{ CONCORDIA_ENVIRONMENT }} {% block extra_body_classes %}{% endblock %} d-print-block">
<header role="banner" aria-label="site navigation">
<nav class="navbar navbar-expand-lg flex-row navbar-offwhite bg-offwhite justify-content-between align-items-end">
<nav class="navbar navbar-expand-lg flex-row navbar-offwhite bg-offwhite justify-content-between align-items-end d-print-block">
<div class="navbar-brand d-flex align-items-stretch">
<a href="https://www.loc.gov">
<img src="{% static 'img/LoC-logo.svg' %}" alt="Library of Congress logo">
Expand All @@ -46,11 +46,11 @@ <h1 class="header-text m-0 d-none d-sm-flex align-items-center">
</div>
</h1>
</div>
<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#nav-menu" aria-controls="nav-menu" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler navbar-light d-print-none" type="button" data-toggle="collapse" data-target="#nav-menu" aria-controls="nav-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="nav-menu">
<ul class="navbar-nav ml-auto">
<div class="collapse navbar-collapse text-center d-print-none" id="nav-menu">
<ul class="navbar-nav ml-auto d-print-none">
<li class="nav-item">
<a class="nav-link {% if PATH_LEVEL_1 == 'about'%}active{% endif %}" href="{% url 'about' %}">About</a>
</li>
Expand Down Expand Up @@ -78,7 +78,7 @@ <h1 class="header-text m-0 d-none d-sm-flex align-items-center">
</ul>
</div>

<ul class="nav-secondary anonymous-only list-unstyled d-none d-lg-flex">
<ul class="nav-secondary anonymous-only list-unstyled d-none d-lg-flex d-print-none">
<li class="nav-item">
<a class="nav-link nav-secondary nav-link-login" href="{% url 'login' %}?next={{ request.path|urlencode }}" rel="nofollow">Login</a>
</li>
Expand All @@ -88,7 +88,7 @@ <h1 class="header-text m-0 d-none d-sm-flex align-items-center">
</ul>
</nav>
</header>
<main class="{% block extra_main_classes %}{% endblock %}">
<main class="{% block extra_main_classes %}{% endblock %} d-print-block">
{% block breadcrumbs-container %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-offwhite my-0">
Expand Down
72 changes: 38 additions & 34 deletions concordia/templates/transcriptions/asset_detail.html
View file
Expand Up @@ -23,9 +23,9 @@
{% block extra_main_classes %}flex-grow-1 d-flex flex-column{% endblock %}

{% block main_content %}
<div id="contribute-main-content" class="container-fluid flex-grow-1 d-flex flex-column">
<div id="navigation-container" class="row p-2">
<nav id="asset-navigation" class="d-flex flex-grow-1 justify-content-between align-items-center" role="navigation">
<div id="contribute-main-content" class="container-fluid flex-grow-1 d-flex flex-column d-print-block">
<div id="navigation-container" class="row p-2 d-print-none">
<nav id="asset-navigation" class="d-flex flex-grow-1 justify-content-between align-items-center d-print-block" role="navigation">
<div class="d-flex align-items-center">
<form onsubmit="document.location.href = document.getElementById('asset-selection').value; return false">
<div class="input-group input-group-sm">
Expand Down Expand Up @@ -73,9 +73,9 @@
</div>
</nav>
</div>
<div id="contribute-container" class="row flex-grow-1 pb-2">
<div id="viewer-column" class="pl-0 d-flex flex-column align-items-stretch bg-dark">
<div id="viewer-controls" class="m-1 text-center">
<div id="contribute-container" class="row flex-grow-1 pb-2 d-print-block">
<div id="viewer-column" class="pl-0 d-flex flex-column align-items-stretch bg-dark d-print-block">
<div id="viewer-controls" class="m-1 text-center d-print-none">
<div class="d-inline-flex justify-content-between">
<div class="d-flex btn-group btn-group-sm m-1">
<button id="viewer-home" class="btn btn-default">
Expand Down Expand Up @@ -117,12 +117,12 @@
</div>
</div>
</div>

<div id="asset-image" class="h-100 bg-dark"></div>
<div id="asset-image" class="h-100 bg-dark d-print-none"></div>
<div class="print-transcription-image d-none d-print-block"><img class="img-fluid" alt="Scanned image of the current content page" src="{% asset_media_url asset %}"></div>
</div>

<div id="editor-column" class="d-flex flex-column flex-nowrap justify-content-between">
<div class="flex-grow-1 d-flex flex-column">
<div id="editor-column" class="d-flex flex-column flex-nowrap justify-content-between d-print-block">
<div class="flex-grow-1 d-flex flex-column d-print-block">
<div class="tx-status-display">
<span class="tx-submitted" {% if transcription_status != 'submitted' %}hidden{% endif %}>
<span class="fas fa-list"></span>
Expand All @@ -146,7 +146,7 @@
</span>
</div>

<form id="transcription-editor" class="ajax-submission flex-grow-1 d-flex flex-column" method="post" action="{% url 'save-transcription' asset_pk=asset.pk %}" data-transcription-status="{{ transcription_status }}" {% if transcription %}data-transcription-id="{{ transcription.pk|default:'' }}" {% if transcription.submitted %}data-unsaved-changes="true"{% endif %} data-submit-url="{% url 'submit-transcription' pk=transcription.pk %}" data-review-url="{% url 'review-transcription' pk=transcription.pk %}"{% endif %}>
<form id="transcription-editor" class="ajax-submission flex-grow-1 d-flex flex-column d-print-block" method="post" action="{% url 'save-transcription' asset_pk=asset.pk %}" data-transcription-status="{{ transcription_status }}" {% if transcription %}data-transcription-id="{{ transcription.pk|default:'' }}" {% if transcription.submitted %}data-unsaved-changes="true"{% endif %} data-submit-url="{% url 'submit-transcription' pk=transcription.pk %}" data-review-url="{% url 'review-transcription' pk=transcription.pk %}"{% endif %}>
{% csrf_token %}
<input type="hidden" name="supersedes" value="{{ transcription.pk|default:'' }}" />

Expand All @@ -165,11 +165,13 @@ <h2>
</h2>

{% spaceless %}
<textarea readonly class="form-control w-100 rounded flex-grow-1" name="text" id="transcription-input" placeholder="{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}Go ahead, start typing. You got this!{% else %}Nothing to transcribe{% endif %}" aria-label="Transcription input">
<textarea readonly class="form-control w-100 rounded flex-grow-1 d-print-none" name="text" id="transcription-input" placeholder="{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}Go ahead, start typing. You got this!{% else %}Nothing to transcribe{% endif %}" aria-label="Transcription input">
{{ transcription.text }}
</textarea>

<div class="my-3 d-flex flex-wrap justify-content-around align-items-center btn-row">
<div class="print-transcription-text" aria-hidden="true" style="display: none;">{{ transcription.text }}</div>

<div class="my-3 d-print-none d-flex flex-wrap justify-content-around align-items-center btn-row">
{% if transcription_status == 'not_started' or transcription_status == 'in_progress' %}
<div class="form-check w-100 text-center mt-0 mb-3">
<input id="nothing-to-transcribe" type="checkbox" class="form-check-input" />
Expand Down Expand Up @@ -211,28 +213,30 @@ <h2>

<h2>Tags</h2>

{% if user.is_authenticated %}
<div class="form-row">
<div class="input-group">
<input type="text" id="new-tag-input" class="form-control" placeholder="Add a new tag…" aria-label="Add a new tag" pattern="[- _'\w]{1,50}">
<div class="input-group-append">
<button id="new-tag-button" class="btn btn-outline-primary" type="button" title="Add tags to the page">Add</button>
</div>
<div class="invalid-feedback">
Tags must be between 1-50 characters and may contain only letters, numbers, dashes, underscores, apostrophes, and spaces
<div class="d-print-none">
{% if user.is_authenticated %}
<div class="form-row">
<div class="input-group">
<input type="text" id="new-tag-input" class="form-control" placeholder="Add a new tag…" aria-label="Add a new tag" pattern="[- _'\w]{1,50}">
<div class="input-group-append">
<button id="new-tag-button" class="btn btn-outline-primary" type="button" title="Add tags to the page">Add</button>
</div>
<div class="invalid-feedback">
Tags must be between 1-50 characters and may contain only letters, numbers, dashes, underscores, apostrophes, and spaces
</div>
</div>
</div>
</div>
{% else %}
<p class="help-text anonymous-only text-center">
Want to tag this page?

<a href="{% url 'registration_register' %}">Register</a>
or
<a href="{% url 'login' %}?next={{ request.path|urlencode }}">login</a>
to add tags.
</p>
{% endif %}
{% else %}
<p class="help-text anonymous-only text-center d-print-none">
Want to tag this page?

<a href="{% url 'registration_register' %}">Register</a>
or
<a href="{% url 'login' %}?next={{ request.path|urlencode }}">login</a>
to add tags.
</p>
{% endif %}
</div>

<ul id="current-tags" class="d-flex flex-wrap list-unstyled mb-0">
<li id="tag-template" hidden>
Expand Down Expand Up @@ -265,7 +269,7 @@ <h2>Tags</h2>
</div>
</div>
</div>
<div id="help-container" class="row justify-content-center">
<div id="help-container" class="row justify-content-center d-print-none">
<p>Need help?</p>

<button id="instruction-button" class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#instruction-window" aria-expanded="false" aria-controls="instruction-window">
Expand Down

0 comments on commit 9533d2e

Please sign in to comment.