Skip to content

Commit

Permalink
CONCD-650 Initial feedback (#2245)
Browse files Browse the repository at this point in the history 
* CONCD-650 Make the X to escape out always available

* CONCD-650 Also make the guide closeable at any time by hitting ESC

* CONCD-650 the padding around the transcription box is missing

* CONCD-650 Reduce padding around both the How to Guide heading and the section title

* CONCD-650 Campaign.description

* CONCD-650 added padding above Helpful Links

* CONCD-650 reduced font size of Helpful Links
  • Loading branch information
@rasarkar
rasarkar authored Jan 26, 2024
1 parent 0acf647 commit e43fa83
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 15 deletions.
9 changes: 9 additions & 0 deletions concordia/static/scss/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,10 @@ ul.nav-secondary {
flex: initial !important;
}

#transcription-input {
width: 99% !important;
}

/*
* vertical and horizontal dividers
*/
Expand Down Expand Up @@ -1075,12 +1079,17 @@ $card-progress-height: 12px;
position: absolute;
border-radius: 0;
right: 0;
top: 129px;
font-size: 0.75rem;
margin-right: -55px;
margin-top: 39px;
width: 110px;
}

#close-guide {
margin: -1rem 1rem -1rem auto;
}

.sidebar {
height: 580px; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
Expand Down
38 changes: 23 additions & 15 deletions concordia/templates/transcriptions/asset_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,26 +444,29 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
</ul>
</div>
<div class="carousel-item container">
<div class="bg-primary px-2 py-3 row text-white">
<div class="bg-primary px-2 py-1 row text-white">
<a data-target="#guide-carousel" data-slide-to="0" class="text-white" href="">
<i class="fas fa-solid fa-bars"></i>
</a>
<h3 class="px-2">How to Guide</h3>
<button id="close-guide" type="button" class="close text-white" onclick="closeOffcanvas()">
<span class="fas fa-times"></span>
</button>
</div>
<div class="border-bottom justify-content-center mb-3 py-3 row">
<div class="border-bottom justify-content-center mb-3 py-1 row">
<h3>About this Campaign</h3>
<a class="font-weight-bold ml-3" id="next-guide" href="#guide-carousel" data-slide="next">></a>
</div>
{% if asset.item.project.campaign.long_description %}
{% if asset.item.project.campaign.description %}
<h4>About this campaign</h4>
{{ asset.item.project.campaign.long_description|safe }}
{{ asset.item.project.campaign.description|safe }}
{% endif %}
{% if asset.item.project.description %}
<h4>About this project</h4>
{{ asset.item.project.description|safe }}
{% endif %}
{% if asset.item.project.campaign.resource_set.related_links %}
<h4>Helpful Links</h4>
<h5 class="pt-4">Helpful Links</h5>
{% for resource in campaign.resource_set.related_links %}
<li class="mb-3">
<a href="{{ resource.resource_url }}" target="_blank" rel=noopener>
Expand All @@ -475,13 +478,16 @@ <h4>Helpful Links</h4>
</div>
{% for guide in guides %}
<div class="carousel-item container" id="pane-{{ forloop.counter }}">
<div class="bg-primary px-2 py-3 row text-white">
<div class="bg-primary px-2 py-1 row text-white">
<a data-target="#guide-carousel" data-slide-to="0">
<i class="fas fa-solid fa-bars"></i>
</a>
<h3 class="px-2">How to Guide</h3>
<button id="close-guide" type="button" class="close text-white" onclick="closeOffcanvas()">
<span class="fas fa-times"></span>
</button>
</div>
<div class="border-bottom justify-content-center mb-3 py-3 row">
<div class="border-bottom justify-content-center mb-3 py-1 row">
<a class="font-weight-bold mr-3" id="previous-guide" href="#guide-carousel" data-slide="prev"><</a>
<h3>{{ guide.title }}</h3>
{% if not forloop.last %}
Expand All @@ -502,13 +508,10 @@ <h3>{{ guide.title }}</h3>
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="flex-grow-1 row">
<textarea readonly class="form-control rounded 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>
<button id="open-guide" class="btn btn-primary" type="button" onclick="openOffcanvas()">How to Guide</button>
</div>

<textarea readonly class="form-control 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>
<button id="open-guide" class="btn btn-primary" type="button" onclick="openOffcanvas()">How to Guide</button>
<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-center align-items-center">
Expand Down Expand Up @@ -1227,8 +1230,13 @@ <h3>{{ card.display_heading }}</h3>
function openOffcanvas() {
var guide = document.getElementById("guide-carousel");
guide.style.width = "450px";
document.getElementById("guide-carousel").style.border = "thick solid #0076ad";
guide.style.border = "thick solid #0076ad";
document.getElementById("open-guide").style.display = "none";
document.addEventListener('keydown', function(e) {
if (e.key == "Escape") {
closeOffcanvas();
}
});

}
function closeOffcanvas() {
Expand Down

0 comments on commit e43fa83

Please sign in to comment.