CONCD-1007 Bootstrap tweaks (#2640)

* CONCD-1007 Additional bootstrap fixes (#2607) * CONCD-1007 the page status does not seem to 'stick' without refreshing the page. * CONCD-1007 when you accept, button options (Edit/ Accept) should change * CONCD-1007 I don't think we actually need to close the modal, since we're just going to reload the page anyways * CONCD-1007 transcription status completely disappears from the page when undoing/ redoing * CONCD-1007 Reset all button should have rounded corners * CONCD-1007 Campaign tips carousel is the bright blue - should be muted * CONCD-1007 OCR buttons should be aligned with right edge of viewers * CONCD-1007 After clicking Edit, have to reload page to see OCR options * CONCD-1007 Gray box around tag X * CONCD-1007 Slider is bright blue - should be muted * CONCD-1007 Add button doesn't re-highlight as available after 1 tag has been added * CONCD-1007 inconsistent styling for newly added tags * CONCD-1007 trying to restore the homepage carousel to its original size * CONCD-1007 Arrows are still hard to see * CONCD-1007 Text box and arrows are cut off when browser is narrowed * CONCD-1007 missing files (#2621) * CONCD-1007 Still a few issues (#2626) * CONCD-1007 in a larger browser window, fill the entire screen * CONCD-1007 Invert filter slider should be centered * CONCD-1007 Invert filter slider should be on the same vertical line as the label text * CONCD-1007 trying to fix another issue where the status goes missing * CONCD-1007 fixing a bug in the previous commit * CONCD-1007 trying to revert our carousel dimensions to what it was (before the bootstrap upgrade) * CONCD-1007 TypeError: element.attr is not a functions (#2627) * CONCD-1007 Invert filter slider should be centered between On and Off (currently much closer to Off) (#2632) * Update stage-hotfix-rel-deploy.yml remove pipenv run for hot fix version number generation * CONCD-1007 (#2639) * CONCD-1007 trying to fix an issue where the page status still disappears (after OCR is generated) * CONCD-1007 need to unhide the element after it's been hidden * CONCD-1007 OCR module slide 1's X has to be clicked twice to close the popup * CONCD-1007 trying to compensate for the campaign titles appearing to be slightly indented on the campaign page (/campaigns-topics/) --------- Co-authored-by: Jennifer Kuenning <72825410+jkueloc@users.noreply.github.com>
LibraryOfCongress · Dec 16, 2024 · 23798f1 · 23798f1
1 parent d039973
commit 23798f1
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 56 deletions.
diff --git a/.github/workflows/stage-hotfix-rel-deploy.yml b/.github/workflows/stage-hotfix-rel-deploy.yml
@@ -51,7 +51,7 @@ jobs:
                   pip3 install -U setuptools
                   pip3 install -U setuptools-scm
 
-                  FULL_VERSION_NUMBER="$(pipenv run python -m setuptools_scm)"
+                  FULL_VERSION_NUMBER="$(python3 -m setuptools_scm)"
                   echo "full_ver_num=$(echo "${FULL_VERSION_NUMBER}")" >> $GITHUB_ENV
 
                   HOTFIX_VERSION_NUMBER="$(git describe --tags)"

diff --git a/concordia/static/img/slick-left-arrow.svg b/concordia/static/img/slick-left-arrow.svg
diff --git a/concordia/static/img/slick-right-arrow.svg b/concordia/static/img/slick-right-arrow.svg
diff --git a/concordia/static/js/src/contribute.js b/concordia/static/js/src/contribute.js
@@ -30,6 +30,7 @@ function unlockControls($container) {
     $container.find('button#open-guide').removeAttr('disabled');
     $container.find('button#ocr-transcription-button').removeAttr('disabled');
     $container.find('button#close-guide').removeAttr('disabled');
+    $container.find('button#new-tag-button').removeAttr('disabled');
 }
 
 $(document).on('keydown', function (event) {
@@ -338,16 +339,15 @@ function setupPage() {
             .done(function (data) {
                 $('#transcription-status-display')
                     .children()
-                    .attr('hidden', 'hidden')
-                    .filter('#display-submitted')
-                    .removeAttr('hidden');
+                    .attr('hidden', 'hidden');
                 let messageChildren = $(
-                    '#transcription-status-message',
+                    '#transcription-status-display',
                 ).children();
                 messageChildren
                     .attr('hidden', 'hidden')
                     .filter('#message-submitted')
                     .removeAttr('hidden');
+                $('#display-submitted').removeAttr('hidden');
                 messageChildren
                     .filter('#message-contributors')
                     .removeAttr('hidden')
@@ -408,6 +408,7 @@ function setupPage() {
                             );
                             reserveAssetForEditing();
                             setupPage();
+                            window.location.reload(true);
                         })
                         .fail(function (jqXHR, textStatus, errorThrown) {
                             displayMessage(
@@ -517,11 +518,11 @@ function setupPage() {
                     );
                 }
                 let messageChildren = $(
-                    '#transcription-status-message',
+                    '#transcription-status-display',
                 ).children();
                 messageChildren
                     .attr('hidden', 'hidden')
-                    .filter('#message-inprogress')
+                    .filter('#display-inprogress')
                     .removeAttr('hidden');
                 messageChildren
                     .filter('#message-contributors')
@@ -602,9 +603,9 @@ function setupPage() {
                                 <input type="hidden" name="tags" value="' +
                         value +
                         '" /> \
-                                <button type="button" class="close" data-dismiss="alert" aria-label="Remove previous tag"> \
+                                <a class="close" data-bs-dismiss="alert" aria-label="Remove previous tag"> \
                                     <span aria-hidden="true" class="fas fa-times"></span> \
-                                </button> \
+                                </a> \
                             </li> \
                 ',
                 );
@@ -685,9 +686,8 @@ function setupPage() {
                 $ocrLoading.attr('hidden', 'hidden');
                 $('#transcription-status-display')
                     .children()
-                    .attr('hidden', 'hidden')
-                    .filter('#display-inprogress')
-                    .removeAttr('hidden');
+                    .attr('hidden', 'hidden');
+                $('#display-inprogress').removeAttr('hidden');
                 let messageChildren = $(
                     '#transcription-status-message',
                 ).children();
@@ -708,6 +708,7 @@ function setupPage() {
                     .removeAttr('hidden')
                     .find('#message-contributors-num')
                     .html(responseData.asset.contributors);
+                $('#transcription-status-display').removeAttr('hidden');
                 $transcriptionEditor.trigger('update-ui-state');
                 $ocrForm.find('input[name="supersedes"]').val(responseData.id);
             })

diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
@@ -475,6 +475,16 @@ body .form-check-input {
     opacity: 1;
 }
 
+#invert-form div {
+    margin-left: 10px;
+    margin-right: 0;
+}
+
+#invert:checked {
+    background-color: $blue;
+    border-color: $blue;
+}
+
 .flex-1 {
     flex: 1;
 }
@@ -916,6 +926,10 @@ div.campaign-progress {
     margin-top: 20px;
 }
 
+#campaign-list li h3 {
+    margin-left: -3.5px;
+}
+
 .page-link:hover {
     text-decoration: none;
 }
@@ -1034,52 +1048,50 @@ body .disabled > .page-link {
         }
     }
 
-    .title {
-        font-size: 2.25rem;
+    @include media-breakpoint-down(md) {
+        position: absolute;
+        top: 19px;
     }
-}
 
-@include media-breakpoint-down(lg) {
-    .carousel-control-next,
-    .carousel-control-prev {
-        margin-top: 40%;
+    .title {
+        font-size: 2.25rem;
     }
 }
 
-@include media-breakpoint-up(md) {
+.carousel {
     .carousel-control-next-icon {
-        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2255%22%20viewBox%3D%220%200%2033%2055%22%20width%3D%2233%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m1221.23218%20395.14282c0%20.428572-.21429.910716-.53571%201.232145l-24.96432%2024.964315c-.32143.321429-.80357.535715-1.23214.535715-.42858%200-.91072-.214286-1.23215-.535715l-2.67857-2.678574c-.32143-.321429-.53572-.750001-.53572-1.232145%200-.428572.21429-.910715.53572-1.232144l21.05359-21.053597-21.05359-21.053596c-.32143-.321429-.53572-.803573-.53572-1.232144%200-.428572.21429-.910716.53572-1.232145l2.67857-2.678574c.32143-.321429.80357-.535715%201.23215-.535715.42857%200%20.91071.214286%201.23214.535715l24.96432%2024.964315c.32142.321429.53571.803572.53571%201.232144z%22%20fill%3D%22%230076ad%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23333%22%20stroke-width%3D%22.5%22%20transform%3D%22translate%28-1189%20-368%29%22/%3E%3C/svg%3E');
+        background-image: url('/static/img/slick-right-arrow.svg');
     }
 
     .carousel-control-prev-icon {
-        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2255%22%20viewBox%3D%220%200%2033%2055%22%20width%3D%2233%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m100.946469%20372.85708c0%20.428571-.214286.910715-.535715%201.232144l-21.0535968%2021.053596%2021.0535968%2021.053597c.321429.321429.535715.803572.535715%201.232144s-.214286.910716-.535715%201.232145l-2.6785749%202.678574c-.321429.321429-.8035724.535715-1.2321444.535715-.4285719%200-.9107153-.214286-1.2321443-.535715l-24.9643155-24.964315c-.3214289-.321429-.5357149-.803573-.5357149-1.232145s.214286-.910715.5357149-1.232144l24.9643155-24.964315c.321429-.321429.8035724-.535715%201.2321443-.535715.428572%200%20.9107154.214286%201.2321444.535715l2.6785749%202.678574c.321429.321429.535715.750001.535715%201.232145z%22%20fill%3D%22%230076ad%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23333%22%20stroke-width%3D%22.5%22%20transform%3D%22translate%28-69%20-368%29%22/%3E%3C/svg%3E');
+        background-image: url('/static/img/slick-left-arrow.svg');
     }
-}
 
-.carousel .carousel-control-next-icon,
-.carousel .carousel-control-prev-icon {
-    height: $carousel-control-icon-height;
-    width: $carousel-control-icon-width;
-}
+    .carousel-control-next-icon,
+    .carousel-control-prev-icon {
+        height: $carousel-control-icon-height;
+        width: $carousel-control-icon-width;
+    }
 
-.carousel .carousel-indicators {
-    > button {
-        border-radius: 50%;
-        border: 1px solid $blue;
-        height: 12px;
-        opacity: 1;
-        width: 12px;
+    .carousel-indicators {
+        > button {
+            border-radius: 50%;
+            border: 1px solid $blue;
+            height: 12px;
+            opacity: 1;
+            width: 12px;
 
-        &.active {
-            background-color: $blue;
-            border-color: $blue;
+            &.active {
+                background-color: $blue;
+                border-color: $blue;
+            }
         }
-    }
 
-    left: 50%;
-    width: 60%;
-    margin-left: -30%;
-    text-align: center;
+        left: 50%;
+        width: 60%;
+        margin-left: -30%;
+        text-align: center;
+    }
 }
 
 #card-carousel .carousel-indicators > button {
@@ -1153,6 +1165,12 @@ body .disabled > .page-link {
     }
 }
 
+#homepage-carousel {
+    @include media-breakpoint-up(xl) {
+        max-width: 1140px;
+    }
+}
+
 #homepage-next-transcribable-links {
     position: relative;
 
@@ -1394,6 +1412,10 @@ button.btn-outline-primary:hover {
     border-color: $primary;
     color: $white;
     border-radius: 0;
+
+    &.btn {
+        border-radius: $btn-border-radius;
+    }
 }
 
 .filter-slider {
@@ -1454,10 +1476,6 @@ button.btn-outline-primary:hover {
     }
 }
 
-#ocr-section div {
-    width: 97.75%;
-}
-
 #ocr-transcription-link {
     pointer-events: auto;
 }
@@ -1561,8 +1579,8 @@ button.btn-outline-primary:hover {
 }
 
 #card-carousel .carousel-indicators .active {
-    background-color: #007bff;
-    border-color: #007bff;
+    background-color: $blue;
+    border-color: $blue;
 }
 
 #previous-card {

diff --git a/concordia/templates/home.html b/concordia/templates/home.html
@@ -229,7 +229,7 @@ <h2 class="text-center font-serif mb-4">Campaigns: <small>Choose which collectio
                 storage.setItem(banner.id, true);
                 var element = document.getElementById(banner.id);
                 element.classList.remove("d-flex");
-                element.attr("hidden", "hidden");
+                $(element).attr("hidden", "hidden");
             }
         });
     </script>

