From 01d065bc5d6733c9e51527d3a103f18a526e15a2 Mon Sep 17 00:00:00 2001
From: lauxley <tissotrobin@gmail.com>
Date: Thu, 9 May 2019 08:45:16 +0200
Subject: [PATCH] Vertical cards sortoff.
---
app/apps/core/static/js/image_cards.js | 48 +++++++++++--------
app/escriptorium/static/css/escriptorium.css | 6 ++-
.../templates/core/document_images.html | 6 ++-
3 files changed, 35 insertions(+), 25 deletions(-)
diff --git a/app/apps/core/static/js/image_cards.js b/app/apps/core/static/js/image_cards.js
index 2b3dc86d..7515a2e8 100644
--- a/app/apps/core/static/js/image_cards.js
+++ b/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;
});
diff --git a/app/escriptorium/static/css/escriptorium.css b/app/escriptorium/static/css/escriptorium.css
index 343bbf4c..1cd193f9 100644
--- a/app/escriptorium/static/css/escriptorium.css
+++ b/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 {
diff --git a/app/escriptorium/templates/core/document_images.html b/app/escriptorium/templates/core/document_images.html
index eae88c34..d5376b0b 100644
--- a/app/escriptorium/templates/core/document_images.html
+++ b/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 #}
--
GitLab