Skip to content

Commit

Permalink
CONCD-650 A few more mostly small tweaks (#2255)
Browse files Browse the repository at this point in the history 
* CONCD-650 going to try moving the guide outside of the editor column

* CONCD-650 adjusting the vertical positioning of the guide

* CONCD-650 additional padding between the About this Campaign sections

* CONCD-650 fixed a bug where the external link symbol was being displayed next to loc.gov links

* CONCD-650 reduced font of Helpful Links

* CONCD-650 Change title to 'How-To Guide'

* CONCD-650 fixed an issue where css was having unintended consequences

* CONCD-650 trying to fix an issue where the modal cannot be interacted with, unless there is at least one guide object

* CONCD-650 center name in the title bar vertically

* CONCD-650 center X vertically

* CONCD-650 trying to make the 'x' consistent across guide sections
  • Loading branch information
@rasarkar
rasarkar authored Feb 2, 2024
1 parent 5155b7f commit 2f8830d
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 86 deletions.
18 changes: 13 additions & 5 deletions concordia/static/scss/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1102,15 +1102,16 @@ $card-progress-height: 12px;
}

#close-guide {
margin: -1rem 1rem -1rem auto;
height: 30.5px;
margin: 0 0.5rem -1rem auto;
}

.sidebar {
height: 580px; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
position: absolute; /* Stay in place */
z-index: 1; /* Stay on top */
top: 304px;
top: 129px;
right: 0;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
Expand All @@ -1121,12 +1122,19 @@ $card-progress-height: 12px;
border-bottom: thin solid $gray-400;
}

.sidebar li a {
.sidebar .nav-item a {
font-size: $font-size-base * 1.25;
font-weight: 700;
text-decoration: underline;
}

#title-bar {
font-weight: 700;
}

.toc-title {
font-weight: 600;
}

.sidebar .close {
font-size: $font-size-base * 0.875;
}
Expand Down
82 changes: 82 additions & 0 deletions concordia/templates/fragments/_how-to-guide.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<div class="carousel carousel-fade sidebar" id="guide-carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" id="guide-nav">
<ul class="nav flex-column">
<li id="title-bar" class="nav-item bg-primary text-white px-3 py-1">
<a>How-To Guide</a>
<button type="button" class="close text-white py-2" onclick="closeOffcanvas()">
<span class="fas fa-times"></span>
</button>
</li>
<li class="nav-item toc-title">
<a class="nav-link" data-target="#guide-carousel" data-slide-to="1" href="#">About this Campaign</a>
</li>
{% for guide in guides %}
<li class="nav-item toc-title">
<a data-target="#guide-carousel" data-slide-to="{{ forloop.counter|add:1 }}" class="nav-link" href="#pane-{{ forloop.counter }}">
{{ guide.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="carousel-item container">
<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 py-2"></i>
</a>
<h3 class="px-2 my-1">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-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 campaign.description %}
<h4>About this campaign</h4>
<p>{{ campaign.description|safe }}</p>
{% endif %}
{% if asset.item.project.description %}
<h4>About this project</h4>
<p>{{ asset.item.project.description|safe }}</p>
{% endif %}
{% if campaign.resource_set.related_links %}
<h5 class="pt-4">Helpful Links</h5>
<p>
<ul>
{% for resource in campaign.resource_set.related_links %}
<li class="mb-3">
<a href="{{ resource.resource_url }}" target="_blank" rel=noopener>
{{ resource.title }}{% if 'loc.gov' not in resource.resource_url %} <i class="fa fa-external-link-alt"></i>{% endif %}
</a>
</li>
{% endfor %}
</ul>
</p>
{% endif %}
</div>
{% for guide in guides %}
<div class="carousel-item container" id="pane-{{ forloop.counter }}">
<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 py-2"></i>
</a>
<h3 class="px-2 my-1">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-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 %}
<a class="font-weight-bold ml-3" id="next-guide" href="#guide-carousel" data-slide="next">></a>
{% endif %}
</div>
{{ guide.body|safe }}
</div>
{% endfor %}
</div>
</div>
89 changes: 9 additions & 80 deletions concordia/templates/transcriptions/asset_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -421,84 +421,6 @@ <h2 id="message-contributors" {% if transcription_status == 'not_started' %}hidd
<a class="font-weight-bold" data-toggle="modal" data-target="#tutorial-popup" role="button">
<u>Quick Tips</u>
</a>
<div class="carousel carousel-fade sidebar" id="guide-carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" id="guide-nav">
<ul class="nav flex-column">
<li class="nav-item bg-primary text-white px-3 py-1">
<a>How to Guide</a>
<button type="button" class="close text-white" onclick="closeOffcanvas()">
<span class="fas fa-times"></span>
</button>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#guide-carousel" data-slide-to="1" href="#">About this Campaign</a>
</li>
{% for guide in guides %}
<li class="nav-item">
<a data-target="#guide-carousel" data-slide-to="{{ forloop.counter|add:1 }}" class="nav-link" href="#pane-{{ forloop.counter }}">
{{ guide.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="carousel-item container">
<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-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.description %}
<h4>About this campaign</h4>
{{ 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 %}
<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>
{{ resource.title }}{% if 'loc.gov' in resource.resource_url %} <i class="fa fa-external-link-alt"></i></a></li>{% endif %}
</a>
</li>
{% endfor %}
{% endif %}
</div>
{% for guide in guides %}
<div class="carousel-item container" id="pane-{{ forloop.counter }}">
<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-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 %}
<a class="font-weight-bold ml-3" id="next-guide" href="#guide-carousel" data-slide="next">></a>
{% endif %}
</div>
{{ guide.body|safe }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>

Expand All @@ -511,7 +433,7 @@ <h3>{{ guide.title }}</h3>
<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 @@ -550,6 +472,7 @@ <h3>{{ guide.title }}</h3>
</div>
{% endspaceless %}
</form>

</div>
<div id="tag-editor" class="flex-shrink-1">
<h2 id="tag-label" class="border-top pt-3 pb-2"><a
Expand Down Expand Up @@ -599,6 +522,10 @@ <h2 id="tag-label" class="border-top pt-3 pb-2"><a
</form>
</div>
</div>
{% if guides %}
<button id="open-guide" class="btn btn-primary" type="button" onclick="openOffcanvas()">How-To Guide</button>
{% include "fragments/_how-to-guide.html" %}
{% endif %}
</div>
<div id="help-container" class="mt-1 d-print-none">
<div class="row p-3 bg-light justify-content-sm-between">
Expand Down Expand Up @@ -1232,7 +1159,9 @@ <h5>{{ card.display_heading }}</h5>
function openOffcanvas() {
var guide = document.getElementById("guide-carousel");
guide.style.width = "450px";
guide.style.border = "thick solid #0076ad";
guide.style.borderWidth = "0 0 thick thick";
guide.style.borderStyle = "solid";
guide.style.borderColor = "#0076ad";
document.getElementById("open-guide").style.display = "none";
document.addEventListener('keydown', function(e) {
if (e.key == "Escape") {
Expand Down
4 changes: 3 additions & 1 deletion concordia/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1312,7 +1312,9 @@ def get_context_data(self, **kwargs):
ordered_cards = unordered_cards.order_by("order")
ctx["cards"] = [tutorial_card.card for tutorial_card in ordered_cards]

ctx["guides"] = self.get_guides()
guides = self.get_guides()
if len(guides) > 0:
ctx["guides"] = guides

return ctx

Expand Down

0 comments on commit 2f8830d

Please sign in to comment.