Merge 94c23bf into 56a2e1c

benwbrum · Apr 4, 2021 · c4e2b64 · c4e2b64
2 parents 56a2e1c + 94c23bf
commit c4e2b64
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 87 deletions.
diff --git a/app/assets/stylesheets/sections/page.scss b/app/assets/stylesheets/sections/page.scss
@@ -113,6 +113,7 @@
   min-height: 700px;
   position: relative;
   box-sizing: border-box;
+  background: rgba(#000, 0.03);
   border: 1px solid rgba($borderColor, 0.6);
 
   &[data-layout-mode='rtl'] {
@@ -145,7 +146,6 @@
   min-height: 0;
   flex: 1 0 50%;
   display: flex;
-  background: $bgWhite;
   box-sizing: border-box;
   flex-direction: column;
   border: 0 solid rgba($borderColor, 0.6);
@@ -193,27 +193,34 @@
   flex: 1 1 auto;
   flex-direction: column;
 
-  input, textarea {
-    border: 0;
-    background: none;
-    box-shadow: none;
-  }
-
-  textarea, div.editarea {
-    height: 100%;
-    resize: none;
-    flex: 1 1 auto;
-    padding: $gapSize / 2;
-  }
-
   &_title {
     height: 50px;
     display: flex;
     flex-shrink: 0;
     padding-left: 10px;
     align-items: center;
+    background: $bgWhite;
     font-size: $fontSizeBig;
     border-bottom: 1px solid rgba(#000, 0.1);
+
+    input {
+      border: 0;
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  &_textarea {
+    height: 100%;
+    resize: none;
+    padding: 10px;
+    flex: 1 1 auto;
+  }
+
+  &_textarea {
+    border: 0;
+    box-shadow: none;
+    background: $bgWhite;
   }
 }
 
@@ -225,17 +232,16 @@
   flex-direction: column;
 
   .CodeMirror {
+    display: flex;
     flex: 1 1 auto;
+    flex-direction: column;
     font-family: $fontFamily;
     height: auto !important;
-    display: flex;
-    flex-direction: column;
 
-    &-buttonsPanel {
+    &-buttonsPanel:not(:empty) {
       padding: 4px;
       display: flex;
       flex-wrap: wrap;
-      background-color: rgba(#000, 0.025);
       border-bottom: 1px solid rgba(#000, 0.1);
 
       button {
@@ -254,60 +260,50 @@
   }
 }
 
-.fieldarea,
-.fieldarea > .page-editarea {
-  background-color: $bodyBg;
-  border: 0;
-}
-
-div.editarea {
-  box-sizing: border-box;
+.page-fields {
+  height: 100%;
+  padding: 15px;
+  flex: 1 1 auto;
   overflow: auto;
-  span {
-    box-sizing: border-box;
-    display: inline-block;
+
+  .fields-row:not(:last-child) {
+    display: flex;
+    flex-wrap: wrap;
     margin-bottom: 10px;
-    margin-right: auto;
   }
-  input, textarea, select {
-    border: 1px solid $inputBorderColor;
-    background-color: $inputBackground;
-    box-shadow: inset 0 1px rgba(#000, 0.03);
-    box-sizing: border-box;
-    min-width: 2em;
-  }
-  textarea {
-    margin-top: 0;
-    resize: vertical;
-    overflow: auto;
+
+  .spreadsheet-wrapper {
+    width: 100%;
+    flex: 1 1 100%;
+    margin-bottom: 10px;
   }
-  label {
+
+  .field-wrapper {
+    margin-bottom: 10px;
     box-sizing: border-box;
-    text-align: left;
-    vertical-align: middle;
-    margin-left: 5px;
-    overflow: hidden;
+
+    &:not(:last-child) {
+      padding-right: 5px;
+    }
+
+    label {
+      display: block;
+      text-align: left;
+    }
   }
-  .field-instructions{
-    padding: 2rem;
-    padding-top: 4rem;
-    background-color: #c8d6e5;
-    color: #143e6d;
-    border-radius: 5px;
-    position: relative;
-
-    span {
-      position: absolute;
-      text-transform: uppercase;
-      font-weight: bold;
-      font-size: 1.35rem;
-      top: 0.5rem;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      letter-spacing: 0.25rem;
-      font-family: sans-serif;
-      color: #395e88;
+
+  .field-instructions {
+    color: $fgH2;
+    padding: 6px 0 6px 10px;
+    border-left: 4px solid rgba($fgH2, 0.6);
+
+    h5 {
+      margin: 0;
+      color: $fgH1;
+    }
+
+    p {
+      margin: 0.5em 0 0 0;
     }
   }
 }
@@ -316,7 +312,6 @@ div.editarea {
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background: rgba(#000, 0.03);
 
   .image-container {
     border: none !important;

diff --git a/app/helpers/transcription_field_helper.rb b/app/helpers/transcription_field_helper.rb
@@ -5,7 +5,7 @@ def field_order(collection)
 
   def field_layout(array)
     count = array.count
-    @width = 100/count unless count == nil
+    @width = (100.0 / count).round(5) unless count == nil
     ids = array.map {|a| a.id}
     @values = []
     if @page

diff --git a/app/views/shared/_handsontable.html.erb b/app/views/shared/_handsontable.html.erb
@@ -74,7 +74,7 @@
     filters: true,
     data: data,
     width: '100%',
-    height: (data ? data.length : <%= transcription_field.starting_rows %>) * 32 + 35,
+    height: (data ? data.length : <%= transcription_field.starting_rows %>) * 23 + 27,
     stretchH: 'all',
     contextMenu: ['row_above', 'row_below', 'remove_row', 'undo', 'redo', 'cut', 'copy'],
     dropdownMenu: true,

diff --git a/app/views/transcribe/display_page.html.slim b/app/views/transcribe/display_page.html.slim
@@ -84,7 +84,7 @@
               =f.label :title, t('.title'), class: 'a50'
               =f.text_field :title
           -if !@collection.field_based
-            =f.text_area(:source_text, autocomplete: "off", autocorrect: "off", autocapitalize: "off", spellcheck: false, 'aria-label': t('.edit_transcription'))
+            =f.text_area(:source_text, class: 'page-editarea_textarea', autocomplete: "off", autocorrect: "off", autocapitalize: "off", spellcheck: false, 'aria-label': t('.edit_transcription'))
           -else
             =render ({partial: 'transcription_field/field_layout', locals: {collection_id: @collection, transcribe: true}})
 
@@ -146,7 +146,7 @@ h2.legend =t('notes_and_questions')
         $('.page-editor').toggleClass('fullscreen');
         $(window).trigger('resize.FullHeight');
 
-        if (hot) {
+        if (typeof hot !== 'undefined') {
           hot.updateSettings({});
         }
       });
@@ -156,10 +156,11 @@ h2.legend =t('notes_and_questions')
         Cookies.set('transcribe_layout_mode', mode, { expires: 365 });
         $('[data-layout-mode]').attr('data-layout-mode', mode);
 
-        if (viewer) {
+        if (typeof viewer !== 'undefined') {
           requestAnimationFrame(() => viewer.raiseEvent('reset-bounds'));
-	      };
-        if (hot) {
+        };
+
+        if (typeof hot !== 'undefined') {
           hot.updateSettings({});
         };
       });

diff --git a/app/views/transcription_field/_field_layout.html.slim b/app/views/transcription_field/_field_layout.html.slim
@@ -1,22 +1,22 @@
 -field_order(@collection)
-div.editarea
+.page-fields
   -@fields.each do |line, array|
-    div
+    .fields-row
       -field_layout(array)
       -@field_array.each do |field, cell|
         -if (@page && (field.page_number == @page.position || field.page_number == nil )) || (current_page?({action: 'edit_fields'}))
           -if field.input_type == 'spreadsheet'
-            =render({ :partial => '/shared/handsontable', :locals => {:transcription_field => field} })
+            .spreadsheet-wrapper
+              =render({ :partial => '/shared/handsontable', :locals => {:transcription_field => field} })
           -else
-            -span_width = !field.percentage.blank? ? (field.percentage - 1) : @width
-            span(style="width:#{span_width}%")
+            -span_width = !field.percentage.blank? ? field.percentage : @width
+            .field-wrapper(style="width: #{span_width}%")
               -if field.input_type == "instruction"
                 div id="fields[#{field.id}][#{field.label}]" class="field-instructions"
-                  span =t('.instructions')
-                  =field.label
+                  h5 =t('.instructions')
+                  p =field.label
               -else
                 =label_tag field.label, field.label
-                <br>
                 -content = cell.nil? ? nil : cell.content
                 -if field.input_type == "text"
                   =text_field_tag "fields[#{field.id}][#{field.label}]", content, class: 'field-input'

diff --git a/spec/features/field_based_spec.rb b/spec/features/field_based_spec.rb
@@ -44,13 +44,13 @@
     #check the field preview
     visit collection_path(@collection.owner, @collection)
     page.find('.tabs').click_link("Fields")
-    expect(page.find('div.editarea')).to have_content("First field")
-    expect(page.find('div.editarea')).to have_content("Second field")
-    expect(page.find('div.editarea')).to have_content("Third field")
+    expect(page.find('div.page-fields')).to have_content("First field")
+    expect(page.find('div.page-fields')).to have_content("Second field")
+    expect(page.find('div.page-fields')).to have_content("Third field")
     #check field width for first field (set to 20%)
-    expect(page.find('div.editarea span[1]')[:style]).to eq "width:19%"
+    expect(page.find('div.page-fields .field-wrapper[1]')[:style]).to eq "width:20%"
     #check field width for second field (not set)
-    expect(page.find('div.editarea span[2]')[:style]).not_to eq "width:19%"
+    expect(page.find('div.page-fields .field-wrapper[2]')[:style]).not_to eq "width:20%"
   end
 
   it "adds fields for transcription", :js => true do