Fix header and sidebar scrolling viewport

Author: armanrahman22

app/app/settings.py

@@ -211,7 +211,7 @@
         'rest_framework.permissions.IsAuthenticated',
     ],
     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
-    'PAGE_SIZE': 5,
+    'PAGE_SIZE': env.int('DOCCANO_PAGE_SIZE', default=5),
     'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',),
     'SEARCH_PARAM': 'q',
     'DEFAULT_RENDERER_CLASSES': (

app/server/static/assets/css/annotation.css

@@ -12,6 +12,17 @@ body {
   border-right: 1px solid #DEDEDE;
 }
 
+.scrollable {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.sidebar-scrollable {
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .messages {
   display: block;
   background-color: #fff;

app/server/static/components/annotation.pug

@@ -55,7 +55,7 @@ div.columns(v-cloak="")
       div.main.pt0.pb0.pr20.pl20
         span About {{ count }} results
 
-      div.main
+      div.main.sidebar-scrollable
         a.item(
           v-for="(doc, index) in docs"
           v-bind:class="{ active: index == pageNumber }"

app/server/static/components/annotationMixin.js

@@ -60,6 +60,13 @@ export default {
   },
 
   methods: {
+    resetScrollbar() {
+      const textbox = this.$refs.textbox;
+      if (textbox) {
+        textbox.scrollTop = 0;
+      }
+    },
+
     async nextPage() {
       this.pageNumber += 1;
       if (this.pageNumber === this.docs.length) {
@@ -70,6 +77,8 @@ export default {
         } else {
           this.pageNumber = this.docs.length - 1;
         }
+      } else {
+        this.resetScrollbar();
       }
     },
 
@@ -83,6 +92,8 @@ export default {
         } else {
           this.pageNumber = 0;
         }
+      } else {
+        this.resetScrollbar();
       }
     },
 

app/server/static/components/document_classification.vue

@@ -33,8 +33,8 @@ block annotation-area
               button.delete.is-small(v-on:click="removeLabel(annotation)")
 
       hr
-      div.content(v-if="docs[pageNumber]")
-        span.text {{ docs[pageNumber].text }}
+      div.content
+        div.text.scrollable(ref="textbox", v-if="docs[pageNumber]") {{ docs[pageNumber].text }}
 </template>
 
 <style scoped>

app/server/static/components/sequence_labeling.vue

@@ -21,7 +21,7 @@ block annotation-area
                 kbd {{ shortcutKey(label) | simpleShortcut }}
 
     div.card-content
-      div.content(v-if="docs[pageNumber] && annotations[pageNumber]")
+      div.content.scrollable(v-if="docs[pageNumber] && annotations[pageNumber]", ref="textbox")
         annotator(
           v-bind:labels="labels"
           v-bind:entity-positions="annotations[pageNumber]"