diff --git a/concordia/templates/transcriptions/asset_detail/ocr_transcription_modal.html b/concordia/templates/transcriptions/asset_detail/ocr_transcription_modal.html
@@ -1,7 +1,7 @@
 <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
         <div class="modal-header d-flex justify-content-end">
-            <a data-bs-dismiss="modal" aria-label="Close" onclick="$('#ocr-transcription-modal').toggle();">
+            <a data-bs-dismiss="modal" aria-label="Close" onclick="$('#ocr-transcription-modal').hide();">
                 <span aria-hidden="true" class="text-primary fw-bold">&times;</span>
             </a>
         </div>

diff --git a/concordia/templates/transcriptions/asset_detail/review_accepted_modal.html b/concordia/templates/transcriptions/asset_detail/review_accepted_modal.html
@@ -2,7 +2,7 @@
     <div class="modal-content">
         <div class="modal-header">
             <h5 class="modal-title">Nice Job!</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#review-accepted-modal').hide();">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="window.location.reload(true);">
 
             </button>
         </div>

diff --git a/concordia/templates/transcriptions/asset_detail/tags.html b/concordia/templates/transcriptions/asset_detail/tags.html
@@ -37,9 +37,9 @@ <h2 id="tag-label" class="border-top pt-3 pb-2"><a
                         <input type="hidden" name="tags" value="{{ tag }}" />
                         {{ tag }}
                     </label>
-                    <button type="button" class="close authenticated-only" data-bs-dismiss="alert" aria-label="Remove previous tag" hidden>
+                    <a class="close authenticated-only" data-bs-dismiss="alert" aria-label="Remove previous tag" hidden>
                         <span aria-hidden="true" class="fas fa-times"></span>
-                    </button>
+                    </a>
                 </li>
             {% endfor %}
         </ul>

diff --git a/concordia/templates/transcriptions/asset_detail/viewer_filters.html b/concordia/templates/transcriptions/asset_detail/viewer_filters.html
@@ -68,9 +68,9 @@
             </form>
         </div>
         <div id="invert-filter" class="tab-pane pt-2" role="tabpanel" style="background-color: white;">
-            <form id="invert-form" onsubmit="return false;">
+            <form id="invert-form" onsubmit="return false;" class="d-flex justify-content-center">
                 <label class="ms-2 align-middle">Off</label>
-                <div class="form-check form-switch custom-control-inline ms-1 me-2">
+                <div class="form-check form-switch custom-control-inline">
                     <input type="checkbox" id="invert" name="invert" class="form-check-input" role="switch" />
                     <label class="form-check-label" for="invert"><span class="visually-hidden">Invert</span></label>
                 </div>