Vertical cards sortoff.

app/apps/core/static/js/image_cards.js

@@ -44,23 +44,26 @@ class partCard {
 
         this.api = API.part.replace('{part_pk}', this.pk);
         
-        var $new = $('.card', '#card-template').clone();
-        this.$element = $new;
+        var $new = $('.card-group', '#card-template').clone();
+        this.$container = $new;
+        this.$element = $('.card', $new);
         this.domElement = this.$element.get(0);
 
-        this.selectButton = $('.js-card-select-hdl', $new);
-        this.deleteButton = $('.js-card-delete', $new);
-        this.dropAfter = $('.js-drop', '#card-template').clone();
+        this.selectButton = $('.js-card-select-hdl', this.$element);
+        this.deleteButton = $('.js-card-delete', this.$element);
+        // we need both to handle new lines
+        // this.dropBefore = $('.js-drop', '#card-template').clone();
+        // this.dropAfter = $('.js-drop', '#card-template').clone();
         
         // fill template
-        $new.attr('id', $new.attr('id').replace('{pk}', this.pk));
+        this.$element.attr('id', this.$element.attr('id').replace('{pk}', this.pk));
         this.updateThumbnail();
         let filename = this.image.uri.split('/').splice(-1)[0];
-        $('img.card-img-top', $new).attr('title', this.title + '\n<' + filename +'>');
+        $('img.card-img-top', this.$element).attr('title', this.title + '\n<' + filename +'>');
 
-        $new.attr('draggable', true);
-        $('img', $new).attr('draggable', false);
-        $('img', $new).attr('selectable', false);
+        this.$container.attr('draggable', true);
+        $('img', this.$container).attr('draggable', false);
+        $('img', this.$container).attr('selectable', false);
         // disable dragging when over input because firefox gets confused
         $('input', this.$element).on('mouseover', $.proxy(function(ev) {
             this.$element.attr('draggable', false);
@@ -69,8 +72,9 @@ class partCard {
         }, this));
         
         // add to the dom
-        $('#cards-container').append($new);
-        $('#cards-container').append(this.dropAfter);
+        // $('#cards-container').append(this.dropBefore);
+        $('#cards-container').append(this.$container);
+        // $('#cards-container').append(this.dropAfter);
 
         // workflow icons & progress
         this.editButton = $('.js-edit', this.$element);
@@ -106,10 +110,10 @@ class partCard {
         
         this.index = $('.card', '#cards-container').index(this.$element);
         // save a reference to this object in the card dom element
-        $new.data('partCard', this);
+        this.$element.data('partCard', this);
         
         // add the image element to the lazy loader
-        imageObserver.observe($('img', $new).get(0));
+        imageObserver.observe($('img', this.$element).get(0));
         
         this.defaultColor = this.$element.css('color');
         
@@ -217,8 +221,9 @@ class partCard {
     }
 
     remove() {
-        this.dropAfter.remove();
-        this.$element.remove();
+        // this.dropBefore.remove();
+        // this.dropAfter.remove();
+        this.$container.remove();
     }
     
     select() {
@@ -259,9 +264,10 @@ class partCard {
         if (upload === undefined) upload = true;
         // store the previous index in case of error
         this.previousIndex = this.index;
-        var target = $('#cards-container .js-drop')[index];
-        this.$element.insertAfter(target);
-        this.dropAfter.insertAfter(this.$element);  // drag the dropable zone with it
+        var target = $('#cards-container .js-drop')[index*2];
+        this.$container.insertBefore(target);
+        // this.dropBefore.insertBefore(this.$element);  // drag the dropable zone with it
+        // this.dropAfter.insertAfter(this.$element);  // drag the dropable zone with it
         if (this.previousIndex < index) { index--; }; // because the dragged card takes a room
         if (upload) {
             $.post(this.api + 'move/', {
@@ -321,7 +327,7 @@ class partCard {
 $(document).ready(function() {
     //************* Card ordering *************
     $('#cards-container').on('dragover', '.js-drop', function(ev) {
-        var index = $('#cards-container .js-drop').index(ev.target);
+        var index = Math.floor(($('#cards-container .js-drop').index(ev.target) + 1) / 2);
         var elementId = ev.originalEvent.dataTransfer.getData("text/card-id");
         if (!elementId && g_dragged != null) { elementId = g_dragged; }  // for chrome
         var dragged_index = $('#cards-container .card').index(document.getElementById(elementId));
@@ -344,7 +350,7 @@ $(document).ready(function() {
         if (!elementId) { elementId = g_dragged; }  // for chrome
         var dragged = document.getElementById(elementId);
         var card = $(dragged).data('partCard');
-        var index = $('#cards-container .js-drop').index(ev.target);
+        var index = Math.floor(($('#cards-container .js-drop').index(ev.target) +1) / 2);
         card.moveTo(index);
         g_dragged = null;
     });

app/escriptorium/static/css/escriptorium.css

@@ -89,8 +89,10 @@ form.inline-form {
 #cards-container .card {
     padding: 0;
     cursor: grab;
-    width: 183px;
-    min-width: 150px;
+    min-width: 185px;
+    max-width: 185px;
+    display: inline-block;
+    margin: 0 0 20px 0;
 }
 
 #card-template {

app/escriptorium/templates/core/document_images.html

@@ -47,8 +47,7 @@
   </div>
 </div>
 
-<div id="cards-container" class="mt-2 d-flex flex-row flex-nowrap {{ document.read_direction }}">
-  <div class="dropable js-drop"></div>
+<div id="cards-container" class="mt-2 card-deck {{ document.read_direction }}">
   {# card are created through the dom api (see below) #}
 </div>
 {% endblock %}
@@ -56,6 +55,8 @@
 {% block modals %}
 {# template for adding card #}
 <div id="card-template">
+<div class="card-group">
+  <div class="dropable js-drop"></div>
   <div id="image-card-{pk}" class="card">
     <div style="position: relative;">
       <button class="js-card-select-hdl"><i class="fas fa-square"></i></button>
@@ -78,6 +79,7 @@
     </div>
   </div>
   <div class="dropable js-drop"></div>
+  </div>
 </div>
 
 {# Process wizards #}