Fix alignment of preview column & make more responsive

Note that we did not optimize for very small devices as the annotation tool cannot be opened there. However, for tablets it should work fine.
MaMpf-HD · Nov 14, 2023 · 3a58dca · 3a58dca
1 parent 8b83c5a
commit 3a58dca
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 33 deletions.
diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
@@ -16,25 +16,72 @@
 
 /* annotation modal */
 #annotation-modal {
-  .modal-content {
-    width: 100%;
+  .modal-body {
+    display: flex;
+  }
+
+  .modal-footer {
+    margin-top: 40px;
+    padding-bottom: 0;
+    padding-right: 0;
+  }
+
+  .annotation-dialog-normal {
+    max-width: 560px;
+  }
+
+  .annotation-dialog-expanded {
+    max-width: 730px;
   }
-  #annotation-modal-content {
+
+  .annotation-content-normal {
     width: 100%;
   }
+
+  .annotation-content-expanded {
+    width: 70%;
+  }
+
+  #annotation-preview-section {
+    width: 30%;
+  }
+
   #annotation-modal-preview {
-    height: 543px;
-    width: 35%;
     word-wrap: break-word;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
+
   #annotation_comment {
-    height: 150px;
-    resize: none;
+    height: 200px;
+    max-height: 300px;
   }
+
   #annotation_category_text {
     width: 200px;
   }
+
+  // adapted from https://stackoverflow.com/a/49065029/
+  section {
+    display: flex;
+    flex-direction: column;
+    // border: thin solid rgb(176, 176, 176);
+  }
+
+  // this column adapts to the other column with respect to its height
+  .column-adaptable {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  .annotation-preview {
+    border-right: thin solid rgb(176, 176, 176);
+    margin-right: 8px;
+    padding-right: 8px;
+  }
+
+  .annotation-content-spacing {
+    padding-left: 8px;
+  }
 }
 
 #emergency-link {

diff --git a/app/views/annotations/_annotation_modal.html.erb b/app/views/annotations/_annotation_modal.html.erb
@@ -1,10 +1,11 @@
 <div class="modal fade" id="annotation-modal" tabindex="-1" role="dialog" aria-labelledby="annotation-modal-label" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog annotation-dialog-normal"
+      id="annotation-modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">
           <% I18n.with_locale(current_user.locale) do %>
-            <%= t('admin.annotation.annotation_modal_head')%>
+            <%= t('admin.annotation.annotation_modal_head') %>
           <% end %>
         </h5>
         <button type="button"
@@ -14,14 +15,17 @@
         </button>
       </div>
       <div class="modal-body">
-        <div class="row">
-          <div class="col-md-6", id="annotation-modal-preview">
-            <!--- LATEX-PREVIEW -->
+        <section id="annotation-preview-section" style="display: none;">
+          <div class="column-adaptable annotation-preview" id="annotation-modal-preview">
+          <!--- LATEX-PREVIEW -->
           </div>
-          <div class="col-md-6 col-md-offset-3", id="annotation-modal-content">
-            <!--- CONTENT -->
+        </section>
+
+        <section id="annotation-content-section" class="annotation-content-normal">
+          <div id="annotation-modal-content">
+          <!--- CONTENT -->
           </div>
-        </div>
+        </section>
       </div>
     </div>
   </div>

diff --git a/app/views/annotations/edit.js.erb b/app/views/annotations/edit.js.erb
@@ -188,19 +188,27 @@ function postComment(isVisible) {
   $('#annotation_post_as_comment').prop("checked", isVisible).trigger("change");
 }
 
-function previewCSS(show, modalWidth, contentWidth, previewWidth) {
-  var offset = parseInt($('#annotation-modal').css('left'), 10);
-  if (show == true) {
-    $('#annotation-modal-preview').show();
-    $('#annotation-modal').css('left', '-250px');
+function previewCSS(shouldShowPreview) {
+  if (shouldShowPreview) {
     updatePreview();
+    $('#annotation-preview-section').show();
+
+    $('#annotation-modal-dialog').removeClass('annotation-dialog-normal');
+    $('#annotation-modal-dialog').addClass('annotation-dialog-expanded');
+
+    $('#annotation-content-section').addClass('annotation-content-spacing');
+    $('#annotation-content-section').removeClass('annotation-content-normal');
+    $('#annotation-content-section').addClass('annotation-content-expanded');
   } else {
-    $('#annotation-modal-preview').hide();
-    $('#annotation-modal').css('left', '0');
+    $('#annotation-preview-section').hide();
+
+    $('#annotation-modal-dialog').removeClass('annotation-dialog-expanded');
+    $('#annotation-modal-dialog').addClass('annotation-dialog-normal');
+
+    $('#annotation-content-section').removeClass('annotation-content-spacing');
+    $('#annotation-content-section').removeClass('annotation-content-expanded');
+    $('#annotation-content-section').addClass('annotation-content-normal');
   }
-  $('.modal-content').css('width', modalWidth + '%');
-  $('#annotation-modal-content').css('width', contentWidth + '%');
-  $('#annotation-modal-preview').css('width', previewWidth + '%');
 }
 
 
@@ -231,17 +239,13 @@ var annotationComment = document.getElementById('annotation_comment');
 annotationComment.addEventListener('input', function () {
   updatePreview();
 });
-
-previewCSS(false, 100, 100, 0);
+previewCSS(false); // Initialize modal without preview
 
 // preview toggle listener
 var previewToggle = document.getElementById('preview-toggle');
 previewToggle.addEventListener('change', function () {
-  if ($('#preview-toggle-check').is(":checked")) {
-    previewCSS(true, 150, 65, 35);
-  } else {
-    previewCSS(false, 100, 100, 0);
-  }
+  const shouldShowPreview = $('#preview-toggle-check').is(":checked");
+  previewCSS(shouldShowPreview);
 });
 
 // disable post comment checkbox if annotation was already posted