Fixes auto line reordering not updating text panel, text panel manual...

Fixes auto line reordering not updating text panel, text panel manual reordering in r2l and panel size + colors current dragged line for better visibility.

app/apps/core/static/js/edit/components/diplo_line.js

@@ -26,18 +26,17 @@ var diploLine = LineBase.extend({
         }
     },
     watch: {
-        /* 'line.order': function(n,o) {
-         *     // make sure it's at the right place,
-         *     // in case it was just created or the ordering got recalculated
-         *     let index = Array.from(this.$el.parentNode.children).indexOf(this.$el);
-         *     console.log(index, this.line.order);
-         *     if (index != this.line.order) {
-         *         this.$el.parentNode.insertBefore(
-         *             this.$el,
-         *             this.$el.parentNode.children[this.line.order]);
-         *         this.setElContent(this.line.currentTrans.content);
-         *     }
-         * }, */
+        'line.order': function(n,o) {
+            // make sure it's at the right place,
+            // in case it was just created or the ordering got recalculated
+            let index = Array.from(this.$el.parentNode.children).indexOf(this.$el);
+            if (index != this.line.order) {
+                this.$el.parentNode.insertBefore(
+                    this.$el,
+                    this.$el.parentNode.children[this.line.order]);
+                this.setElContent(this.line.currentTrans.content);
+            }
+        },
         'line.currentTrans': function(n, o) {
             if (n!=undefined) {
                 this.setElContent(n.content);

app/apps/core/static/js/edit/components/diplo_panel.js

@@ -31,6 +31,8 @@ var DiploPanel = BasePanel.extend({
                 multiDrag: true,
                 multiDragKey : 'CTRL',
                 selectedClass: "selected",
+                ghostClass: "ghost",
+                dragClass: "info",
                 animation: 150,
                 onEnd: function(evt) {
                     vm.onDraggingEnd(evt);
@@ -150,7 +152,7 @@ var DiploPanel = BasePanel.extend({
             this.bulkCreate();
         },
         setHeight() {
-            this.$el.querySelector('.content-container').style.maxHeight = Math.round(this.part.image.size[1] * this.ratio) + 'px';
+            this.$el.querySelector('.content-container').style.minHeight = Math.round(this.part.image.size[1] * this.ratio) + 'px';
         },
         focusNextLine(sel, line) {
             if (line.nextSibling) {

app/escriptorium/static/css/escriptorium.css

@@ -447,9 +447,9 @@ i.panel-icon {
     min-height: calc(100vh - 190px);
 }
 
-.panel #diplomatic-lines {
+.panel#diplo-panel .content-container {
     overflow-y: scroll;
-    min-height: calc(100vh - 190px);
+    max-height: calc(100vh - 190px);
 }
 
 .panel .panel-img {
@@ -611,7 +611,6 @@ i.panel-icon {
     line-height: 1.7rem;
     margin-bottom: 0px;
     overflow-wrap: break-word;
-    margin-left: 50px;
 }
 
 #diplomatic-lines div:before {
@@ -620,10 +619,10 @@ i.panel-icon {
     content: counter(line);
     display: inline-block;
     border-right: 1px solid #ddd;
-    padding: 0 .5em;
+    /* padding: 0 .5em; */
     margin-right: .5em;
+    margin-left: 0;
     width: 50px;
-    margin-left: -50px;
     color: #888;
 }
 
@@ -632,6 +631,10 @@ i.panel-icon {
   border: solid #33A2FF 1px;
 }
 
+#diplomatic-lines div.ghost {
+  background-color: lightyellow;
+}
+
 .cmp-add {
     background-color: lightgreen;
 }
@@ -641,5 +644,5 @@ i.panel-icon {
 }
 
 #contact-form{
- width: 100%;
-}
\ No newline at end of file
+    width: 100%;
+}

app/escriptorium/static/css/rtl.css

@@ -24,13 +24,11 @@
 .rtl #diplomatic-lines div {
     /* fixes table like alignment */
     text-align: right;
-    margin-right: 50px;
-    margin-left: .5em;
 }
 
 .rtl #diplomatic-lines div:before {
-    margin-right: -50px;
     margin-left: .5em;
+    margin-right: 0;
     border-left: 1px solid #ddd;
     border-right: none;
 }