CONCD-924 (#2581)

* CONCD-924 Xs don't seem right

* CONCD-924 Status/contributor count/call to action should align with left edge of transcription box (they are currently a little indented)

* CONCD-924 workaround for dialog not closing

* CONCD-924 About this campaign header should be centered - it's formatted to the left because there isn't a left arrow

* CONCD-924 Show what I can review: Right edge of text should align with right edge of Not started filter box

* CONCD-924 Radio button styling doesn't match 'show what i can review' button

* CONCD-924 Banner styling is different - link shows as box within the box of the banner instead of just a hyperlink within the banner

* CONCD-924 Status and contributor count disappear after you click the save button

* CONCD-924 Carousel header should be bolded

* CONCD-924 project image thumbnail size

* CONCD-924 fixed a bug where the guide was sliding twice

concordia/static/js/src/contribute.js

@@ -305,8 +305,8 @@ function setupPage() {
                 .attr('hidden', 'hidden')
                 .filter('#message-inprogress')
                 .removeAttr('hidden');
-            messageChildren
-                .filter('#message-contributors')
+            $('#transcription-status-display').removeAttr('hidden');
+            $('#message-contributors')
                 .removeAttr('hidden')
                 .find('#message-contributors-num')
                 .html(responseData.asset.contributors);

concordia/static/scss/base.scss

@@ -129,6 +129,8 @@ $alert-padding-x: 1rem;
 @import '../../../node_modules/bootstrap/scss/nav';
 @import '../../../node_modules/bootstrap/scss/navbar';
 @import '../../../node_modules/bootstrap/scss/breadcrumb';
+@import '../../../node_modules/bootstrap/scss/alert';
+@import '../../../node_modules/bootstrap/scss/close';
 @import '../../../node_modules/bootstrap/scss/carousel';
 
 // progress
@@ -234,6 +236,15 @@ header.border-bottom {
             color: $dark;
         }
     }
+
+    &.alert-success {
+        background-color: $green;
+    }
+}
+
+.alert a[type='button'] {
+    color: inherit;
+    font-size: 1.5rem;
 }
 
 .font-serif {
@@ -705,10 +716,13 @@ li.breadcrumb-item.active {
     margin: 0 -6px;
 }
 
+.row .concordia-object-card-container {
+    width: 90%;
+}
+
 .concordia-object-card-container {
     display: flex;
     flex-wrap: wrap;
-    width: 90%;
     padding-top: 0.25em;
 }
 
@@ -996,6 +1010,11 @@ body .disabled > .page-link {
     width: 14px;
 }
 
+#previous-guide,
+#next-guide {
+    cursor: pointer;
+}
+
 .aspect-ratio-box {
     height: 0;
     overflow: hidden;

concordia/templates/fragments/_filter-buttons.html

@@ -1,5 +1,5 @@
 {% if user.is_authenticated %}
-    <div class="col-4 mt-4 ps-5 pe-3">
+    <div>
         <input name="radioButtons" type="radio" id="show-all" {% if do_filter %}onclick="filterAssets(false, '{{ all_url }}?{{ sublevel_qs }}')"{% else %}checked{% endif %}>
         <label>Show all</label>
         <input name="radioButtons" type="radio" id="filter-assets" {% if do_filter %}checked{% else %}onclick="filterAssets(true, '{{ filtered_url }}?{{ sublevel_qs }}')"{% endif %} class="ml-1">

concordia/templates/fragments/recent-pages.html

@@ -18,12 +18,12 @@ <h2>Recent Pages Worked On</h2>
         <button type="submit" class="btn btn-primary rounded-0 p-2">Go</button>
     </div>
     <div class="d-flex flex-row pt-1">
-        <div class="form-check">
-            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" onclick="sortDateDescending();"{% if order_by != 'date-ascending' %} checked{% endif %}>
+        <div>
+            <input type="radio" name="flexRadioDefault" id="flexRadioDefault1" onclick="sortDateDescending();"{% if order_by != 'date-ascending' %} checked{% endif %}>
             <label class="form-check-label" for="flexRadioDefault1">Sort by Newest</label>
         </div>
-        <div class="form-check" style="margin-left: 1.6rem;">
-            <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" onclick="sortDateAscending();"{% if order_by == 'date-ascending'%} checked{% endif %}>
+        <div style="margin-left: 1.6rem;">
+            <input type="radio" name="flexRadioDefault" id="flexRadioDefault2" onclick="sortDateAscending();"{% if order_by == 'date-ascending'%} checked{% endif %}>
             <label class="form-check-label" for="flexRadioDefault2">Sort by Oldest</label>
         </div>
     </div>

concordia/templates/home.html

@@ -15,14 +15,17 @@
     {% if SHOW_BANNER and banner %}
         <div id="homepage-contribute-container" class="container my-4">
             <div class="px-default ms-md-3 mb-5">
-                <div class="alert {{ banner.alert_class }} alert-dismissible w-100 text-center" id="banner-{{ banner.slug }}" role="alert">
-                    <a class="btn {{ banner.btn_class }}" href="{{ banner.link }}"{% if banner.open_in_new_window_tab %} target="_blank"{% endif %}>
-                        {{ banner.text }}
+                <div class="alert {{ banner.alert_class }} alert-dismissible w-100 d-flex justify-content-between" id="banner-{{ banner.slug }}" role="alert">
+                    <div></div>
+                    <div>
+                        <a class="btn {{ banner.btn_class }}" href="{{ banner.link }}"{% if banner.open_in_new_window_tab %} target="_blank"{% endif %}>
+                            {{ banner.text }}
+                        </a>
+                        <button type="button" class="btn btn-dark" id="no-interface-banner">Don't display this again</button>
+                    </div>
+                    <a type="button" data-bs-dismiss="alert" aria-label="Close">
+                        <span class="fas fa-times text-white"></span>
                     </a>
-                    <button type="button" class="btn btn-dark" id="no-interface-banner">Don't display this again</button>
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-
-                    </button>
                 </div>
             </div>
         </div>
@@ -74,7 +77,7 @@ <h3 class="mt-3 text-uppercase">Review</h3>
                     <div class="carousel-item {% if forloop.first %} active {% endif %}" {% if slide.overlay_position == "right" %} data-overlay-position="top-right" {% endif %} data-bs-title="{{ slide.headline }}" data-hero-text="{{ slide.body }}" data-link-url="{{ slide.lets_go_url }}">
                         <img class="d-block img-fluid" src="{{ MEDIA_URL }}{{ slide.carousel_image }}" alt="{{ slide.image_alt_text }}" width="1200" height="480">
                         <div class="carousel-overlay text-center d-flex flex-column justify-content-around align-items-center">
-                            <h2 class="h1 title mb-1">{{ slide.headline }}</h2>
+                            <h2 class="h1 title mb-1 fw-bold">{{ slide.headline }}</h2>
                             <p class="hero-text mx-auto">{{ slide.body }}</p>
                             <a class="btn btn-primary px-4" href="{{ slide.lets_go_url }}">LET'S GO!</a>
                         </div>

concordia/templates/transcriptions/asset_detail/asset_reservation_failure_modal.html

@@ -2,7 +2,7 @@
     <div class="modal-content">
         <div class="modal-header">
             <h5 class="modal-title">Someone else is already transcribing this page</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#asset-reservation-failure-modal').hide();">
 
             </button>
         </div>

concordia/templates/transcriptions/asset_detail/editor.html

@@ -3,7 +3,7 @@
         {% csrf_token %}
         <input type="hidden" name="supersedes" value="{{ transcription.pk|default:'' }}" />
         <div class="row justify-content-sm-between align-items-end mx-0">
-            <div class="col">
+            <div class="col ps-0">
                 <div id="transcription-status-message">
                     <div id="transcription-status-display" class="row">
                         <h2 id="display-submitted" {% if transcription_status != 'submitted' %}hidden{% endif %}>

concordia/templates/transcriptions/asset_detail/guide.html

@@ -31,12 +31,12 @@ <h3 class="px-2 my-1 py-1">How-To Guide</h3>
                 </ul>
             </div>
             <div class="carousel-item container">
-                <div class="border-bottom justify-content-center mb-3 py-1 row">
-                    <div class="col-6 justify-self-center me-4">
+                <div class="border-bottom justify-content-end mb-3 py-1 d-flex">
+                    <div class="col-7 justify-self-center me-4">
                         <h3>About This Campaign</h3>
                     </div>
                     <div class="col-1 pt-2">
-                        <a class="fw-bold ms-3" id="next-guide" href="#guide-carousel" data-bs-slide="next">></a>
+                        <a class="fw-bold ms-3" id="next-guide" data-bs-target="#guide-carousel" data-bs-slide="next">></a>
                     </div>
                 </div>
                 <div class="guide-body">
@@ -67,14 +67,14 @@ <h5 class="pt-3">Helpful Links</h5>
                 <div class="carousel-item container" id="pane-{{ forloop.counter }}">
                     <div class="border-bottom justify-content-center mb-3 py-1 row">
                         <div class="col-1 pt-2 prev-guide">
-                            <a class="fw-bold" id="previous-guide" href="#guide-carousel" data-bs-slide="prev"><</a>
+                            <a class="fw-bold" id="previous-guide" data-bs-target="#guide-carousel" data-bs-slide="prev"><</a>
                         </div>
                         <div class="col text-center ps-2">
                             <h3>{{ guide.title }}</h3>
                         </div>
                         <div class="col-1 pt-2 next-guide">
                             {% if not forloop.last %}
-                                <a class="fw-bold" id="next-guide" href="#guide-carousel" data-bs-slide="next">></a>
+                                <a class="fw-bold" id="next-guide" data-bs-target="#guide-carousel" data-bs-slide="next">></a>
                             {% endif %}
                         </div>
                     </div>

concordia/templates/transcriptions/campaign_detail.html

@@ -118,8 +118,8 @@ <h4 class="mb-3">Helpful Links</h4>
                     {% endif %}
                 </div>
             </div>
-            <div class="row">
-                <div class="col-12 col-lg mt-4">
+            <div class="d-flex justify-content-between mt-4">
+                <div>
                     <h3>Filter pages:</h2>
                 </div>
                 {% url 'transcriptions:campaign-detail' campaign.slug as all_assets %}

concordia/templates/transcriptions/item_detail.html

@@ -38,8 +38,8 @@ <h1>{{ item.title }}</h1>
             </div>
         </div>
         {% include "fragments/transcription-progress-row.html" %}
-        <div class="row">
-            <div class="col-12 col-lg mt-4">
+        <div class="d-flex justify-content-between mt-4">
+            <div>
                 <h3>Filter pages:</h2>
             </div>
             {% url 'transcriptions:item-detail' campaign.slug project.slug item.item_id as all_assets %}

concordia/templates/transcriptions/project_detail.html

@@ -35,8 +35,8 @@ <h1>{{ project.title }}</h1>
                 <div class="hero-text">{{ project.description|safe }}</div>
             </div>
         </div>
-        <div class="row">
-            <div class="col-12 col-lg mt-4">
+        <div class="d-flex justify-content-between mt-4">
+            <div>
                 <h3>Filter pages:</h2>
             </div>
             {% url 'transcriptions:project-detail' campaign.slug project.slug as all_assets %}